diff --git a/packages/collections/package.json b/packages/collections/package.json index 3c65ae5e..c86a1ec3 100644 --- a/packages/collections/package.json +++ b/packages/collections/package.json @@ -46,8 +46,7 @@ "@frontile/overlays": "workspace:0.17.0-alpha.5", "@frontile/theme": "workspace:0.17.0-alpha.5", "@frontile/utilities": "workspace:0.17.0-alpha.5", - "ember-modifier": "^4.1.0", - "ember-velcro": "^2.1.3" + "ember-modifier": "^4.1.0" }, "devDependencies": { "@babel/core": "7.23.7", @@ -88,11 +87,7 @@ "main": "addon-main.js", "app-js": { "./components/dropdown.js": "./dist/_app_/components/dropdown.js", - "./components/listbox.js": "./dist/_app_/components/listbox.js", - "./components/listbox/item.js": "./dist/_app_/components/listbox/item.js", - "./components/listbox/listManager.js": "./dist/_app_/components/listbox/listManager.js", - "./components/listbox/listbox.js": "./dist/_app_/components/listbox/listbox.js", - "./components/listbox/setupListItemModfier.js": "./dist/_app_/components/listbox/setupListItemModfier.js" + "./components/listbox.js": "./dist/_app_/components/listbox.js" } }, "exports": { diff --git a/packages/collections/rollup.config.mjs b/packages/collections/rollup.config.mjs index abac297a..591ca2cc 100644 --- a/packages/collections/rollup.config.mjs +++ b/packages/collections/rollup.config.mjs @@ -18,7 +18,7 @@ export default { // These are the modules that users should be able to import from your // addon. Anything not listed here may get optimized away. addon.publicEntrypoints([ - 'components/**/*.js', + 'components/*.js', 'index.js', 'template-registry.js' ]), @@ -26,7 +26,7 @@ export default { // These are the modules that should get reexported into the traditional // "app" tree. Things in here should also be in publicEntrypoints above, but // not everything in publicEntrypoints necessarily needs to go here. - addon.appReexports(['components/**/*.js']), + addon.appReexports(['components/*.js']), // Follow the V2 Addon rules about dependencies. Your code can import from // `dependencies` and `peerDependencies` as well as standard Ember-provided diff --git a/packages/collections/src/components/dropdown.gts b/packages/collections/src/components/dropdown.gts index cacd8cb7..980b9d7c 100644 --- a/packages/collections/src/components/dropdown.gts +++ b/packages/collections/src/components/dropdown.gts @@ -1,11 +1,12 @@ import Component from '@glimmer/component'; import { Button, type ButtonSignature } from '@frontile/buttons'; import { Listbox, type ListboxSignature } from './listbox'; -import { Overlay } from '@frontile/overlays'; -import { tracked } from '@glimmer/tracking'; -import { Velcro } from 'ember-velcro'; +import { + Popover, + type PopoverSignature, + type ContentSignature +} from '@frontile/overlays'; import { assert } from '@ember/debug'; -import { guidFor } from '@ember/object/internals'; import { hash } from '@ember/helper'; import { on } from '@ember/modifier'; import { useStyles } from '@frontile/theme'; @@ -13,44 +14,35 @@ import type { ModifierLike } from '@glint/template'; import type { ListboxItem } from './listbox/item'; import type { WithBoundArgs } from '@glint/template'; -interface DropdownSignature { - Args: { - /** - * Whether the dropdown should close upon selecting an item. - * - * @defaultValue true - */ - closeOnItemSelect?: boolean; - - /** - * Placement of the menu when open - * - * @defaultValue 'bottom-start' - */ - placement?: - | 'top' - | 'top-start' - | 'top-end' - | 'right' - | 'right-start' - | 'right-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'left' - | 'left-start' - | 'left-end'; +interface DropdownArgs + extends Pick< + PopoverSignature['Args'], + | 'placement' + | 'flipOptions' + | 'middleware' + | 'shiftOptions' + | 'offsetOptions' + | 'strategy' + | 'onClose' + > { + /** + * Whether the dropdown should close upon selecting an item. + * + * @defaultValue true + */ + closeOnItemSelect?: boolean; +} - onClose: () => void; - }; +interface DropdownSignature { + Args: DropdownArgs; Element: HTMLUListElement; Blocks: { default: [ { - Trigger: WithBoundArgs; + Trigger: WithBoundArgs; Menu: WithBoundArgs< typeof Menu, - 'loop' | 'isOpen' | 'id' | 'onClose' | 'closeOnItemSelect' + 'toggle' | 'Content' | 'closeOnItemSelect' >; } ]; @@ -58,46 +50,31 @@ interface DropdownSignature { } class Dropdown extends Component { - menuId = guidFor(this); - @tracked isOpen = false; - - toggle = () => { - this.isOpen = !this.isOpen; - }; - - close = () => { - this.isOpen = false; - if (typeof this.args.onClose === 'function') { - this.args.onClose(); - } - }; - } @@ -109,22 +86,13 @@ interface TriggerArgs /** * @internal */ - hook: ModifierLike<{ Element: HTMLElement }>; - - /** - * @internal - */ - onClick: () => void; + anchor: ModifierLike<{ Element: HTMLElement }>; + trigger: ModifierLike<{ Element: HTMLElement }>; /** * @internal */ - isOpen?: boolean; - - /** - * @internal - */ - menuId?: string; + toggle: () => void; } export interface TriggerSignature { @@ -136,12 +104,19 @@ export interface TriggerSignature { } class Trigger extends Component { - get hook() { + get anchor() { + assert( + `Dropdown Trigger does not have anchor modifier; Missing argument @anchor`, + this.args.anchor + ); + return this.args.anchor; + } + get trigger() { assert( - `Dropdown Trigger does not have hook; Missing argument @hook`, - this.args.hook + `Dropdown Trigger does not have trigger modifier; Missing argument @trigger`, + this.args.trigger ); - return this.args.hook; + return this.args.trigger; } handleKeyDown = (event: KeyboardEvent) => { @@ -152,14 +127,14 @@ class Trigger extends Component { handleKeyUp = (event: KeyboardEvent) => { if (event.key === 'ArrowDown' || event.key == 'ArrowUp') { - this.args.onClick(); + this.args.toggle(); } };