@hashicorp/mds-react 0.9.3 → 0.9.5
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.
- package/components/accordion/index.js +9 -0
- package/components/accordion/index.js.map +1 -0
- package/components/accordion/item/button.js +44 -0
- package/components/accordion/item/button.js.map +1 -0
- package/components/accordion/item/index.js +59 -0
- package/components/accordion/item/index.js.map +1 -0
- package/components/accordion/style.module.scss.js +24 -0
- package/components/accordion/style.module.scss.js.map +1 -0
- package/components/alert/alert.module.scss.js +29 -0
- package/components/alert/alert.module.scss.js.map +1 -0
- package/components/alert/icon.js +34 -0
- package/components/alert/icon.js.map +1 -0
- package/components/alert/index.js +97 -0
- package/components/alert/index.js.map +1 -0
- package/components/badge/index.js +50 -0
- package/components/badge/index.js.map +1 -0
- package/components/badge/style.module.scss +8 -6
- package/components/badge/style.module.scss.js +22 -0
- package/components/badge/style.module.scss.js.map +1 -0
- package/components/badge-count/index.js +29 -0
- package/components/badge-count/index.js.map +1 -0
- package/components/badge-count/style.module.scss +7 -6
- package/components/badge-count/style.module.scss.js +15 -0
- package/components/badge-count/style.module.scss.js.map +1 -0
- package/components/breadcrumbs/index.js +38 -0
- package/components/breadcrumbs/index.js.map +1 -0
- package/components/breadcrumbs/item/index.js +32 -0
- package/components/breadcrumbs/item/index.js.map +1 -0
- package/components/breadcrumbs/style.module.scss.js +27 -0
- package/components/breadcrumbs/style.module.scss.js.map +1 -0
- package/components/breadcrumbs/truncation-button/index.js +25 -0
- package/components/breadcrumbs/truncation-button/index.js.map +1 -0
- package/components/button/button-primitive.d.ts +5 -0
- package/components/button/button-primitive.js +59 -0
- package/components/button/button-primitive.js.map +1 -0
- package/components/button/index.d.ts +4 -5
- package/components/button/index.js +69 -0
- package/components/button/index.js.map +1 -0
- package/components/button/styles.module.scss.js +32 -0
- package/components/button/styles.module.scss.js.map +1 -0
- package/components/card/card-thumbnail/card-thumbnail.module.css.js +8 -0
- package/components/card/card-thumbnail/card-thumbnail.module.css.js.map +1 -0
- package/components/card/card-thumbnail/index.js +23 -0
- package/components/card/card-thumbnail/index.js.map +1 -0
- package/components/card/index.d.ts +2 -1
- package/components/card/index.js +160 -0
- package/components/card/index.js.map +1 -0
- package/components/card/styles.module.css.js +29 -0
- package/components/card/styles.module.css.js.map +1 -0
- package/components/card/types.d.ts +1 -0
- package/components/code-block/code-block.module.scss.js +34 -0
- package/components/code-block/code-block.module.scss.js.map +1 -0
- package/components/code-block/code-lines/index.js +59 -0
- package/components/code-block/code-lines/index.js.map +1 -0
- package/components/code-block/code-lines/utils/split-html-into-lines.js +19 -0
- package/components/code-block/code-lines/utils/split-html-into-lines.js.map +1 -0
- package/components/code-block/code-lines/utils/split-jsx-into-lines.js +31 -0
- package/components/code-block/code-lines/utils/split-jsx-into-lines.js.map +1 -0
- package/components/code-block/hidden-copy-content/index.js +13 -0
- package/components/code-block/hidden-copy-content/index.js.map +1 -0
- package/components/code-block/index.js +88 -0
- package/components/code-block/index.js.map +1 -0
- package/components/code-block/utils/parse-highlighted-lines.js +39 -0
- package/components/code-block/utils/parse-highlighted-lines.js.map +1 -0
- package/components/code-block/utils/process-snippet.js +20 -0
- package/components/code-block/utils/process-snippet.js.map +1 -0
- package/components/code-block/utils/shellwords.js +33 -0
- package/components/code-block/utils/shellwords.js.map +1 -0
- package/components/combo-box-primitive/index.js +302 -0
- package/components/combo-box-primitive/index.js.map +1 -0
- package/components/dialog-primitive/dialog.module.scss.js +12 -0
- package/components/dialog-primitive/dialog.module.scss.js.map +1 -0
- package/components/dialog-primitive/index.js +15 -0
- package/components/dialog-primitive/index.js.map +1 -0
- package/components/disclosure-primitive/index.js +57 -0
- package/components/disclosure-primitive/index.js.map +1 -0
- package/components/disclosure-primitive/styles.module.css.js +7 -0
- package/components/disclosure-primitive/styles.module.css.js.map +1 -0
- package/components/disclosure-primitive/use-disclosure-primitive.js +17 -0
- package/components/disclosure-primitive/use-disclosure-primitive.js.map +1 -0
- package/components/dismiss-button/index.js +22 -0
- package/components/dismiss-button/index.js.map +1 -0
- package/components/dismiss-button/styles.module.scss.js +7 -0
- package/components/dismiss-button/styles.module.scss.js.map +1 -0
- package/components/dropdown/index.js +79 -0
- package/components/dropdown/index.js.map +1 -0
- package/components/dropdown/list-item/custom.js +9 -0
- package/components/dropdown/list-item/custom.js.map +1 -0
- package/components/dropdown/list-item/index.js +14 -0
- package/components/dropdown/list-item/index.js.map +1 -0
- package/components/dropdown/list-item/interactive.js +49 -0
- package/components/dropdown/list-item/interactive.js.map +1 -0
- package/components/dropdown/list-item/separator.js +17 -0
- package/components/dropdown/list-item/separator.js.map +1 -0
- package/components/dropdown/list-item/styles.module.css.js +26 -0
- package/components/dropdown/list-item/styles.module.css.js.map +1 -0
- package/components/dropdown/list-item/title.js +9 -0
- package/components/dropdown/list-item/title.js.map +1 -0
- package/components/dropdown/styles.module.css.js +24 -0
- package/components/dropdown/styles.module.css.js.map +1 -0
- package/components/dropdown/toggle-button/index.js +54 -0
- package/components/dropdown/toggle-button/index.js.map +1 -0
- package/components/dropdown/toggle-button/styles.module.scss.js +14 -0
- package/components/dropdown/toggle-button/styles.module.scss.js.map +1 -0
- package/components/flight-icon/flight-icon.module.css.js +12 -0
- package/components/flight-icon/flight-icon.module.css.js.map +1 -0
- package/components/flight-icon/index.js +58 -0
- package/components/flight-icon/index.js.map +1 -0
- package/components/form/checkbox/form-checkbox.module.css.js +8 -0
- package/components/form/checkbox/form-checkbox.module.css.js.map +1 -0
- package/components/form/checkbox/index.js +109 -0
- package/components/form/checkbox/index.js.map +1 -0
- package/components/form/error/form-error.module.css.js +14 -0
- package/components/form/error/form-error.module.css.js.map +1 -0
- package/components/form/error/index.js +22 -0
- package/components/form/error/index.js.map +1 -0
- package/components/form/field/form-field.module.css.js +17 -0
- package/components/form/field/form-field.module.css.js.map +1 -0
- package/components/form/field/index.js +46 -0
- package/components/form/field/index.js.map +1 -0
- package/components/form/fieldset/form-fieldset.module.css.js +19 -0
- package/components/form/fieldset/form-fieldset.module.css.js.map +1 -0
- package/components/form/fieldset/index.d.ts +1 -2
- package/components/form/fieldset/index.js +65 -0
- package/components/form/fieldset/index.js.map +1 -0
- package/components/form/file-input/form-file-input.module.scss +2 -2
- package/components/form/file-input/form-file-input.module.scss.js +7 -0
- package/components/form/file-input/form-file-input.module.scss.js.map +1 -0
- package/components/form/file-input/index.js +68 -0
- package/components/form/file-input/index.js.map +1 -0
- package/components/form/helper-text/form-helper-text.module.css.js +7 -0
- package/components/form/helper-text/form-helper-text.module.css.js.map +1 -0
- package/components/form/helper-text/index.js +22 -0
- package/components/form/helper-text/index.js.map +1 -0
- package/components/form/indicator/form-indicator.module.css.js +8 -0
- package/components/form/indicator/form-indicator.module.css.js.map +1 -0
- package/components/form/indicator/index.js +23 -0
- package/components/form/indicator/index.js.map +1 -0
- package/components/form/label/form-label.module.css.js +10 -0
- package/components/form/label/form-label.module.css.js.map +1 -0
- package/components/form/label/index.js +33 -0
- package/components/form/label/index.js.map +1 -0
- package/components/form/legend/form-legend.module.css.js +10 -0
- package/components/form/legend/form-legend.module.css.js.map +1 -0
- package/components/form/legend/index.js +19 -0
- package/components/form/legend/index.js.map +1 -0
- package/components/form/radio/form-radio.module.scss.js +8 -0
- package/components/form/radio/form-radio.module.scss.js.map +1 -0
- package/components/form/radio/index.d.ts +3 -5
- package/components/form/radio/index.js +100 -0
- package/components/form/radio/index.js.map +1 -0
- package/components/form/radio-card/RadioCardStory.css +21 -0
- package/components/form/radio-card/description.js +10 -0
- package/components/form/radio-card/description.js.map +1 -0
- package/components/form/radio-card/form-radio-card.module.css.js +30 -0
- package/components/form/radio-card/form-radio-card.module.css.js.map +1 -0
- package/components/form/radio-card/group.js +31 -0
- package/components/form/radio-card/group.js.map +1 -0
- package/components/form/radio-card/index.js +67 -0
- package/components/form/radio-card/index.js.map +1 -0
- package/components/form/radio-card/label.js +10 -0
- package/components/form/radio-card/label.js.map +1 -0
- package/components/form/select/form-select.module.css.js +14 -0
- package/components/form/select/form-select.module.css.js.map +1 -0
- package/components/form/select/index.js +79 -0
- package/components/form/select/index.js.map +1 -0
- package/components/form/super-select/form-super-select.module.css.js +22 -0
- package/components/form/super-select/form-super-select.module.css.js.map +1 -0
- package/components/form/super-select/index.js +170 -0
- package/components/form/super-select/index.js.map +1 -0
- package/components/form/text-input/index.js +91 -0
- package/components/form/text-input/index.js.map +1 -0
- package/components/form/text-input/styles.module.css.js +15 -0
- package/components/form/text-input/styles.module.css.js.map +1 -0
- package/components/form/textarea/form-textarea.module.css.js +14 -0
- package/components/form/textarea/form-textarea.module.css.js.map +1 -0
- package/components/form/textarea/index.js +74 -0
- package/components/form/textarea/index.js.map +1 -0
- package/components/form/toggle/form-toggle.module.scss.js +12 -0
- package/components/form/toggle/form-toggle.module.scss.js.map +1 -0
- package/components/form/toggle/index.js +102 -0
- package/components/form/toggle/index.js.map +1 -0
- package/components/hds/wrappers/tooltip.js +51 -0
- package/components/hds/wrappers/tooltip.js.map +1 -0
- package/components/icon-tile/index.js +50 -0
- package/components/icon-tile/index.js.map +1 -0
- package/components/icon-tile/style.module.scss +12 -10
- package/components/icon-tile/style.module.scss.js +29 -0
- package/components/icon-tile/style.module.scss.js.map +1 -0
- package/components/index.d.ts +1 -1
- package/components/index.js +116 -73
- package/components/index.js.map +1 -1
- package/components/inline-link/index.js +34 -0
- package/components/inline-link/index.js.map +1 -0
- package/components/inline-link/inline-link.module.css.js +11 -0
- package/components/inline-link/inline-link.module.css.js.map +1 -0
- package/components/interactive/index.js +59 -0
- package/components/interactive/index.js.map +1 -0
- package/components/legacy-button/index.js +65 -0
- package/components/legacy-button/index.js.map +1 -0
- package/components/legacy-button/utils.js +39 -0
- package/components/legacy-button/utils.js.map +1 -0
- package/components/menu-primitive/index.js +68 -0
- package/components/menu-primitive/index.js.map +1 -0
- package/components/menu-primitive/styles.module.css.js +12 -0
- package/components/menu-primitive/styles.module.css.js.map +1 -0
- package/components/menu-primitive/use-menu-primitive.js +17 -0
- package/components/menu-primitive/use-menu-primitive.js.map +1 -0
- package/components/modal/index.js +61 -0
- package/components/modal/index.js.map +1 -0
- package/components/modal/modal.module.css +5 -0
- package/components/modal/modal.module.css.js +8 -0
- package/components/modal/modal.module.css.js.map +1 -0
- package/components/modal/use-modal.js +17 -0
- package/components/modal/use-modal.js.map +1 -0
- package/components/separator/index.js +15 -0
- package/components/separator/index.js.map +1 -0
- package/components/separator/separator.module.css.js +10 -0
- package/components/separator/separator.module.css.js.map +1 -0
- package/components/standalone-link/index.js +54 -0
- package/components/standalone-link/index.js.map +1 -0
- package/components/standalone-link/styles.module.scss.js +17 -0
- package/components/standalone-link/styles.module.scss.js.map +1 -0
- package/components/table/index.js +52 -0
- package/components/table/index.js.map +1 -0
- package/components/table/table.module.scss.js +33 -0
- package/components/table/table.module.scss.js.map +1 -0
- package/components/table/td.js +28 -0
- package/components/table/td.js.map +1 -0
- package/components/table/th-button-tooltip.js +24 -0
- package/components/table/th-button-tooltip.js.map +1 -0
- package/components/table/th.js +43 -0
- package/components/table/th.js.map +1 -0
- package/components/table/tr.js +9 -0
- package/components/table/tr.js.map +1 -0
- package/components/table/utils.js +28 -0
- package/components/table/utils.js.map +1 -0
- package/components/tabs/index.js +115 -0
- package/components/tabs/index.js.map +1 -0
- package/components/tabs/tab-panel.js +35 -0
- package/components/tabs/tab-panel.js.map +1 -0
- package/components/tabs/tab.js +70 -0
- package/components/tabs/tab.js.map +1 -0
- package/components/tabs/tabs.module.scss.js +22 -0
- package/components/tabs/tabs.module.scss.js.map +1 -0
- package/components/tabs/use-tabs-context.js +16 -0
- package/components/tabs/use-tabs-context.js.map +1 -0
- package/components/text/index.js +112 -0
- package/components/text/index.js.map +1 -0
- package/components/text/style.module.scss.js +9 -0
- package/components/text/style.module.scss.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js +62 -0
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js +20 -0
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/index.js +104 -0
- package/components/visualizations/bar-chart/horizontal-chart/index.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/legend/index.js +13 -0
- package/components/visualizations/bar-chart/horizontal-chart/legend/index.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js +14 -0
- package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js.map +1 -0
- package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js +28 -0
- package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js.map +1 -0
- package/components/visualizations/bar-chart/index.js +37 -0
- package/components/visualizations/bar-chart/index.js.map +1 -0
- package/components/visualizations/bar-chart/style.module.css.js +12 -0
- package/components/visualizations/bar-chart/style.module.css.js.map +1 -0
- package/components/visualizations/donut-chart/components/arc-tooltip/index.js +14 -0
- package/components/visualizations/donut-chart/components/arc-tooltip/index.js.map +1 -0
- package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js +10 -0
- package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js.map +1 -0
- package/components/visualizations/donut-chart/components/external-arc-label/index.js +58 -0
- package/components/visualizations/donut-chart/components/external-arc-label/index.js.map +1 -0
- package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js +16 -0
- package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js.map +1 -0
- package/components/visualizations/donut-chart/components/internal-arc-label/index.js +42 -0
- package/components/visualizations/donut-chart/components/internal-arc-label/index.js.map +1 -0
- package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js +14 -0
- package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js.map +1 -0
- package/components/visualizations/donut-chart/index.js +90 -0
- package/components/visualizations/donut-chart/index.js.map +1 -0
- package/components/visualizations/donut-chart/styles.module.css.js +20 -0
- package/components/visualizations/donut-chart/styles.module.css.js.map +1 -0
- package/hooks/use-media-query/index.js +16 -0
- package/hooks/use-media-query/index.js.map +1 -0
- package/index.js +155 -101
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/patterns/card/newsroom-card/index.js +26 -0
- package/patterns/card/newsroom-card/index.js.map +1 -0
- package/patterns/card/newsroom-card/style.module.css.js +8 -0
- package/patterns/card/newsroom-card/style.module.css.js.map +1 -0
- package/patterns/card/partner-card/index.js +42 -0
- package/patterns/card/partner-card/index.js.map +1 -0
- package/patterns/card/partner-card/style.module.css.js +12 -0
- package/patterns/card/partner-card/style.module.css.js.map +1 -0
- package/patterns/card/person-card/index.js +54 -0
- package/patterns/card/person-card/index.js.map +1 -0
- package/patterns/card/person-card/style.module.css.js +12 -0
- package/patterns/card/person-card/style.module.css.js.map +1 -0
- package/patterns/card/primitives.js +77 -0
- package/patterns/card/primitives.js.map +1 -0
- package/patterns/card/promo-card/index.js +36 -0
- package/patterns/card/promo-card/index.js.map +1 -0
- package/patterns/card/resource-card/index.js +26 -0
- package/patterns/card/resource-card/index.js.map +1 -0
- package/patterns/card/style.module.css.js +30 -0
- package/patterns/card/style.module.css.js.map +1 -0
- package/patterns/card/thumbnails/index.js +25 -0
- package/patterns/card/thumbnails/index.js.map +1 -0
- package/patterns/card/unified-card/index.js +37 -0
- package/patterns/card/unified-card/index.js.map +1 -0
- package/patterns/copy-button/clipboard.js +78 -0
- package/patterns/copy-button/clipboard.js.map +1 -0
- package/patterns/copy-button/index.js +57 -0
- package/patterns/copy-button/index.js.map +1 -0
- package/patterns/copy-button/style.module.css.js +13 -0
- package/patterns/copy-button/style.module.css.js.map +1 -0
- package/patterns/index.js +32 -22
- package/patterns/index.js.map +1 -1
- package/patterns/layout/index.js +47 -0
- package/patterns/layout/index.js.map +1 -0
- package/patterns/layout/layout.module.css.js +20 -0
- package/patterns/layout/layout.module.css.js.map +1 -0
- package/patterns/product-badge/index.js +22 -0
- package/patterns/product-badge/index.js.map +1 -0
- package/patterns/product-badge/style.module.css.js +8 -0
- package/patterns/product-badge/style.module.css.js.map +1 -0
- package/patterns/product-logo/index.js +130 -0
- package/patterns/product-logo/index.js.map +1 -0
- package/patterns/product-logo/product-logo.module.css.js +13 -0
- package/patterns/product-logo/product-logo.module.css.js.map +1 -0
- package/patterns/related-content/index.js +65 -0
- package/patterns/related-content/index.js.map +1 -0
- package/patterns/related-content/style.module.css.js +22 -0
- package/patterns/related-content/style.module.css.js.map +1 -0
- package/style.css +1 -1
- package/utils/get-contrast-yiq.js +13 -0
- package/utils/get-contrast-yiq.js.map +1 -0
- package/utils/hooks/use-screen-size.js +10 -0
- package/utils/hooks/use-screen-size.js.map +1 -0
- package/utils/i18n/constants/index.js +98 -0
- package/utils/i18n/constants/index.js.map +1 -0
- package/utils/i18n/helpers/locale-provider.js +9 -0
- package/utils/i18n/helpers/locale-provider.js.map +1 -0
- package/utils/i18n/helpers/to-smart-sentence-case.js +12 -0
- package/utils/i18n/helpers/to-smart-sentence-case.js.map +1 -0
- package/utils/i18n/helpers/to-smart-title-case.js +10 -0
- package/utils/i18n/helpers/to-smart-title-case.js.map +1 -0
- package/utils/i18n/helpers/use-locale.js +14 -0
- package/utils/i18n/helpers/use-locale.js.map +1 -0
- package/utils/i18n/index.js +41 -0
- package/utils/i18n/index.js.map +1 -0
- package/utils/i18n/index2.js +33 -0
- package/utils/i18n/index2.js.map +1 -0
- package/utils/index.js +7 -7
- package/utils/make-normalizer/index.js +34 -0
- package/utils/make-normalizer/index.js.map +1 -0
- package/{index-DBjAbGt7.js → utils/mds-context/index.js} +20 -19
- package/utils/mds-context/index.js.map +1 -0
- package/index-B9mPJh9w.js +0 -579
- package/index-B9mPJh9w.js.map +0 -1
- package/index-BHBlMMNF.js +0 -16
- package/index-BHBlMMNF.js.map +0 -1
- package/index-C4GBbW3N.js +0 -3567
- package/index-C4GBbW3N.js.map +0 -1
- package/index-DBjAbGt7.js.map +0 -1
- package/index-WkGIywHj.js +0 -767
- package/index-WkGIywHj.js.map +0 -1
- package/use-screen-size-BOnkX_K-.js +0 -9
- package/use-screen-size-BOnkX_K-.js.map +0 -1
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as b, Fragment as X } from "react/jsx-runtime";
|
|
3
|
+
import { useId as F, useEffect as V, useRef as B, useState as R, useCallback as p, createContext as Y, useContext as Z } from "react";
|
|
4
|
+
import { TextInputBase as ee } from "../form/text-input/index.js";
|
|
5
|
+
const E = (s, t) => `${s}__${t}`, x = -1;
|
|
6
|
+
function te(s) {
|
|
7
|
+
const t = /* @__PURE__ */ new Map();
|
|
8
|
+
for (const [o, r] of Object.entries(s)) {
|
|
9
|
+
if (!r) continue;
|
|
10
|
+
const l = t.get(r) || [];
|
|
11
|
+
t.set(r, [...l, o]);
|
|
12
|
+
}
|
|
13
|
+
for (const [o, r] of t)
|
|
14
|
+
if (r.length > 1)
|
|
15
|
+
throw new Error(
|
|
16
|
+
`ComboBox: id '${o}' is duplicated in ${r.join(", ")}`
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
const U = Y(null), y = () => {
|
|
20
|
+
const s = Z(U);
|
|
21
|
+
if (!s)
|
|
22
|
+
throw new Error("useComboBox must be used within a ComboBoxProvider");
|
|
23
|
+
return s;
|
|
24
|
+
}, oe = ({
|
|
25
|
+
children: s,
|
|
26
|
+
keyboardFocusLoop: t = !0,
|
|
27
|
+
ids: o = {},
|
|
28
|
+
onChangeVFocusedOption: r,
|
|
29
|
+
onChangeSelectedOption: l
|
|
30
|
+
}) => {
|
|
31
|
+
te(o);
|
|
32
|
+
const n = B([]), c = B(/* @__PURE__ */ new Set()), [f, m] = R(null), [a, w] = R(x), h = B(null), u = B(null), [g, I] = R(!1), K = B(null), _ = E("hashi-combo-box-toggle", F()), j = E("hashi-combo-box-popover", F()), M = E("hashi-combo-box-listbox", F()), T = p(
|
|
33
|
+
(e) => {
|
|
34
|
+
m(e), l?.(e);
|
|
35
|
+
},
|
|
36
|
+
[l]
|
|
37
|
+
), v = p(
|
|
38
|
+
(e) => {
|
|
39
|
+
w(e), r?.(n.current[e]);
|
|
40
|
+
},
|
|
41
|
+
[r]
|
|
42
|
+
), q = B({
|
|
43
|
+
toggle: o.toggle ?? _,
|
|
44
|
+
popover: o.popover ?? j,
|
|
45
|
+
listbox: o.listbox ?? M
|
|
46
|
+
}), C = p(
|
|
47
|
+
(e) => {
|
|
48
|
+
v(e);
|
|
49
|
+
},
|
|
50
|
+
[v]
|
|
51
|
+
), A = p(() => {
|
|
52
|
+
const e = n.current;
|
|
53
|
+
if (a === x) return 0;
|
|
54
|
+
const i = a + 1, d = i >= e.length;
|
|
55
|
+
let k;
|
|
56
|
+
d && t ? (k = x, I(!1)) : k = d ? a : i, C(k);
|
|
57
|
+
}, [t, a, C]), D = p(() => {
|
|
58
|
+
if (a === x) return 0;
|
|
59
|
+
const e = a - 1, i = e < 0;
|
|
60
|
+
let d;
|
|
61
|
+
i && t ? (d = x, I(!1)) : d = i ? a : e, C(d);
|
|
62
|
+
}, [t, a, C]), W = p(
|
|
63
|
+
(e) => {
|
|
64
|
+
const i = n.current.findIndex((d) => d.id === e.id);
|
|
65
|
+
if (i === -1) {
|
|
66
|
+
console.error("ComboBox: Item not found", e);
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
v(i);
|
|
70
|
+
},
|
|
71
|
+
[v]
|
|
72
|
+
), P = p(() => a === x ? null : n.current[a] || null, [a]), $ = p(
|
|
73
|
+
(e) => {
|
|
74
|
+
if (n.current.findIndex((d) => d.id === e.id) === -1) {
|
|
75
|
+
console.error(
|
|
76
|
+
"ComboBox: Item not found, Selected item not updated",
|
|
77
|
+
e
|
|
78
|
+
);
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
T(e), I(!1);
|
|
82
|
+
},
|
|
83
|
+
[T]
|
|
84
|
+
), L = p(() => f, [f]), z = p((e) => {
|
|
85
|
+
if (c.current.has(e.id)) {
|
|
86
|
+
const i = n.current.find((S) => S.id === e.id), N = `Each ComboBox.Item must have a unique id.
|
|
87
|
+
Found items with duplicate ids: ${JSON.stringify({
|
|
88
|
+
existing: i,
|
|
89
|
+
attemptedToAdd: e
|
|
90
|
+
})}`;
|
|
91
|
+
throw Error(N);
|
|
92
|
+
}
|
|
93
|
+
c.current.add(e.id), n.current.push(e);
|
|
94
|
+
}, []), G = p(() => n.current, []), H = p((e) => {
|
|
95
|
+
c.current.delete(e.id), n.current = n.current.filter((i) => i.id !== e.id);
|
|
96
|
+
}, []);
|
|
97
|
+
V(() => {
|
|
98
|
+
g && u.current?.focus();
|
|
99
|
+
}, [g, u, h]), V(() => {
|
|
100
|
+
const e = P(), i = K.current;
|
|
101
|
+
e && i && i.querySelector(
|
|
102
|
+
`[data-combo-box-item-id="${e.id}"]`
|
|
103
|
+
)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
104
|
+
}, [P]);
|
|
105
|
+
const O = p(() => {
|
|
106
|
+
I(!1), v(x);
|
|
107
|
+
}, [v]), J = p(() => {
|
|
108
|
+
I(!0);
|
|
109
|
+
}, []), Q = (e) => {
|
|
110
|
+
const i = e.key === "ArrowDown" || e.key === "ArrowUp", d = e.key === " ", k = u.current !== null;
|
|
111
|
+
switch ((i || d && !k) && e.preventDefault(), e.key) {
|
|
112
|
+
case "Escape": {
|
|
113
|
+
O();
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
116
|
+
case "ArrowDown": {
|
|
117
|
+
const S = P() === null;
|
|
118
|
+
g && S ? C(0) : A();
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
121
|
+
case "ArrowUp": {
|
|
122
|
+
D();
|
|
123
|
+
break;
|
|
124
|
+
}
|
|
125
|
+
case "Enter": {
|
|
126
|
+
const S = P();
|
|
127
|
+
S && $(S), O();
|
|
128
|
+
break;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
return /* @__PURE__ */ b(
|
|
133
|
+
U.Provider,
|
|
134
|
+
{
|
|
135
|
+
value: {
|
|
136
|
+
addItem: z,
|
|
137
|
+
selectItem: $,
|
|
138
|
+
vFocus: W,
|
|
139
|
+
vFocusByIdx: C,
|
|
140
|
+
vFocusNext: A,
|
|
141
|
+
vFocusPrev: D,
|
|
142
|
+
getSelectedItem: L,
|
|
143
|
+
getVFocusedItem: P,
|
|
144
|
+
getItems: G,
|
|
145
|
+
removeItem: H,
|
|
146
|
+
searchInputRef: u,
|
|
147
|
+
toggleRef: h,
|
|
148
|
+
listRef: K,
|
|
149
|
+
isOpen: g,
|
|
150
|
+
closePopover: O,
|
|
151
|
+
openPopover: J,
|
|
152
|
+
ids: q,
|
|
153
|
+
handleVFocusKeyboardControls: Q
|
|
154
|
+
},
|
|
155
|
+
children: s
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}, ne = ({
|
|
159
|
+
id: s,
|
|
160
|
+
value: t,
|
|
161
|
+
label: o,
|
|
162
|
+
children: r,
|
|
163
|
+
...l
|
|
164
|
+
}) => {
|
|
165
|
+
const n = E("hashi-combo-box-item", F()), c = s ?? n, { addItem: f, removeItem: m, getVFocusedItem: a, vFocus: w, selectItem: h } = y();
|
|
166
|
+
V(() => (f({ id: c, value: t, label: o }), () => m({ id: c, value: t, label: o })), [f, c, m, t, o]);
|
|
167
|
+
const u = a()?.id === c;
|
|
168
|
+
return /* @__PURE__ */ b(
|
|
169
|
+
"li",
|
|
170
|
+
{
|
|
171
|
+
"data-combo-box-item-id": c,
|
|
172
|
+
role: "option",
|
|
173
|
+
"aria-selected": u,
|
|
174
|
+
"data-vfocused": u,
|
|
175
|
+
onClick: () => h({ id: c, value: t, label: o }),
|
|
176
|
+
onMouseEnter: () => w({ id: c, value: t, label: o }),
|
|
177
|
+
...l,
|
|
178
|
+
children: r
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
}, se = ({ children: s, className: t }) => {
|
|
182
|
+
const {
|
|
183
|
+
toggleRef: o,
|
|
184
|
+
openPopover: r,
|
|
185
|
+
closePopover: l,
|
|
186
|
+
isOpen: n,
|
|
187
|
+
ids: c,
|
|
188
|
+
handleVFocusKeyboardControls: f,
|
|
189
|
+
searchInputRef: m
|
|
190
|
+
} = y(), a = (u) => {
|
|
191
|
+
u.stopPropagation(), n ? l() : r();
|
|
192
|
+
}, w = (u) => {
|
|
193
|
+
if ((u.key === "Enter" || u.key === "ArrowDown" || u.key === " ") && n === !1) {
|
|
194
|
+
u.preventDefault(), r();
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
!(m.current !== null) && n && f(u);
|
|
198
|
+
}, h = () => (u) => {
|
|
199
|
+
if (u.relatedTarget?.closest("[data-combo-box-popover]")) return;
|
|
200
|
+
m.current !== null || l();
|
|
201
|
+
};
|
|
202
|
+
return /* @__PURE__ */ b(
|
|
203
|
+
"div",
|
|
204
|
+
{
|
|
205
|
+
role: "combobox",
|
|
206
|
+
onClick: a,
|
|
207
|
+
onKeyDown: w,
|
|
208
|
+
tabIndex: 0,
|
|
209
|
+
ref: o,
|
|
210
|
+
"aria-haspopup": "listbox",
|
|
211
|
+
"aria-expanded": n,
|
|
212
|
+
"aria-controls": c.current.popover,
|
|
213
|
+
className: t,
|
|
214
|
+
onBlur: h(),
|
|
215
|
+
children: s
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
}, re = ({
|
|
219
|
+
placeholder: s = "Select an option"
|
|
220
|
+
}) => {
|
|
221
|
+
const { getSelectedItem: t } = y();
|
|
222
|
+
return /* @__PURE__ */ b(X, { children: t()?.label ?? s });
|
|
223
|
+
}, ce = ({ children: s, className: t }) => {
|
|
224
|
+
const { isOpen: o, ids: r, closePopover: l } = y();
|
|
225
|
+
return V(() => {
|
|
226
|
+
const n = (c) => {
|
|
227
|
+
!o || c.target.closest("[data-combo-box-popover]") || l();
|
|
228
|
+
};
|
|
229
|
+
return document.addEventListener("click", n), () => {
|
|
230
|
+
document.removeEventListener("click", n);
|
|
231
|
+
};
|
|
232
|
+
}, [o, l]), o ? /* @__PURE__ */ b("div", { id: r.current.popover, "data-combo-box-popover": !0, className: t, children: s }) : null;
|
|
233
|
+
}, ie = ({
|
|
234
|
+
label: s,
|
|
235
|
+
children: t,
|
|
236
|
+
className: o = "",
|
|
237
|
+
maxHeight: r,
|
|
238
|
+
onScroll: l
|
|
239
|
+
}) => {
|
|
240
|
+
const { ids: n, listRef: c } = y();
|
|
241
|
+
return /* @__PURE__ */ b(
|
|
242
|
+
"ul",
|
|
243
|
+
{
|
|
244
|
+
id: n.current.listbox,
|
|
245
|
+
"aria-label": s,
|
|
246
|
+
role: "listbox",
|
|
247
|
+
tabIndex: -1,
|
|
248
|
+
ref: c,
|
|
249
|
+
className: o,
|
|
250
|
+
style: { maxHeight: r },
|
|
251
|
+
onScroll: l,
|
|
252
|
+
children: t
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
}, ue = ({
|
|
256
|
+
placeholder: s = "Search",
|
|
257
|
+
value: t,
|
|
258
|
+
onChange: o,
|
|
259
|
+
onBlur: r
|
|
260
|
+
}) => {
|
|
261
|
+
const {
|
|
262
|
+
searchInputRef: l,
|
|
263
|
+
getVFocusedItem: n,
|
|
264
|
+
handleVFocusKeyboardControls: c,
|
|
265
|
+
closePopover: f
|
|
266
|
+
} = y();
|
|
267
|
+
return /* @__PURE__ */ b(
|
|
268
|
+
ee,
|
|
269
|
+
{
|
|
270
|
+
field: {
|
|
271
|
+
type: "search",
|
|
272
|
+
ref: l,
|
|
273
|
+
autoComplete: "off",
|
|
274
|
+
"aria-haspopup": "listbox",
|
|
275
|
+
"aria-autocomplete": "list",
|
|
276
|
+
role: "combobox",
|
|
277
|
+
"aria-activedescendant": n()?.id ?? "",
|
|
278
|
+
placeholder: s,
|
|
279
|
+
value: t,
|
|
280
|
+
onChange: o,
|
|
281
|
+
onKeyDown: c,
|
|
282
|
+
onBlur: (m) => {
|
|
283
|
+
m.stopPropagation(), !m.relatedTarget?.closest(
|
|
284
|
+
"[data-combo-box-popover]"
|
|
285
|
+
) && (f(), r?.());
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
);
|
|
290
|
+
}, pe = Object.freeze({
|
|
291
|
+
Root: oe,
|
|
292
|
+
Trigger: se,
|
|
293
|
+
Popover: ce,
|
|
294
|
+
SearchInput: ue,
|
|
295
|
+
List: ie,
|
|
296
|
+
Item: ne,
|
|
297
|
+
Value: re
|
|
298
|
+
});
|
|
299
|
+
export {
|
|
300
|
+
pe as ComboBox
|
|
301
|
+
};
|
|
302
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/combo-box-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseId,\n\tuseState,\n} from 'react'\nimport { TextInputBase } from '../form/text-input'\n\ntype TComboBoxItem = {\n\tid: string\n\tvalue: string\n\tlabel: string\n}\n\nconst idWithPrefix = (prefix: string, id: string) => {\n\treturn `${prefix}__${id}`\n}\n\n/**\n * Something to note as you move through the code\n * The distinction between the native browser focus and the visually focused item\n *\n * The native browser focus only ever alternates between the toggle and the search input, focus should never be on an individual {@link ComboBox.Item}\n * The currently selected item is visually identified with css and marked in the accessibility tree with `aria-selected`\n *\n * You can see more in the [combobox aria guide](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\n *\n * To make this terse in our implementation, we use the term `vFocus` to refer to the visually focused {@link ComboBox.Item}\n */\nconst NOTHING_VFOCUSED = -1\n\ntype ComboBoxIds = {\n\ttoggle?: string\n\tpopover?: string\n\tlistbox?: string\n}\n\nfunction assertUniqueIds(ids: ComboBoxIds) {\n\tconst idToKeysMap = new Map<string, string[]>()\n\tfor (const [key, id] of Object.entries(ids)) {\n\t\tif (!id) continue\n\t\tconst existingKeys = idToKeysMap.get(id) || []\n\t\tidToKeysMap.set(id, [...existingKeys, key])\n\t}\n\n\t// tells the caller specifically which ids are duplicated\n\tfor (const [id, keys] of idToKeysMap) {\n\t\tif (keys.length > 1) {\n\t\t\tthrow new Error(\n\t\t\t\t`ComboBox: id '${id}' is duplicated in ${keys.join(', ')}`\n\t\t\t)\n\t\t}\n\t}\n}\n\n/**\n * internally, we generate them if not provided\n * so we can assert truthiness\n */\ntype InternalComboBoxIds = {\n\ttoggle: string\n\tpopover: string\n\tlistbox: string\n}\n\ninterface ComboBoxContext {\n\taddItem: (item: TComboBoxItem) => void\n\tselectItem: (item: TComboBoxItem) => void\n\tvFocusByIdx: (idx: number) => void\n\tvFocus: (item: TComboBoxItem) => void\n\tvFocusNext: () => void\n\tvFocusPrev: () => void\n\tgetSelectedItem: () => TComboBoxItem | null\n\tgetVFocusedItem: () => TComboBoxItem | null\n\tgetItems: () => TComboBoxItem[]\n\tremoveItem: (item: TComboBoxItem) => void\n\tsearchInputRef: React.RefObject<HTMLInputElement>\n\ttoggleRef: React.RefObject<HTMLDivElement>\n\tlistRef: React.RefObject<HTMLUListElement>\n\tisOpen: boolean\n\tclosePopover: () => void\n\topenPopover: () => void\n\thandleVFocusKeyboardControls: (e: React.KeyboardEvent) => void\n\tids: React.MutableRefObject<InternalComboBoxIds>\n}\n\nconst ComboBoxContext = createContext<ComboBoxContext | null>(null)\n\nconst useComboBox = (): ComboBoxContext => {\n\tconst ctx = useContext(ComboBoxContext)\n\tif (!ctx) {\n\t\tthrow new Error('useComboBox must be used within a ComboBoxProvider')\n\t}\n\treturn ctx\n}\n\ninterface ComboBoxProviderProps {\n\tchildren: React.ReactNode\n\t/**\n\t * This does **not** loop the items, it loops the focus when the items are exhausted.\n\t * Meaning that if set to `true` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * the focus will not loop back around to the first {@link ComboBox.Item}, it will return focus to the {@link ComboBox.Trigger} and close the popover.\n\t * Otherwise, if set to `false` and the user navigates to the last {@link ComboBox.Item} and presses `ArrowDown`,\n\t * it will just remain there.\n\t *\n\t * @default true\n\t */\n\tkeyboardFocusLoop?: boolean\n\tids?: ComboBoxIds\n\tonChangeVFocusedOption?: (option: TComboBoxItem) => void\n\tonChangeSelectedOption?: (option: TComboBoxItem) => void\n}\n\nconst ComboBoxProvider = ({\n\tchildren,\n\tkeyboardFocusLoop = true,\n\tids: providedIds = {},\n\tonChangeVFocusedOption,\n\tonChangeSelectedOption,\n}: ComboBoxProviderProps) => {\n\tassertUniqueIds(providedIds)\n\n\tconst itemsRef = useRef<TComboBoxItem[]>([])\n\tconst internalUsedIds = useRef(new Set<TComboBoxItem['id']>())\n\tconst [selectedItem, _setSelectedItem] = useState<TComboBoxItem | null>(null)\n\tconst [vFocusedItemIdx, _setVFocusedItemIdx] = useState(NOTHING_VFOCUSED)\n\tconst toggleRef = useRef<HTMLDivElement>(null)\n\tconst searchInputRef = useRef<HTMLInputElement>(null)\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst listRef = useRef<HTMLUListElement>(null)\n\n\tconst fallBackToggleId = idWithPrefix('hashi-combo-box-toggle', useId())\n\tconst fallBackPopoverId = idWithPrefix('hashi-combo-box-popover', useId())\n\tconst fallBackListboxId = idWithPrefix('hashi-combo-box-listbox', useId())\n\n\t// proxy the react state to simulate event listeners\n\tconst setSelectedItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\t_setSelectedItem(item)\n\t\t\tonChangeSelectedOption?.(item)\n\t\t},\n\t\t[onChangeSelectedOption]\n\t)\n\n\tconst setVFocusedItemIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\t_setVFocusedItemIdx(idx)\n\t\t\tonChangeVFocusedOption?.(itemsRef.current[idx])\n\t\t},\n\t\t[onChangeVFocusedOption]\n\t)\n\n\tconst ids = useRef<InternalComboBoxIds>({\n\t\ttoggle: providedIds.toggle ?? fallBackToggleId,\n\t\tpopover: providedIds.popover ?? fallBackPopoverId,\n\t\tlistbox: providedIds.listbox ?? fallBackListboxId,\n\t})\n\n\tconst vFocusByIdx = useCallback(\n\t\t(idx: number) => {\n\t\t\tsetVFocusedItemIdx(idx)\n\t\t},\n\t\t[setVFocusedItemIdx]\n\t)\n\n\tconst vFocusNext = useCallback(() => {\n\t\tconst items = itemsRef.current\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialNextIndex = vFocusedItemIdx + 1\n\t\tconst isAtEnd = potentialNextIndex >= items.length\n\t\tlet idx\n\t\tif (isAtEnd && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtEnd ? vFocusedItemIdx : potentialNextIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocusPrev = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return 0\n\t\tconst potentialPreviousIndex = vFocusedItemIdx - 1\n\t\tconst isAtStart = potentialPreviousIndex < 0\n\t\tlet idx\n\t\tif (isAtStart && keyboardFocusLoop) {\n\t\t\tidx = NOTHING_VFOCUSED\n\t\t\tsetIsOpen(false)\n\t\t} else {\n\t\t\tidx = isAtStart ? vFocusedItemIdx : potentialPreviousIndex\n\t\t}\n\n\t\tvFocusByIdx(idx)\n\t}, [keyboardFocusLoop, vFocusedItemIdx, vFocusByIdx])\n\n\tconst vFocus = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error('ComboBox: Item not found', item)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetVFocusedItemIdx(foundItemIndex)\n\t\t},\n\t\t[setVFocusedItemIdx]\n\t)\n\n\tconst getVFocusedItem = useCallback(() => {\n\t\tif (vFocusedItemIdx === NOTHING_VFOCUSED) return null\n\t\treturn itemsRef.current[vFocusedItemIdx] || null\n\t}, [vFocusedItemIdx])\n\n\tconst selectItem = useCallback(\n\t\t(item: TComboBoxItem) => {\n\t\t\tconst foundItemIndex = itemsRef.current.findIndex((i) => i.id === item.id)\n\t\t\tif (foundItemIndex === -1) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'ComboBox: Item not found, Selected item not updated',\n\t\t\t\t\titem\n\t\t\t\t)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetSelectedItem(item)\n\t\t\tsetIsOpen(false)\n\t\t},\n\t\t[setSelectedItem]\n\t)\n\n\tconst getSelectedItem = useCallback(() => {\n\t\treturn selectedItem\n\t}, [selectedItem])\n\n\tconst addItem = useCallback((item: TComboBoxItem) => {\n\t\tif (internalUsedIds.current.has(item.id)) {\n\t\t\tconst existing = itemsRef.current.find((i) => i.id === item.id)\n\t\t\tconst attemptedToAdd = item\n\t\t\tconst dupes = JSON.stringify({\n\t\t\t\texisting,\n\t\t\t\tattemptedToAdd,\n\t\t\t})\n\t\t\tconst errMessage = `Each ComboBox.Item must have a unique id.\\n Found items with duplicate ids: ${dupes}`\n\t\t\tthrow Error(errMessage)\n\t\t}\n\t\tinternalUsedIds.current.add(item.id)\n\t\titemsRef.current.push(item)\n\t}, [])\n\n\tconst getItems = useCallback(() => {\n\t\treturn itemsRef.current\n\t}, [])\n\n\tconst removeItem = useCallback((item: TComboBoxItem) => {\n\t\tinternalUsedIds.current.delete(item.id)\n\t\titemsRef.current = itemsRef.current.filter((i) => i.id !== item.id)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsearchInputRef.current?.focus()\n\t\t}\n\t}, [isOpen, searchInputRef, toggleRef])\n\n\t// if someone navigates to an item, via the keyboard, scroll it into view\n\tuseEffect(() => {\n\t\tconst vFocusedItem = getVFocusedItem()\n\t\tconst list = listRef.current\n\t\tif (vFocusedItem && list) {\n\t\t\tconst itemElement = list.querySelector(\n\t\t\t\t`[data-combo-box-item-id=\"${vFocusedItem.id}\"]`\n\t\t\t)\n\t\t\titemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })\n\t\t}\n\t}, [getVFocusedItem])\n\n\tconst closePopover = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tsetVFocusedItemIdx(NOTHING_VFOCUSED)\n\t}, [setVFocusedItemIdx])\n\n\tconst openPopover = useCallback(() => {\n\t\tsetIsOpen(true)\n\t}, [])\n\n\t// we need this event handler in several places because\n\t// it has to be attached to a focused element\n\t// if there is a search input in use, that will be the focused element\n\t// otherwise, it will be the toggle element\n\tconst handleVFocusKeyboardControls = (e: React.KeyboardEvent) => {\n\t\tconst isScrollingKey = e.key === 'ArrowDown' || e.key === 'ArrowUp'\n\t\tconst isSpaceKey = e.key === ' '\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\tconst isSpacePressWithoutSearchInput = isSpaceKey && !hasSearchInput\n\t\tif (isScrollingKey || isSpacePressWithoutSearchInput) {\n\t\t\te.preventDefault()\n\t\t}\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape': {\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tconst nothingVFocused = getVFocusedItem() === null\n\t\t\t\t// if someone presses down on the search input whilst nothing is vFocused, vFocus the first item\n\t\t\t\tif (isOpen && nothingVFocused) {\n\t\t\t\t\tvFocusByIdx(0)\n\t\t\t\t} else {\n\t\t\t\t\tvFocusNext()\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tvFocusPrev()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'Enter': {\n\t\t\t\tconst currItem = getVFocusedItem()\n\t\t\t\tif (currItem) {\n\t\t\t\t\tselectItem(currItem)\n\t\t\t\t}\n\t\t\t\tclosePopover()\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault:\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\treturn (\n\t\t<ComboBoxContext.Provider\n\t\t\tvalue={{\n\t\t\t\taddItem,\n\t\t\t\tselectItem,\n\t\t\t\tvFocus,\n\t\t\t\tvFocusByIdx,\n\t\t\t\tvFocusNext,\n\t\t\t\tvFocusPrev,\n\t\t\t\tgetSelectedItem,\n\t\t\t\tgetVFocusedItem,\n\t\t\t\tgetItems,\n\t\t\t\tremoveItem,\n\t\t\t\tsearchInputRef,\n\t\t\t\ttoggleRef,\n\t\t\t\tlistRef,\n\t\t\t\tisOpen,\n\t\t\t\tclosePopover,\n\t\t\t\topenPopover,\n\t\t\t\tids,\n\t\t\t\thandleVFocusKeyboardControls,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</ComboBoxContext.Provider>\n\t)\n}\n\ninterface ComboBoxItemProps\n\textends Omit<\n\t\tReact.HTMLAttributes<HTMLLIElement>,\n\t\t'role' | 'aria-selected' | 'onClick' | 'onKeyDown' | 'onMouseEnter'\n\t> {\n\tvalue: string\n\tlabel: string\n}\n\nconst ComboBoxItem = ({\n\tid: providedId,\n\tvalue,\n\tlabel,\n\tchildren,\n\t...restProps\n}: React.PropsWithChildren<ComboBoxItemProps>) => {\n\tconst generatedId = idWithPrefix('hashi-combo-box-item', useId())\n\tconst id = providedId ?? generatedId\n\tconst { addItem, removeItem, getVFocusedItem, vFocus, selectItem } =\n\t\tuseComboBox()\n\n\tuseEffect(() => {\n\t\taddItem({ id, value, label })\n\t\treturn () => removeItem({ id, value, label })\n\t}, [addItem, id, removeItem, value, label])\n\n\tconst isVFocused = getVFocusedItem()?.id === id\n\n\treturn (\n\t\t<li\n\t\t\tdata-combo-box-item-id={id}\n\t\t\trole=\"option\"\n\t\t\taria-selected={isVFocused}\n\t\t\tdata-vfocused={isVFocused}\n\t\t\tonClick={() => selectItem({ id, value, label })}\n\t\t\tonMouseEnter={() => vFocus({ id, value, label })}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t)\n}\n\ninterface ComboBoxTriggerProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxTrigger = ({ children, className }: ComboBoxTriggerProps) => {\n\tconst {\n\t\ttoggleRef,\n\t\topenPopover,\n\t\tclosePopover,\n\t\tisOpen,\n\t\tids,\n\t\thandleVFocusKeyboardControls,\n\t\tsearchInputRef,\n\t} = useComboBox()\n\n\tconst handleClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation() // an external click may be registered as an outside click which will close the popover\n\t\tif (isOpen) {\n\t\t\tclosePopover()\n\t\t} else {\n\t\t\topenPopover()\n\t\t}\n\t}\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tconst isOpenKey =\n\t\t\te.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' '\n\t\tconst isClosed = isOpen === false\n\n\t\tif (isOpenKey && isClosed) {\n\t\t\te.preventDefault()\n\t\t\topenPopover()\n\t\t\treturn\n\t\t}\n\n\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t// if there is a search input, the event handler will be bound there\n\t\tif (!hasSearchInput && isOpen) {\n\t\t\thandleVFocusKeyboardControls(e)\n\t\t}\n\t}\n\n\tconst getOnBlur = () => {\n\t\treturn (e: React.FocusEvent) => {\n\t\t\tconst isClickInside = e.relatedTarget?.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tconst hasSearchInput = searchInputRef.current !== null\n\t\t\tif (!hasSearchInput) {\n\t\t\t\tclosePopover()\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole=\"combobox\"\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\ttabIndex={0}\n\t\t\tref={toggleRef}\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-expanded={isOpen}\n\t\t\taria-controls={ids.current.popover}\n\t\t\tclassName={className}\n\t\t\tonBlur={getOnBlur()}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxValueProps {\n\tplaceholder?: string\n}\n\nconst ComboBoxValue = ({\n\tplaceholder = 'Select an option',\n}: ComboBoxValueProps) => {\n\tconst { getSelectedItem } = useComboBox()\n\treturn <>{getSelectedItem()?.label ?? placeholder}</>\n}\n\ninterface ComboBoxPopoverProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\nconst ComboBoxPopover = ({ children, className }: ComboBoxPopoverProps) => {\n\tconst { isOpen, ids, closePopover } = useComboBox()\n\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (e: MouseEvent) => {\n\t\t\tif (!isOpen) return\n\t\t\tconst target = e.target as HTMLElement\n\t\t\tconst isClickInside = target.closest('[data-combo-box-popover]')\n\t\t\tif (isClickInside) return\n\t\t\tclosePopover()\n\t\t}\n\n\t\tdocument.addEventListener('click', handleClickOutside)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('click', handleClickOutside)\n\t\t}\n\t}, [isOpen, closePopover])\n\n\tif (!isOpen) return null\n\n\treturn (\n\t\t<div id={ids.current.popover} data-combo-box-popover className={className}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\ninterface ComboBoxListProps extends React.PropsWithChildren {\n\t/**\n\t * Not rendered, used to hint assistive technologies,\n\t * indicate the type of options available in the popover\n\t * eg. Schools | Languages | Countries\n\t */\n\tlabel: string\n\tclassName?: string\n\tmaxHeight?: `${number}em` | `${number}px` | `${number}%`\n\tonScroll?: (e: React.UIEvent<HTMLUListElement>) => void\n}\n\nconst ComboBoxList = ({\n\tlabel,\n\tchildren,\n\tclassName = '',\n\tmaxHeight,\n\tonScroll,\n}: ComboBoxListProps) => {\n\tconst { ids, listRef } = useComboBox()\n\n\treturn (\n\t\t<ul\n\t\t\tid={ids.current.listbox}\n\t\t\taria-label={label}\n\t\t\trole=\"listbox\"\n\t\t\ttabIndex={-1}\n\t\t\tref={listRef}\n\t\t\tclassName={className}\n\t\t\tstyle={{ maxHeight }}\n\t\t\tonScroll={onScroll}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t)\n}\n\ninterface ComboBoxSearchInputProps {\n\tplaceholder?: string\n\tvalue?: string\n\tonChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n\tonBlur?: () => void\n}\n\nconst ComboBoxSearchInput = ({\n\tplaceholder = 'Search',\n\tvalue,\n\tonChange,\n\tonBlur,\n}: ComboBoxSearchInputProps) => {\n\tconst {\n\t\tsearchInputRef,\n\t\tgetVFocusedItem,\n\t\thandleVFocusKeyboardControls,\n\t\tclosePopover,\n\t} = useComboBox()\n\n\treturn (\n\t\t<TextInputBase\n\t\t\tfield={{\n\t\t\t\ttype: 'search',\n\t\t\t\tref: searchInputRef,\n\t\t\t\tautoComplete: 'off',\n\t\t\t\t'aria-haspopup': 'listbox',\n\t\t\t\t'aria-autocomplete': 'list',\n\t\t\t\trole: 'combobox',\n\t\t\t\t'aria-activedescendant': getVFocusedItem()?.id ?? '',\n\t\t\t\tplaceholder,\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonKeyDown: handleVFocusKeyboardControls,\n\t\t\t\tonBlur: (e) => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tconst isClickInside = e.relatedTarget?.closest(\n\t\t\t\t\t\t'[data-combo-box-popover]'\n\t\t\t\t\t)\n\t\t\t\t\tif (isClickInside) return\n\t\t\t\t\tclosePopover()\n\t\t\t\t\tonBlur?.()\n\t\t\t\t},\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nexport type { TComboBoxItem, ComboBoxListProps, ComboBoxSearchInputProps }\n\nexport const ComboBox = Object.freeze({\n\tRoot: ComboBoxProvider,\n\tTrigger: ComboBoxTrigger,\n\tPopover: ComboBoxPopover,\n\tSearchInput: ComboBoxSearchInput,\n\tList: ComboBoxList,\n\tItem: ComboBoxItem,\n\tValue: ComboBoxValue,\n})\n"],"names":["idWithPrefix","prefix","id","NOTHING_VFOCUSED","assertUniqueIds","ids","idToKeysMap","key","existingKeys","keys","ComboBoxContext","createContext","ctx","useContext","ComboBoxProvider","children","keyboardFocusLoop","providedIds","onChangeVFocusedOption","onChangeSelectedOption","itemsRef","internalUsedIds","useRef","selectedItem","_setSelectedItem","useState","vFocusedItemIdx","toggleRef","searchInputRef","isOpen","setIsOpen","listRef","fallBackToggleId","useId","fallBackPopoverId","fallBackListboxId","useCallback","item","setVFocusedItemIdx","idx","_setVFocusedItemIdx","vFocusByIdx","vFocusNext","items","potentialNextIndex","isAtEnd","vFocusPrev","potentialPreviousIndex","isAtStart","foundItemIndex","i","getVFocusedItem","setSelectedItem","addItem","existing","errMessage","getItems","removeItem","useEffect","vFocusedItem","list","closePopover","openPopover","handleVFocusKeyboardControls","isScrollingKey","isSpaceKey","hasSearchInput","nothingVFocused","currItem","selectItem","jsx","vFocus","getSelectedItem","ComboBoxItem","providedId","value","label","restProps","generatedId","useComboBox","isVFocused","ComboBoxTrigger","className","handleClick","e","getOnBlur","handleKeyDown","placeholder","Fragment","ComboBoxPopover","handleClickOutside","ComboBoxList","maxHeight","onScroll","ComboBoxSearchInput","onChange","onBlur","TextInputBase","ComboBox","ComboBoxValue"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import a from "classnames";
|
|
3
|
+
import { DismissButton as l } from "../dismiss-button/index.js";
|
|
4
|
+
import r from "./dialog.module.scss.js";
|
|
5
|
+
const c = ({ className: s }) => /* @__PURE__ */ o("div", { className: a(r.overlay, s) }), p = ({ children: s, className: m, onDismiss: i, ...e }) => /* @__PURE__ */ t("dialog", { className: a(r.wrapper, m), ...e, children: [
|
|
6
|
+
/* @__PURE__ */ o(l, { onClick: i, className: r.dismiss }),
|
|
7
|
+
s
|
|
8
|
+
] }), u = {
|
|
9
|
+
Overlay: c,
|
|
10
|
+
Wrapper: p
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
u as Dialog
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/dialog-primitive/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DismissButton } from '../dismiss-button'\nimport type { DetailedHTMLProps, DialogHTMLAttributes } from 'react'\nimport s from './dialog.module.scss'\n\ninterface OverlayProps {\n\tclassName?: string\n}\n\nconst Overlay = ({ className }: OverlayProps) => {\n\treturn <div className={classNames(s.overlay, className)}></div>\n}\n\ninterface DialogProps\n\textends DetailedHTMLProps<\n\t\tDialogHTMLAttributes<HTMLDialogElement>,\n\t\tHTMLDialogElement\n\t> {\n\tonDismiss: () => void\n}\n\nconst Wrapper = ({ children, className, onDismiss, ...rest }: DialogProps) => {\n\treturn (\n\t\t<dialog className={classNames(s.wrapper, className)} {...rest}>\n\t\t\t<DismissButton onClick={onDismiss} className={s.dismiss} />\n\t\t\t{children}\n\t\t</dialog>\n\t)\n}\n\nconst Dialog = {\n\tOverlay,\n\tWrapper,\n}\n\nexport { Dialog }\n"],"names":["Overlay","className","classNames","s","Wrapper","children","onDismiss","rest","jsxs","jsx","DismissButton","Dialog"],"mappings":";;;;AASA,MAAMA,IAAU,CAAC,EAAE,WAAAC,0BACV,OAAA,EAAI,WAAWC,EAAWC,EAAE,SAASF,CAAS,GAAG,GAWpDG,IAAU,CAAC,EAAE,UAAAC,GAAU,WAAAJ,GAAW,WAAAK,GAAW,GAAGC,QAEpD,gBAAAC,EAAC,YAAO,WAAWN,EAAWC,EAAE,SAASF,CAAS,GAAI,GAAGM,GACxD,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAc,SAASJ,GAAW,WAAWH,EAAE,SAAS;AAAA,EACxDE;AAAA,GACF,GAIIM,IAAS;AAAA,EACd,SAAAX;AAAA,EACA,SAAAI;AACD;"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as i, Fragment as g } from "react/jsx-runtime";
|
|
3
|
+
import { useState as P, useId as x, useEffect as D, useCallback as f, useMemo as C } from "react";
|
|
4
|
+
import N from "classnames";
|
|
5
|
+
import { useDisclosurePrimitive as T, DisclosurePrimitiveContext as h } from "./use-disclosure-primitive.js";
|
|
6
|
+
import j from "./styles.module.css.js";
|
|
7
|
+
const y = ({
|
|
8
|
+
onClose: e,
|
|
9
|
+
children: t,
|
|
10
|
+
className: p,
|
|
11
|
+
trackedIsOpen: o = !1,
|
|
12
|
+
containsInteractive: r = !1,
|
|
13
|
+
ariaLabel: c = "Toggle display",
|
|
14
|
+
...a
|
|
15
|
+
}) => {
|
|
16
|
+
const [n, s] = P(o), l = "content-" + x();
|
|
17
|
+
D(() => {
|
|
18
|
+
s(o);
|
|
19
|
+
}, [o]);
|
|
20
|
+
const m = f(() => {
|
|
21
|
+
s(!1), e && e();
|
|
22
|
+
}, [s, e]), u = f(() => {
|
|
23
|
+
s((d) => !d);
|
|
24
|
+
}, [s]), v = C(
|
|
25
|
+
() => ({
|
|
26
|
+
isOpen: n,
|
|
27
|
+
onClickToggle: u,
|
|
28
|
+
closeDisclosure: m,
|
|
29
|
+
contentId: l,
|
|
30
|
+
containsInteractive: r,
|
|
31
|
+
ariaLabel: c
|
|
32
|
+
}),
|
|
33
|
+
[
|
|
34
|
+
n,
|
|
35
|
+
u,
|
|
36
|
+
m,
|
|
37
|
+
l,
|
|
38
|
+
r,
|
|
39
|
+
c
|
|
40
|
+
]
|
|
41
|
+
);
|
|
42
|
+
return /* @__PURE__ */ i(h.Provider, { value: v, children: /* @__PURE__ */ i(
|
|
43
|
+
"div",
|
|
44
|
+
{
|
|
45
|
+
className: N(j["disclosure-primitive"], p),
|
|
46
|
+
...a,
|
|
47
|
+
children: t
|
|
48
|
+
}
|
|
49
|
+
) });
|
|
50
|
+
}, E = ({ children: e }) => {
|
|
51
|
+
const { isOpen: t } = T();
|
|
52
|
+
return t ? /* @__PURE__ */ i(g, { children: e }) : null;
|
|
53
|
+
}, b = { Provider: y, Content: E };
|
|
54
|
+
export {
|
|
55
|
+
b as DisclosurePrimitive
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/disclosure-primitive/index.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport {\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseCallback,\n\tuseId,\n\ttype HTMLAttributes,\n} from 'react'\nimport classNames from 'classnames'\nimport {\n\tDisclosurePrimitiveContext,\n\tuseDisclosurePrimitive,\n\ttype DisclosurePrimitiveContextState,\n} from './use-disclosure-primitive'\nimport s from './styles.module.css'\n\ninterface DisclosurePrimitiveProviderProps\n\textends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Callback fired when the disclosure is closed (optional)\n\t */\n\tonClose?: () => void\n\t/**\n\t * Hook into this trackedIsOpen property to access the state of isOpen\n\t * @default false\n\t * */\n\ttrackedIsOpen?: boolean\n\tcontainsInteractive?: boolean\n\tariaLabel?: string\n}\n\nconst Provider = ({\n\tonClose,\n\tchildren,\n\tclassName,\n\ttrackedIsOpen = false,\n\tcontainsInteractive = false,\n\tariaLabel = 'Toggle display',\n\t...rest\n}: DisclosurePrimitiveProviderProps) => {\n\tconst [isOpen, setIsOpen] = useState(trackedIsOpen)\n\tconst contentId = 'content-' + useId()\n\n\t// update the provider state if the trackedIsOpen prop changes\n\tuseEffect(() => {\n\t\tsetIsOpen(trackedIsOpen)\n\t}, [trackedIsOpen])\n\n\tconst closeDisclosure = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tif (onClose) {\n\t\t\tonClose()\n\t\t}\n\t}, [setIsOpen, onClose])\n\n\tconst onClickToggle = useCallback(() => {\n\t\tsetIsOpen((prevState) => !prevState)\n\t}, [setIsOpen])\n\n\tconst contextValue: DisclosurePrimitiveContextState = useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t}),\n\t\t[\n\t\t\tisOpen,\n\t\t\tonClickToggle,\n\t\t\tcloseDisclosure,\n\t\t\tcontentId,\n\t\t\tcontainsInteractive,\n\t\t\tariaLabel,\n\t\t]\n\t)\n\n\treturn (\n\t\t<DisclosurePrimitiveContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s['disclosure-primitive'], className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</DisclosurePrimitiveContext.Provider>\n\t)\n}\n\nconst Content = ({ children }: PropsWithChildren) => {\n\tconst { isOpen } = useDisclosurePrimitive()\n\tif (!isOpen) {\n\t\treturn null\n\t}\n\n\treturn <>{children}</>\n}\n\nconst DisclosurePrimitive = { Provider, Content }\n\nexport { DisclosurePrimitive }\n"],"names":["Provider","onClose","children","className","trackedIsOpen","containsInteractive","ariaLabel","rest","isOpen","setIsOpen","contentId","useId","useEffect","closeDisclosure","useCallback","prevState","contextValue","useMemo","onClickToggle","jsx","DisclosurePrimitiveContext","classNames","s","useDisclosurePrimitive","Fragment"],"mappings":";;;;;;AAkCkB,MACjBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,qBAAAC,IAAY;AAAA,EACZ,WAAAC,IAAG;AAAA,EACJ,GAAAC;AACC,MAAA;AACA,QAAM,CAAAC,GAAAC,CAAY,MAAaL,CAAM,GAGrCM,IAAgB,aAAAC,EAAA;AACf,EAAAC,EAAA,MAAU;AACX,IAAAH,EAAIL,CAAc;AAAA,EAElB,GAAA,CAAAA,CAAM,CAAA;AACL,QAAAS,IAAeC,EAAA,MAAA;AACf,IAAAL,IAAa,QAEbR,EAAA;AAAA,EAGD,GAAA,CAAAQ,GAAMR,CAAgB,CAAA,OACVa,QAAwB;AACpC,IAAAL,EAAI,CAASM,MAAC,CAAAA,CAAA;AAAA,EAEd,GAAA,CAAAN,CAAM,CAAA,GACLO,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,QAAAT;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAL;AAAA,MACA,WAAAH;AAAA,MACA,qBAAAL;AAAA,MACD,WAAAC;AAAA,IACA;AAAA,IAAA;AAAA,MAECE;AAAA,MACAU;AAAA,MACAL;AAAA,MACAH;AAAA,MACAL;AAAA,MAAAC;AAAA,IAEF;AAAA,EAEA;AAEE,SAAC,gBAAAa,EAAAC,EAAA,UAAA,EAAA,OAAAJ,GAAA,UAAA,gBAAAG;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGE,EAAAC,EAAA,sBAAA,GAAAnB,CAAA;AAAA,MAEH,GAAAI;AAAA,MAAA,UAAAL;AAAA;EAIL,EAAA,CAAA;AAEA,OACS,CAAA,EAAO,UAAAA;AACf,QAAK,EAAA,QAAAM,EAAQ,IAAAe,EAAA;AACZ,aAIF,gBAAAJ,EAAAK,GAAA,EAAA,UAAAtB,EAAA,CAAA,IAHC;AAKD;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext as t, useContext as o } from "react";
|
|
3
|
+
const i = t(void 0);
|
|
4
|
+
i.displayName = "DisclosurePrimitiveContext";
|
|
5
|
+
function s() {
|
|
6
|
+
const e = o(i);
|
|
7
|
+
if (e === void 0)
|
|
8
|
+
throw new Error(
|
|
9
|
+
"useDisclosurePrimitive must be used within a DisclosurePrimitiveContext.Provider"
|
|
10
|
+
);
|
|
11
|
+
return e;
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
i as DisclosurePrimitiveContext,
|
|
15
|
+
s as useDisclosurePrimitive
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=use-disclosure-primitive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-disclosure-primitive.js","sources":["../../../src/components/disclosure-primitive/use-disclosure-primitive.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type MouseEventHandler } from 'react'\n\nexport interface DisclosurePrimitiveContextState {\n\tisOpen: boolean\n\tonClickToggle: MouseEventHandler<HTMLButtonElement>\n\tcloseDisclosure: () => void\n\tcontentId: string\n\tcontainsInteractive: boolean\n\tariaLabel: string\n}\n\nexport const DisclosurePrimitiveContext = createContext<\n\tDisclosurePrimitiveContextState | undefined\n>(undefined)\nDisclosurePrimitiveContext.displayName = 'DisclosurePrimitiveContext'\n\nexport function useDisclosurePrimitive(): DisclosurePrimitiveContextState {\n\tconst context = useContext(DisclosurePrimitiveContext)\n\tif (context === undefined) {\n\t\tthrow new Error(\n\t\t\t'useDisclosurePrimitive must be used within a DisclosurePrimitiveContext.Provider'\n\t\t)\n\t}\n\treturn context\n}\n"],"names":["DisclosurePrimitiveContext","createContext","useDisclosurePrimitive","context","useContext"],"mappings":";;AAgBA,MAAAA,IAA2BC,EAAc,MAAA;AAElCD,gBAAmE;AACzE,SAAME;AACN,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AAAA,UACT,IAAA;AAAA,MACD;AAAA,IACD;AAED,SAAAA;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import m from "classnames";
|
|
3
|
+
import { FlightIcon as r } from "../flight-icon/index.js";
|
|
4
|
+
import e from "./styles.module.scss.js";
|
|
5
|
+
const c = ({
|
|
6
|
+
ariaLabel: t = "Dismiss",
|
|
7
|
+
onClick: o,
|
|
8
|
+
className: i
|
|
9
|
+
}) => /* @__PURE__ */ s(
|
|
10
|
+
"button",
|
|
11
|
+
{
|
|
12
|
+
className: m(e["dismiss-button"], i),
|
|
13
|
+
type: "button",
|
|
14
|
+
"aria-label": t,
|
|
15
|
+
onClick: o,
|
|
16
|
+
children: /* @__PURE__ */ s(r, { size: 16, name: "x" })
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
export {
|
|
20
|
+
c as DismissButton
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/dismiss-button/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.scss'\n\ninterface DismissButtonProps {\n\tariaLabel?: string\n\tonClick: React.MouseEventHandler<HTMLButtonElement>\n\tclassName?: string\n}\n\nconst DismissButton = ({\n\tariaLabel = 'Dismiss',\n\tonClick,\n\tclassName,\n}: DismissButtonProps) => {\n\treturn (\n\t\t<button\n\t\t\tclassName={classNames(s['dismiss-button'], className)}\n\t\t\ttype=\"button\"\n\t\t\taria-label={ariaLabel}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<FlightIcon size={16} name=\"x\" />\n\t\t</button>\n\t)\n}\n\nexport type { DismissButtonProps }\nexport { DismissButton }\n"],"names":["DismissButton","ariaLabel","onClick","className","jsx","classNames","s","FlightIcon"],"mappings":";;;;AAUA,MAAMA,IAAgB,CAAC;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,WAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,gBAAgB,GAAGH,CAAS;AAAA,IACpD,MAAK;AAAA,IACL,cAAYF;AAAA,IACZ,SAAAC;AAAA,IAEA,UAAA,gBAAAE,EAACG,GAAA,EAAW,MAAM,IAAI,MAAK,IAAA,CAAI;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import s from "classnames";
|
|
3
|
+
import { Content as N, Provider as f } from "../menu-primitive/index.js";
|
|
4
|
+
import { ToggleButton as w } from "./toggle-button/index.js";
|
|
5
|
+
import { ListItem as u } from "./list-item/index.js";
|
|
6
|
+
import t from "./styles.module.css.js";
|
|
7
|
+
const a = ({
|
|
8
|
+
isFullWidth: o,
|
|
9
|
+
onClose: e,
|
|
10
|
+
children: r,
|
|
11
|
+
className: i,
|
|
12
|
+
...l
|
|
13
|
+
}) => /* @__PURE__ */ n(
|
|
14
|
+
f,
|
|
15
|
+
{
|
|
16
|
+
className: s(
|
|
17
|
+
{
|
|
18
|
+
[t["width-full"]]: o
|
|
19
|
+
},
|
|
20
|
+
i
|
|
21
|
+
),
|
|
22
|
+
onClose: e,
|
|
23
|
+
isFullWidth: o,
|
|
24
|
+
...l,
|
|
25
|
+
children: r
|
|
26
|
+
}
|
|
27
|
+
), d = ({
|
|
28
|
+
listPosition: o = "bottom-right",
|
|
29
|
+
width: e,
|
|
30
|
+
height: r,
|
|
31
|
+
children: i
|
|
32
|
+
}) => /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
className: s(
|
|
36
|
+
t.content,
|
|
37
|
+
t[`content-position-${o}`],
|
|
38
|
+
{ [t["content-fixed-width"]]: !!e }
|
|
39
|
+
),
|
|
40
|
+
style: { width: e, height: r },
|
|
41
|
+
children: i
|
|
42
|
+
}
|
|
43
|
+
) }), m = ({ children: o }) => /* @__PURE__ */ n("ul", { className: t.list, children: o }), p = ({
|
|
44
|
+
hasDivider: o,
|
|
45
|
+
children: e,
|
|
46
|
+
...r
|
|
47
|
+
}) => /* @__PURE__ */ n(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
className: s(t.header, {
|
|
51
|
+
[t["header-with-divider"]]: o
|
|
52
|
+
}),
|
|
53
|
+
...r,
|
|
54
|
+
children: e
|
|
55
|
+
}
|
|
56
|
+
), c = ({
|
|
57
|
+
hasDivider: o,
|
|
58
|
+
children: e,
|
|
59
|
+
...r
|
|
60
|
+
}) => /* @__PURE__ */ n(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
className: s(t.footer, {
|
|
64
|
+
[t["footer-with-divider"]]: o
|
|
65
|
+
}),
|
|
66
|
+
...r,
|
|
67
|
+
children: e
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
a.displayName = "Dropdown.Root";
|
|
71
|
+
d.displayName = "Dropdown.Content";
|
|
72
|
+
m.displayName = "Dropdown.List";
|
|
73
|
+
p.displayName = "Dropdown.Header";
|
|
74
|
+
c.displayName = "Dropdown.Footer";
|
|
75
|
+
const x = { Root: a, ToggleButton: w, Content: d, List: m, Header: p, Footer: c, ListItem: u };
|
|
76
|
+
export {
|
|
77
|
+
x as Dropdown
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { ToggleButton } from './toggle-button'\nimport type { DropdownToggleButtonProps } from './toggle-button'\nimport { ListItem } from './list-item'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * If true, container is given full width styles. (Added by web presence team)\n\t */\n\tisFullWidth?: boolean\n\t/**\n\t * Callback function invoked when the Dropdown is closed, if provided.\n\t */\n\tonClose?: () => void\n}\n\nconst Root = ({\n\tisFullWidth,\n\tonClose,\n\tchildren,\n\tclassName,\n\t...rest\n}: DropdownProps) => {\n\treturn (\n\t\t<MenuPrimitive.Provider\n\t\t\tclassName={classNames(\n\t\t\t\t{\n\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClose={onClose}\n\t\t\tisFullWidth={isFullWidth}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</MenuPrimitive.Provider>\n\t)\n}\n\ninterface DropdownContentProps {\n\tlistPosition?:\n\t\t| 'right'\n\t\t| 'left'\n\t\t| 'bottom-left'\n\t\t| 'bottom-right'\n\t\t| 'top-left'\n\t\t| 'top-right'\n\twidth?: `${number}px` | `${number}em` | `${number}%`\n\t/**\n\t * If a height prop is provided then the list will have a fixed height.\n\t */\n\theight?: `${number}px` | `${number}em`\n\tchildren: ReactNode\n}\n\nconst Content = ({\n\tlistPosition = 'bottom-right',\n\twidth,\n\theight,\n\tchildren,\n}: DropdownContentProps) => {\n\treturn (\n\t\t<MenuPrimitive.Content>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.content,\n\t\t\t\t\ts[`content-position-${listPosition}`],\n\t\t\t\t\t{ [s['content-fixed-width']]: !!width }\n\t\t\t\t)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</MenuPrimitive.Content>\n\t)\n}\n\nconst List = ({ children }: { children: ReactNode }) => {\n\treturn <ul className={s.list}>{children}</ul>\n}\n\ninterface DropdownHeaderFooterProps extends HTMLAttributes<HTMLDivElement> {\n\thasDivider?: boolean\n}\n\nconst Header = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.header, {\n\t\t\t\t[s['header-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nconst Footer = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.footer, {\n\t\t\t\t[s['footer-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nRoot.displayName = 'Dropdown.Root'\nContent.displayName = 'Dropdown.Content'\nList.displayName = 'Dropdown.List'\nHeader.displayName = 'Dropdown.Header'\nFooter.displayName = 'Dropdown.Footer'\n\nconst Dropdown = { Root, ToggleButton, Content, List, Header, Footer, ListItem }\n\nexport type {\n\tDropdownProps,\n\tDropdownContentProps,\n\tDropdownHeaderFooterProps,\n\tDropdownToggleButtonProps,\n}\nexport { Dropdown }\n"],"names":["Root","isFullWidth","onClose","children","className","rest","jsx","MenuPrimitive.Provider","classNames","s","Content","listPosition","width","height","MenuPrimitive.Content","List","Header","hasDivider","Footer","Dropdown","ToggleButton","ListItem"],"mappings":";;;;;;AAmBA,MAAMA,IAAO,CAAC;AAAA,EACb,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACV;AAAA,QACC,CAACC,EAAE,YAAY,CAAC,GAAGR;AAAA,MAAA;AAAA,MAEpBG;AAAA,IAAA;AAAA,IAED,SAAAF;AAAA,IACA,aAAAD;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAqBEO,IAAU,CAAC;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAV;AACD,MAEE,gBAAAG,EAACQ,GAAA,EACA,UAAA,gBAAAR;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,oBAAoBE,CAAY,EAAE;AAAA,MACpC,EAAE,CAACF,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAACG,EAAA;AAAA,IAAM;AAAA,IAEvC,OAAO,EAAE,OAAAA,GAAO,QAAAC,EAAA;AAAA,IAEf,UAAAV;AAAA,EAAA;AAAA,GAEH,GAIIY,IAAO,CAAC,EAAE,UAAAZ,QACR,gBAAAG,EAAC,MAAA,EAAG,WAAWG,EAAE,MAAO,UAAAN,GAAS,GAOnCa,IAAS,CAAC;AAAA,EACf,YAAAC;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAKEe,IAAS,CAAC;AAAA,EACf,YAAAD;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKJH,EAAK,cAAc;AACnBU,EAAQ,cAAc;AACtBK,EAAK,cAAc;AACnBC,EAAO,cAAc;AACrBE,EAAO,cAAc;AAErB,MAAMC,IAAW,EAAE,MAAAnB,GAAM,cAAAoB,GAAc,SAAAV,GAAS,MAAAK,GAAM,QAAAC,GAAQ,QAAAE,GAAQ,UAAAG,EAAA;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import o from "classnames";
|
|
3
|
+
import m from "./styles.module.css.js";
|
|
4
|
+
const r = ({ children: s }) => /* @__PURE__ */ t("li", { className: o(m["list-item"], m.custom), children: s });
|
|
5
|
+
r.displayName = "Dropdown.ListItem.Custom";
|
|
6
|
+
export {
|
|
7
|
+
r as ListItemCustom
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=custom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom.js","sources":["../../../../src/components/dropdown/list-item/custom.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface ListItemCustomProps {\n\tchildren: ReactNode\n}\n\nconst ListItemCustom = ({ children }: ListItemCustomProps) => {\n\treturn <li className={classNames(s['list-item'], s.custom)}>{children}</li>\n}\n\nListItemCustom.displayName = 'Dropdown.ListItem.Custom'\n\nexport type { ListItemCustomProps }\nexport { ListItemCustom }\n"],"names":["ListItemCustom","children","jsx","classNames","s"],"mappings":";;;AAQA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,QAClB,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,MAAM,GAAI,UAAAH,EAAA,CAAS;AAGvED,EAAe,cAAc;"}
|