boreal-ui 0.0.50 → 0.0.54
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/dist/core/{Card-YD4BgNEU.js → Card-BjLC4t0w.js} +20 -47
- package/dist/core/Card-BjLC4t0w.js.map +1 -0
- package/dist/core/{Card-C57chjAP.cjs → Card-DRM65kM-.cjs} +20 -47
- package/dist/core/Card-DRM65kM-.cjs.map +1 -0
- package/dist/core/Card.cjs.js +1 -1
- package/dist/core/Card.js +1 -1
- package/dist/core/{FileUpload-C0eHx1h8.js → FileUpload-9fIxslAo.js} +2 -2
- package/dist/core/{FileUpload-C0eHx1h8.js.map → FileUpload-9fIxslAo.js.map} +1 -1
- package/dist/core/{FileUpload-BJ3RJxT3.cjs → FileUpload-DbMxpH-U.cjs} +2 -2
- package/dist/core/{FileUpload-BJ3RJxT3.cjs.map → FileUpload-DbMxpH-U.cjs.map} +1 -1
- package/dist/core/FileUpload.cjs.js +1 -1
- package/dist/core/FileUpload.js +1 -1
- package/dist/core/{MessagePopup-B3lEfar7.js → MessagePopup-BMGIVKoJ.js} +4 -4
- package/dist/core/{MessagePopup-B3lEfar7.js.map → MessagePopup-BMGIVKoJ.js.map} +1 -1
- package/dist/core/{MessagePopup-CtdpuRFv.cjs → MessagePopup-DQQKRCGF.cjs} +4 -4
- package/dist/core/{MessagePopup-CtdpuRFv.cjs.map → MessagePopup-DQQKRCGF.cjs.map} +1 -1
- package/dist/core/MessagePopup.cjs.js +4 -0
- package/dist/core/MessagePopup.cjs.js.map +1 -0
- package/dist/core/MessagePopup.js +5 -0
- package/dist/core/MessagePopup.js.map +1 -0
- package/dist/core/{ProgressBar-DaA5vvnq.js → ProgressBar-BLcSyVgQ.js} +51 -21
- package/dist/core/ProgressBar-BLcSyVgQ.js.map +1 -0
- package/dist/core/{ProgressBar-BwjYOqoE.cjs → ProgressBar-BbIZLV1t.cjs} +50 -20
- package/dist/core/ProgressBar-BbIZLV1t.cjs.map +1 -0
- package/dist/core/ProgressBar.cjs.js +1 -1
- package/dist/core/ProgressBar.js +1 -1
- package/dist/core/{Taginput-BXCxdLf0.cjs → TagInput-BXCxdLf0.cjs} +1 -1
- package/dist/core/TagInput-BXCxdLf0.cjs.map +1 -0
- package/dist/core/{Taginput-CoxxwLXg.js → TagInput-CoxxwLXg.js} +1 -1
- package/dist/core/TagInput-CoxxwLXg.js.map +1 -0
- package/dist/core/TagInput.cjs.js +2 -2
- package/dist/core/TagInput.js +1 -1
- package/dist/core/boreal-ui.css +31 -0
- package/dist/core/index.cjs.js +7 -7
- package/dist/core/index.js +6 -6
- package/dist/next/{Avatar-B-Ws4Ueo.js → Avatar-B24bFFqY.js} +3 -3
- package/dist/next/{Avatar-B-Ws4Ueo.js.map → Avatar-B24bFFqY.js.map} +1 -1
- package/dist/next/{Avatar-B9sMyRWr.cjs → Avatar-CPaxiA0r.cjs} +3 -3
- package/dist/next/{Avatar-B9sMyRWr.cjs.map → Avatar-CPaxiA0r.cjs.map} +1 -1
- package/dist/next/Avatar.cjs.js +1 -1
- package/dist/next/Avatar.js +1 -1
- package/dist/next/{Breadcrumbs-CrKRsQf3.cjs → Breadcrumbs-BlFi63K8.cjs} +3 -3
- package/dist/next/{Breadcrumbs-CrKRsQf3.cjs.map → Breadcrumbs-BlFi63K8.cjs.map} +1 -1
- package/dist/next/{Breadcrumbs-ZK64MIGd.js → Breadcrumbs-D9BMYEZi.js} +3 -3
- package/dist/next/{Breadcrumbs-ZK64MIGd.js.map → Breadcrumbs-D9BMYEZi.js.map} +1 -1
- package/dist/next/Breadcrumbs.cjs.js +1 -1
- package/dist/next/Breadcrumbs.js +1 -1
- package/dist/next/{Button-BI0LErYM.cjs → Button-DPoX7ahh.cjs} +2 -2
- package/dist/next/{Button-BI0LErYM.cjs.map → Button-DPoX7ahh.cjs.map} +1 -1
- package/dist/next/{Button-qs4m4zx0.js → Button-DhH3Gy0J.js} +2 -2
- package/dist/next/{Button-qs4m4zx0.js.map → Button-DhH3Gy0J.js.map} +1 -1
- package/dist/next/Button.cjs.js +1 -1
- package/dist/next/Button.js +1 -1
- package/dist/next/{Card-CNwE1Mkt.js → Card-4SKxHmOQ.js} +23 -50
- package/dist/next/Card-4SKxHmOQ.js.map +1 -0
- package/dist/next/{Card-CddrG8Xx.cjs → Card-BdzmlYGf.cjs} +23 -50
- package/dist/next/Card-BdzmlYGf.cjs.map +1 -0
- package/dist/next/Card.cjs.js +1 -1
- package/dist/next/Card.js +1 -1
- package/dist/next/{Chip-D2mvW5L7.js → Chip-BqMZEDW_.js} +2 -2
- package/dist/next/{Chip-D2mvW5L7.js.map → Chip-BqMZEDW_.js.map} +1 -1
- package/dist/next/{Chip-BWTBVAIE.cjs → Chip-CqvlZI-K.cjs} +2 -2
- package/dist/next/{Chip-BWTBVAIE.cjs.map → Chip-CqvlZI-K.cjs.map} +1 -1
- package/dist/next/Chip.cjs.js +1 -1
- package/dist/next/Chip.js +1 -1
- package/dist/next/{CommandPalette-BO6R9zQs.cjs → CommandPalette-C0NN-NWE.cjs} +2 -2
- package/dist/next/{CommandPalette-BO6R9zQs.cjs.map → CommandPalette-C0NN-NWE.cjs.map} +1 -1
- package/dist/next/{CommandPalette-CN0BiN0R.js → CommandPalette-vklqlRV0.js} +2 -2
- package/dist/next/{CommandPalette-CN0BiN0R.js.map → CommandPalette-vklqlRV0.js.map} +1 -1
- package/dist/next/CommandPalette.cjs.js +1 -1
- package/dist/next/CommandPalette.js +1 -1
- package/dist/next/{Dropdown-Czc7qKPn.js → Dropdown-BjxT8ivq.js} +2 -2
- package/dist/next/{Dropdown-Czc7qKPn.js.map → Dropdown-BjxT8ivq.js.map} +1 -1
- package/dist/next/{Dropdown-BnuZW883.cjs → Dropdown-IW2Ph6-e.cjs} +2 -2
- package/dist/next/{Dropdown-BnuZW883.cjs.map → Dropdown-IW2Ph6-e.cjs.map} +1 -1
- package/dist/next/Dropdown.cjs.js +1 -1
- package/dist/next/Dropdown.js +1 -1
- package/dist/next/{EmptyState-Bb90F-ej.cjs → EmptyState-BS6-CuHp.cjs} +2 -2
- package/dist/next/{EmptyState-Bb90F-ej.cjs.map → EmptyState-BS6-CuHp.cjs.map} +1 -1
- package/dist/next/{EmptyState-Brd4N36F.js → EmptyState-D_Gcrj_3.js} +2 -2
- package/dist/next/{EmptyState-Brd4N36F.js.map → EmptyState-D_Gcrj_3.js.map} +1 -1
- package/dist/next/EmptyState.cjs.js +1 -1
- package/dist/next/EmptyState.js +1 -1
- package/dist/next/{FileUpload-Drm5_xEx.cjs → FileUpload-Cj99fQhe.cjs} +4 -4
- package/dist/next/{FileUpload-Drm5_xEx.cjs.map → FileUpload-Cj99fQhe.cjs.map} +1 -1
- package/dist/next/{FileUpload-BMMpH1El.js → FileUpload-St2eEaTn.js} +4 -4
- package/dist/next/{FileUpload-BMMpH1El.js.map → FileUpload-St2eEaTn.js.map} +1 -1
- package/dist/next/FileUpload.cjs.js +1 -1
- package/dist/next/FileUpload.js +1 -1
- package/dist/next/{Footer-EF2-ryvY.cjs → Footer-B3KTDWBR.cjs} +4 -4
- package/dist/next/{Footer-EF2-ryvY.cjs.map → Footer-B3KTDWBR.cjs.map} +1 -1
- package/dist/next/{Footer-B6_LG958.js → Footer-dtGtOPyR.js} +4 -4
- package/dist/next/{Footer-B6_LG958.js.map → Footer-dtGtOPyR.js.map} +1 -1
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/{IconButton-BTUFKRZt.js → IconButton-Ct3YtlG9.js} +2 -2
- package/dist/next/{IconButton-BTUFKRZt.js.map → IconButton-Ct3YtlG9.js.map} +1 -1
- package/dist/next/{IconButton-2l-_HOMB.cjs → IconButton-aF7cTy19.cjs} +2 -2
- package/dist/next/{IconButton-2l-_HOMB.cjs.map → IconButton-aF7cTy19.cjs.map} +1 -1
- package/dist/next/IconButton.cjs.js +1 -1
- package/dist/next/IconButton.js +1 -1
- package/dist/next/{MessagePopup-WUBGyJ_F.js → MessagePopup-C4n0Qw7n.js} +6 -6
- package/dist/next/{MessagePopup-WUBGyJ_F.js.map → MessagePopup-C4n0Qw7n.js.map} +1 -1
- package/dist/next/{MessagePopup-DsquzWSn.cjs → MessagePopup-CwOeZAAM.cjs} +6 -6
- package/dist/next/{MessagePopup-DsquzWSn.cjs.map → MessagePopup-CwOeZAAM.cjs.map} +1 -1
- package/dist/next/MessagePopup.cjs.js +4 -0
- package/dist/next/MessagePopup.cjs.js.map +1 -0
- package/dist/next/MessagePopup.js +5 -0
- package/dist/next/MessagePopup.js.map +1 -0
- package/dist/next/{Modal-B2ilLCoi.js → Modal-CIzoBs9H.js} +2 -2
- package/dist/next/{Modal-B2ilLCoi.js.map → Modal-CIzoBs9H.js.map} +1 -1
- package/dist/next/{Modal-CVKVAEdd.cjs → Modal-DCNGQN70.cjs} +2 -2
- package/dist/next/{Modal-CVKVAEdd.cjs.map → Modal-DCNGQN70.cjs.map} +1 -1
- package/dist/next/Modal.cjs.js +1 -1
- package/dist/next/Modal.js +1 -1
- package/dist/next/{NavBar-DVEf0iJH.cjs → NavBar-DDu46bCF.cjs} +3 -3
- package/dist/next/{NavBar-DVEf0iJH.cjs.map → NavBar-DDu46bCF.cjs.map} +1 -1
- package/dist/next/{NavBar-CmvgkEZt.js → NavBar-DyI3rKSN.js} +3 -3
- package/dist/next/{NavBar-CmvgkEZt.js.map → NavBar-DyI3rKSN.js.map} +1 -1
- package/dist/next/NavBar.cjs.js +1 -1
- package/dist/next/NavBar.js +1 -1
- package/dist/next/{NotificationCenter-CtM10CVj.js → NotificationCenter-BIuKaeXk.js} +3 -3
- package/dist/next/{NotificationCenter-CtM10CVj.js.map → NotificationCenter-BIuKaeXk.js.map} +1 -1
- package/dist/next/{NotificationCenter-CtL6rozQ.cjs → NotificationCenter-CzdOOnWg.cjs} +3 -3
- package/dist/next/{NotificationCenter-CtL6rozQ.cjs.map → NotificationCenter-CzdOOnWg.cjs.map} +1 -1
- package/dist/next/NotificationCenter.cjs.js +1 -1
- package/dist/next/NotificationCenter.js +1 -1
- package/dist/next/{Pager-Bxxewb8I.cjs → Pager-C6vww_Lf.cjs} +3 -3
- package/dist/next/{Pager-Bxxewb8I.cjs.map → Pager-C6vww_Lf.cjs.map} +1 -1
- package/dist/next/{Pager-D0Mw7o7v.js → Pager-DkXLe3dd.js} +3 -3
- package/dist/next/{Pager-D0Mw7o7v.js.map → Pager-DkXLe3dd.js.map} +1 -1
- package/dist/next/Pager.cjs.js +1 -1
- package/dist/next/Pager.js +1 -1
- package/dist/next/ProgressBar-BM0Rp63R.js +188 -0
- package/dist/next/ProgressBar-BM0Rp63R.js.map +1 -0
- package/dist/next/ProgressBar-CDhjp_gn.cjs +187 -0
- package/dist/next/ProgressBar-CDhjp_gn.cjs.map +1 -0
- package/dist/next/ProgressBar.cjs.js +1 -1
- package/dist/next/ProgressBar.js +1 -1
- package/dist/next/{Sidebar-DajVSn82.cjs → Sidebar-CBC-Gu5d.cjs} +3 -3
- package/dist/next/{Sidebar-DajVSn82.cjs.map → Sidebar-CBC-Gu5d.cjs.map} +1 -1
- package/dist/next/{Sidebar-CJ4VrQIW.js → Sidebar-oJzZMxwu.js} +3 -3
- package/dist/next/{Sidebar-CJ4VrQIW.js.map → Sidebar-oJzZMxwu.js.map} +1 -1
- package/dist/next/Sidebar.cjs.js +1 -1
- package/dist/next/Sidebar.js +1 -1
- package/dist/next/{Stepper-BvA_ZAho.js → Stepper-DBwramgz.js} +2 -2
- package/dist/next/{Stepper-BvA_ZAho.js.map → Stepper-DBwramgz.js.map} +1 -1
- package/dist/next/{Stepper-D6X70Sr6.cjs → Stepper-YQqjSOG0.cjs} +2 -2
- package/dist/next/{Stepper-D6X70Sr6.cjs.map → Stepper-YQqjSOG0.cjs.map} +1 -1
- package/dist/next/Stepper.cjs.js +1 -1
- package/dist/next/Stepper.js +1 -1
- package/dist/next/{TagInput-DfNJiPKh.cjs → TagInput-B38cJqaG.cjs} +3 -3
- package/dist/next/TagInput-B38cJqaG.cjs.map +1 -0
- package/dist/next/{TagInput-DKzxPiwU.js → TagInput-BDbDZ1W8.js} +3 -3
- package/dist/next/TagInput-BDbDZ1W8.js.map +1 -0
- package/dist/next/TagInput.cjs.js +1 -1
- package/dist/next/TagInput.js +1 -1
- package/dist/next/{TextInput-C1TUvbWx.cjs → TextInput-C3cLfd6E.cjs} +2 -2
- package/dist/next/{TextInput-C1TUvbWx.cjs.map → TextInput-C3cLfd6E.cjs.map} +1 -1
- package/dist/next/{TextInput-CyGkgvS3.js → TextInput-D68lumzk.js} +2 -2
- package/dist/next/{TextInput-CyGkgvS3.js.map → TextInput-D68lumzk.js.map} +1 -1
- package/dist/next/TextInput.cjs.js +1 -1
- package/dist/next/TextInput.js +1 -1
- package/dist/next/{Toolbar-PwnuYGDR.cjs → Toolbar-B-APlNjI.cjs} +2 -2
- package/dist/next/{Toolbar-PwnuYGDR.cjs.map → Toolbar-B-APlNjI.cjs.map} +1 -1
- package/dist/next/{Toolbar-wbusnAUV.js → Toolbar-DHyc9uqa.js} +2 -2
- package/dist/next/{Toolbar-wbusnAUV.js.map → Toolbar-DHyc9uqa.js.map} +1 -1
- package/dist/next/Toolbar.cjs.js +1 -1
- package/dist/next/Toolbar.js +1 -1
- package/dist/next/boreal-ui.css +122 -72
- package/dist/next/{image-BBS8QO15.js → image-B9PuwflE.js} +47 -3
- package/dist/next/image-B9PuwflE.js.map +1 -0
- package/dist/next/{image-A4nTeRaX.cjs → image-Bo_vHlt1.cjs} +47 -3
- package/dist/next/image-Bo_vHlt1.cjs.map +1 -0
- package/dist/next/index.cjs.js +23 -23
- package/dist/next/index.js +23 -23
- package/dist/next/{link-lNk_lOdS.cjs → link-B1N-q38H.cjs} +276 -49
- package/dist/next/link-B1N-q38H.cjs.map +1 -0
- package/dist/next/{link-CxWP3aXr.js → link-CyxHztrS.js} +276 -49
- package/dist/next/link-CyxHztrS.js.map +1 -0
- package/dist/next/{navigation-DxXFNXZM.js → navigation-C2hD8Jlk.js} +157 -199
- package/dist/next/navigation-C2hD8Jlk.js.map +1 -0
- package/dist/next/{navigation-CZU71Pmb.cjs → navigation-C3npGZmO.cjs} +157 -199
- package/dist/next/navigation-C3npGZmO.cjs.map +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Card/Card.types.d.ts +4 -4
- package/dist/types/components/Card/Card.types.d.ts.map +1 -1
- package/dist/types/components/Card/CardBase.d.ts.map +1 -1
- package/dist/types/components/{MessagePopUp → MessagePopup}/MessagePopup.types.d.ts +2 -2
- package/dist/types/components/{MessagePopUp → MessagePopup}/MessagePopup.types.d.ts.map +1 -1
- package/dist/types/components/{MessagePopUp → MessagePopup}/MessagePopupBase.d.ts.map +1 -1
- package/dist/types/components/MessagePopup/core/MessagePopup.d.ts +6 -0
- package/dist/types/components/{MessagePopUp → MessagePopup}/core/MessagePopup.d.ts.map +1 -1
- package/dist/types/components/MessagePopup/next/MessagePopup.d.ts +5 -0
- package/dist/types/components/{MessagePopUp → MessagePopup}/next/MessagePopup.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.types.d.ts +10 -1
- package/dist/types/components/ProgressBar/ProgressBar.types.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBarBase.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/core/ProgressBar.d.ts.map +1 -1
- package/dist/types/components/TagInput/{Taginput.types.d.ts → TagInput.types.d.ts} +1 -1
- package/dist/types/components/TagInput/{Taginput.types.d.ts.map → TagInput.types.d.ts.map} +1 -1
- package/dist/types/components/TagInput/TagInputBase.d.ts +1 -1
- package/dist/types/components/TagInput/core/TagInput.d.ts +6 -0
- package/dist/types/components/TagInput/core/{Taginput.d.ts.map → TagInput.d.ts.map} +1 -1
- package/dist/types/components/TagInput/next/TagInput.d.ts +1 -1
- package/dist/types/index.core.d.ts +2 -2
- package/dist/types/index.next.d.ts +1 -1
- package/dist/types/public.types.d.ts +2 -2
- package/package.json +8 -8
- package/dist/core/Card-C57chjAP.cjs.map +0 -1
- package/dist/core/Card-YD4BgNEU.js.map +0 -1
- package/dist/core/MessagePopUp.cjs.js +0 -4
- package/dist/core/MessagePopUp.cjs.js.map +0 -1
- package/dist/core/MessagePopUp.js +0 -5
- package/dist/core/MessagePopUp.js.map +0 -1
- package/dist/core/ProgressBar-BwjYOqoE.cjs.map +0 -1
- package/dist/core/ProgressBar-DaA5vvnq.js.map +0 -1
- package/dist/core/Taginput-BXCxdLf0.cjs.map +0 -1
- package/dist/core/Taginput-CoxxwLXg.js.map +0 -1
- package/dist/next/Card-CNwE1Mkt.js.map +0 -1
- package/dist/next/Card-CddrG8Xx.cjs.map +0 -1
- package/dist/next/MessagePopUp.cjs.js +0 -4
- package/dist/next/MessagePopUp.cjs.js.map +0 -1
- package/dist/next/MessagePopUp.js +0 -5
- package/dist/next/MessagePopUp.js.map +0 -1
- package/dist/next/ProgressBar-BMuv0kis.cjs +0 -151
- package/dist/next/ProgressBar-BMuv0kis.cjs.map +0 -1
- package/dist/next/ProgressBar-DuaWQouO.js +0 -152
- package/dist/next/ProgressBar-DuaWQouO.js.map +0 -1
- package/dist/next/TagInput-DKzxPiwU.js.map +0 -1
- package/dist/next/TagInput-DfNJiPKh.cjs.map +0 -1
- package/dist/next/image-A4nTeRaX.cjs.map +0 -1
- package/dist/next/image-BBS8QO15.js.map +0 -1
- package/dist/next/link-CxWP3aXr.js.map +0 -1
- package/dist/next/link-lNk_lOdS.cjs.map +0 -1
- package/dist/next/navigation-CZU71Pmb.cjs.map +0 -1
- package/dist/next/navigation-DxXFNXZM.js.map +0 -1
- package/dist/types/components/MessagePopUp/core/MessagePopup.d.ts +0 -6
- package/dist/types/components/MessagePopUp/next/MessagePopup.d.ts +0 -5
- package/dist/types/components/TagInput/core/Taginput.d.ts +0 -6
- /package/dist/types/components/{MessagePopUp → MessagePopup}/MessagePopupBase.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette-BO6R9zQs.cjs","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/next/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport styles from \"./CommandPalette.module.scss\";\r\nimport { TextInput } from \"@/index.next\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={styles}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useEffect","useCallback","jsx","jsxs","combineClassNames","capitalize","TextInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPalette-C0NN-NWE.cjs","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/next/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport styles from \"./CommandPalette.module.scss\";\r\nimport { TextInput } from \"@/index.next\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={styles}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useEffect","useCallback","jsx","jsxs","combineClassNames","capitalize","TextInput"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
|
5
5
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
6
6
|
import { a as getDefaultRounding, d as getDefaultTheme, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
|
|
7
7
|
/* empty css */
|
|
8
|
-
import { T as TextInput } from "./TextInput-
|
|
8
|
+
import { T as TextInput } from "./TextInput-D68lumzk.js";
|
|
9
9
|
const CommandPaletteBase = ({
|
|
10
10
|
commands,
|
|
11
11
|
placeholder = "Search...",
|
|
@@ -313,4 +313,4 @@ CommandPalette.displayName = "CommandPalette";
|
|
|
313
313
|
export {
|
|
314
314
|
CommandPalette as C
|
|
315
315
|
};
|
|
316
|
-
//# sourceMappingURL=CommandPalette-
|
|
316
|
+
//# sourceMappingURL=CommandPalette-vklqlRV0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette-CN0BiN0R.js","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/next/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport styles from \"./CommandPalette.module.scss\";\r\nimport { TextInput } from \"@/index.next\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={styles}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPalette-vklqlRV0.js","sources":["../../src/components/CommandPalette/CommandPaletteBase.tsx","../../src/components/CommandPalette/next/CommandPalette.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useCallback,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { CommandPaletteProps } from \"./CommandPalette.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface CommandPaletteBaseProps extends CommandPaletteProps {\r\n classMap: Record<string, string>;\r\n TextInputComponent: React.ElementType;\r\n}\r\n\r\nconst CommandPaletteBase: React.FC<CommandPaletteBaseProps> = ({\r\n commands,\r\n placeholder = \"Search...\",\r\n isOpen,\r\n onClose,\r\n asyncSearch,\r\n debounceMs = 300,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n classMap,\r\n TextInputComponent,\r\n \"data-testid\": testId = \"command-palette\",\r\n className,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [mounted, setMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [asyncResults, setAsyncResults] = useState<typeof commands>([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const prevFocusRef = useRef<HTMLElement | null>(null);\r\n\r\n const filtered = asyncSearch\r\n ? asyncResults\r\n : commands.filter((cmd) =>\r\n cmd.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n\r\n useEffect(() => {\r\n if (filtered.length === 0) {\r\n setActiveIndex(-1);\r\n } else if (activeIndex < 0 || activeIndex >= filtered.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [filtered, activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!asyncSearch) return;\r\n\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n const q = query.trim();\r\n if (!q) {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n setIsLoading(true);\r\n debounceRef.current = setTimeout(() => {\r\n asyncSearch(q)\r\n .then((results) => {\r\n setAsyncResults(results);\r\n setIsLoading(false);\r\n })\r\n .catch(() => {\r\n setAsyncResults([]);\r\n setIsLoading(false);\r\n });\r\n }, debounceMs);\r\n\r\n return () => {\r\n if (debounceRef.current) clearTimeout(debounceRef.current);\r\n };\r\n }, [query, asyncSearch, debounceMs]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n setMounted(true);\r\n prevFocusRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n const portal =\r\n document.getElementById(\"widget-portal\") ||\r\n (() => {\r\n const el = document.createElement(\"div\");\r\n el.id = \"widget-portal\";\r\n document.body.appendChild(el);\r\n return el;\r\n })();\r\n\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n setQuery(\"\");\r\n setActiveIndex(-1);\r\n setMounted(false);\r\n prevFocusRef.current?.focus?.();\r\n };\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen && inputRef.current) inputRef.current.focus();\r\n }, [isOpen]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"ArrowDown\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev + 1) % filtered.length);\r\n } else if (e.key === \"ArrowUp\") {\r\n if (filtered.length === 0) return;\r\n e.preventDefault();\r\n setActiveIndex(\r\n (prev) => (prev - 1 + filtered.length) % filtered.length\r\n );\r\n } else if (e.key === \"Enter\") {\r\n if (activeIndex >= 0 && filtered[activeIndex]) {\r\n filtered[activeIndex].action();\r\n onClose();\r\n }\r\n } else if (e.key === \"Escape\") {\r\n onClose();\r\n }\r\n },\r\n [filtered, activeIndex, onClose]\r\n );\r\n\r\n const handleContainerKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === \"Escape\") onClose();\r\n },\r\n [onClose]\r\n );\r\n\r\n if (!isOpen || !mounted || !portalElement) return null;\r\n\r\n const listId = `${testId}-list`;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={classMap.overlay}\r\n onClick={onClose}\r\n data-testid={`${testId}-overlay`}\r\n >\r\n <div\r\n className={combineClassNames(\r\n classMap.command_palette,\r\n classMap[theme],\r\n classMap[state],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n )}\r\n onClick={(e) => e.stopPropagation()}\r\n onKeyDown={handleContainerKeyDown}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=\"Command palette\"\r\n data-testid={testId}\r\n >\r\n <TextInputComponent\r\n ref={inputRef}\r\n type=\"text\"\r\n value={query}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\r\n setQuery(e.target.value)\r\n }\r\n onKeyDown={handleKeyDown}\r\n placeholder={placeholder}\r\n theme={theme}\r\n state={state}\r\n shadow={\"none\"}\r\n rounding={rounding}\r\n className={classMap.input}\r\n data-testid={`${testId}-input`}\r\n role=\"combobox\"\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={filtered.length > 0}\r\n aria-controls={listId}\r\n aria-activedescendant={\r\n activeIndex >= 0 ? `cmd-${activeIndex}` : undefined\r\n }\r\n />\r\n\r\n <ul\r\n id={listId}\r\n className={classMap.list}\r\n role=\"listbox\"\r\n aria-label=\"Command suggestions\"\r\n aria-busy={isLoading || undefined}\r\n >\r\n {isLoading ? (\r\n <li\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n role=\"option\"\r\n aria-disabled=\"true\"\r\n aria-selected=\"false\"\r\n >\r\n Searching…\r\n </li>\r\n ) : filtered.length > 0 ? (\r\n filtered.map((cmd, index) => (\r\n <li\r\n key={`${cmd.label}-${index}`}\r\n id={`cmd-${index}`}\r\n role=\"option\"\r\n aria-selected={index === activeIndex}\r\n className={combineClassNames(\r\n classMap.item,\r\n classMap[theme],\r\n index === activeIndex && classMap.active\r\n )}\r\n onClick={() => {\r\n cmd.action();\r\n onClose();\r\n }}\r\n >\r\n {cmd.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {cmd.icon}\r\n </span>\r\n )}\r\n {cmd.label}\r\n </li>\r\n ))\r\n ) : (\r\n <li\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n aria-disabled=\"true\"\r\n className={combineClassNames(classMap.item, classMap.empty)}\r\n >\r\n No matching results\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </div>,\r\n portalElement\r\n );\r\n};\r\nCommandPaletteBase.displayName = \"CommandPaletteBase\";\r\nexport default CommandPaletteBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CommandPaletteBase from \"../CommandPaletteBase\";\r\nimport styles from \"./CommandPalette.module.scss\";\r\nimport { TextInput } from \"@/index.next\";\r\nimport { CommandPaletteProps } from \"../CommandPalette.types\";\r\n\r\nconst CommandPalette: React.FC<CommandPaletteProps> = (props) => (\r\n <CommandPaletteBase\r\n {...props}\r\n classMap={styles}\r\n TextInputComponent={TextInput}\r\n />\r\n);\r\nCommandPalette.displayName = \"CommandPalette\";\r\nexport default CommandPalette;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
|
4
4
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
5
5
|
import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
|
|
6
6
|
/* empty css */
|
|
7
|
-
import { I as IconButton } from "./IconButton-
|
|
7
|
+
import { I as IconButton } from "./IconButton-Ct3YtlG9.js";
|
|
8
8
|
const MenuIcon = (props) => /* @__PURE__ */ jsxs(
|
|
9
9
|
"svg",
|
|
10
10
|
{
|
|
@@ -301,4 +301,4 @@ Dropdown.displayName = "Dropdown";
|
|
|
301
301
|
export {
|
|
302
302
|
Dropdown as D
|
|
303
303
|
};
|
|
304
|
-
//# sourceMappingURL=Dropdown-
|
|
304
|
+
//# sourceMappingURL=Dropdown-BjxT8ivq.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown-Czc7qKPn.js","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/next/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n strokeWidth=\"1.5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 5H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 12H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 19H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n useState,\r\n useRef,\r\n useEffect,\r\n useCallback,\r\n KeyboardEvent,\r\n useId,\r\n JSX,\r\n useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, IconButtonLikeRef } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n triggerIcon,\r\n items,\r\n align = \"right\",\r\n className = \"\",\r\n menuClassName = \"\",\r\n ariaLabel = \"Dropdown menu\",\r\n theme = getDefaultTheme(),\r\n toggleRounding = getDefaultRounding(),\r\n menuRounding = getDefaultRounding(),\r\n toggleShadow = getDefaultShadow(),\r\n menuShadow = getDefaultShadow(),\r\n toggleOutline = false,\r\n state = \"\",\r\n \"data-testid\": testId = \"dropdown\",\r\n IconButton,\r\n classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const triggerRef = useRef<IconButtonLikeRef | null>(null);\r\n const menuId = useId();\r\n\r\n const Icon = triggerIcon ?? MenuIcon;\r\n\r\n const toggleDropdown = () => setOpen((prev) => !prev);\r\n const closeDropdown = () => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n triggerRef.current?.focus?.();\r\n };\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n if (menuItems && menuItems.length > 0) {\r\n setActiveIndex(0);\r\n } else {\r\n setActiveIndex(-1);\r\n }\r\n }, [open]);\r\n\r\n useEffect(() => {\r\n if (!open || activeIndex < 0) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n menuItems?.[activeIndex]?.focus();\r\n }, [activeIndex, open]);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (\r\n dropdownRef.current &&\r\n !dropdownRef.current.contains(e.target as Node)\r\n ) {\r\n closeDropdown();\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n if (open && menuRef.current) {\r\n const rect = menuRef.current.getBoundingClientRect();\r\n const right = rect.right > window.innerWidth;\r\n const left = rect.left < 0;\r\n if (right) {\r\n menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n } else if (left) {\r\n menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n } else {\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n }\r\n }\r\n\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, [open]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (!open) return;\r\n\r\n const len = items.length;\r\n const hasItems = len > 0;\r\n\r\n if (e.key === \"Escape\") {\r\n e.preventDefault();\r\n closeDropdown();\r\n return;\r\n }\r\n if (e.key === \"Tab\") {\r\n closeDropdown();\r\n return;\r\n }\r\n\r\n if (!hasItems) return;\r\n\r\n if (e.key === \"ArrowDown\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n } else if (e.key === \"ArrowUp\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n } else if (e.key === \"Home\") {\r\n e.preventDefault();\r\n setActiveIndex(0);\r\n } else if (e.key === \"End\") {\r\n e.preventDefault();\r\n setActiveIndex(len - 1);\r\n } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n const item = items[activeIndex];\r\n if (item) {\r\n item.onClick?.();\r\n closeDropdown();\r\n }\r\n }\r\n },\r\n [open, items, activeIndex]\r\n );\r\n\r\n const menuClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.menu,\r\n align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n menuClassName\r\n ),\r\n [classMap, align, menuShadow, menuRounding, menuClassName]\r\n );\r\n\r\n return (\r\n <div\r\n ref={dropdownRef}\r\n className={combineClassNames(classMap.wrapper, className)}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <IconButton\r\n ref={triggerRef}\r\n icon={Icon}\r\n ariaLabel={ariaLabel}\r\n aria-haspopup=\"menu\"\r\n aria-expanded={open}\r\n aria-controls={menuId}\r\n rounding={toggleRounding}\r\n shadow={toggleShadow}\r\n outline={toggleOutline}\r\n theme={theme}\r\n state={state}\r\n onClick={toggleDropdown}\r\n data-testid={`${testId}-trigger`}\r\n />\r\n\r\n {open && (\r\n <div\r\n id={menuId}\r\n ref={menuRef}\r\n role=\"menu\"\r\n aria-label={ariaLabel}\r\n aria-orientation=\"vertical\"\r\n className={menuClassNames}\r\n data-testid={`${testId}-menu`}\r\n >\r\n {items.map((item, index) =>\r\n item.href ? (\r\n <a\r\n key={index}\r\n href={item.href}\r\n className={classMap.item}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </a>\r\n ) : (\r\n <button\r\n key={index}\r\n type=\"button\"\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n className={classMap.item}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </button>\r\n )\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","\"use client\";\r\nimport React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n return <BaseDropdown {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nDropdown.displayName = \"Dropdown\";\r\nexport default Dropdown;\r\n"],"names":["IconButton","item"],"mappings":";;;;;;;AAAA,MAAM,WAAoD,CAAC,UACzD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACN,OAAM;AAAA,IACL,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA;AACH;ACZF,MAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ,gBAAA;AAAA,EACR,iBAAiB,mBAAA;AAAA,EACjB,eAAe,mBAAA;AAAA,EACf,eAAe,iBAAA;AAAA,EACf,aAAa,iBAAA;AAAA,EACb,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,eAAe,SAAS;AAAA,EACxB,YAAAA;AAAA,EACA;AACF,MAAsC;AACpC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AACzD,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,SAAS,MAAA;AAEf,QAAM,OAAO,eAAe;AAE5B,QAAM,iBAAiB,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AACpD,QAAM,gBAAgB,MAAM;;AAC1B,YAAQ,KAAK;AACb,mBAAe,EAAE;AACjB,2BAAW,YAAX,mBAAoB,UAApB;AAAA,EACF;AAEA,YAAU,MAAM;;AACd,QAAI,CAAC,KAAM;AACX,UAAM,aACJ,aAAQ,YAAR,mBAAiB,iBAA8B;AACjD,QAAI,aAAa,UAAU,SAAS,GAAG;AACrC,qBAAe,CAAC;AAAA,IAClB,OAAO;AACL,qBAAe,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;;AACd,QAAI,CAAC,QAAQ,cAAc,EAAG;AAC9B,UAAM,aACJ,aAAQ,YAAR,mBAAiB,iBAA8B;AACjD,iDAAY,iBAAZ,mBAA0B;AAAA,EAC5B,GAAG,CAAC,aAAa,IAAI,CAAC;AAEtB,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,MAAkB;AAC5C,UACE,YAAY,WACZ,CAAC,YAAY,QAAQ,SAAS,EAAE,MAAc,GAC9C;AACA,sBAAA;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,QAAI,QAAQ,QAAQ,SAAS;AAC3B,YAAM,OAAO,QAAQ,QAAQ,sBAAA;AAC7B,YAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,YAAM,OAAO,KAAK,OAAO;AACzB,UAAI,OAAO;AACT,gBAAQ,QAAQ,aAAa,uBAAuB,MAAM;AAC1D,gBAAQ,QAAQ,gBAAgB,oBAAoB;AAAA,MACtD,WAAW,MAAM;AACf,gBAAQ,QAAQ,aAAa,sBAAsB,MAAM;AACzD,gBAAQ,QAAQ,gBAAgB,qBAAqB;AAAA,MACvD,OAAO;AACL,gBAAQ,QAAQ,gBAAgB,qBAAqB;AACrD,gBAAQ,QAAQ,gBAAgB,oBAAoB;AAAA,MACtD;AAAA,IACF;AAEA,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;;AACpC,UAAI,CAAC,KAAM;AAEX,YAAM,MAAM,MAAM;AAClB,YAAM,WAAW,MAAM;AAEvB,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAA;AACF,sBAAA;AACA;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,OAAO;AACnB,sBAAA;AACA;AAAA,MACF;AAEA,UAAI,CAAC,SAAU;AAEf,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAA;AACF,uBAAe,CAAC,SAAU,OAAO,IAAI,KAAK,OAAO,KAAK,GAAI;AAAA,MAC5D,WAAW,EAAE,QAAQ,WAAW;AAC9B,UAAE,eAAA;AACF,uBAAe,CAAC,SAAU,OAAO,IAAI,MAAM,KAAK,OAAO,IAAI,OAAO,GAAI;AAAA,MACxE,WAAW,EAAE,QAAQ,QAAQ;AAC3B,UAAE,eAAA;AACF,uBAAe,CAAC;AAAA,MAClB,WAAW,EAAE,QAAQ,OAAO;AAC1B,UAAE,eAAA;AACF,uBAAe,MAAM,CAAC;AAAA,MACxB,YAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,eAAe,GAAG;AACnE,cAAMC,QAAO,MAAM,WAAW;AAC9B,YAAIA,OAAM;AACR,gBAAAA,MAAK,YAAL,wBAAAA;AACA,wBAAA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,WAAW;AAAA,EAAA;AAG3B,QAAM,iBAAiB;AAAA,IACrB,MACE;AAAA,MACE,SAAS;AAAA,MACT,UAAU,UAAU,SAAS,aAAa,SAAS;AAAA,MACnD,cAAc,SAAS,SAAS,WAAW,UAAU,CAAC,EAAE;AAAA,MACxD,gBAAgB,SAAS,QAAQ,WAAW,YAAY,CAAC,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,OAAO,YAAY,cAAc,aAAa;AAAA,EAAA;AAG3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,kBAAkB,SAAS,SAAS,SAAS;AAAA,MACxD,WAAW;AAAA,MACX,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA,iBAAc;AAAA,YACd,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,eAAa,GAAG,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAGvB,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,oBAAiB;AAAA,YACjB,WAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA,MAAM;AAAA,cAAI,CAACC,OAAM,UAChBA,MAAK,OACH;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAMA,MAAK;AAAA,kBACX,WAAW,SAAS;AAAA,kBACpB,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,SAAS,MAAM;;AACb,0BAAAA,MAAK,YAAL,wBAAAA;AACA,kCAAA;AAAA,kBACF;AAAA,kBACA,eAAaA,MAAK,aAAa;AAAA,kBAE9B,UAAA;AAAA,oBAAAA,MAAK,4BACH,QAAA,EAAK,WAAW,SAAS,MAAM,eAAY,QACzC,UAAAA,MAAK,KAAA,CACR;AAAA,oBAEDA,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAhBD;AAAA,cAAA,IAmBP;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,WAAW,SAAS;AAAA,kBACpB,SAAS,MAAM;;AACb,0BAAAA,MAAK,YAAL,wBAAAA;AACA,kCAAA;AAAA,kBACF;AAAA,kBACA,eAAaA,MAAK,aAAa;AAAA,kBAE9B,UAAA;AAAA,oBAAAA,MAAK,4BACH,QAAA,EAAK,WAAW,SAAS,MAAM,eAAY,QACzC,UAAAA,MAAK,KAAA,CACR;AAAA,oBAEDA,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAhBD;AAAA,cAAA;AAAA,YAiBP;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AACA,aAAa,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtO3B,MAAM,WAAoC,CAAC,UAAU;AACnD,6BAAQ,cAAA,EAAc,GAAG,OAAO,YAAwB,UAAU,QAAQ;AAC5E;AACA,SAAS,cAAc;"}
|
|
1
|
+
{"version":3,"file":"Dropdown-BjxT8ivq.js","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/next/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n strokeWidth=\"1.5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 5H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 12H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 19H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n useState,\r\n useRef,\r\n useEffect,\r\n useCallback,\r\n KeyboardEvent,\r\n useId,\r\n JSX,\r\n useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, IconButtonLikeRef } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n triggerIcon,\r\n items,\r\n align = \"right\",\r\n className = \"\",\r\n menuClassName = \"\",\r\n ariaLabel = \"Dropdown menu\",\r\n theme = getDefaultTheme(),\r\n toggleRounding = getDefaultRounding(),\r\n menuRounding = getDefaultRounding(),\r\n toggleShadow = getDefaultShadow(),\r\n menuShadow = getDefaultShadow(),\r\n toggleOutline = false,\r\n state = \"\",\r\n \"data-testid\": testId = \"dropdown\",\r\n IconButton,\r\n classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const triggerRef = useRef<IconButtonLikeRef | null>(null);\r\n const menuId = useId();\r\n\r\n const Icon = triggerIcon ?? MenuIcon;\r\n\r\n const toggleDropdown = () => setOpen((prev) => !prev);\r\n const closeDropdown = () => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n triggerRef.current?.focus?.();\r\n };\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n if (menuItems && menuItems.length > 0) {\r\n setActiveIndex(0);\r\n } else {\r\n setActiveIndex(-1);\r\n }\r\n }, [open]);\r\n\r\n useEffect(() => {\r\n if (!open || activeIndex < 0) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n menuItems?.[activeIndex]?.focus();\r\n }, [activeIndex, open]);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (\r\n dropdownRef.current &&\r\n !dropdownRef.current.contains(e.target as Node)\r\n ) {\r\n closeDropdown();\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n if (open && menuRef.current) {\r\n const rect = menuRef.current.getBoundingClientRect();\r\n const right = rect.right > window.innerWidth;\r\n const left = rect.left < 0;\r\n if (right) {\r\n menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n } else if (left) {\r\n menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n } else {\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n }\r\n }\r\n\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, [open]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (!open) return;\r\n\r\n const len = items.length;\r\n const hasItems = len > 0;\r\n\r\n if (e.key === \"Escape\") {\r\n e.preventDefault();\r\n closeDropdown();\r\n return;\r\n }\r\n if (e.key === \"Tab\") {\r\n closeDropdown();\r\n return;\r\n }\r\n\r\n if (!hasItems) return;\r\n\r\n if (e.key === \"ArrowDown\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n } else if (e.key === \"ArrowUp\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n } else if (e.key === \"Home\") {\r\n e.preventDefault();\r\n setActiveIndex(0);\r\n } else if (e.key === \"End\") {\r\n e.preventDefault();\r\n setActiveIndex(len - 1);\r\n } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n const item = items[activeIndex];\r\n if (item) {\r\n item.onClick?.();\r\n closeDropdown();\r\n }\r\n }\r\n },\r\n [open, items, activeIndex]\r\n );\r\n\r\n const menuClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.menu,\r\n align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n menuClassName\r\n ),\r\n [classMap, align, menuShadow, menuRounding, menuClassName]\r\n );\r\n\r\n return (\r\n <div\r\n ref={dropdownRef}\r\n className={combineClassNames(classMap.wrapper, className)}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <IconButton\r\n ref={triggerRef}\r\n icon={Icon}\r\n ariaLabel={ariaLabel}\r\n aria-haspopup=\"menu\"\r\n aria-expanded={open}\r\n aria-controls={menuId}\r\n rounding={toggleRounding}\r\n shadow={toggleShadow}\r\n outline={toggleOutline}\r\n theme={theme}\r\n state={state}\r\n onClick={toggleDropdown}\r\n data-testid={`${testId}-trigger`}\r\n />\r\n\r\n {open && (\r\n <div\r\n id={menuId}\r\n ref={menuRef}\r\n role=\"menu\"\r\n aria-label={ariaLabel}\r\n aria-orientation=\"vertical\"\r\n className={menuClassNames}\r\n data-testid={`${testId}-menu`}\r\n >\r\n {items.map((item, index) =>\r\n item.href ? (\r\n <a\r\n key={index}\r\n href={item.href}\r\n className={classMap.item}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </a>\r\n ) : (\r\n <button\r\n key={index}\r\n type=\"button\"\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n className={classMap.item}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </button>\r\n )\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","\"use client\";\r\nimport React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n return <BaseDropdown {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nDropdown.displayName = \"Dropdown\";\r\nexport default Dropdown;\r\n"],"names":["IconButton","item"],"mappings":";;;;;;;AAAA,MAAM,WAAoD,CAAC,UACzD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACN,OAAM;AAAA,IACL,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA;AACH;ACZF,MAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ,gBAAA;AAAA,EACR,iBAAiB,mBAAA;AAAA,EACjB,eAAe,mBAAA;AAAA,EACf,eAAe,iBAAA;AAAA,EACf,aAAa,iBAAA;AAAA,EACb,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,eAAe,SAAS;AAAA,EACxB,YAAAA;AAAA,EACA;AACF,MAAsC;AACpC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AACzD,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,SAAS,MAAA;AAEf,QAAM,OAAO,eAAe;AAE5B,QAAM,iBAAiB,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AACpD,QAAM,gBAAgB,MAAM;;AAC1B,YAAQ,KAAK;AACb,mBAAe,EAAE;AACjB,2BAAW,YAAX,mBAAoB,UAApB;AAAA,EACF;AAEA,YAAU,MAAM;;AACd,QAAI,CAAC,KAAM;AACX,UAAM,aACJ,aAAQ,YAAR,mBAAiB,iBAA8B;AACjD,QAAI,aAAa,UAAU,SAAS,GAAG;AACrC,qBAAe,CAAC;AAAA,IAClB,OAAO;AACL,qBAAe,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;;AACd,QAAI,CAAC,QAAQ,cAAc,EAAG;AAC9B,UAAM,aACJ,aAAQ,YAAR,mBAAiB,iBAA8B;AACjD,iDAAY,iBAAZ,mBAA0B;AAAA,EAC5B,GAAG,CAAC,aAAa,IAAI,CAAC;AAEtB,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,MAAkB;AAC5C,UACE,YAAY,WACZ,CAAC,YAAY,QAAQ,SAAS,EAAE,MAAc,GAC9C;AACA,sBAAA;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,QAAI,QAAQ,QAAQ,SAAS;AAC3B,YAAM,OAAO,QAAQ,QAAQ,sBAAA;AAC7B,YAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,YAAM,OAAO,KAAK,OAAO;AACzB,UAAI,OAAO;AACT,gBAAQ,QAAQ,aAAa,uBAAuB,MAAM;AAC1D,gBAAQ,QAAQ,gBAAgB,oBAAoB;AAAA,MACtD,WAAW,MAAM;AACf,gBAAQ,QAAQ,aAAa,sBAAsB,MAAM;AACzD,gBAAQ,QAAQ,gBAAgB,qBAAqB;AAAA,MACvD,OAAO;AACL,gBAAQ,QAAQ,gBAAgB,qBAAqB;AACrD,gBAAQ,QAAQ,gBAAgB,oBAAoB;AAAA,MACtD;AAAA,IACF;AAEA,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;;AACpC,UAAI,CAAC,KAAM;AAEX,YAAM,MAAM,MAAM;AAClB,YAAM,WAAW,MAAM;AAEvB,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAA;AACF,sBAAA;AACA;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,OAAO;AACnB,sBAAA;AACA;AAAA,MACF;AAEA,UAAI,CAAC,SAAU;AAEf,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAA;AACF,uBAAe,CAAC,SAAU,OAAO,IAAI,KAAK,OAAO,KAAK,GAAI;AAAA,MAC5D,WAAW,EAAE,QAAQ,WAAW;AAC9B,UAAE,eAAA;AACF,uBAAe,CAAC,SAAU,OAAO,IAAI,MAAM,KAAK,OAAO,IAAI,OAAO,GAAI;AAAA,MACxE,WAAW,EAAE,QAAQ,QAAQ;AAC3B,UAAE,eAAA;AACF,uBAAe,CAAC;AAAA,MAClB,WAAW,EAAE,QAAQ,OAAO;AAC1B,UAAE,eAAA;AACF,uBAAe,MAAM,CAAC;AAAA,MACxB,YAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,eAAe,GAAG;AACnE,cAAMC,QAAO,MAAM,WAAW;AAC9B,YAAIA,OAAM;AACR,gBAAAA,MAAK,YAAL,wBAAAA;AACA,wBAAA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,WAAW;AAAA,EAAA;AAG3B,QAAM,iBAAiB;AAAA,IACrB,MACE;AAAA,MACE,SAAS;AAAA,MACT,UAAU,UAAU,SAAS,aAAa,SAAS;AAAA,MACnD,cAAc,SAAS,SAAS,WAAW,UAAU,CAAC,EAAE;AAAA,MACxD,gBAAgB,SAAS,QAAQ,WAAW,YAAY,CAAC,EAAE;AAAA,MAC3D;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,OAAO,YAAY,cAAc,aAAa;AAAA,EAAA;AAG3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,kBAAkB,SAAS,SAAS,SAAS;AAAA,MACxD,WAAW;AAAA,MACX,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA,iBAAc;AAAA,YACd,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,eAAa,GAAG,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAGvB,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,oBAAiB;AAAA,YACjB,WAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA,MAAM;AAAA,cAAI,CAACC,OAAM,UAChBA,MAAK,OACH;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAMA,MAAK;AAAA,kBACX,WAAW,SAAS;AAAA,kBACpB,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,SAAS,MAAM;;AACb,0BAAAA,MAAK,YAAL,wBAAAA;AACA,kCAAA;AAAA,kBACF;AAAA,kBACA,eAAaA,MAAK,aAAa;AAAA,kBAE9B,UAAA;AAAA,oBAAAA,MAAK,4BACH,QAAA,EAAK,WAAW,SAAS,MAAM,eAAY,QACzC,UAAAA,MAAK,KAAA,CACR;AAAA,oBAEDA,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAhBD;AAAA,cAAA,IAmBP;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,WAAW,SAAS;AAAA,kBACpB,SAAS,MAAM;;AACb,0BAAAA,MAAK,YAAL,wBAAAA;AACA,kCAAA;AAAA,kBACF;AAAA,kBACA,eAAaA,MAAK,aAAa;AAAA,kBAE9B,UAAA;AAAA,oBAAAA,MAAK,4BACH,QAAA,EAAK,WAAW,SAAS,MAAM,eAAY,QACzC,UAAAA,MAAK,KAAA,CACR;AAAA,oBAEDA,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAhBD;AAAA,cAAA;AAAA,YAiBP;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AACA,aAAa,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtO3B,MAAM,WAAoC,CAAC,UAAU;AACnD,6BAAQ,cAAA,EAAc,GAAG,OAAO,YAAwB,UAAU,QAAQ;AAC5E;AACA,SAAS,cAAc;"}
|
|
@@ -5,7 +5,7 @@ const classNames = require("./classNames-BcWMx052.cjs");
|
|
|
5
5
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
6
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
7
|
;/* empty css */
|
|
8
|
-
const IconButton = require("./IconButton-
|
|
8
|
+
const IconButton = require("./IconButton-aF7cTy19.cjs");
|
|
9
9
|
const MenuIcon = (props) => /* @__PURE__ */ require$$2.jsxs(
|
|
10
10
|
"svg",
|
|
11
11
|
{
|
|
@@ -300,4 +300,4 @@ const Dropdown = (props) => {
|
|
|
300
300
|
};
|
|
301
301
|
Dropdown.displayName = "Dropdown";
|
|
302
302
|
exports.Dropdown = Dropdown;
|
|
303
|
-
//# sourceMappingURL=Dropdown-
|
|
303
|
+
//# sourceMappingURL=Dropdown-IW2Ph6-e.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown-BnuZW883.cjs","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/next/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n strokeWidth=\"1.5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 5H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 12H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 19H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n useState,\r\n useRef,\r\n useEffect,\r\n useCallback,\r\n KeyboardEvent,\r\n useId,\r\n JSX,\r\n useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, IconButtonLikeRef } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n triggerIcon,\r\n items,\r\n align = \"right\",\r\n className = \"\",\r\n menuClassName = \"\",\r\n ariaLabel = \"Dropdown menu\",\r\n theme = getDefaultTheme(),\r\n toggleRounding = getDefaultRounding(),\r\n menuRounding = getDefaultRounding(),\r\n toggleShadow = getDefaultShadow(),\r\n menuShadow = getDefaultShadow(),\r\n toggleOutline = false,\r\n state = \"\",\r\n \"data-testid\": testId = \"dropdown\",\r\n IconButton,\r\n classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const triggerRef = useRef<IconButtonLikeRef | null>(null);\r\n const menuId = useId();\r\n\r\n const Icon = triggerIcon ?? MenuIcon;\r\n\r\n const toggleDropdown = () => setOpen((prev) => !prev);\r\n const closeDropdown = () => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n triggerRef.current?.focus?.();\r\n };\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n if (menuItems && menuItems.length > 0) {\r\n setActiveIndex(0);\r\n } else {\r\n setActiveIndex(-1);\r\n }\r\n }, [open]);\r\n\r\n useEffect(() => {\r\n if (!open || activeIndex < 0) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n menuItems?.[activeIndex]?.focus();\r\n }, [activeIndex, open]);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (\r\n dropdownRef.current &&\r\n !dropdownRef.current.contains(e.target as Node)\r\n ) {\r\n closeDropdown();\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n if (open && menuRef.current) {\r\n const rect = menuRef.current.getBoundingClientRect();\r\n const right = rect.right > window.innerWidth;\r\n const left = rect.left < 0;\r\n if (right) {\r\n menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n } else if (left) {\r\n menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n } else {\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n }\r\n }\r\n\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, [open]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (!open) return;\r\n\r\n const len = items.length;\r\n const hasItems = len > 0;\r\n\r\n if (e.key === \"Escape\") {\r\n e.preventDefault();\r\n closeDropdown();\r\n return;\r\n }\r\n if (e.key === \"Tab\") {\r\n closeDropdown();\r\n return;\r\n }\r\n\r\n if (!hasItems) return;\r\n\r\n if (e.key === \"ArrowDown\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n } else if (e.key === \"ArrowUp\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n } else if (e.key === \"Home\") {\r\n e.preventDefault();\r\n setActiveIndex(0);\r\n } else if (e.key === \"End\") {\r\n e.preventDefault();\r\n setActiveIndex(len - 1);\r\n } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n const item = items[activeIndex];\r\n if (item) {\r\n item.onClick?.();\r\n closeDropdown();\r\n }\r\n }\r\n },\r\n [open, items, activeIndex]\r\n );\r\n\r\n const menuClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.menu,\r\n align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n menuClassName\r\n ),\r\n [classMap, align, menuShadow, menuRounding, menuClassName]\r\n );\r\n\r\n return (\r\n <div\r\n ref={dropdownRef}\r\n className={combineClassNames(classMap.wrapper, className)}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <IconButton\r\n ref={triggerRef}\r\n icon={Icon}\r\n ariaLabel={ariaLabel}\r\n aria-haspopup=\"menu\"\r\n aria-expanded={open}\r\n aria-controls={menuId}\r\n rounding={toggleRounding}\r\n shadow={toggleShadow}\r\n outline={toggleOutline}\r\n theme={theme}\r\n state={state}\r\n onClick={toggleDropdown}\r\n data-testid={`${testId}-trigger`}\r\n />\r\n\r\n {open && (\r\n <div\r\n id={menuId}\r\n ref={menuRef}\r\n role=\"menu\"\r\n aria-label={ariaLabel}\r\n aria-orientation=\"vertical\"\r\n className={menuClassNames}\r\n data-testid={`${testId}-menu`}\r\n >\r\n {items.map((item, index) =>\r\n item.href ? (\r\n <a\r\n key={index}\r\n href={item.href}\r\n className={classMap.item}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </a>\r\n ) : (\r\n <button\r\n key={index}\r\n type=\"button\"\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n className={classMap.item}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </button>\r\n )\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","\"use client\";\r\nimport React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n return <BaseDropdown {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nDropdown.displayName = \"Dropdown\";\r\nexport default Dropdown;\r\n"],"names":["jsxs","jsx","getDefaultTheme","getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useEffect","useCallback","item","useMemo","combineClassNames","capitalize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown-IW2Ph6-e.cjs","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/next/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n strokeWidth=\"1.5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 5H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 12H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 19H21\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n useState,\r\n useRef,\r\n useEffect,\r\n useCallback,\r\n KeyboardEvent,\r\n useId,\r\n JSX,\r\n useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, IconButtonLikeRef } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n triggerIcon,\r\n items,\r\n align = \"right\",\r\n className = \"\",\r\n menuClassName = \"\",\r\n ariaLabel = \"Dropdown menu\",\r\n theme = getDefaultTheme(),\r\n toggleRounding = getDefaultRounding(),\r\n menuRounding = getDefaultRounding(),\r\n toggleShadow = getDefaultShadow(),\r\n menuShadow = getDefaultShadow(),\r\n toggleOutline = false,\r\n state = \"\",\r\n \"data-testid\": testId = \"dropdown\",\r\n IconButton,\r\n classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n const dropdownRef = useRef<HTMLDivElement>(null);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const triggerRef = useRef<IconButtonLikeRef | null>(null);\r\n const menuId = useId();\r\n\r\n const Icon = triggerIcon ?? MenuIcon;\r\n\r\n const toggleDropdown = () => setOpen((prev) => !prev);\r\n const closeDropdown = () => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n triggerRef.current?.focus?.();\r\n };\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n if (menuItems && menuItems.length > 0) {\r\n setActiveIndex(0);\r\n } else {\r\n setActiveIndex(-1);\r\n }\r\n }, [open]);\r\n\r\n useEffect(() => {\r\n if (!open || activeIndex < 0) return;\r\n const menuItems =\r\n menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n menuItems?.[activeIndex]?.focus();\r\n }, [activeIndex, open]);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (\r\n dropdownRef.current &&\r\n !dropdownRef.current.contains(e.target as Node)\r\n ) {\r\n closeDropdown();\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n if (open && menuRef.current) {\r\n const rect = menuRef.current.getBoundingClientRect();\r\n const right = rect.right > window.innerWidth;\r\n const left = rect.left < 0;\r\n if (right) {\r\n menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n } else if (left) {\r\n menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n } else {\r\n menuRef.current.removeAttribute(\"data-overflow-right\");\r\n menuRef.current.removeAttribute(\"data-overflow-left\");\r\n }\r\n }\r\n\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, [open]);\r\n\r\n const handleKeyDown = useCallback(\r\n (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (!open) return;\r\n\r\n const len = items.length;\r\n const hasItems = len > 0;\r\n\r\n if (e.key === \"Escape\") {\r\n e.preventDefault();\r\n closeDropdown();\r\n return;\r\n }\r\n if (e.key === \"Tab\") {\r\n closeDropdown();\r\n return;\r\n }\r\n\r\n if (!hasItems) return;\r\n\r\n if (e.key === \"ArrowDown\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n } else if (e.key === \"ArrowUp\") {\r\n e.preventDefault();\r\n setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n } else if (e.key === \"Home\") {\r\n e.preventDefault();\r\n setActiveIndex(0);\r\n } else if (e.key === \"End\") {\r\n e.preventDefault();\r\n setActiveIndex(len - 1);\r\n } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n const item = items[activeIndex];\r\n if (item) {\r\n item.onClick?.();\r\n closeDropdown();\r\n }\r\n }\r\n },\r\n [open, items, activeIndex]\r\n );\r\n\r\n const menuClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.menu,\r\n align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n menuClassName\r\n ),\r\n [classMap, align, menuShadow, menuRounding, menuClassName]\r\n );\r\n\r\n return (\r\n <div\r\n ref={dropdownRef}\r\n className={combineClassNames(classMap.wrapper, className)}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <IconButton\r\n ref={triggerRef}\r\n icon={Icon}\r\n ariaLabel={ariaLabel}\r\n aria-haspopup=\"menu\"\r\n aria-expanded={open}\r\n aria-controls={menuId}\r\n rounding={toggleRounding}\r\n shadow={toggleShadow}\r\n outline={toggleOutline}\r\n theme={theme}\r\n state={state}\r\n onClick={toggleDropdown}\r\n data-testid={`${testId}-trigger`}\r\n />\r\n\r\n {open && (\r\n <div\r\n id={menuId}\r\n ref={menuRef}\r\n role=\"menu\"\r\n aria-label={ariaLabel}\r\n aria-orientation=\"vertical\"\r\n className={menuClassNames}\r\n data-testid={`${testId}-menu`}\r\n >\r\n {items.map((item, index) =>\r\n item.href ? (\r\n <a\r\n key={index}\r\n href={item.href}\r\n className={classMap.item}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </a>\r\n ) : (\r\n <button\r\n key={index}\r\n type=\"button\"\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n className={classMap.item}\r\n onClick={() => {\r\n item.onClick?.();\r\n closeDropdown();\r\n }}\r\n data-testid={item[\"data-testid\"]}\r\n >\r\n {item.icon && (\r\n <span className={classMap.icon} aria-hidden=\"true\">\r\n {item.icon}\r\n </span>\r\n )}\r\n {item.label}\r\n </button>\r\n )\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","\"use client\";\r\nimport React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n return <BaseDropdown {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nDropdown.displayName = \"Dropdown\";\r\nexport default Dropdown;\r\n"],"names":["jsxs","jsx","getDefaultTheme","getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useEffect","useCallback","item","useMemo","combineClassNames","capitalize"],"mappings":"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"}
|
package/dist/next/Dropdown.js
CHANGED
|
@@ -5,7 +5,7 @@ const classNames = require("./classNames-BcWMx052.cjs");
|
|
|
5
5
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
6
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
7
|
;/* empty css */
|
|
8
|
-
const Button = require("./Button-
|
|
8
|
+
const Button = require("./Button-DPoX7ahh.cjs");
|
|
9
9
|
const BaseEmptyState = ({
|
|
10
10
|
icon: Icon,
|
|
11
11
|
title: title2 = "Nothing Here Yet",
|
|
@@ -179,4 +179,4 @@ const EmptyState = (props) => {
|
|
|
179
179
|
};
|
|
180
180
|
EmptyState.displayName = "EmptyState";
|
|
181
181
|
exports.EmptyState = EmptyState;
|
|
182
|
-
//# sourceMappingURL=EmptyState-
|
|
182
|
+
//# sourceMappingURL=EmptyState-BS6-CuHp.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState-
|
|
1
|
+
{"version":3,"file":"EmptyState-BS6-CuHp.cjs","sources":["../../src/components/EmptyState/EmptyStateBase.tsx","../../src/components/EmptyState/next/EmptyState.tsx"],"sourcesContent":["import React, { useMemo, useId } from \"react\";\r\nimport type { BaseEmptyStateProps } from \"./EmptyState.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseEmptyState: React.FC<BaseEmptyStateProps> = ({\r\n icon: Icon,\r\n title = \"Nothing Here Yet\",\r\n message = \"There’s no content to display.\",\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n outline = false,\r\n actionLabel,\r\n onActionClick,\r\n className = \"\",\r\n \"data-testid\": testId = \"empty-state\",\r\n Button,\r\n classMap,\r\n}) => {\r\n const uid = useId();\r\n const titleId = `${testId}-title-${uid}`;\r\n const descId = message ? `${testId}-message-${uid}` : undefined;\r\n\r\n const sectionClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.empty_state,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline && classMap.outline,\r\n className\r\n ),\r\n [classMap, rounding, shadow, size, state, theme, outline, className]\r\n );\r\n\r\n const buttonAriaLabel =\r\n typeof actionLabel === \"string\" ? undefined : \"Perform action\";\r\n\r\n return title ? (\r\n <section\r\n className={sectionClassNames}\r\n role=\"region\"\r\n aria-labelledby={titleId}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n {Icon && (\r\n <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n <Icon aria-hidden=\"true\" focusable={false} />\r\n </div>\r\n )}\r\n\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n {message && (\r\n <p\r\n id={descId}\r\n className={classMap.message}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n )}\r\n\r\n {actionLabel && onActionClick && (\r\n <Button\r\n theme=\"clear\"\r\n outline={outline}\r\n onClick={onActionClick}\r\n aria-label={buttonAriaLabel}\r\n data-testid={`${testId}-action`}\r\n >\r\n {actionLabel}\r\n </Button>\r\n )}\r\n </section>\r\n ) : (\r\n <section\r\n className={sectionClassNames}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n {Icon && (\r\n <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n <Icon aria-hidden=\"true\" focusable={false} />\r\n </div>\r\n )}\r\n\r\n {message && (\r\n <p\r\n id={descId}\r\n className={classMap.message}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n )}\r\n\r\n {actionLabel && onActionClick && (\r\n <Button\r\n theme=\"clear\"\r\n outline={outline}\r\n onClick={onActionClick}\r\n aria-label={buttonAriaLabel}\r\n data-testid={`${testId}-action`}\r\n >\r\n {actionLabel}\r\n </Button>\r\n )}\r\n </section>\r\n );\r\n};\r\n\r\nBaseEmptyState.displayName = \"BaseEmptyState\";\r\nexport default BaseEmptyState;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseEmptyState from \"../EmptyStateBase\";\r\nimport { EmptyStateProps } from \"../EmptyState.types\";\r\nimport { Button } from \"../../../index.next\";\r\nimport styles from \"./EmptyState.module.scss\";\r\n\r\nconst EmptyState: React.FC<EmptyStateProps> = (props) => {\r\n return <BaseEmptyState {...props} Button={Button} classMap={styles} />;\r\n};\r\nEmptyState.displayName = \"EmptyState\";\r\nexport default EmptyState;\r\n"],"names":["title","message","getDefaultTheme","getDefaultSize","getDefaultRounding","getDefaultShadow","outline","Button","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
|
4
4
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
5
5
|
import { a as getDefaultRounding, b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
|
|
6
6
|
/* empty css */
|
|
7
|
-
import { B as Button } from "./Button-
|
|
7
|
+
import { B as Button } from "./Button-DhH3Gy0J.js";
|
|
8
8
|
const BaseEmptyState = ({
|
|
9
9
|
icon: Icon,
|
|
10
10
|
title: title2 = "Nothing Here Yet",
|
|
@@ -180,4 +180,4 @@ EmptyState.displayName = "EmptyState";
|
|
|
180
180
|
export {
|
|
181
181
|
EmptyState as E
|
|
182
182
|
};
|
|
183
|
-
//# sourceMappingURL=EmptyState-
|
|
183
|
+
//# sourceMappingURL=EmptyState-D_Gcrj_3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState-
|
|
1
|
+
{"version":3,"file":"EmptyState-D_Gcrj_3.js","sources":["../../src/components/EmptyState/EmptyStateBase.tsx","../../src/components/EmptyState/next/EmptyState.tsx"],"sourcesContent":["import React, { useMemo, useId } from \"react\";\r\nimport type { BaseEmptyStateProps } from \"./EmptyState.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseEmptyState: React.FC<BaseEmptyStateProps> = ({\r\n icon: Icon,\r\n title = \"Nothing Here Yet\",\r\n message = \"There’s no content to display.\",\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n outline = false,\r\n actionLabel,\r\n onActionClick,\r\n className = \"\",\r\n \"data-testid\": testId = \"empty-state\",\r\n Button,\r\n classMap,\r\n}) => {\r\n const uid = useId();\r\n const titleId = `${testId}-title-${uid}`;\r\n const descId = message ? `${testId}-message-${uid}` : undefined;\r\n\r\n const sectionClassNames = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.empty_state,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n outline && classMap.outline,\r\n className\r\n ),\r\n [classMap, rounding, shadow, size, state, theme, outline, className]\r\n );\r\n\r\n const buttonAriaLabel =\r\n typeof actionLabel === \"string\" ? undefined : \"Perform action\";\r\n\r\n return title ? (\r\n <section\r\n className={sectionClassNames}\r\n role=\"region\"\r\n aria-labelledby={titleId}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n {Icon && (\r\n <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n <Icon aria-hidden=\"true\" focusable={false} />\r\n </div>\r\n )}\r\n\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n {message && (\r\n <p\r\n id={descId}\r\n className={classMap.message}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n )}\r\n\r\n {actionLabel && onActionClick && (\r\n <Button\r\n theme=\"clear\"\r\n outline={outline}\r\n onClick={onActionClick}\r\n aria-label={buttonAriaLabel}\r\n data-testid={`${testId}-action`}\r\n >\r\n {actionLabel}\r\n </Button>\r\n )}\r\n </section>\r\n ) : (\r\n <section\r\n className={sectionClassNames}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n {Icon && (\r\n <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n <Icon aria-hidden=\"true\" focusable={false} />\r\n </div>\r\n )}\r\n\r\n {message && (\r\n <p\r\n id={descId}\r\n className={classMap.message}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n )}\r\n\r\n {actionLabel && onActionClick && (\r\n <Button\r\n theme=\"clear\"\r\n outline={outline}\r\n onClick={onActionClick}\r\n aria-label={buttonAriaLabel}\r\n data-testid={`${testId}-action`}\r\n >\r\n {actionLabel}\r\n </Button>\r\n )}\r\n </section>\r\n );\r\n};\r\n\r\nBaseEmptyState.displayName = \"BaseEmptyState\";\r\nexport default BaseEmptyState;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseEmptyState from \"../EmptyStateBase\";\r\nimport { EmptyStateProps } from \"../EmptyState.types\";\r\nimport { Button } from \"../../../index.next\";\r\nimport styles from \"./EmptyState.module.scss\";\r\n\r\nconst EmptyState: React.FC<EmptyStateProps> = (props) => {\r\n return <BaseEmptyState {...props} Button={Button} classMap={styles} />;\r\n};\r\nEmptyState.displayName = \"EmptyState\";\r\nexport default EmptyState;\r\n"],"names":["title","message","outline","Button"],"mappings":"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"}
|
package/dist/next/EmptyState.js
CHANGED
|
@@ -5,10 +5,10 @@ const classNames = require("./classNames-BcWMx052.cjs");
|
|
|
5
5
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
6
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
7
|
;/* empty css */
|
|
8
|
-
const Button = require("./Button-
|
|
9
|
-
const IconButton = require("./IconButton-
|
|
8
|
+
const Button = require("./Button-DPoX7ahh.cjs");
|
|
9
|
+
const IconButton = require("./IconButton-aF7cTy19.cjs");
|
|
10
10
|
const FormGroup = require("./FormGroup-Bg2QlTu7.cjs");
|
|
11
|
-
const ProgressBar = require("./ProgressBar-
|
|
11
|
+
const ProgressBar = require("./ProgressBar-CDhjp_gn.cjs");
|
|
12
12
|
const FileIcon = (props) => /* @__PURE__ */ require$$2.jsxs(
|
|
13
13
|
"svg",
|
|
14
14
|
{
|
|
@@ -476,4 +476,4 @@ const FileUpload = (props) => {
|
|
|
476
476
|
};
|
|
477
477
|
FileUpload.displayName = "FileUpload";
|
|
478
478
|
exports.FileUpload = FileUpload;
|
|
479
|
-
//# sourceMappingURL=FileUpload-
|
|
479
|
+
//# sourceMappingURL=FileUpload-Cj99fQhe.cjs.map
|