@spectrum-web-components/picker 0.31.1-overlay.29 → 0.31.1-react.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Picker.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { OverlayBase } from '@spectrum-web-components/overlay/src/OverlayBase.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n public get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n this.addEventListener('focusout', (event: FocusEvent) => {\n if (\n (event.relatedTarget &&\n this.contains(event.relatedTarget as Element)) ||\n event.target !== this\n ) {\n return;\n }\n this.open = false;\n });\n }\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n private preventNextToggle = false;\n\n protected handlePointerdown(): void {\n this.preventNextToggle = this.open;\n }\n\n protected onButtonClick(): void {\n if (!this.preventNextToggle) {\n this.toggle();\n }\n this.preventNextToggle = false;\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected onKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // When there are no selects, don't set a value.\n if (this.selects) {\n // Set a value, but allow it to be prevented.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">${this.label}</slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n protected get renderOverlay(): TemplateResult {\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: OverlayBase;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n this.open = event.newState === 'open';\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer}\n </sp-overlay>\n `;\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n @pointerdown=${this.handlePointerdown}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderOverlay}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n const deprecatedMenu = this.querySelector(':scope > sp-menu');\n deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderContainer(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n style=${styleMap(this.containerStyles)}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
5
- "mappings": "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",
6
- "names": []
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popoverEl!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n if (event.cancelable) {\n event.stopPropagation();\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected onKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popoverEl = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popoverEl.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popoverEl);\n if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = true;\n }\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = false;\n }\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">${this.label}</slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override sizePopover(popover: HTMLElement): void {\n super.sizePopover(popover);\n\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["el"]
7
7
  }
