boreal-ui 0.0.46 → 0.0.48
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-CbGHr_tX.js → Card-BzpcEKgi.js} +52 -7
- package/dist/core/Card-BzpcEKgi.js.map +1 -0
- package/dist/core/{Card-De2epy0R.cjs → Card-D6SI33n_.cjs} +52 -7
- package/dist/core/Card-D6SI33n_.cjs.map +1 -0
- package/dist/core/Card.cjs.js +1 -1
- package/dist/core/Card.js +1 -1
- package/dist/core/boreal-ui.css +897 -429
- package/dist/core/index.cjs.js +1 -1
- package/dist/core/index.js +1 -1
- package/dist/next/{Accordion-DY243Bq9.js → Accordion-CrUmV-HM.js} +50 -50
- package/dist/next/{Accordion-DY243Bq9.js.map → Accordion-CrUmV-HM.js.map} +1 -1
- package/dist/next/{Accordion-BPWTEHym.cjs → Accordion-ugkSb5dI.cjs} +50 -50
- package/dist/next/{Accordion-BPWTEHym.cjs.map → Accordion-ugkSb5dI.cjs.map} +1 -1
- package/dist/next/Accordion.cjs.js +1 -1
- package/dist/next/Accordion.js +1 -1
- package/dist/next/{Breadcrumbs-DsGClIKb.cjs → Breadcrumbs-CrKRsQf3.cjs} +2 -2
- package/dist/next/{Breadcrumbs-DsGClIKb.cjs.map → Breadcrumbs-CrKRsQf3.cjs.map} +1 -1
- package/dist/next/{Breadcrumbs-BbvkRUhf.js → Breadcrumbs-ZK64MIGd.js} +2 -2
- package/dist/next/{Breadcrumbs-BbvkRUhf.js.map → Breadcrumbs-ZK64MIGd.js.map} +1 -1
- package/dist/next/Breadcrumbs.cjs.js +1 -1
- package/dist/next/Breadcrumbs.js +1 -1
- package/dist/next/{Button-B1Fh4G0_.cjs → Button-BI0LErYM.cjs} +46 -46
- package/dist/next/{Button-B1Fh4G0_.cjs.map → Button-BI0LErYM.cjs.map} +1 -1
- package/dist/next/{Button-uZ3xTOOt.js → Button-qs4m4zx0.js} +46 -46
- package/dist/next/{Button-uZ3xTOOt.js.map → Button-qs4m4zx0.js.map} +1 -1
- package/dist/next/Button.cjs.js +1 -1
- package/dist/next/Button.js +1 -1
- package/dist/next/{Card-DtBEZZKo.cjs → Card-09MMj3o2.cjs} +114 -69
- package/dist/next/Card-09MMj3o2.cjs.map +1 -0
- package/dist/next/{Card-CBUZ2myq.js → Card-Btw1d4gS.js} +114 -69
- package/dist/next/Card-Btw1d4gS.js.map +1 -0
- package/dist/next/Card.cjs.js +1 -1
- package/dist/next/Card.js +1 -1
- package/dist/next/CheckBox.cjs.js +1 -1
- package/dist/next/CheckBox.js +1 -1
- package/dist/next/{Checkbox-BJ0rBZLF.js → Checkbox-DBidsakA.js} +44 -44
- package/dist/next/{Checkbox-BJ0rBZLF.js.map → Checkbox-DBidsakA.js.map} +1 -1
- package/dist/next/{Checkbox-Ch7osD3y.cjs → Checkbox-hA321207.cjs} +44 -44
- package/dist/next/{Checkbox-Ch7osD3y.cjs.map → Checkbox-hA321207.cjs.map} +1 -1
- package/dist/next/{Chip-DRR-cqkp.cjs → Chip-BWTBVAIE.cjs} +50 -50
- package/dist/next/{Chip-DRR-cqkp.cjs.map → Chip-BWTBVAIE.cjs.map} +1 -1
- package/dist/next/{Chip-Be5EUH1C.js → Chip-D2mvW5L7.js} +50 -50
- package/dist/next/{Chip-Be5EUH1C.js.map → Chip-D2mvW5L7.js.map} +1 -1
- package/dist/next/Chip.cjs.js +1 -1
- package/dist/next/Chip.js +1 -1
- package/dist/next/{CircularProgress-Cp2pGFmc.cjs → CircularProgress-BegWxawm.cjs} +37 -37
- package/dist/next/{CircularProgress-Cp2pGFmc.cjs.map → CircularProgress-BegWxawm.cjs.map} +1 -1
- package/dist/next/{CircularProgress-BUqdguII.js → CircularProgress-wBHZUhul.js} +37 -37
- package/dist/next/{CircularProgress-BUqdguII.js.map → CircularProgress-wBHZUhul.js.map} +1 -1
- package/dist/next/CircularProgress.cjs.js +1 -1
- package/dist/next/CircularProgress.js +1 -1
- package/dist/next/{ColorPicker-ChWOekWP.js → ColorPicker-Dd9iz-i8.js} +38 -38
- package/dist/next/{ColorPicker-ChWOekWP.js.map → ColorPicker-Dd9iz-i8.js.map} +1 -1
- package/dist/next/{ColorPicker-BHtO2mbU.cjs → ColorPicker-Tla92spe.cjs} +38 -38
- package/dist/next/{ColorPicker-BHtO2mbU.cjs.map → ColorPicker-Tla92spe.cjs.map} +1 -1
- package/dist/next/ColorPicker.cjs.js +1 -1
- package/dist/next/ColorPicker.js +1 -1
- package/dist/next/{CommandPalette-BjVJ7Nbm.cjs → CommandPalette-BO6R9zQs.cjs} +41 -41
- package/dist/next/{CommandPalette-BjVJ7Nbm.cjs.map → CommandPalette-BO6R9zQs.cjs.map} +1 -1
- package/dist/next/{CommandPalette--heYmAFP.js → CommandPalette-CN0BiN0R.js} +41 -41
- package/dist/next/{CommandPalette--heYmAFP.js.map → CommandPalette-CN0BiN0R.js.map} +1 -1
- package/dist/next/CommandPalette.cjs.js +1 -1
- package/dist/next/CommandPalette.js +1 -1
- package/dist/next/{DataTable-DQ1QRyZw.cjs → DataTable-CUJXAkHe.cjs} +40 -40
- package/dist/next/{DataTable-DQ1QRyZw.cjs.map → DataTable-CUJXAkHe.cjs.map} +1 -1
- package/dist/next/{DataTable-CnvOkZrU.js → DataTable-mMStogSP.js} +40 -40
- package/dist/next/{DataTable-CnvOkZrU.js.map → DataTable-mMStogSP.js.map} +1 -1
- package/dist/next/DataTable.cjs.js +1 -1
- package/dist/next/DataTable.js +1 -1
- package/dist/next/{DateTimePicker-IvBWNgkK.js → DateTimePicker-CphfYmZ8.js} +46 -46
- package/dist/next/{DateTimePicker-IvBWNgkK.js.map → DateTimePicker-CphfYmZ8.js.map} +1 -1
- package/dist/next/{DateTimePicker-2M4AJJXm.cjs → DateTimePicker-DwS2xQNw.cjs} +46 -46
- package/dist/next/{DateTimePicker-2M4AJJXm.cjs.map → DateTimePicker-DwS2xQNw.cjs.map} +1 -1
- package/dist/next/DateTimePicker.cjs.js +1 -1
- package/dist/next/DateTimePicker.js +1 -1
- package/dist/next/{Divider-ByDYa4v6.cjs → Divider-cx8e80sS.cjs} +28 -28
- package/dist/next/{Divider-ByDYa4v6.cjs.map → Divider-cx8e80sS.cjs.map} +1 -1
- package/dist/next/{Divider-BCCzNbAE.js → Divider-kiaQzYbi.js} +28 -28
- package/dist/next/{Divider-BCCzNbAE.js.map → Divider-kiaQzYbi.js.map} +1 -1
- package/dist/next/Divider.cjs.js +1 -1
- package/dist/next/Divider.js +1 -1
- package/dist/next/{EmptyState-BXPBiWSB.cjs → EmptyState-Bb90F-ej.cjs} +2 -2
- package/dist/next/{EmptyState-BXPBiWSB.cjs.map → EmptyState-Bb90F-ej.cjs.map} +1 -1
- package/dist/next/{EmptyState-BIDMx4a4.js → EmptyState-Brd4N36F.js} +2 -2
- package/dist/next/{EmptyState-BIDMx4a4.js.map → EmptyState-Brd4N36F.js.map} +1 -1
- package/dist/next/EmptyState.cjs.js +1 -1
- package/dist/next/EmptyState.js +1 -1
- package/dist/next/{FileUpload-DFhiesLM.js → FileUpload-BMMpH1El.js} +51 -51
- package/dist/next/{FileUpload-DFhiesLM.js.map → FileUpload-BMMpH1El.js.map} +1 -1
- package/dist/next/{FileUpload-CM6236DE.cjs → FileUpload-Drm5_xEx.cjs} +51 -51
- package/dist/next/{FileUpload-CM6236DE.cjs.map → FileUpload-Drm5_xEx.cjs.map} +1 -1
- package/dist/next/FileUpload.cjs.js +1 -1
- package/dist/next/FileUpload.js +1 -1
- package/dist/next/{Footer-tvOL2tDS.js → Footer-B6_LG958.js} +40 -40
- package/dist/next/{Footer-tvOL2tDS.js.map → Footer-B6_LG958.js.map} +1 -1
- package/dist/next/{Footer-BuPAIf5A.cjs → Footer-EF2-ryvY.cjs} +40 -40
- package/dist/next/{Footer-BuPAIf5A.cjs.map → Footer-EF2-ryvY.cjs.map} +1 -1
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/{FormGroup-U3EwnB0M.cjs → FormGroup-Bg2QlTu7.cjs} +30 -30
- package/dist/next/{FormGroup-U3EwnB0M.cjs.map → FormGroup-Bg2QlTu7.cjs.map} +1 -1
- package/dist/next/{FormGroup-QfUhtyhx.js → FormGroup-DmQChKxA.js} +30 -30
- package/dist/next/{FormGroup-QfUhtyhx.js.map → FormGroup-DmQChKxA.js.map} +1 -1
- package/dist/next/FormGroup.cjs.js +1 -1
- package/dist/next/FormGroup.js +1 -1
- package/dist/next/MessagePopUp.cjs.js +1 -1
- package/dist/next/MessagePopUp.js +1 -1
- package/dist/next/{MessagePopup-CqLFabp5.cjs → MessagePopup-DsquzWSn.cjs} +2 -2
- package/dist/next/{MessagePopup-CqLFabp5.cjs.map → MessagePopup-DsquzWSn.cjs.map} +1 -1
- package/dist/next/{MessagePopup-fyidnJOS.js → MessagePopup-WUBGyJ_F.js} +2 -2
- package/dist/next/{MessagePopup-fyidnJOS.js.map → MessagePopup-WUBGyJ_F.js.map} +1 -1
- package/dist/next/{MetricBox-BjdAzOrZ.js → MetricBox-C5KGkv7l.js} +47 -47
- package/dist/next/{MetricBox-BjdAzOrZ.js.map → MetricBox-C5KGkv7l.js.map} +1 -1
- package/dist/next/{MetricBox-C3B6Bkcb.cjs → MetricBox-D8eBxQ59.cjs} +47 -47
- package/dist/next/{MetricBox-C3B6Bkcb.cjs.map → MetricBox-D8eBxQ59.cjs.map} +1 -1
- package/dist/next/MetricBox.cjs.js +1 -1
- package/dist/next/MetricBox.js +1 -1
- package/dist/next/{NavBar-v_ckzQIo.js → NavBar-CmvgkEZt.js} +37 -37
- package/dist/next/{NavBar-v_ckzQIo.js.map → NavBar-CmvgkEZt.js.map} +1 -1
- package/dist/next/{NavBar-Ds_02bAe.cjs → NavBar-DVEf0iJH.cjs} +37 -37
- package/dist/next/{NavBar-Ds_02bAe.cjs.map → NavBar-DVEf0iJH.cjs.map} +1 -1
- package/dist/next/NavBar.cjs.js +1 -1
- package/dist/next/NavBar.js +1 -1
- package/dist/next/{NotificationCenter-5m57ahdP.cjs → NotificationCenter-CtL6rozQ.cjs} +42 -42
- package/dist/next/{NotificationCenter-5m57ahdP.cjs.map → NotificationCenter-CtL6rozQ.cjs.map} +1 -1
- package/dist/next/{NotificationCenter-CUTBk_oe.js → NotificationCenter-CtM10CVj.js} +42 -42
- package/dist/next/{NotificationCenter-CUTBk_oe.js.map → NotificationCenter-CtM10CVj.js.map} +1 -1
- package/dist/next/NotificationCenter.cjs.js +1 -1
- package/dist/next/NotificationCenter.js +1 -1
- package/dist/next/{Pager-sZUYcImi.cjs → Pager-Bxxewb8I.cjs} +2 -2
- package/dist/next/{Pager-sZUYcImi.cjs.map → Pager-Bxxewb8I.cjs.map} +1 -1
- package/dist/next/{Pager-Cug0N3GP.js → Pager-D0Mw7o7v.js} +2 -2
- package/dist/next/{Pager-Cug0N3GP.js.map → Pager-D0Mw7o7v.js.map} +1 -1
- package/dist/next/Pager.cjs.js +1 -1
- package/dist/next/Pager.js +1 -1
- package/dist/next/{PopOver-ixERZLpM.cjs → PopOver-gQfgHe9e.cjs} +40 -40
- package/dist/next/{PopOver-ixERZLpM.cjs.map → PopOver-gQfgHe9e.cjs.map} +1 -1
- package/dist/next/{PopOver-CmPp9PkL.js → PopOver-qSTx5y8g.js} +40 -40
- package/dist/next/{PopOver-CmPp9PkL.js.map → PopOver-qSTx5y8g.js.map} +1 -1
- package/dist/next/PopOver.cjs.js +1 -1
- package/dist/next/PopOver.js +1 -1
- package/dist/next/{ProgressBar-C6zKbiq5.cjs → ProgressBar-BMuv0kis.cjs} +42 -42
- package/dist/next/{ProgressBar-C6zKbiq5.cjs.map → ProgressBar-BMuv0kis.cjs.map} +1 -1
- package/dist/next/{ProgressBar-BoU2HJv3.js → ProgressBar-DuaWQouO.js} +42 -42
- package/dist/next/{ProgressBar-BoU2HJv3.js.map → ProgressBar-DuaWQouO.js.map} +1 -1
- package/dist/next/ProgressBar.cjs.js +1 -1
- package/dist/next/ProgressBar.js +1 -1
- package/dist/next/{RadioButton-C14Rsx9o.js → RadioButton-CEvIACkL.js} +38 -38
- package/dist/next/{RadioButton-C14Rsx9o.js.map → RadioButton-CEvIACkL.js.map} +1 -1
- package/dist/next/{RadioButton-BCu934Uo.cjs → RadioButton-D6oyNmVU.cjs} +38 -38
- package/dist/next/{RadioButton-BCu934Uo.cjs.map → RadioButton-D6oyNmVU.cjs.map} +1 -1
- package/dist/next/RadioButton.cjs.js +1 -1
- package/dist/next/RadioButton.js +1 -1
- package/dist/next/{Rating-C9BgQANc.cjs → Rating-BbqxsFU9.cjs} +34 -34
- package/dist/next/{Rating-C9BgQANc.cjs.map → Rating-BbqxsFU9.cjs.map} +1 -1
- package/dist/next/{Rating-aheV3uZJ.js → Rating-umLbRaAb.js} +34 -34
- package/dist/next/{Rating-aheV3uZJ.js.map → Rating-umLbRaAb.js.map} +1 -1
- package/dist/next/Rating.cjs.js +1 -1
- package/dist/next/Rating.js +1 -1
- package/dist/next/{Skeleton-Dmz7m0dj.cjs → Skeleton-C6wW8eyR.cjs} +26 -26
- package/dist/next/{Skeleton-Dmz7m0dj.cjs.map → Skeleton-C6wW8eyR.cjs.map} +1 -1
- package/dist/next/{Skeleton-D8C29p3K.js → Skeleton-DC4LJ059.js} +26 -26
- package/dist/next/{Skeleton-D8C29p3K.js.map → Skeleton-DC4LJ059.js.map} +1 -1
- package/dist/next/Skeleton.cjs.js +1 -1
- package/dist/next/Skeleton.js +1 -1
- package/dist/next/{Slider-DQM9nV1P.cjs → Slider-g41Qvh6s.cjs} +43 -43
- package/dist/next/{Slider-DQM9nV1P.cjs.map → Slider-g41Qvh6s.cjs.map} +1 -1
- package/dist/next/{Slider-BOAgWYkH.js → Slider-wAbg8hOH.js} +43 -43
- package/dist/next/{Slider-BOAgWYkH.js.map → Slider-wAbg8hOH.js.map} +1 -1
- package/dist/next/Slider.cjs.js +1 -1
- package/dist/next/Slider.js +1 -1
- package/dist/next/{Spinner-BFAOf4tt.js → Spinner-D3OQ29U9.js} +37 -37
- package/dist/next/{Spinner-BFAOf4tt.js.map → Spinner-D3OQ29U9.js.map} +1 -1
- package/dist/next/{Spinner-0GZngKjG.cjs → Spinner-Y53Z6fwK.cjs} +37 -37
- package/dist/next/{Spinner-0GZngKjG.cjs.map → Spinner-Y53Z6fwK.cjs.map} +1 -1
- package/dist/next/Spinner.cjs.js +1 -1
- package/dist/next/Spinner.js +1 -1
- package/dist/next/{Stepper-DY95eGPo.js → Stepper-BvA_ZAho.js} +39 -39
- package/dist/next/{Stepper-DY95eGPo.js.map → Stepper-BvA_ZAho.js.map} +1 -1
- package/dist/next/{Stepper-CfWc5rhd.cjs → Stepper-D6X70Sr6.cjs} +39 -39
- package/dist/next/{Stepper-CfWc5rhd.cjs.map → Stepper-D6X70Sr6.cjs.map} +1 -1
- package/dist/next/Stepper.cjs.js +1 -1
- package/dist/next/Stepper.js +1 -1
- package/dist/next/{Tabs-DmrS_FUa.js → Tabs-Bur4oYVF.js} +44 -44
- package/dist/next/{Tabs-DmrS_FUa.js.map → Tabs-Bur4oYVF.js.map} +1 -1
- package/dist/next/{Tabs-D8Efg8wn.cjs → Tabs-D-5VRbfh.cjs} +44 -44
- package/dist/next/{Tabs-D8Efg8wn.cjs.map → Tabs-D-5VRbfh.cjs.map} +1 -1
- package/dist/next/Tabs.cjs.js +1 -1
- package/dist/next/Tabs.js +1 -1
- package/dist/next/{TagInput-CUK5umXl.js → TagInput-DKzxPiwU.js} +46 -46
- package/dist/next/{TagInput-CUK5umXl.js.map → TagInput-DKzxPiwU.js.map} +1 -1
- package/dist/next/{TagInput-B3SUHn0c.cjs → TagInput-DfNJiPKh.cjs} +46 -46
- package/dist/next/{TagInput-B3SUHn0c.cjs.map → TagInput-DfNJiPKh.cjs.map} +1 -1
- package/dist/next/TagInput.cjs.js +1 -1
- package/dist/next/TagInput.js +1 -1
- package/dist/next/{Toolbar-C45B_I44.cjs → Toolbar-PwnuYGDR.cjs} +34 -34
- package/dist/next/{Toolbar-C45B_I44.cjs.map → Toolbar-PwnuYGDR.cjs.map} +1 -1
- package/dist/next/{Toolbar-Dq1qqx4P.js → Toolbar-wbusnAUV.js} +34 -34
- package/dist/next/{Toolbar-Dq1qqx4P.js.map → Toolbar-wbusnAUV.js.map} +1 -1
- package/dist/next/Toolbar.cjs.js +1 -1
- package/dist/next/Toolbar.js +1 -1
- package/dist/next/{Tooltip-BXd5FXXv.cjs → Tooltip-DPFnMhUd.cjs} +39 -39
- package/dist/next/{Tooltip-BXd5FXXv.cjs.map → Tooltip-DPFnMhUd.cjs.map} +1 -1
- package/dist/next/{Tooltip-BHIA1zE1.js → Tooltip-_GVlUXAq.js} +39 -39
- package/dist/next/{Tooltip-BHIA1zE1.js.map → Tooltip-_GVlUXAq.js.map} +1 -1
- package/dist/next/Tooltip.cjs.js +1 -1
- package/dist/next/Tooltip.js +1 -1
- package/dist/next/boreal-ui.css +3123 -2751
- package/dist/next/index.cjs.js +56 -56
- package/dist/next/index.js +56 -56
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Card/Card.types.d.ts +2 -1
- package/dist/types/components/Card/Card.types.d.ts.map +1 -1
- package/dist/types/components/Card/CardBase.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/core/Card-CbGHr_tX.js.map +0 -1
- package/dist/core/Card-De2epy0R.cjs.map +0 -1
- package/dist/next/Card-CBUZ2myq.js.map +0 -1
- package/dist/next/Card-DtBEZZKo.cjs.map +0 -1
|
@@ -89,36 +89,36 @@ const ColorPickerBase = ({
|
|
|
89
89
|
);
|
|
90
90
|
};
|
|
91
91
|
ColorPickerBase.displayName = "ColorPickerBase";
|
|
92
|
-
const noScroll = "
|
|
93
|
-
const errorMessage = "
|
|
94
|
-
const loadingContainer = "
|
|
95
|
-
const hideScrollbar = "
|
|
96
|
-
const sr_only = "
|
|
97
|
-
const color_picker = "
|
|
98
|
-
const legend = "
|
|
99
|
-
const grid = "
|
|
100
|
-
const selected = "
|
|
101
|
-
const swatch = "
|
|
102
|
-
const round = "
|
|
103
|
-
const square = "
|
|
104
|
-
const pill = "
|
|
105
|
-
const xs = "
|
|
106
|
-
const small = "
|
|
107
|
-
const medium = "
|
|
108
|
-
const large = "
|
|
109
|
-
const xl = "
|
|
110
|
-
const radio_input = "
|
|
111
|
-
const preview = "
|
|
112
|
-
const custom_input = "
|
|
113
|
-
const circle = "
|
|
114
|
-
const rounded = "
|
|
115
|
-
const shadowNone = "
|
|
116
|
-
const shadowLight = "
|
|
117
|
-
const shadowMedium = "
|
|
118
|
-
const shadowStrong = "
|
|
119
|
-
const shadowIntense = "
|
|
120
|
-
const spin = "
|
|
121
|
-
const pulse = "
|
|
92
|
+
const noScroll = "_noScroll_n70kt_108";
|
|
93
|
+
const errorMessage = "_errorMessage_n70kt_109";
|
|
94
|
+
const loadingContainer = "_loadingContainer_n70kt_110";
|
|
95
|
+
const hideScrollbar = "_hideScrollbar_n70kt_102";
|
|
96
|
+
const sr_only = "_sr_only_n70kt_111";
|
|
97
|
+
const color_picker = "_color_picker_n70kt_552";
|
|
98
|
+
const legend = "_legend_n70kt_577";
|
|
99
|
+
const grid = "_grid_n70kt_593";
|
|
100
|
+
const selected = "_selected_n70kt_609";
|
|
101
|
+
const swatch = "_swatch_n70kt_615";
|
|
102
|
+
const round = "_round_n70kt_632";
|
|
103
|
+
const square = "_square_n70kt_635";
|
|
104
|
+
const pill = "_pill_n70kt_638";
|
|
105
|
+
const xs = "_xs_n70kt_642";
|
|
106
|
+
const small = "_small_n70kt_658";
|
|
107
|
+
const medium = "_medium_n70kt_674";
|
|
108
|
+
const large = "_large_n70kt_690";
|
|
109
|
+
const xl = "_xl_n70kt_706";
|
|
110
|
+
const radio_input = "_radio_input_n70kt_723";
|
|
111
|
+
const preview = "_preview_n70kt_727";
|
|
112
|
+
const custom_input = "_custom_input_n70kt_735";
|
|
113
|
+
const circle = "_circle_n70kt_750";
|
|
114
|
+
const rounded = "_rounded_n70kt_758";
|
|
115
|
+
const shadowNone = "_shadowNone_n70kt_762";
|
|
116
|
+
const shadowLight = "_shadowLight_n70kt_766";
|
|
117
|
+
const shadowMedium = "_shadowMedium_n70kt_770";
|
|
118
|
+
const shadowStrong = "_shadowStrong_n70kt_774";
|
|
119
|
+
const shadowIntense = "_shadowIntense_n70kt_778";
|
|
120
|
+
const spin = "_spin_n70kt_1";
|
|
121
|
+
const pulse = "_pulse_n70kt_1";
|
|
122
122
|
const styles = {
|
|
123
123
|
noScroll,
|
|
124
124
|
errorMessage,
|
|
@@ -148,19 +148,19 @@ const styles = {
|
|
|
148
148
|
shadowMedium,
|
|
149
149
|
shadowStrong,
|
|
150
150
|
shadowIntense,
|
|
151
|
-
"fade-in": "_fade-
|
|
152
|
-
"slide-up": "_slide-
|
|
153
|
-
"spin-3d": "_spin-
|
|
151
|
+
"fade-in": "_fade-in_n70kt_1",
|
|
152
|
+
"slide-up": "_slide-up_n70kt_1",
|
|
153
|
+
"spin-3d": "_spin-3d_n70kt_1",
|
|
154
154
|
spin,
|
|
155
155
|
pulse,
|
|
156
|
-
"fade-in-up": "_fade-in-
|
|
157
|
-
"progress-grow": "_progress-
|
|
158
|
-
"indeterminate-move": "_indeterminate-
|
|
159
|
-
"skeleton-loading": "_skeleton-
|
|
156
|
+
"fade-in-up": "_fade-in-up_n70kt_1",
|
|
157
|
+
"progress-grow": "_progress-grow_n70kt_1",
|
|
158
|
+
"indeterminate-move": "_indeterminate-move_n70kt_1",
|
|
159
|
+
"skeleton-loading": "_skeleton-loading_n70kt_1"
|
|
160
160
|
};
|
|
161
161
|
const ColorPicker = (props) => /* @__PURE__ */ jsx(ColorPickerBase, { ...props, classMap: styles });
|
|
162
162
|
ColorPicker.displayName = "ColorPicker";
|
|
163
163
|
export {
|
|
164
164
|
ColorPicker as C
|
|
165
165
|
};
|
|
166
|
-
//# sourceMappingURL=ColorPicker-
|
|
166
|
+
//# sourceMappingURL=ColorPicker-Dd9iz-i8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker-
|
|
1
|
+
{"version":3,"file":"ColorPicker-Dd9iz-i8.js","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/next/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultShadow,\r\n getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n label = \"Choose a color\",\r\n colors,\r\n selected,\r\n onChange,\r\n name = \"color-picker\",\r\n disabled = false,\r\n size = getDefaultSize(),\r\n shadow = getDefaultShadow(),\r\n shape = \"round\",\r\n allowCustom = false,\r\n className = \"\",\r\n classMap,\r\n \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n const legendId = `${testId}-legend`;\r\n\r\n const labelClass = useMemo(\r\n () => combineClassNames(classMap.swatch, classMap[size], classMap[shape]),\r\n [classMap, size, shape]\r\n );\r\n\r\n return (\r\n <fieldset\r\n className={combineClassNames(classMap.color_picker, className)}\r\n disabled={disabled}\r\n data-testid={testId}\r\n >\r\n <legend id={legendId} className={classMap.legend}>\r\n {label}\r\n </legend>\r\n\r\n <div className={classMap.color_picker_grid}>\r\n {colors.map((color, i) => {\r\n const id = `${testId}-color-${i}`;\r\n const isSelected = selected === color.value;\r\n return (\r\n <label\r\n key={`${color.value}-${i}`}\r\n className={labelClass}\r\n htmlFor={id}\r\n title={color.label}\r\n data-testid={`${testId}-option-${color.value}`}\r\n >\r\n <input\r\n type=\"radio\"\r\n name={name}\r\n id={id}\r\n value={color.value}\r\n checked={isSelected}\r\n onChange={() => onChange(color.value)}\r\n className={classMap.radio_input}\r\n />\r\n <span className=\"sr_only\">{color.label}</span>\r\n <span\r\n className={combineClassNames(\r\n classMap.preview,\r\n classMap[shape],\r\n isSelected && classMap.selected,\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n )}\r\n style={{ backgroundColor: color.value }}\r\n aria-hidden=\"true\"\r\n />\r\n </label>\r\n );\r\n })}\r\n </div>\r\n\r\n {allowCustom && (\r\n <input\r\n type=\"color\"\r\n className={classMap.custom_input}\r\n value={selected}\r\n onChange={(e) => onChange(e.target.value)}\r\n aria-label=\"Custom color picker\"\r\n data-testid={`${testId}-custom-input`}\r\n />\r\n )}\r\n </fieldset>\r\n );\r\n};\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport styles from \"./ColorPicker.module.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n <ColorPickerBase {...props} classMap={styles} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["selected"],"mappings":";;;;;AASA,MAAM,kBAAkD,CAAC;AAAA,EACvD,QAAQ;AAAA,EACR;AAAA,EACA,UAAAA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,eAAA;AAAA,EACP,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA,eAAe,SAAS;AAC1B,MAAM;AACJ,QAAM,WAAW,GAAG,MAAM;AAE1B,QAAM,aAAa;AAAA,IACjB,MAAM,kBAAkB,SAAS,QAAQ,SAAS,IAAI,GAAG,SAAS,KAAK,CAAC;AAAA,IACxE,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,kBAAkB,SAAS,cAAc,SAAS;AAAA,MAC7D;AAAA,MACA,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,oBAAC,YAAO,IAAI,UAAU,WAAW,SAAS,QACvC,UAAA,OACH;AAAA,QAEA,oBAAC,SAAI,WAAW,SAAS,mBACtB,UAAA,OAAO,IAAI,CAAC,OAAO,MAAM;AACxB,gBAAM,KAAK,GAAG,MAAM,UAAU,CAAC;AAC/B,gBAAM,aAAaA,cAAa,MAAM;AACtC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW;AAAA,cACX,SAAS;AAAA,cACT,OAAO,MAAM;AAAA,cACb,eAAa,GAAG,MAAM,WAAW,MAAM,KAAK;AAAA,cAE5C,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA,OAAO,MAAM;AAAA,oBACb,SAAS;AAAA,oBACT,UAAU,MAAM,SAAS,MAAM,KAAK;AAAA,oBACpC,WAAW,SAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEtB,oBAAC,QAAA,EAAK,WAAU,WAAW,gBAAM,OAAM;AAAA,gBACvC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW;AAAA,sBACT,SAAS;AAAA,sBACT,SAAS,KAAK;AAAA,sBACd,cAAc,SAAS;AAAA,sBACvB,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,oBAAA;AAAA,oBAElD,OAAO,EAAE,iBAAiB,MAAM,MAAA;AAAA,oBAChC,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,YAzBK,GAAG,MAAM,KAAK,IAAI,CAAC;AAAA,UAAA;AAAA,QA4B9B,CAAC,EAAA,CACH;AAAA,QAEC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,SAAS;AAAA,YACpB,OAAOA;AAAA,YACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,cAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAIR;AACA,gBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpF9B,MAAM,cAA0C,CAAC,UAC/C,oBAAC,mBAAiB,GAAG,OAAO,UAAU,OAAA,CAAQ;AAEhD,YAAY,cAAc;"}
|
|
@@ -90,36 +90,36 @@ const ColorPickerBase = ({
|
|
|
90
90
|
);
|
|
91
91
|
};
|
|
92
92
|
ColorPickerBase.displayName = "ColorPickerBase";
|
|
93
|
-
const noScroll = "
|
|
94
|
-
const errorMessage = "
|
|
95
|
-
const loadingContainer = "
|
|
96
|
-
const hideScrollbar = "
|
|
97
|
-
const sr_only = "
|
|
98
|
-
const color_picker = "
|
|
99
|
-
const legend = "
|
|
100
|
-
const grid = "
|
|
101
|
-
const selected = "
|
|
102
|
-
const swatch = "
|
|
103
|
-
const round = "
|
|
104
|
-
const square = "
|
|
105
|
-
const pill = "
|
|
106
|
-
const xs = "
|
|
107
|
-
const small = "
|
|
108
|
-
const medium = "
|
|
109
|
-
const large = "
|
|
110
|
-
const xl = "
|
|
111
|
-
const radio_input = "
|
|
112
|
-
const preview = "
|
|
113
|
-
const custom_input = "
|
|
114
|
-
const circle = "
|
|
115
|
-
const rounded = "
|
|
116
|
-
const shadowNone = "
|
|
117
|
-
const shadowLight = "
|
|
118
|
-
const shadowMedium = "
|
|
119
|
-
const shadowStrong = "
|
|
120
|
-
const shadowIntense = "
|
|
121
|
-
const spin = "
|
|
122
|
-
const pulse = "
|
|
93
|
+
const noScroll = "_noScroll_n70kt_108";
|
|
94
|
+
const errorMessage = "_errorMessage_n70kt_109";
|
|
95
|
+
const loadingContainer = "_loadingContainer_n70kt_110";
|
|
96
|
+
const hideScrollbar = "_hideScrollbar_n70kt_102";
|
|
97
|
+
const sr_only = "_sr_only_n70kt_111";
|
|
98
|
+
const color_picker = "_color_picker_n70kt_552";
|
|
99
|
+
const legend = "_legend_n70kt_577";
|
|
100
|
+
const grid = "_grid_n70kt_593";
|
|
101
|
+
const selected = "_selected_n70kt_609";
|
|
102
|
+
const swatch = "_swatch_n70kt_615";
|
|
103
|
+
const round = "_round_n70kt_632";
|
|
104
|
+
const square = "_square_n70kt_635";
|
|
105
|
+
const pill = "_pill_n70kt_638";
|
|
106
|
+
const xs = "_xs_n70kt_642";
|
|
107
|
+
const small = "_small_n70kt_658";
|
|
108
|
+
const medium = "_medium_n70kt_674";
|
|
109
|
+
const large = "_large_n70kt_690";
|
|
110
|
+
const xl = "_xl_n70kt_706";
|
|
111
|
+
const radio_input = "_radio_input_n70kt_723";
|
|
112
|
+
const preview = "_preview_n70kt_727";
|
|
113
|
+
const custom_input = "_custom_input_n70kt_735";
|
|
114
|
+
const circle = "_circle_n70kt_750";
|
|
115
|
+
const rounded = "_rounded_n70kt_758";
|
|
116
|
+
const shadowNone = "_shadowNone_n70kt_762";
|
|
117
|
+
const shadowLight = "_shadowLight_n70kt_766";
|
|
118
|
+
const shadowMedium = "_shadowMedium_n70kt_770";
|
|
119
|
+
const shadowStrong = "_shadowStrong_n70kt_774";
|
|
120
|
+
const shadowIntense = "_shadowIntense_n70kt_778";
|
|
121
|
+
const spin = "_spin_n70kt_1";
|
|
122
|
+
const pulse = "_pulse_n70kt_1";
|
|
123
123
|
const styles = {
|
|
124
124
|
noScroll,
|
|
125
125
|
errorMessage,
|
|
@@ -149,17 +149,17 @@ const styles = {
|
|
|
149
149
|
shadowMedium,
|
|
150
150
|
shadowStrong,
|
|
151
151
|
shadowIntense,
|
|
152
|
-
"fade-in": "_fade-
|
|
153
|
-
"slide-up": "_slide-
|
|
154
|
-
"spin-3d": "_spin-
|
|
152
|
+
"fade-in": "_fade-in_n70kt_1",
|
|
153
|
+
"slide-up": "_slide-up_n70kt_1",
|
|
154
|
+
"spin-3d": "_spin-3d_n70kt_1",
|
|
155
155
|
spin,
|
|
156
156
|
pulse,
|
|
157
|
-
"fade-in-up": "_fade-in-
|
|
158
|
-
"progress-grow": "_progress-
|
|
159
|
-
"indeterminate-move": "_indeterminate-
|
|
160
|
-
"skeleton-loading": "_skeleton-
|
|
157
|
+
"fade-in-up": "_fade-in-up_n70kt_1",
|
|
158
|
+
"progress-grow": "_progress-grow_n70kt_1",
|
|
159
|
+
"indeterminate-move": "_indeterminate-move_n70kt_1",
|
|
160
|
+
"skeleton-loading": "_skeleton-loading_n70kt_1"
|
|
161
161
|
};
|
|
162
162
|
const ColorPicker = (props) => /* @__PURE__ */ require$$2.jsx(ColorPickerBase, { ...props, classMap: styles });
|
|
163
163
|
ColorPicker.displayName = "ColorPicker";
|
|
164
164
|
exports.ColorPicker = ColorPicker;
|
|
165
|
-
//# sourceMappingURL=ColorPicker-
|
|
165
|
+
//# sourceMappingURL=ColorPicker-Tla92spe.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker-
|
|
1
|
+
{"version":3,"file":"ColorPicker-Tla92spe.cjs","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/next/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultShadow,\r\n getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n label = \"Choose a color\",\r\n colors,\r\n selected,\r\n onChange,\r\n name = \"color-picker\",\r\n disabled = false,\r\n size = getDefaultSize(),\r\n shadow = getDefaultShadow(),\r\n shape = \"round\",\r\n allowCustom = false,\r\n className = \"\",\r\n classMap,\r\n \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n const legendId = `${testId}-legend`;\r\n\r\n const labelClass = useMemo(\r\n () => combineClassNames(classMap.swatch, classMap[size], classMap[shape]),\r\n [classMap, size, shape]\r\n );\r\n\r\n return (\r\n <fieldset\r\n className={combineClassNames(classMap.color_picker, className)}\r\n disabled={disabled}\r\n data-testid={testId}\r\n >\r\n <legend id={legendId} className={classMap.legend}>\r\n {label}\r\n </legend>\r\n\r\n <div className={classMap.color_picker_grid}>\r\n {colors.map((color, i) => {\r\n const id = `${testId}-color-${i}`;\r\n const isSelected = selected === color.value;\r\n return (\r\n <label\r\n key={`${color.value}-${i}`}\r\n className={labelClass}\r\n htmlFor={id}\r\n title={color.label}\r\n data-testid={`${testId}-option-${color.value}`}\r\n >\r\n <input\r\n type=\"radio\"\r\n name={name}\r\n id={id}\r\n value={color.value}\r\n checked={isSelected}\r\n onChange={() => onChange(color.value)}\r\n className={classMap.radio_input}\r\n />\r\n <span className=\"sr_only\">{color.label}</span>\r\n <span\r\n className={combineClassNames(\r\n classMap.preview,\r\n classMap[shape],\r\n isSelected && classMap.selected,\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n )}\r\n style={{ backgroundColor: color.value }}\r\n aria-hidden=\"true\"\r\n />\r\n </label>\r\n );\r\n })}\r\n </div>\r\n\r\n {allowCustom && (\r\n <input\r\n type=\"color\"\r\n className={classMap.custom_input}\r\n value={selected}\r\n onChange={(e) => onChange(e.target.value)}\r\n aria-label=\"Custom color picker\"\r\n data-testid={`${testId}-custom-input`}\r\n />\r\n )}\r\n </fieldset>\r\n );\r\n};\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport styles from \"./ColorPicker.module.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n <ColorPickerBase {...props} classMap={styles} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["selected","getDefaultSize","getDefaultShadow","useMemo","combineClassNames","jsxs","jsx","capitalize"],"mappings":";;;;;;AASA,MAAM,kBAAkD,CAAC;AAAA,EACvD,QAAQ;AAAA,EACR;AAAA,EACA,UAAAA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAOC,kBAAAA,eAAA;AAAA,EACP,SAASC,kBAAAA,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA,eAAe,SAAS;AAC1B,MAAM;AACJ,QAAM,WAAW,GAAG,MAAM;AAE1B,QAAM,aAAaC,MAAAA;AAAAA,IACjB,MAAMC,WAAAA,kBAAkB,SAAS,QAAQ,SAAS,IAAI,GAAG,SAAS,KAAK,CAAC;AAAA,IACxE,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,WAAAA,kBAAkB,SAAS,cAAc,SAAS;AAAA,MAC7D;AAAA,MACA,eAAa;AAAA,MAEb,UAAA;AAAA,QAAAE,+BAAC,YAAO,IAAI,UAAU,WAAW,SAAS,QACvC,UAAA,OACH;AAAA,QAEAA,2BAAAA,IAAC,SAAI,WAAW,SAAS,mBACtB,UAAA,OAAO,IAAI,CAAC,OAAO,MAAM;AACxB,gBAAM,KAAK,GAAG,MAAM,UAAU,CAAC;AAC/B,gBAAM,aAAaN,cAAa,MAAM;AACtC,iBACEK,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW;AAAA,cACX,SAAS;AAAA,cACT,OAAO,MAAM;AAAA,cACb,eAAa,GAAG,MAAM,WAAW,MAAM,KAAK;AAAA,cAE5C,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA,OAAO,MAAM;AAAA,oBACb,SAAS;AAAA,oBACT,UAAU,MAAM,SAAS,MAAM,KAAK;AAAA,oBACpC,WAAW,SAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEtBA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,gBAAM,OAAM;AAAA,gBACvCA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWF,WAAAA;AAAAA,sBACT,SAAS;AAAA,sBACT,SAAS,KAAK;AAAA,sBACd,cAAc,SAAS;AAAA,sBACvB,UAAU,SAAS,SAASG,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,oBAAA;AAAA,oBAElD,OAAO,EAAE,iBAAiB,MAAM,MAAA;AAAA,oBAChC,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,YAzBK,GAAG,MAAM,KAAK,IAAI,CAAC;AAAA,UAAA;AAAA,QA4B9B,CAAC,EAAA,CACH;AAAA,QAEC,eACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,SAAS;AAAA,YACpB,OAAON;AAAA,YACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,cAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAIR;AACA,gBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpF9B,MAAM,cAA0C,CAAC,UAC/CM,+BAAC,mBAAiB,GAAG,OAAO,UAAU,OAAA,CAAQ;AAEhD,YAAY,cAAc;;"}
|
package/dist/next/ColorPicker.js
CHANGED
|
@@ -227,39 +227,39 @@ const CommandPaletteBase = ({
|
|
|
227
227
|
);
|
|
228
228
|
};
|
|
229
229
|
CommandPaletteBase.displayName = "CommandPaletteBase";
|
|
230
|
-
const noScroll = "
|
|
231
|
-
const errorMessage = "
|
|
232
|
-
const loadingContainer = "
|
|
233
|
-
const hideScrollbar = "
|
|
234
|
-
const sr_only = "
|
|
235
|
-
const overlay = "
|
|
236
|
-
const command_palette = "
|
|
237
|
-
const roundNone = "
|
|
238
|
-
const item = "
|
|
239
|
-
const roundSmall = "
|
|
240
|
-
const roundMedium = "
|
|
241
|
-
const roundLarge = "
|
|
242
|
-
const roundFull = "
|
|
243
|
-
const shadowNone = "
|
|
244
|
-
const shadowLight = "
|
|
245
|
-
const shadowMedium = "
|
|
246
|
-
const shadowStrong = "
|
|
247
|
-
const shadowIntense = "
|
|
248
|
-
const input = "
|
|
249
|
-
const list = "
|
|
250
|
-
const icon = "
|
|
251
|
-
const empty = "
|
|
252
|
-
const active = "
|
|
253
|
-
const primary = "
|
|
254
|
-
const secondary = "
|
|
255
|
-
const tertiary = "
|
|
256
|
-
const quaternary = "
|
|
257
|
-
const clear = "
|
|
258
|
-
const success = "
|
|
259
|
-
const error = "
|
|
260
|
-
const warning = "
|
|
261
|
-
const spin = "
|
|
262
|
-
const pulse = "
|
|
230
|
+
const noScroll = "_noScroll_egymq_108";
|
|
231
|
+
const errorMessage = "_errorMessage_egymq_109";
|
|
232
|
+
const loadingContainer = "_loadingContainer_egymq_110";
|
|
233
|
+
const hideScrollbar = "_hideScrollbar_egymq_102";
|
|
234
|
+
const sr_only = "_sr_only_egymq_111";
|
|
235
|
+
const overlay = "_overlay_egymq_552";
|
|
236
|
+
const command_palette = "_command_palette_egymq_573";
|
|
237
|
+
const roundNone = "_roundNone_egymq_604";
|
|
238
|
+
const item = "_item_egymq_608";
|
|
239
|
+
const roundSmall = "_roundSmall_egymq_612";
|
|
240
|
+
const roundMedium = "_roundMedium_egymq_620";
|
|
241
|
+
const roundLarge = "_roundLarge_egymq_628";
|
|
242
|
+
const roundFull = "_roundFull_egymq_636";
|
|
243
|
+
const shadowNone = "_shadowNone_egymq_644";
|
|
244
|
+
const shadowLight = "_shadowLight_egymq_648";
|
|
245
|
+
const shadowMedium = "_shadowMedium_egymq_652";
|
|
246
|
+
const shadowStrong = "_shadowStrong_egymq_656";
|
|
247
|
+
const shadowIntense = "_shadowIntense_egymq_660";
|
|
248
|
+
const input = "_input_egymq_664";
|
|
249
|
+
const list = "_list_egymq_689";
|
|
250
|
+
const icon = "_icon_egymq_749";
|
|
251
|
+
const empty = "_empty_egymq_753";
|
|
252
|
+
const active = "_active_egymq_768";
|
|
253
|
+
const primary = "_primary_egymq_773";
|
|
254
|
+
const secondary = "_secondary_egymq_791";
|
|
255
|
+
const tertiary = "_tertiary_egymq_809";
|
|
256
|
+
const quaternary = "_quaternary_egymq_827";
|
|
257
|
+
const clear = "_clear_egymq_845";
|
|
258
|
+
const success = "_success_egymq_863";
|
|
259
|
+
const error = "_error_egymq_109";
|
|
260
|
+
const warning = "_warning_egymq_899";
|
|
261
|
+
const spin = "_spin_egymq_1";
|
|
262
|
+
const pulse = "_pulse_egymq_1";
|
|
263
263
|
const styles = {
|
|
264
264
|
noScroll,
|
|
265
265
|
errorMessage,
|
|
@@ -292,15 +292,15 @@ const styles = {
|
|
|
292
292
|
success,
|
|
293
293
|
error,
|
|
294
294
|
warning,
|
|
295
|
-
"fade-in": "_fade-
|
|
296
|
-
"slide-up": "_slide-
|
|
297
|
-
"spin-3d": "_spin-
|
|
295
|
+
"fade-in": "_fade-in_egymq_1",
|
|
296
|
+
"slide-up": "_slide-up_egymq_1",
|
|
297
|
+
"spin-3d": "_spin-3d_egymq_1",
|
|
298
298
|
spin,
|
|
299
299
|
pulse,
|
|
300
|
-
"fade-in-up": "_fade-in-
|
|
301
|
-
"progress-grow": "_progress-
|
|
302
|
-
"indeterminate-move": "_indeterminate-
|
|
303
|
-
"skeleton-loading": "_skeleton-
|
|
300
|
+
"fade-in-up": "_fade-in-up_egymq_1",
|
|
301
|
+
"progress-grow": "_progress-grow_egymq_1",
|
|
302
|
+
"indeterminate-move": "_indeterminate-move_egymq_1",
|
|
303
|
+
"skeleton-loading": "_skeleton-loading_egymq_1"
|
|
304
304
|
};
|
|
305
305
|
const CommandPalette = (props) => /* @__PURE__ */ require$$2.jsx(
|
|
306
306
|
CommandPaletteBase,
|
|
@@ -312,4 +312,4 @@ const CommandPalette = (props) => /* @__PURE__ */ require$$2.jsx(
|
|
|
312
312
|
);
|
|
313
313
|
CommandPalette.displayName = "CommandPalette";
|
|
314
314
|
exports.CommandPalette = CommandPalette;
|
|
315
|
-
//# sourceMappingURL=CommandPalette-
|
|
315
|
+
//# sourceMappingURL=CommandPalette-BO6R9zQs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette-BjVJ7Nbm.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-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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"}
|
|
@@ -226,39 +226,39 @@ const CommandPaletteBase = ({
|
|
|
226
226
|
);
|
|
227
227
|
};
|
|
228
228
|
CommandPaletteBase.displayName = "CommandPaletteBase";
|
|
229
|
-
const noScroll = "
|
|
230
|
-
const errorMessage = "
|
|
231
|
-
const loadingContainer = "
|
|
232
|
-
const hideScrollbar = "
|
|
233
|
-
const sr_only = "
|
|
234
|
-
const overlay = "
|
|
235
|
-
const command_palette = "
|
|
236
|
-
const roundNone = "
|
|
237
|
-
const item = "
|
|
238
|
-
const roundSmall = "
|
|
239
|
-
const roundMedium = "
|
|
240
|
-
const roundLarge = "
|
|
241
|
-
const roundFull = "
|
|
242
|
-
const shadowNone = "
|
|
243
|
-
const shadowLight = "
|
|
244
|
-
const shadowMedium = "
|
|
245
|
-
const shadowStrong = "
|
|
246
|
-
const shadowIntense = "
|
|
247
|
-
const input = "
|
|
248
|
-
const list = "
|
|
249
|
-
const icon = "
|
|
250
|
-
const empty = "
|
|
251
|
-
const active = "
|
|
252
|
-
const primary = "
|
|
253
|
-
const secondary = "
|
|
254
|
-
const tertiary = "
|
|
255
|
-
const quaternary = "
|
|
256
|
-
const clear = "
|
|
257
|
-
const success = "
|
|
258
|
-
const error = "
|
|
259
|
-
const warning = "
|
|
260
|
-
const spin = "
|
|
261
|
-
const pulse = "
|
|
229
|
+
const noScroll = "_noScroll_egymq_108";
|
|
230
|
+
const errorMessage = "_errorMessage_egymq_109";
|
|
231
|
+
const loadingContainer = "_loadingContainer_egymq_110";
|
|
232
|
+
const hideScrollbar = "_hideScrollbar_egymq_102";
|
|
233
|
+
const sr_only = "_sr_only_egymq_111";
|
|
234
|
+
const overlay = "_overlay_egymq_552";
|
|
235
|
+
const command_palette = "_command_palette_egymq_573";
|
|
236
|
+
const roundNone = "_roundNone_egymq_604";
|
|
237
|
+
const item = "_item_egymq_608";
|
|
238
|
+
const roundSmall = "_roundSmall_egymq_612";
|
|
239
|
+
const roundMedium = "_roundMedium_egymq_620";
|
|
240
|
+
const roundLarge = "_roundLarge_egymq_628";
|
|
241
|
+
const roundFull = "_roundFull_egymq_636";
|
|
242
|
+
const shadowNone = "_shadowNone_egymq_644";
|
|
243
|
+
const shadowLight = "_shadowLight_egymq_648";
|
|
244
|
+
const shadowMedium = "_shadowMedium_egymq_652";
|
|
245
|
+
const shadowStrong = "_shadowStrong_egymq_656";
|
|
246
|
+
const shadowIntense = "_shadowIntense_egymq_660";
|
|
247
|
+
const input = "_input_egymq_664";
|
|
248
|
+
const list = "_list_egymq_689";
|
|
249
|
+
const icon = "_icon_egymq_749";
|
|
250
|
+
const empty = "_empty_egymq_753";
|
|
251
|
+
const active = "_active_egymq_768";
|
|
252
|
+
const primary = "_primary_egymq_773";
|
|
253
|
+
const secondary = "_secondary_egymq_791";
|
|
254
|
+
const tertiary = "_tertiary_egymq_809";
|
|
255
|
+
const quaternary = "_quaternary_egymq_827";
|
|
256
|
+
const clear = "_clear_egymq_845";
|
|
257
|
+
const success = "_success_egymq_863";
|
|
258
|
+
const error = "_error_egymq_109";
|
|
259
|
+
const warning = "_warning_egymq_899";
|
|
260
|
+
const spin = "_spin_egymq_1";
|
|
261
|
+
const pulse = "_pulse_egymq_1";
|
|
262
262
|
const styles = {
|
|
263
263
|
noScroll,
|
|
264
264
|
errorMessage,
|
|
@@ -291,15 +291,15 @@ const styles = {
|
|
|
291
291
|
success,
|
|
292
292
|
error,
|
|
293
293
|
warning,
|
|
294
|
-
"fade-in": "_fade-
|
|
295
|
-
"slide-up": "_slide-
|
|
296
|
-
"spin-3d": "_spin-
|
|
294
|
+
"fade-in": "_fade-in_egymq_1",
|
|
295
|
+
"slide-up": "_slide-up_egymq_1",
|
|
296
|
+
"spin-3d": "_spin-3d_egymq_1",
|
|
297
297
|
spin,
|
|
298
298
|
pulse,
|
|
299
|
-
"fade-in-up": "_fade-in-
|
|
300
|
-
"progress-grow": "_progress-
|
|
301
|
-
"indeterminate-move": "_indeterminate-
|
|
302
|
-
"skeleton-loading": "_skeleton-
|
|
299
|
+
"fade-in-up": "_fade-in-up_egymq_1",
|
|
300
|
+
"progress-grow": "_progress-grow_egymq_1",
|
|
301
|
+
"indeterminate-move": "_indeterminate-move_egymq_1",
|
|
302
|
+
"skeleton-loading": "_skeleton-loading_egymq_1"
|
|
303
303
|
};
|
|
304
304
|
const CommandPalette = (props) => /* @__PURE__ */ jsx(
|
|
305
305
|
CommandPaletteBase,
|
|
@@ -313,4 +313,4 @@ CommandPalette.displayName = "CommandPalette";
|
|
|
313
313
|
export {
|
|
314
314
|
CommandPalette as C
|
|
315
315
|
};
|
|
316
|
-
//# sourceMappingURL=CommandPalette
|
|
316
|
+
//# sourceMappingURL=CommandPalette-CN0BiN0R.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette--heYmAFP.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-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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"}
|