[Bug]: incorrect specifier for `AbstractOverlay` in Picker InteractionController

[thescientist13]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Picker

Expected behavior

When running TypeScript over some Spectrum component files with TypeScript, I should get no errors from Spectrum dependencies

Actual behavior

Instead, I am getting this error from TypeScript

➜  greenwood-lit-ssr git:(demo-spectrum) ✗ pnpm lint:types

> greenwood-demo-adapter-vercel@1.0.0 lint:types /Users/owenbuckley/Workspace/github/greenwood-lit-ssr
> tsc --project ./tsconfig.json

node_modules/.pnpm/@spectrum-web-components+picker@1.0.1/node_modules/@spectrum-web-components/picker/src/InteractionController.d.ts:2:33 - error TS2307: Cannot find module '@spectrum-web-components/overlay/src/AbstractOverlay' or its corresponding type declarations.

2 import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Have a minimal tsconfig.json

   {
     "compilerOptions": {
       "target": "es2022",
       "module": "preserve",
       "lib": ["es2022", "DOM", "DOM.Iterable", "esnext"],
       "allowSyntheticDefaultImports": true,
       "moduleResolution": "bundler",
       "allowImportingTsExtensions": true,
       "verbatimModuleSyntax": false,
       "noEmit": true,
       "checkJs": true
     },
   }

2. Run TypeScript over a file with these contents

   import '@spectrum-web-components/theme/sp-theme.js';
   import '@spectrum-web-components/theme/src/themes.js';
   
   import '@spectrum-web-components/button/sp-button.js';
   import '@spectrum-web-components/action-menu/sp-action-menu.js';
   import '@spectrum-web-components/menu/sp-menu.js';
   import '@spectrum-web-components/menu/sp-menu-item.js';
   import '@spectrum-web-components/menu/sp-menu-divider.js';
   import '@spectrum-web-components/menu/sp-menu-group.js';

Sample code or abstract reproduction which illustrates the problem

Reproduction repo (just remove the pnpm patches, or use something like Yarn / NPM to install the deps)

Use npm run lint:types to run tsc

Severity

None

Logs taken while reproducing problem

see above

[thescientist13]

I was able to patch this within my project by changing this line to the following which includes an extension at the end

// before
import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';

// after
import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';

This seems to track based on the exports map in the Overlay component, which expects an extension as part of the specifier

"exports": {
    // ...

    "./src/AbstractOverlay.js": {
        "development": "./src/AbstractOverlay.dev.js",
        "default": "./src/AbstractOverlay.js"
    },

}

And now TypeScript is happy

➜  greenwood-lit-ssr git:(demo-spectrum) ✗ pnpm run lint:types

> greenwood-demo-adapter-vercel@1.0.0 lint:types /Users/owenbuckley/Workspace/github/greenwood-lit-ssr
> tsc --project ./tsconfig.json

➜  greenwood-lit-ssr git:(demo-spectrum) ✗ 

---

I think it would just be a matter of changing this line to add the extension, which seems in line with the line after it too

// before
import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';
import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';

// after
import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';
import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';

Happy to make a PR for that 👍

[najikahalsema]

Hi! @thescientist13 Thanks for reaching out and filing and issue. Someone on the team will get back to you with next steps about addressing the issue.