package/src/Picker.js CHANGED
@@ -1,36 +1,24 @@
1
- "use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(u,a,e,t)=>{for(var s=t>1?void 0:t?h(a,e):a,r=u.length-1,o;r>=0;r--)(o=u[r])&&(s=(t?o(a,e,s):o(s))||s);return t&&s&&p(a,e,s),s};import{html as l,nothing as m,SizedMixin as f}from"@spectrum-web-components/base";import{classMap as b,styleMap as c}from"@spectrum-web-components/base/src/directives.js";import{property as n,query as d}from"@spectrum-web-components/base/src/decorators.js";import v from"./picker.css.js";import I from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as g}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/overlay/sp-overlay.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/tray/sp-tray.js";import"@spectrum-web-components/popover/sp-popover.js";import{IS_MOBILE as y,MatchMediaController as M}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";const w={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export class PickerBase extends f(g){constructor(){super();this.isMobile=new M(this,y);this.disabled=!1;this.focused=!1;this.invalid=!1;this.open=!1;this.readonly=!1;this.selects="single";this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.preventNextToggle=!1;this.onKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.preventDefault(),this.toggle(!0))};this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.onKeydown=this.onKeydown.bind(this),this.addEventListener("focusout",e=>{e.relatedTarget&&this.contains(e.relatedTarget)||e.target!==this||(this.open=!1)})}get target(){return this.button}get menuItems(){return this.optionsMenu.childItems}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.focused=!0}onButtonBlur(){this.focused=!1,this.target.removeEventListener("keydown",this.onKeydown)}handlePointerdown(){this.preventNextToggle=this.open}onButtonClick(){this.preventNextToggle||this.toggle(),this.preventNextToggle=!1}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}onHelperFocus(){this.focused=!0,this.button.focus()}onButtonFocus(){this.target.addEventListener("keydown",this.onKeydown)}handleChange(e){const t=e.target,[s]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(s,e):this.open=!1}async setValueFromItem(e,t){this.open=!1;const s=this.selectedItem,r=this.value;if(this.selects&&(this.selectedItem=e,this.value=e.value,await this.updateComplete),!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=r,this.open=!0;return}s&&this.setMenuItemSelected(s,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){this.readonly||(this.open=typeof e!="undefined"?e:!this.open)}close(){this.readonly||(this.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}renderLabelContent(e){return this.value&&this.selectedItem?e:l`
1
+ "use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(u,a,e,t)=>{for(var s=t>1?void 0:t?p(a,e):a,i=u.length-1,n;i>=0;i--)(n=u[i])&&(s=(t?n(a,e,s):n(s))||s);return t&&s&&d(a,e,s),s};import{html as l,nothing as c,render as m,SizedMixin as h}from"@spectrum-web-components/base";import{classMap as v}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as f}from"@spectrum-web-components/base/src/decorators.js";import b from"./picker.css.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as I}from"@spectrum-web-components/shared/src/focusable.js";import{reparentChildren as w}from"@spectrum-web-components/shared/src/reparent-children.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/tray/sp-tray.js";import"@spectrum-web-components/popover/sp-popover.js";import{openOverlay as M}from"@spectrum-web-components/overlay";import{IS_MOBILE as g,MatchMediaController as C}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";const E={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export class PickerBase extends h(I){constructor(){super();this.isMobile=new C(this,g);this.disabled=!1;this.focused=!1;this.invalid=!1;this.open=!1;this.readonly=!1;this.selects="single";this.menuItems=[];this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.onKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.preventDefault(),this.toggle(!0))};this.overlayOpenCallback=async()=>{this.updateMenuItems(),await this.itemsUpdated,await this.optionsMenu.updateComplete,requestAnimationFrame(()=>this.menuStateResolver())};this.overlayCloseCallback=async()=>{this.restoreChildren&&(this.restoreChildren(),this.restoreChildren=void 0),this.close(),requestAnimationFrame(()=>this.menuStateResolver())};this._willUpdateItems=!1;this.itemsUpdated=Promise.resolve();this.menuStatePromise=Promise.resolve();this.selectionPromise=Promise.resolve();this.onKeydown=this.onKeydown.bind(this)}get target(){return this.button}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.focused=!0}onButtonBlur(){this.focused=!1,this.target.removeEventListener("keydown",this.onKeydown)}onButtonClick(){this.toggle()}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}onHelperFocus(){this.focused=!0,this.button.focus()}onButtonFocus(){this.target.addEventListener("keydown",this.onKeydown)}handleChange(e){const t=e.target,[s]=t.selectedItems;e.cancelable?(e.stopPropagation(),this.setValueFromItem(s,e)):this.open=!1}async setValueFromItem(e,t){const s=this.selectedItem,i=this.value;if(this.selectedItem=e,this.value=e.value,this.open=!1,await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=i,this.open=!0;return}s&&this.setMenuItemSelected(s,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){this.readonly||(this.open=typeof e!="undefined"?e:!this.open)}close(){this.readonly||(this.open=!1)}async generatePopover(){this.popoverFragment||(this.popoverFragment=document.createDocumentFragment()),m(this.renderPopover,this.popoverFragment,{host:this}),this.popoverEl=this.popoverFragment.children[0],this.optionsMenu=this.popoverEl.children[1]}async openMenu(){let e=[];const t=this.querySelector(":scope > sp-menu");if(await this.generatePopover(),t?e=Array.from(t.children):e=Array.from(this.children).filter(s=>!s.hasAttribute("slot")),e.length===0){this.menuStateResolver();return}this.restoreChildren=w(e,this.optionsMenu,{position:"beforeend",prepareCallback:s=>(this.value===s.value&&this.setMenuItemSelected(s,!0),i=>{typeof i.focused!="undefined"&&(i.focused=!1)})}),this.sizePopover(this.popoverEl),this.closeOverlay=Picker.openOverlay(this,"modal",this.popoverEl,{placement:this.isMobile.matches?"none":this.placement,receivesFocus:"auto"})}sizePopover(e){if(this.isMobile.matches){e.style.setProperty("--swc-menu-width","100%");return}}async closeMenu(){if(this.closeOverlay){const e=this.closeOverlay;delete this.closeOverlay,(await e)()}}get selectedItemContent(){return this.selectedItem?this.selectedItem.itemChildren:{icon:[],content:[]}}renderLabelContent(e){return this.value&&this.selectedItem?e:l`
2
2
  <slot name="label">${this.label}</slot>
3
3
  `}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value};return[l`
4
4
  <span id="icon" ?hidden=${this.icons==="none"}>
5
5
  ${this.selectedItemContent.icon}
6
6
  </span>
7
- <span id="label" class=${b(e)}>
7
+ <span id="label" class=${v(e)}>
8
8
  ${this.renderLabelContent(this.selectedItemContent.content)}
9
9
  </span>
10
10
  ${this.invalid?l`
11
11
  <sp-icon-alert
12
12
  class="validation-icon"
13
13
  ></sp-icon-alert>
14
- `:m}
14
+ `:c}
15
15
  <sp-icon-chevron100
16
- class="picker ${w[this.size]}"
16
+ class="picker ${E[this.size]}"
17
17
  ></sp-icon-chevron100>
18
- `]}get renderOverlay(){return l`
19
- <sp-overlay
20
- .triggerElement=${this}
21
- .offset=${0}
22
- ?open=${this.open}
23
- .placement=${this.placement}
24
- type="auto"
25
- .receivesFocus=${"true"}
26
- @beforetoggle=${e=>{e.composedPath()[0]===e.target&&(this.open=e.newState==="open",this.open||(this.optionsMenu.updateSelectedItemIndex(),this.optionsMenu.closeDescendentOverlays()))}}
27
- >
28
- ${this.renderContainer}
29
- </sp-overlay>
30
- `}render(){return l`
18
+ `]}render(){return l`
31
19
  <span
32
20
  id="focus-helper"
33
- tabindex="${this.focused||this.open?"-1":"0"}"
21
+ tabindex="${this.focused?"-1":"0"}"
34
22
  @focus=${this.onHelperFocus}
35
23
  ></span>
36
24
  <button
@@ -42,14 +30,12 @@
42
30
  @blur=${this.onButtonBlur}
43
31
  @click=${this.onButtonClick}
44
32
  @focus=${this.onButtonFocus}
45
- @pointerdown=${this.handlePointerdown}
46
33
  ?disabled=${this.disabled}
47
34
  tabindex="-1"
48
35
  >
49
36
  ${this.buttonContent}
50
37
  </button>
51
- ${this.renderOverlay}
52
- `}update(e){if(this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),!this.hasUpdated){const t=this.querySelector(":scope > sp-menu");t==null||t.setAttribute("selects","inherit")}super.update(e)}get dismissHelper(){return l`
38
+ `}update(e){this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("open")&&(this.open||typeof e.get("open")!="undefined")&&(this.menuStatePromise=new Promise(t=>this.menuStateResolver=t),this.open?this.openMenu():this.closeMenu()),e.has("value")&&!e.has("selectedItem")&&this.updateMenuItems(),super.update(e)}get dismissHelper(){return l`
53
39
  <div class="visually-hidden">
54
40
  <button
55
41
  tabindex="-1"
@@ -57,24 +43,22 @@
57
43
  @click=${this.close}
58
44
  ></button>
59
45
  </div>
60
- `}get renderContainer(){const e=l`
46
+ `}get renderPopover(){const e=l`
61
47
  ${this.dismissHelper}
62
48
  <sp-menu
63
49
  id="menu"
64
50
  role="${this.listRole}"
65
51
  @change=${this.handleChange}
66
52
  .selects=${this.selects}
67
- .selected=${this.value?[this.value]:[]}
68
- @sp-menu-item-added-or-updated=${this.shouldManageSelection}
69
- >
70
- <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
71
- </sp-menu>
53
+ ></sp-menu>
72
54
  ${this.dismissHelper}
73
55
  `;return this.isMobile.matches?l`
74
56
  <sp-tray
75
57
  id="popover"
76
58
  role="dialog"
77
- style=${c(this.containerStyles)}
59
+ @sp-menu-item-added-or-updated=${this.updateMenuItems}
60
+ .overlayOpenCallback=${this.overlayOpenCallback}
61
+ .overlayCloseCallback=${this.overlayCloseCallback}
78
62
  >
79
63
  ${e}
80
64
  </sp-tray>
@@ -82,10 +66,11 @@
82
66
  <sp-popover
83
67
  id="popover"
84
68
  role="dialog"
85
- style=${c(this.containerStyles)}
86
- placement=${this.placement}
69
+ @sp-menu-item-added-or-updated=${this.updateMenuItems}
70
+ .overlayOpenCallback=${this.overlayOpenCallback}
71
+ .overlayCloseCallback=${this.overlayCloseCallback}
87
72
  >
88
73
  ${e}
89
74
  </sp-popover>
90
- `}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,e}disconnectedCallback(){this.close(),super.disconnectedCallback()}}i([d("#button")],PickerBase.prototype,"button",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),i([n({type:String,reflect:!0})],PickerBase.prototype,"icons",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),i([n()],PickerBase.prototype,"label",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),i([d("sp-menu")],PickerBase.prototype,"optionsMenu",2),i([n()],PickerBase.prototype,"placement",2),i([n({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),i([n({type:String})],PickerBase.prototype,"value",2),i([n({attribute:!1})],PickerBase.prototype,"selectedItem",1),i([n({attribute:!1})],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.onKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(e.preventDefault(),t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0);return}const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,r=!this.value||t==="ArrowRight"?1:-1;let o=s+r;for(;this.menuItems[o]&&this.menuItems[o].disabled;)o+=r;!this.menuItems[o]||this.menuItems[o].disabled||(!this.value||o!==s)&&this.setValueFromItem(this.menuItems[o])}}static get styles(){return[v,I]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
75
+ `}updateMenuItems(e){if(this.open&&(e==null?void 0:e.type)==="sp-menu-item-removed"||this._willUpdateItems)return;this._willUpdateItems=!0,(e==null?void 0:e.item)===this.selectedItem&&this.requestUpdate();let t=()=>{};this.itemsUpdated=new Promise(s=>t=s),window.requestAnimationFrame(async()=>{this.open?(await this.optionsMenu.updateComplete,this.menuItems=this.optionsMenu.childItems):this.menuItems=[...this.querySelectorAll('sp-menu-item:not([slot="submenu"] *)')],this.manageSelection(),t(),this._willUpdateItems=!1})}async manageSelection(){if(this.selects==null)return;await this.menuStatePromise,this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.menuStatePromise,await this.itemsUpdated,await this.selectionPromise,e}connectedCallback(){this.updateMenuItems(),this.addEventListener("sp-menu-item-added-or-updated",this.updateMenuItems),this.addEventListener("sp-menu-item-removed",this.updateMenuItems),super.connectedCallback()}disconnectedCallback(){this.close(),super.disconnectedCallback()}}PickerBase.openOverlay=async(e,t,s,i)=>await M(e,t,s,i),o([f("#button")],PickerBase.prototype,"button",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),o([r({type:String,reflect:!0})],PickerBase.prototype,"icons",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),o([r()],PickerBase.prototype,"label",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),o([r()],PickerBase.prototype,"placement",2),o([r({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),o([r({type:String})],PickerBase.prototype,"value",2),o([r({attribute:!1})],PickerBase.prototype,"selectedItem",2);export class Picker extends PickerBase{constructor(){super(...arguments);this.onKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(e.preventDefault(),t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0);return}const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,i=!this.value||t==="ArrowRight"?1:-1;let n=s+i;for(;this.menuItems[n]&&this.menuItems[n].disabled;)n+=i;!this.menuItems[n]||this.menuItems[n].disabled||(!this.value||n!==s)&&this.setValueFromItem(this.menuItems[n])}}static get styles(){return[b,y]}sizePopover(e){super.sizePopover(e),!this.quiet&&e.style.setProperty("min-width",`${this.offsetWidth}px`)}}
91
76
  //# sourceMappingURL=Picker.js.map
package/src/Picker.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Picker.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { OverlayBase } from '@spectrum-web-components/overlay/src/OverlayBase.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n public get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n this.addEventListener('focusout', (event: FocusEvent) => {\n if (\n (event.relatedTarget &&\n this.contains(event.relatedTarget as Element)) ||\n event.target !== this\n ) {\n return;\n }\n this.open = false;\n });\n }\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n private preventNextToggle = false;\n\n protected handlePointerdown(): void {\n this.preventNextToggle = this.open;\n }\n\n protected onButtonClick(): void {\n if (!this.preventNextToggle) {\n this.toggle();\n }\n this.preventNextToggle = false;\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected onKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // When there are no selects, don't set a value.\n if (this.selects) {\n // Set a value, but allow it to be prevented.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">${this.label}</slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n protected get renderOverlay(): TemplateResult {\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: OverlayBase;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n this.open = event.newState === 'open';\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer}\n </sp-overlay>\n `;\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n @pointerdown=${this.handlePointerdown}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderOverlay}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n const deprecatedMenu = this.querySelector(':scope > sp-menu');\n deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderContainer(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n style=${styleMap(this.containerStyles)}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
5
- "mappings": "qNAYA,OAGI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,YAAAC,EAEA,YAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAOC,MAAmB,iEAE1B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,gEACP,MAAO,iEACP,MAAO,iDACP,MAAO,2CAMP,MAAO,2CACP,MAAO,iDAEP,OACI,aAAAC,EACA,wBAAAC,MACG,kEAGP,MAAMC,EAAe,CACjB,EAAG,gCACH,EAAG,iCACH,EAAG,iCACH,GAAI,gCACR,EAEO,aAAM,mBAAmBV,EAAWO,CAAS,CAAE,CA2E3C,aAAc,CACjB,MAAM,EA3EV,KAAU,SAAW,IAAIE,EAAqB,KAAMD,CAAS,EAU7D,KAAgB,SAAW,GAG3B,KAAO,QAAU,GAMjB,KAAO,QAAU,GAMjB,KAAO,KAAO,GAGd,KAAO,SAAW,GAElB,KAAO,QAAgC,SAevC,KAAO,UAAuB,eAG9B,KAAO,MAAQ,GAGf,KAAO,MAAQ,GAoBf,KAAU,SAA+B,UACzC,KAAU,SAAW,SAoCrB,KAAQ,kBAAoB,GA+C5B,KAAU,UAAaG,GAA+B,CAClD,KAAK,QAAU,GACX,EAAAA,EAAM,OAAS,aAAeA,EAAM,OAAS,aAGjDA,EAAM,eAAe,EACrB,KAAK,OAAO,EAAI,EACpB,EA6QA,KAAQ,oBAAsB,GAwD9B,KAAQ,iBAAmB,QAAQ,QAAQ,EA3ZvC,KAAK,UAAY,KAAK,UAAU,KAAK,IAAI,EACzC,KAAK,iBAAiB,WAAaA,GAAsB,CAEhDA,EAAM,eACH,KAAK,SAASA,EAAM,aAAwB,GAChDA,EAAM,SAAW,OAIrB,KAAK,KAAO,GAChB,CAAC,CACL,CAlFA,IAAW,QAAmC,CAC1C,OAAO,KAAK,MAChB,CAyBA,IAAW,WAAwB,CAC/B,OAAO,KAAK,YAAY,UAC5B,CAoBA,IAAW,cAAqC,CAC5C,OAAO,KAAK,aAChB,CAEA,IAAW,aAAaC,EAAoC,CAKxD,GAJA,KAAK,oBAAsBA,EACrBA,EAAa,aACb,OAEFA,IAAiB,KAAK,aAAc,OACxC,MAAMC,EAAkB,KAAK,aAC7B,KAAK,cAAgBD,EACrB,KAAK,cAAc,eAAgBC,CAAe,CACtD,CAsBA,IAAoB,cAA4B,CAC5C,OAAI,KAAK,KACE,KAAK,YAET,KAAK,MAChB,CAEO,mBAA0B,CAC7B,KAAK,QAAU,EACnB,CAEO,cAAqB,CACxB,KAAK,QAAU,GACd,KAAK,OAA6B,oBAC/B,UACA,KAAK,SACT,CACJ,CAIU,mBAA0B,CAChC,KAAK,kBAAoB,KAAK,IAClC,CAEU,eAAsB,CACvB,KAAK,mBACN,KAAK,OAAO,EAEhB,KAAK,kBAAoB,EAC7B,CAEgB,MAAMC,EAA8B,CAChD,MAAM,MAAMA,CAAO,EAEf,CAAC,KAAK,UAAY,KAAK,eACvB,KAAK,QAAU,KAAK,sBAAsB,EAElD,CAEO,eAAsB,CAEzB,KAAK,QAAU,GACf,KAAK,OAAO,MAAM,CACtB,CAEO,eAAsB,CACxB,KAAK,OAA6B,iBAC/B,UACA,KAAK,SACT,CACJ,CAEO,aAAaH,EAAoB,CACpC,MAAMI,EAASJ,EAAM,OACf,CAACK,CAAQ,EAAID,EAAO,cAC1BJ,EAAM,gBAAgB,EAClBA,EAAM,WACN,KAAK,iBAAiBK,EAAUL,CAAK,EAIrC,KAAK,KAAO,EAEpB,CAWA,MAAa,iBACTM,EACAC,EACa,CAEb,KAAK,KAAO,GACZ,MAAML,EAAkB,KAAK,aACvBM,EAAW,KAAK,MAgBtB,GAbI,KAAK,UAEL,KAAK,aAAeF,EACpB,KAAK,MAAQA,EAAK,MAClB,MAAM,KAAK,gBASX,CAPiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,CACL,GACqB,KAAK,QAAS,CAC3BC,GACAA,EAAgB,eAAe,EAEnC,KAAK,oBAAoB,KAAK,aAA0B,EAAK,EACzDL,GACA,KAAK,oBAAoBA,EAAiB,EAAI,EAElD,KAAK,aAAeA,EACpB,KAAK,MAAQM,EACb,KAAK,KAAO,GACZ,OAEAN,GACA,KAAK,oBAAoBA,EAAiB,EAAK,EAEnD,KAAK,oBAAoBI,EAAM,CAAC,CAAC,KAAK,OAAO,CACjD,CAEU,oBAAoBA,EAAgBG,EAAsB,CAE5D,KAAK,SAAW,OACpBH,EAAK,SAAWG,EACpB,CAEO,OAAOL,EAAwB,CAC9B,KAAK,WAGT,KAAK,KAAO,OAAOA,GAAW,YAAcA,EAAS,CAAC,KAAK,KAC/D,CAEO,OAAc,CACb,KAAK,WAGT,KAAK,KAAO,GAChB,CAEA,IAAc,iBAA6B,CACvC,OAAI,KAAK,SAAS,QACP,CACH,mBAAoB,MACxB,EAEG,CAAC,CACZ,CAGA,IAAc,qBAAwC,CAClD,OAAO,KAAK,sBAAwB,CAAE,KAAM,CAAC,EAAG,QAAS,CAAC,CAAE,CAChE,CAEA,IAAc,oBACVM,EACF,CACE,GAAIA,IAAwB,KAAK,oBAAqB,OAEtD,MAAMC,EAAa,KAAK,oBACxB,KAAK,qBAAuBD,EAC5B,KAAK,cAAc,sBAAuBC,CAAU,CACxD,CAIU,mBAAmBC,EAA0C,CACnE,OAAI,KAAK,OAAS,KAAK,aACZA,EAEJzB;AAAA,iCACkB,KAAK;AAAA,SAElC,CAEA,IAAc,eAAkC,CAC5C,MAAM0B,EAAe,CACjB,kBAAmB,KAAK,QAAU,QAAU,CAAC,CAAC,KAAK,MACnD,YAAa,CAAC,KAAK,KACvB,EACA,MAAO,CACH1B;AAAA,0CAC8B,KAAK,QAAU;AAAA,sBACnC,KAAK,oBAAoB;AAAA;AAAA,yCAENG,EAASuB,CAAY;AAAA,sBACxC,KAAK,mBAAmB,KAAK,oBAAoB,OAAO;AAAA;AAAA,kBAE5D,KAAK,QACD1B;AAAA;AAAA;AAAA;AAAA,wBAKAC;AAAA;AAAA,oCAEcW,EACZ,KAAK,IACT;AAAA;AAAA,aAGZ,CACJ,CAEA,IAAc,eAAgC,CAC1C,OAAOZ;AAAA;AAAA,kCAEmB;AAAA,0BACR;AAAA,wBACF,KAAK;AAAA,6BACA,KAAK;AAAA;AAAA,iCAED;AAAA,gCAEba,GAIC,CACGA,EAAM,aAAa,EAAE,CAAC,IAAMA,EAAM,SAGtC,KAAK,KAAOA,EAAM,WAAa,OAC1B,KAAK,OACN,KAAK,YAAY,wBAAwB,EACzC,KAAK,YAAY,wBAAwB,GAEjD;AAAA;AAAA,kBAEE,KAAK;AAAA;AAAA,SAGnB,CAImB,QAAyB,CACxC,OAAOb;AAAA;AAAA;AAAA,4BAGa,KAAK,SAAW,KAAK,KAAO,KAAO;AAAA,yBACtC,KAAK;AAAA;AAAA;AAAA;AAAA,gCAIE,KAAK,KAAO,OAAS;AAAA;AAAA;AAAA;AAAA,wBAI7B,KAAK;AAAA,yBACJ,KAAK;AAAA,yBACL,KAAK;AAAA,+BACC,KAAK;AAAA,4BACR,KAAK;AAAA;AAAA;AAAA,kBAGf,KAAK;AAAA;AAAA,cAET,KAAK;AAAA,SAEf,CAEmB,OAAO2B,EAAqC,CAe3D,GAdI,KAAK,UAGL,KAAK,QAAU,UAEfA,EAAQ,IAAI,UAAU,GAAK,KAAK,WAChC,KAAK,KAAO,IAEZA,EAAQ,IAAI,OAAO,GAGnB,KAAK,8BAA8B,EAGnC,CAAC,KAAK,WAAY,CAClB,MAAMC,EAAiB,KAAK,cAAc,kBAAkB,EAC5DA,GAAA,MAAAA,EAAgB,aAAa,UAAW,WAa5C,MAAM,OAAOD,CAAO,CACxB,CAEA,IAAc,eAAgC,CAC1C,OAAO3B;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKc,KAAK;AAAA;AAAA;AAAA,SAI9B,CAEA,IAAc,iBAAkC,CAC5C,MAAMyB,EAAUzB;AAAA,cACV,KAAK;AAAA;AAAA;AAAA,wBAGK,KAAK;AAAA,0BACH,KAAK;AAAA,2BACJ,KAAK;AAAA,4BACJ,KAAK,MAAQ,CAAC,KAAK,KAAK,EAAI,CAAC;AAAA,iDACR,KAAK;AAAA;AAAA,oCAElB,KAAK;AAAA;AAAA,cAE3B,KAAK;AAAA,UAEX,OAAI,KAAK,SAAS,QACPA;AAAA;AAAA;AAAA;AAAA,4BAISI,EAAS,KAAK,eAAe;AAAA;AAAA,sBAEnCqB;AAAA;AAAA,cAIPzB;AAAA;AAAA;AAAA;AAAA,wBAISI,EAAS,KAAK,eAAe;AAAA,4BACzB,KAAK;AAAA;AAAA,kBAEfqB;AAAA;AAAA,SAGd,CAIU,8BAA8BZ,EAAqB,CAErD,CAAC,KAAK,sBACL,CAACA,GACIA,EAAM,OAAuB,YAAY,EACtC,OAAS,QAElB,KAAK,oBAAsB,GAC3B,sBAAsB,IAAM,CACxB,sBAAsB,IAAM,CACxB,KAAK,gBAAgB,CACzB,CAAC,CACL,CAAC,EAET,CAEU,uBAA8B,CAChC,KAAK,sBAGT,KAAK,oBAAsB,GAC3B,KAAK,gBAAgB,EACzB,CAEA,MAAgB,iBAAiC,CAC7C,GAAI,KAAK,SAAW,KAAM,OAE1B,KAAK,iBAAmB,IAAI,QACvBgB,GAAS,KAAK,kBAAoBA,CACvC,EACA,IAAIf,EACJ,MAAM,KAAK,YAAY,eACvB,KAAK,UAAU,QAASK,GAAS,CACzB,KAAK,QAAUA,EAAK,OAAS,CAACA,EAAK,SACnCL,EAAeK,EAEfA,EAAK,SAAW,EAExB,CAAC,EACGL,GACAA,EAAa,SAAW,CAAC,CAAC,KAAK,QAC/B,KAAK,aAAeA,IAEpB,KAAK,MAAQ,GACb,KAAK,aAAe,QAEpB,KAAK,OACL,MAAM,KAAK,YAAY,eACvB,KAAK,YAAY,wBAAwB,GAE7C,KAAK,kBAAkB,EACvB,KAAK,oBAAsB,EAC/B,CAKA,MAAyB,mBAAsC,CAC3D,MAAMgB,EAAY,MAAM,MAAM,kBAAkB,EAChD,aAAM,KAAK,iBACJA,CACX,CAEgB,sBAA6B,CACzC,KAAK,MAAM,EAEX,MAAM,qBAAqB,CAC/B,CACJ,CAlfWC,EAAA,CADNzB,EAAM,SAAS,GAHP,WAIF,sBAOSyB,EAAA,CADf1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAVjC,WAWO,wBAGT0B,EAAA,CADN1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAbjC,WAcF,uBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAhBhC,WAiBF,qBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnBjC,WAoBF,uBAGA0B,EAAA,CADN1B,EAAS,GAtBD,WAuBF,qBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAzBjC,WA0BF,oBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA5BjC,WA6BF,wBASA0B,EAAA,CADNzB,EAAM,SAAS,GArCP,WAsCF,2BAQAyB,EAAA,CADN1B,EAAS,GA7CD,WA8CF,yBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhDjC,WAiDF,qBAGA0B,EAAA,CADN1B,EAAS,CAAE,KAAM,MAAO,CAAC,GAnDjB,WAoDF,qBAGI0B,EAAA,CADV1B,EAAS,CAAE,UAAW,EAAM,CAAC,GAtDrB,WAuDE,4BAsLG0B,EAAA,CADb1B,EAAS,CAAE,UAAW,EAAM,CAAC,GA5OrB,WA6OK,mCAoRX,aAAM,eAAe,UAAW,CAAhC,kCAaH,KAAmB,UAAaQ,GAA+B,CAC3D,KAAM,CAAE,KAAAmB,CAAK,EAAInB,EAEjB,GADA,KAAK,QAAU,GACX,CAACmB,EAAK,WAAW,OAAO,GAAK,KAAK,SAClC,OAGJ,GADAnB,EAAM,eAAe,EACjBmB,IAAS,WAAaA,IAAS,YAAa,CAC5C,KAAK,OAAO,EAAI,EAChB,OAEJ,MAAMC,EAAgB,KAAK,aACrB,KAAK,UAAU,QAAQ,KAAK,YAAY,EACxC,GAEAC,EAAa,CAAC,KAAK,OAASF,IAAS,aAAe,EAAI,GAC9D,IAAIG,EAAYF,EAAgBC,EAChC,KACI,KAAK,UAAUC,CAAS,GACxB,KAAK,UAAUA,CAAS,EAAE,UAE1BA,GAAaD,EAEb,CAAC,KAAK,UAAUC,CAAS,GAAK,KAAK,UAAUA,CAAS,EAAE,WAGxD,CAAC,KAAK,OAASA,IAAcF,IAC7B,KAAK,iBAAiB,KAAK,UAAUE,CAAS,CAAC,CAEvD,EAzCA,WAA2B,QAAyB,CAChD,MAAO,CAAC5B,EAAcC,CAAa,CACvC,CAEA,IAAuB,iBAA6B,CAChD,MAAM4B,EAAS,MAAM,gBACrB,OAAK,KAAK,QACNA,EAAO,WAAW,EAAI,GAAG,KAAK,iBAE3BA,CACX,CAgCJ",
6
- "names": ["html", "nothing", "SizedMixin", "classMap", "styleMap", "property", "query", "pickerStyles", "chevronStyles", "Focusable", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "selectedItem", "oldSelectedItem", "options", "target", "selected", "item", "menuChangeEvent", "oldValue", "value", "selectedItemContent", "oldContent", "content", "labelClasses", "changes", "deprecatedMenu", "res", "complete", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex", "styles"]
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popoverEl!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n if (event.cancelable) {\n event.stopPropagation();\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected onKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popoverEl = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popoverEl.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popoverEl);\n if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = true;\n }\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = false;\n }\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">${this.label}</slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override sizePopover(popover: HTMLElement): void {\n super.sizePopover(popover);\n\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["html", "nothing", "render", "SizedMixin", "classMap", "property", "query", "pickerStyles", "chevronStyles", "Focusable", "reparentChildren", "openOverlay", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "options", "target", "selected", "item", "menuChangeEvent", "oldSelectedItem", "oldValue", "value", "reparentableChildren", "deprecatedMenu", "element", "el", "popover", "closeOverlay", "content", "labelClasses", "changes", "res", "resolve", "selectedItem", "complete", "interaction", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex"]
7
7
  }