@odx/websites-react 0.0.1 → 0.0.3
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/components/actions/button/Button.d.ts +13 -9
- package/dist/components/actions/button/Button.d.ts.map +1 -1
- package/dist/components/actions/button/Button.js +32 -9
- package/dist/components/actions/button/Button.js.map +1 -1
- package/dist/components/actions/checkbox/Checkbox.d.ts +5 -2
- package/dist/components/actions/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/actions/checkbox/Checkbox.js +14 -3
- package/dist/components/actions/checkbox/Checkbox.js.map +1 -1
- package/dist/components/actions/combobox/Combobox.d.ts +13 -0
- package/dist/components/actions/combobox/Combobox.d.ts.map +1 -0
- package/dist/components/actions/combobox/Combobox.js +45 -0
- package/dist/components/actions/combobox/Combobox.js.map +1 -0
- package/dist/components/actions/combobox/index.d.ts +2 -0
- package/dist/components/actions/combobox/index.d.ts.map +1 -0
- package/dist/components/actions/combobox/index.js +2 -0
- package/dist/components/actions/combobox/index.js.map +1 -0
- package/dist/components/actions/dropdown/Dropdown.d.ts +24 -0
- package/dist/components/actions/dropdown/Dropdown.d.ts.map +1 -0
- package/dist/components/actions/dropdown/Dropdown.js +54 -0
- package/dist/components/actions/dropdown/Dropdown.js.map +1 -0
- package/dist/components/actions/dropdown/index.d.ts +2 -0
- package/dist/components/actions/dropdown/index.d.ts.map +1 -0
- package/dist/components/actions/dropdown/index.js +2 -0
- package/dist/components/actions/dropdown/index.js.map +1 -0
- package/dist/components/actions/form/Form.d.ts +4 -0
- package/dist/components/actions/form/Form.d.ts.map +1 -1
- package/dist/components/actions/form/Form.js +4 -1
- package/dist/components/actions/form/Form.js.map +1 -1
- package/dist/components/actions/formField/FormField.d.ts.map +1 -1
- package/dist/components/actions/formField/FormField.js +6 -1
- package/dist/components/actions/formField/FormField.js.map +1 -1
- package/dist/components/actions/link/Link.d.ts +1 -1
- package/dist/components/actions/multiselect/Multiselect.d.ts +13 -0
- package/dist/components/actions/multiselect/Multiselect.d.ts.map +1 -0
- package/dist/components/actions/multiselect/Multiselect.js +36 -0
- package/dist/components/actions/multiselect/Multiselect.js.map +1 -0
- package/dist/components/actions/multiselect/index.d.ts +2 -0
- package/dist/components/actions/multiselect/index.d.ts.map +1 -0
- package/dist/components/actions/multiselect/index.js +2 -0
- package/dist/components/actions/multiselect/index.js.map +1 -0
- package/dist/components/actions/phoneInput/PhoneInput.js +1 -1
- package/dist/components/actions/phoneInput/PhoneInput.js.map +1 -1
- package/dist/components/actions/radioGroup/RadioGroup.d.ts +1 -1
- package/dist/components/actions/select/Select.d.ts.map +1 -1
- package/dist/components/actions/select/Select.js +1 -1
- package/dist/components/actions/select/Select.js.map +1 -1
- package/dist/components/actions/tag/Tag.d.ts +2 -2
- package/dist/components/actions/tag/Tag.d.ts.map +1 -1
- package/dist/components/actions/tag/Tag.js +7 -8
- package/dist/components/actions/tag/Tag.js.map +1 -1
- package/dist/components/actions/text-input/TextInput.d.ts.map +1 -1
- package/dist/components/actions/text-input/TextInput.js +1 -1
- package/dist/components/actions/text-input/TextInput.js.map +1 -1
- package/dist/components/actions/textarea/Textarea.d.ts.map +1 -1
- package/dist/components/actions/textarea/Textarea.js +1 -1
- package/dist/components/actions/textarea/Textarea.js.map +1 -1
- package/dist/components/actions/toggle-button/ToggleButton.js +1 -1
- package/dist/components/actions/toggle-button/ToggleButton.js.map +1 -1
- package/dist/components/actions/tooltip/Tooltip.d.ts +10 -11
- package/dist/components/actions/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/actions/tooltip/Tooltip.js +49 -11
- package/dist/components/actions/tooltip/Tooltip.js.map +1 -1
- package/dist/components/images-icons/logo/Logo.d.ts +3 -2
- package/dist/components/images-icons/logo/Logo.d.ts.map +1 -1
- package/dist/components/images-icons/logo/Logo.js +1 -1
- package/dist/components/images-icons/logo/Logo.js.map +1 -1
- package/dist/components/index.d.ts +6 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -2
- package/dist/components/index.js.map +1 -1
- package/dist/components/layout/dataTable/DataTable.d.ts +21 -0
- package/dist/components/layout/dataTable/DataTable.d.ts.map +1 -0
- package/dist/components/layout/dataTable/DataTable.js +13 -0
- package/dist/components/layout/dataTable/DataTable.js.map +1 -0
- package/dist/components/layout/dataTable/index.d.ts +2 -0
- package/dist/components/layout/dataTable/index.d.ts.map +1 -0
- package/dist/components/layout/dataTable/index.js +2 -0
- package/dist/components/layout/dataTable/index.js.map +1 -0
- package/dist/components/layout/grid/Grid.d.ts +1 -1
- package/dist/components/layout/grid/Grid.js +1 -1
- package/dist/components/layout/grid/Grid.js.map +1 -1
- package/dist/components/layout/list/List.d.ts +12 -0
- package/dist/components/layout/list/List.d.ts.map +1 -0
- package/dist/components/layout/list/List.js +20 -0
- package/dist/components/layout/list/List.js.map +1 -0
- package/dist/components/layout/list/index.d.ts +2 -0
- package/dist/components/layout/list/index.d.ts.map +1 -0
- package/dist/components/layout/list/index.js +2 -0
- package/dist/components/layout/list/index.js.map +1 -0
- package/dist/components/layout/modal/Modal.d.ts.map +1 -1
- package/dist/components/layout/modal/Modal.js +2 -3
- package/dist/components/layout/modal/Modal.js.map +1 -1
- package/dist/components/layout/pagination/Pagination.d.ts.map +1 -1
- package/dist/components/layout/pagination/Pagination.js +2 -2
- package/dist/components/layout/pagination/Pagination.js.map +1 -1
- package/dist/components/layout/sectionWrapper/SectionWrapper.d.ts.map +1 -1
- package/dist/components/layout/sectionWrapper/SectionWrapper.js +1 -0
- package/dist/components/layout/sectionWrapper/SectionWrapper.js.map +1 -1
- package/dist/components/navigation/flyout/Flyout.d.ts +51 -0
- package/dist/components/navigation/flyout/Flyout.d.ts.map +1 -0
- package/dist/components/navigation/flyout/Flyout.js +90 -0
- package/dist/components/navigation/flyout/Flyout.js.map +1 -0
- package/dist/components/navigation/flyout/index.d.ts +2 -0
- package/dist/components/navigation/flyout/index.d.ts.map +1 -0
- package/dist/components/navigation/flyout/index.js +2 -0
- package/dist/components/navigation/flyout/index.js.map +1 -0
- package/dist/components/navigation/footer/Footer.d.ts.map +1 -1
- package/dist/components/navigation/footer/Footer.js +3 -3
- package/dist/components/navigation/footer/Footer.js.map +1 -1
- package/dist/components/navigation/header/AnimatedHeader.js +3 -3
- package/dist/components/navigation/header/AnimatedHeader.js.map +1 -1
- package/dist/components/navigation/header/Header.d.ts +9 -15
- package/dist/components/navigation/header/Header.d.ts.map +1 -1
- package/dist/components/navigation/header/Header.js +27 -18
- package/dist/components/navigation/header/Header.js.map +1 -1
- package/dist/components/navigation/searchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/navigation/searchInput/SearchInput.js +2 -2
- package/dist/components/navigation/searchInput/SearchInput.js.map +1 -1
- package/dist/components/navigation/tabbar/TabBar.d.ts.map +1 -1
- package/dist/components/navigation/tabbar/TabBar.js +6 -2
- package/dist/components/navigation/tabbar/TabBar.js.map +1 -1
- package/dist/components/typography/headline/Headline.d.ts +1 -1
- package/dist/hooks/useScrollPosition/useScrollPosition.d.ts.map +1 -1
- package/dist/icons/colored/DraegerIconSetColored.d.ts.map +1 -1
- package/dist/icons/colored/DraegerIconSetColored.js +102 -2
- package/dist/icons/colored/DraegerIconSetColored.js.map +1 -1
- package/dist/icons/colored/IconFlagAr.d.ts +4 -0
- package/dist/icons/colored/IconFlagAr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagAr.js +4 -0
- package/dist/icons/colored/IconFlagAr.js.map +1 -0
- package/dist/icons/colored/IconFlagAt.d.ts +4 -0
- package/dist/icons/colored/IconFlagAt.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagAt.js +4 -0
- package/dist/icons/colored/IconFlagAt.js.map +1 -0
- package/dist/icons/colored/IconFlagBe.d.ts +4 -0
- package/dist/icons/colored/IconFlagBe.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagBe.js +4 -0
- package/dist/icons/colored/IconFlagBe.js.map +1 -0
- package/dist/icons/colored/IconFlagBg.d.ts +4 -0
- package/dist/icons/colored/IconFlagBg.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagBg.js +4 -0
- package/dist/icons/colored/IconFlagBg.js.map +1 -0
- package/dist/icons/colored/IconFlagBr.d.ts +4 -0
- package/dist/icons/colored/IconFlagBr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagBr.js +8 -0
- package/dist/icons/colored/IconFlagBr.js.map +1 -0
- package/dist/icons/colored/IconFlagCa.d.ts +4 -0
- package/dist/icons/colored/IconFlagCa.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCa.js +4 -0
- package/dist/icons/colored/IconFlagCa.js.map +1 -0
- package/dist/icons/colored/IconFlagCh.d.ts +4 -0
- package/dist/icons/colored/IconFlagCh.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCh.js +4 -0
- package/dist/icons/colored/IconFlagCh.js.map +1 -0
- package/dist/icons/colored/IconFlagCl.d.ts +4 -0
- package/dist/icons/colored/IconFlagCl.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCl.js +4 -0
- package/dist/icons/colored/IconFlagCl.js.map +1 -0
- package/dist/icons/colored/IconFlagCn.d.ts +4 -0
- package/dist/icons/colored/IconFlagCn.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCn.js +4 -0
- package/dist/icons/colored/IconFlagCn.js.map +1 -0
- package/dist/icons/colored/IconFlagCo.d.ts +4 -0
- package/dist/icons/colored/IconFlagCo.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCo.js +4 -0
- package/dist/icons/colored/IconFlagCo.js.map +1 -0
- package/dist/icons/colored/IconFlagCz.d.ts +4 -0
- package/dist/icons/colored/IconFlagCz.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagCz.js +4 -0
- package/dist/icons/colored/IconFlagCz.js.map +1 -0
- package/dist/icons/colored/IconFlagDe.d.ts +4 -0
- package/dist/icons/colored/IconFlagDe.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagDe.js +4 -0
- package/dist/icons/colored/IconFlagDe.js.map +1 -0
- package/dist/icons/colored/IconFlagDk.d.ts +4 -0
- package/dist/icons/colored/IconFlagDk.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagDk.js +4 -0
- package/dist/icons/colored/IconFlagDk.js.map +1 -0
- package/dist/icons/colored/IconFlagEs.d.ts +4 -0
- package/dist/icons/colored/IconFlagEs.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagEs.js +4 -0
- package/dist/icons/colored/IconFlagEs.js.map +1 -0
- package/dist/icons/colored/IconFlagFi.d.ts +4 -0
- package/dist/icons/colored/IconFlagFi.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagFi.js +4 -0
- package/dist/icons/colored/IconFlagFi.js.map +1 -0
- package/dist/icons/colored/IconFlagFr.d.ts +4 -0
- package/dist/icons/colored/IconFlagFr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagFr.js +4 -0
- package/dist/icons/colored/IconFlagFr.js.map +1 -0
- package/dist/icons/colored/IconFlagGr.d.ts +4 -0
- package/dist/icons/colored/IconFlagGr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagGr.js +4 -0
- package/dist/icons/colored/IconFlagGr.js.map +1 -0
- package/dist/icons/colored/IconFlagHk.d.ts +4 -0
- package/dist/icons/colored/IconFlagHk.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagHk.js +4 -0
- package/dist/icons/colored/IconFlagHk.js.map +1 -0
- package/dist/icons/colored/IconFlagHr.d.ts +4 -0
- package/dist/icons/colored/IconFlagHr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagHr.js +4 -0
- package/dist/icons/colored/IconFlagHr.js.map +1 -0
- package/dist/icons/colored/IconFlagHu.d.ts +4 -0
- package/dist/icons/colored/IconFlagHu.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagHu.js +4 -0
- package/dist/icons/colored/IconFlagHu.js.map +1 -0
- package/dist/icons/colored/IconFlagId.d.ts +4 -0
- package/dist/icons/colored/IconFlagId.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagId.js +4 -0
- package/dist/icons/colored/IconFlagId.js.map +1 -0
- package/dist/icons/colored/IconFlagIn.d.ts +4 -0
- package/dist/icons/colored/IconFlagIn.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagIn.js +4 -0
- package/dist/icons/colored/IconFlagIn.js.map +1 -0
- package/dist/icons/colored/IconFlagIt.d.ts +4 -0
- package/dist/icons/colored/IconFlagIt.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagIt.js +4 -0
- package/dist/icons/colored/IconFlagIt.js.map +1 -0
- package/dist/icons/colored/IconFlagJp.d.ts +4 -0
- package/dist/icons/colored/IconFlagJp.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagJp.js +4 -0
- package/dist/icons/colored/IconFlagJp.js.map +1 -0
- package/dist/icons/colored/IconFlagKr.d.ts +4 -0
- package/dist/icons/colored/IconFlagKr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagKr.js +4 -0
- package/dist/icons/colored/IconFlagKr.js.map +1 -0
- package/dist/icons/colored/IconFlagMa.d.ts +4 -0
- package/dist/icons/colored/IconFlagMa.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagMa.js +4 -0
- package/dist/icons/colored/IconFlagMa.js.map +1 -0
- package/dist/icons/colored/IconFlagMm.d.ts +4 -0
- package/dist/icons/colored/IconFlagMm.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagMm.js +4 -0
- package/dist/icons/colored/IconFlagMm.js.map +1 -0
- package/dist/icons/colored/IconFlagMx.d.ts +4 -0
- package/dist/icons/colored/IconFlagMx.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagMx.js +4 -0
- package/dist/icons/colored/IconFlagMx.js.map +1 -0
- package/dist/icons/colored/IconFlagMy.d.ts +4 -0
- package/dist/icons/colored/IconFlagMy.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagMy.js +4 -0
- package/dist/icons/colored/IconFlagMy.js.map +1 -0
- package/dist/icons/colored/IconFlagNl.d.ts +4 -0
- package/dist/icons/colored/IconFlagNl.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagNl.js +4 -0
- package/dist/icons/colored/IconFlagNl.js.map +1 -0
- package/dist/icons/colored/IconFlagNo.d.ts +4 -0
- package/dist/icons/colored/IconFlagNo.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagNo.js +4 -0
- package/dist/icons/colored/IconFlagNo.js.map +1 -0
- package/dist/icons/colored/IconFlagPa.d.ts +4 -0
- package/dist/icons/colored/IconFlagPa.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagPa.js +4 -0
- package/dist/icons/colored/IconFlagPa.js.map +1 -0
- package/dist/icons/colored/IconFlagPe.d.ts +4 -0
- package/dist/icons/colored/IconFlagPe.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagPe.js +4 -0
- package/dist/icons/colored/IconFlagPe.js.map +1 -0
- package/dist/icons/colored/IconFlagPh.d.ts +4 -0
- package/dist/icons/colored/IconFlagPh.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagPh.js +4 -0
- package/dist/icons/colored/IconFlagPh.js.map +1 -0
- package/dist/icons/colored/IconFlagPl.d.ts +4 -0
- package/dist/icons/colored/IconFlagPl.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagPl.js +4 -0
- package/dist/icons/colored/IconFlagPl.js.map +1 -0
- package/dist/icons/colored/IconFlagPt.d.ts +4 -0
- package/dist/icons/colored/IconFlagPt.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagPt.js +4 -0
- package/dist/icons/colored/IconFlagPt.js.map +1 -0
- package/dist/icons/colored/IconFlagRo.d.ts +4 -0
- package/dist/icons/colored/IconFlagRo.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagRo.js +4 -0
- package/dist/icons/colored/IconFlagRo.js.map +1 -0
- package/dist/icons/colored/IconFlagRs.d.ts +4 -0
- package/dist/icons/colored/IconFlagRs.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagRs.js +4 -0
- package/dist/icons/colored/IconFlagRs.js.map +1 -0
- package/dist/icons/colored/IconFlagRu.d.ts +4 -0
- package/dist/icons/colored/IconFlagRu.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagRu.js +4 -0
- package/dist/icons/colored/IconFlagRu.js.map +1 -0
- package/dist/icons/colored/IconFlagSa.d.ts +4 -0
- package/dist/icons/colored/IconFlagSa.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagSa.js +4 -0
- package/dist/icons/colored/IconFlagSa.js.map +1 -0
- package/dist/icons/colored/IconFlagSe.d.ts +4 -0
- package/dist/icons/colored/IconFlagSe.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagSe.js +4 -0
- package/dist/icons/colored/IconFlagSe.js.map +1 -0
- package/dist/icons/colored/IconFlagSg.d.ts +4 -0
- package/dist/icons/colored/IconFlagSg.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagSg.js +4 -0
- package/dist/icons/colored/IconFlagSg.js.map +1 -0
- package/dist/icons/colored/IconFlagSk.d.ts +4 -0
- package/dist/icons/colored/IconFlagSk.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagSk.js +6 -0
- package/dist/icons/colored/IconFlagSk.js.map +1 -0
- package/dist/icons/colored/IconFlagSl.d.ts +4 -0
- package/dist/icons/colored/IconFlagSl.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagSl.js +4 -0
- package/dist/icons/colored/IconFlagSl.js.map +1 -0
- package/dist/icons/colored/IconFlagTh.d.ts +4 -0
- package/dist/icons/colored/IconFlagTh.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagTh.js +4 -0
- package/dist/icons/colored/IconFlagTh.js.map +1 -0
- package/dist/icons/colored/IconFlagTr.d.ts +4 -0
- package/dist/icons/colored/IconFlagTr.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagTr.js +4 -0
- package/dist/icons/colored/IconFlagTr.js.map +1 -0
- package/dist/icons/colored/IconFlagTw.d.ts +4 -0
- package/dist/icons/colored/IconFlagTw.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagTw.js +4 -0
- package/dist/icons/colored/IconFlagTw.js.map +1 -0
- package/dist/icons/colored/IconFlagUk.d.ts +4 -0
- package/dist/icons/colored/IconFlagUk.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagUk.js +6 -0
- package/dist/icons/colored/IconFlagUk.js.map +1 -0
- package/dist/icons/colored/IconFlagUs.d.ts +4 -0
- package/dist/icons/colored/IconFlagUs.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagUs.js +4 -0
- package/dist/icons/colored/IconFlagUs.js.map +1 -0
- package/dist/icons/colored/IconFlagVn.d.ts +4 -0
- package/dist/icons/colored/IconFlagVn.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagVn.js +4 -0
- package/dist/icons/colored/IconFlagVn.js.map +1 -0
- package/dist/icons/colored/IconFlagZa.d.ts +4 -0
- package/dist/icons/colored/IconFlagZa.d.ts.map +1 -0
- package/dist/icons/colored/IconFlagZa.js +8 -0
- package/dist/icons/colored/IconFlagZa.js.map +1 -0
- package/dist/icons/colored/index.d.ts +51 -1
- package/dist/icons/colored/index.d.ts.map +1 -1
- package/dist/icons/colored/index.js +51 -1
- package/dist/icons/colored/index.js.map +1 -1
- package/dist/icons/uncolored/DraegerIconSetUncolored.d.ts.map +1 -1
- package/dist/icons/uncolored/DraegerIconSetUncolored.js +4 -0
- package/dist/icons/uncolored/DraegerIconSetUncolored.js.map +1 -1
- package/dist/icons/uncolored/IconGlobe.d.ts +4 -0
- package/dist/icons/uncolored/IconGlobe.d.ts.map +1 -0
- package/dist/icons/uncolored/IconGlobe.js +4 -0
- package/dist/icons/uncolored/IconGlobe.js.map +1 -0
- package/dist/icons/uncolored/IconInfo.d.ts.map +1 -1
- package/dist/icons/uncolored/IconInfo.js +1 -1
- package/dist/icons/uncolored/IconInfo.js.map +1 -1
- package/dist/icons/uncolored/IconProductSearch.d.ts +4 -0
- package/dist/icons/uncolored/IconProductSearch.d.ts.map +1 -0
- package/dist/icons/uncolored/IconProductSearch.js +4 -0
- package/dist/icons/uncolored/IconProductSearch.js.map +1 -0
- package/dist/icons/uncolored/index.d.ts +2 -0
- package/dist/icons/uncolored/index.d.ts.map +1 -1
- package/dist/icons/uncolored/index.js +2 -0
- package/dist/icons/uncolored/index.js.map +1 -1
- package/dist/web/sections/contentSection/ContentSection.d.ts +3 -1
- package/dist/web/sections/contentSection/ContentSection.d.ts.map +1 -1
- package/dist/web/sections/contentSection/ContentSection.js +3 -2
- package/dist/web/sections/contentSection/ContentSection.js.map +1 -1
- package/package.json +20 -45
- package/dist/components/actions/multiSelector/MultiSelector.d.ts +0 -18
- package/dist/components/actions/multiSelector/MultiSelector.d.ts.map +0 -1
- package/dist/components/actions/multiSelector/MultiSelector.js +0 -33
- package/dist/components/actions/multiSelector/MultiSelector.js.map +0 -1
- package/dist/components/actions/multiSelector/index.d.ts +0 -2
- package/dist/components/actions/multiSelector/index.d.ts.map +0 -1
- package/dist/components/actions/multiSelector/index.js +0 -2
- package/dist/components/actions/multiSelector/index.js.map +0 -1
- package/dist/components/layout/table/Table.d.ts +0 -37
- package/dist/components/layout/table/Table.d.ts.map +0 -1
- package/dist/components/layout/table/Table.js +0 -69
- package/dist/components/layout/table/Table.js.map +0 -1
- package/dist/components/layout/table/TableContext.d.ts +0 -18
- package/dist/components/layout/table/TableContext.d.ts.map +0 -1
- package/dist/components/layout/table/TableContext.js +0 -47
- package/dist/components/layout/table/TableContext.js.map +0 -1
- package/dist/components/layout/table/index.d.ts +0 -2
- package/dist/components/layout/table/index.d.ts.map +0 -1
- package/dist/components/layout/table/index.js +0 -2
- package/dist/components/layout/table/index.js.map +0 -1
- package/dist/icons/colored/IconSwitzerland.d.ts +0 -4
- package/dist/icons/colored/IconSwitzerland.d.ts.map +0 -1
- package/dist/icons/colored/IconSwitzerland.js +0 -4
- package/dist/icons/colored/IconSwitzerland.js.map +0 -1
- package/dist/icons/uncolored/IconOk.d.ts +0 -4
- package/dist/icons/uncolored/IconOk.d.ts.map +0 -1
- package/dist/icons/uncolored/IconOk.js +0 -4
- package/dist/icons/uncolored/IconOk.js.map +0 -1
|
@@ -5,19 +5,23 @@ import { SvgIconComponent, SvgIconProps } from '../../images-icons/svg-icon';
|
|
|
5
5
|
import { LinkComponentProps } from '../../../utils';
|
|
6
6
|
declare const buttonVariants: (props?: ({
|
|
7
7
|
variant?: "primary" | "secondary" | "secondary-air-blue" | "secondary-dark-blue" | "secondary-white" | "ghost" | "ghost-inherit" | null | undefined;
|
|
8
|
-
size?: "sm" | "md" | "lg" | "
|
|
8
|
+
size?: "sm" | "md" | "lg" | "card" | "resultListButton" | null | undefined;
|
|
9
9
|
fontSize?: "default" | "sm" | "lg" | "xl" | "2xl" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
11
|
-
export interface
|
|
12
|
-
asChild?: boolean;
|
|
11
|
+
export interface ButtonBaseProps {
|
|
13
12
|
buttonIconProps?: SvgIconProps;
|
|
14
13
|
icon?: SvgIconComponent;
|
|
14
|
+
iconPosition?: 'left' | 'right';
|
|
15
|
+
iconGap?: boolean;
|
|
16
|
+
slim?: boolean;
|
|
15
17
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & VariantProps<typeof buttonVariants> & ButtonBaseProps;
|
|
19
|
+
declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & VariantProps<(props?: ({
|
|
20
|
+
variant?: "primary" | "secondary" | "secondary-air-blue" | "secondary-dark-blue" | "secondary-white" | "ghost" | "ghost-inherit" | null | undefined;
|
|
21
|
+
size?: "sm" | "md" | "lg" | "card" | "resultListButton" | null | undefined;
|
|
22
|
+
fontSize?: "default" | "sm" | "lg" | "xl" | "2xl" | null | undefined;
|
|
23
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
export type LinkButtonProps = LinkComponentProps & LinkComponent & VariantProps<typeof buttonVariants> & ButtonBaseProps;
|
|
25
|
+
declare const LinkButton: React.ForwardRefExoticComponent<Omit<LinkButtonProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
22
26
|
export { Button, LinkButton, buttonVariants };
|
|
23
27
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAK,aAAa,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAEL,gBAAgB,EAChB,YAAY,EACb,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,cAAc;;;;mFAoClB,CAAC;AA4BH,MAAM,WAAW,eAAe;IAC9B,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,OAAO,CACR,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GACnC,eAAe,CAAC;AAElB,QAAA,MAAM,MAAM;;;;gJAsCX,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAC9C,aAAa,GACb,YAAY,CAAC,OAAO,cAAc,CAAC,GACnC,eAAe,CAAC;AAElB,QAAA,MAAM,UAAU,wGAwCf,CAAC;AAgBF,OAAO,EAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAC,CAAC"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
4
3
|
import { cva } from 'class-variance-authority';
|
|
5
4
|
import { cn } from '../../../utils';
|
|
6
5
|
import { SvgIcon, } from '../../images-icons/svg-icon';
|
|
7
|
-
const buttonBaseClasses = 'font-text inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-1 transition-colors focus-visible:outline-none disabled:pointer-events-none
|
|
6
|
+
const buttonBaseClasses = 'font-text inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-1 transition-colors focus-visible:outline-none disabled:pointer-events-none px-4 gap-3 rounded-sm';
|
|
8
7
|
//TODO: Delete secondary-air-blue, secondary-dark-blue, secondary-white variants, when theming for button is ready
|
|
9
8
|
const buttonVariants = cva(buttonBaseClasses, {
|
|
10
9
|
variants: {
|
|
@@ -21,7 +20,6 @@ const buttonVariants = cva(buttonBaseClasses, {
|
|
|
21
20
|
sm: 'h-element-height-sm text-md',
|
|
22
21
|
md: 'h-element-height-md text-md',
|
|
23
22
|
lg: 'h-element-height-lg text-lg',
|
|
24
|
-
headerActionItem: 'h-full',
|
|
25
23
|
card: 'w-full py-4',
|
|
26
24
|
resultListButton: 'w-full py-3',
|
|
27
25
|
},
|
|
@@ -38,15 +36,40 @@ const buttonVariants = cva(buttonBaseClasses, {
|
|
|
38
36
|
size: 'md',
|
|
39
37
|
},
|
|
40
38
|
});
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
const classes = ({ className, fontSize, size, variant, icon, iconGap = true, slim = false, iconPosition = 'left', isIconButton, }) => {
|
|
40
|
+
return cn(buttonVariants({ variant, size, fontSize, className }), icon && !isIconButton && 'pl-2.5', !iconGap && 'gap-0', slim && 'px-0', iconPosition === 'right' && 'flex-row-reverse');
|
|
41
|
+
};
|
|
42
|
+
const Button = React.forwardRef(({ className, buttonIconProps, iconPosition, fontSize, size, variant, icon, iconGap, slim, ...props }, ref) => {
|
|
43
|
+
return (_jsx("button", { className: classes({
|
|
44
|
+
className,
|
|
45
|
+
fontSize,
|
|
46
|
+
size,
|
|
47
|
+
variant,
|
|
48
|
+
icon,
|
|
49
|
+
iconGap,
|
|
50
|
+
slim,
|
|
51
|
+
iconPosition,
|
|
52
|
+
isIconButton: icon && !props.children,
|
|
53
|
+
}), ref: ref, ...props, children: _jsx(ButtonContent, { icon: icon, buttonIconProps: buttonIconProps, children: props.children }) }));
|
|
44
54
|
});
|
|
45
55
|
Button.displayName = 'Button';
|
|
46
|
-
const LinkButton = ({ className,
|
|
56
|
+
const LinkButton = React.forwardRef(({ LinkComponent, className, fontSize, size, variant, icon, iconGap, slim, iconPosition, buttonIconProps, ...props }, ref) => {
|
|
47
57
|
const LinkComp = LinkComponent ? LinkComponent : 'a';
|
|
48
|
-
return (
|
|
49
|
-
|
|
58
|
+
return (_jsx(LinkComp, { className: classes({
|
|
59
|
+
className,
|
|
60
|
+
fontSize,
|
|
61
|
+
size,
|
|
62
|
+
variant,
|
|
63
|
+
icon,
|
|
64
|
+
iconGap,
|
|
65
|
+
slim,
|
|
66
|
+
iconPosition,
|
|
67
|
+
isIconButton: icon && !props.children,
|
|
68
|
+
}), ref: ref, ...props, children: _jsx(ButtonContent, { icon: icon, buttonIconProps: buttonIconProps, children: props.children }) }));
|
|
69
|
+
});
|
|
50
70
|
LinkButton.displayName = 'LinkButton';
|
|
71
|
+
const ButtonContent = ({ icon, buttonIconProps, children, }) => {
|
|
72
|
+
return (_jsxs(_Fragment, { children: [icon && _jsx(SvgIcon, { ...buttonIconProps, icon: icon, size: "md" }), children] }));
|
|
73
|
+
};
|
|
51
74
|
export { Button, LinkButton, buttonVariants };
|
|
52
75
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
3
|
import { type VariantProps } from 'class-variance-authority';
|
|
4
4
|
import { type FormField } from '../formField';
|
|
5
|
-
|
|
5
|
+
declare const checkboxVariants: (props?: ({
|
|
6
|
+
size?: "sm" | "md" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
8
|
+
export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
|
|
6
9
|
invalid?: boolean;
|
|
7
10
|
}
|
|
8
11
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -18,7 +21,7 @@ export interface CheckboxGroupOption {
|
|
|
18
21
|
disabled?: boolean;
|
|
19
22
|
}
|
|
20
23
|
declare const checkboxGroupVariants: (props?: ({
|
|
21
|
-
direction?: "
|
|
24
|
+
direction?: "row" | "col" | null | undefined;
|
|
22
25
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
23
26
|
declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
|
|
24
27
|
export { Checkbox, CheckboxGroup };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,QAAA,MAAM,gBAAgB;;mFAUpB,CAAC;AAEH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,QAAQ,yFAwCZ,CAAC;AAGH,MAAM,WAAW,kBACf,SAAQ,YAAY,CAAC,OAAO,qBAAqB,CAAC,EAChD,SAAS;IACX,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AACD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB;;mFAUzB,CAAC;AAEH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6D/C,CAAC;AAIF,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAC,CAAC"}
|
|
@@ -8,10 +8,21 @@ import { SvgIcon } from '../../images-icons/svg-icon';
|
|
|
8
8
|
import { FormFieldHelperText, FormFieldIcon, FormFieldLabel, } from '../formField';
|
|
9
9
|
import { useFieldId } from '../../../hooks';
|
|
10
10
|
import { BodyText } from '../../typography/bodyText';
|
|
11
|
-
const checkboxBaseClasses = 'font-text
|
|
12
|
-
const
|
|
11
|
+
const checkboxBaseClasses = 'font-text shrink-0 peer border-[2.5px] rounded-[3px] text-transparent border-draeger-dark-blue data-[state=checked]:bg-draeger-dark-blue data-[state=checked]:text-draeger-white disabled:cursor-not-allowed data-[state=checked]:disabled:bg-draeger-cool-gray-250 disabled:border-draeger-cool-gray-250 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-draeger-air-blue';
|
|
12
|
+
const checkboxVariants = cva(checkboxBaseClasses, {
|
|
13
|
+
variants: {
|
|
14
|
+
size: {
|
|
15
|
+
sm: 'h-[1.125rem] w-[1.125rem]',
|
|
16
|
+
md: 'h-6 w-6',
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
size: 'md',
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
const Checkbox = React.forwardRef(({ className, children, invalid, size, ...props }, ref) => {
|
|
13
24
|
const id = React.useId();
|
|
14
|
-
return (_jsxs("div", { className: "flex space-x-2", children: [_jsx(CheckboxPrimitive.Root, { ...props, className: cn(
|
|
25
|
+
return (_jsxs("div", { className: "flex space-x-2", children: [_jsx(CheckboxPrimitive.Root, { ...props, className: cn(checkboxVariants({ size }), invalid &&
|
|
15
26
|
'border-draeger-warning data-[state=checked]:bg-draeger-warning', className), ref: ref, id: id, children: _jsx(CheckboxPrimitive.Indicator, { forceMount: true, className: 'flex items-center justify-center h-full', children: _jsx(SvgIcon, { icon: IconCheck }) }) }), children && (_jsx(BodyText, { asChild: true, children: _jsx("label", { htmlFor: id, className: 'peer-disabled:text-draeger-cool-gray-250 peer-disabled:cursor-not-allowed', children: children }) }))] }));
|
|
16
27
|
});
|
|
17
28
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/actions/checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAC,GAAG,EAAoB,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AACpD,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,cAAc,GAEf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAEnD,MAAM,mBAAmB,GACvB,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/actions/checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type FormField, type FormFieldWrapperVariants } from '../formField';
|
|
3
|
+
import { SelectorOption } from '../..';
|
|
4
|
+
export interface ComboboxProps extends FormFieldWrapperVariants, FormField {
|
|
5
|
+
options: SelectorOption[];
|
|
6
|
+
selected?: SelectorOption | null;
|
|
7
|
+
placeholder: string;
|
|
8
|
+
onChange: (value: SelectorOption | null) => void;
|
|
9
|
+
filterFunction?: (option: SelectorOption, query: string) => boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const Combobox: React.FC<ComboboxProps>;
|
|
12
|
+
export { Combobox };
|
|
13
|
+
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,wBAAwB,EAC9B,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,aAAc,SAAQ,wBAAwB,EAAE,SAAS;IACxE,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACrE;AAoDD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqIrC,CAAC;AAEF,OAAO,EAAC,QAAQ,EAAC,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Combobox as ComboboxPrimitive, ComboboxInput as ComboboxPrimitiveInput, ComboboxOption as ComboboxPrimitiveOption, ComboboxOptions as ComboboxPrimitiveOptions, ComboboxButton as ComboboxPrimitiveButton, Transition, } from '@headlessui/react';
|
|
5
|
+
import { IconCheck, IconChevronDown, IconClose, IconFeedbackWarning, } from '../../../icons';
|
|
6
|
+
import { FormFieldHelperText, FormFieldIcon, FormFieldIconsContainer, FormFieldLabel, formFieldWrapperVariants, } from '../formField';
|
|
7
|
+
import { SvgIcon, optionVariants, optionsVariants, } from '../..';
|
|
8
|
+
import { useFieldId } from '../../../hooks';
|
|
9
|
+
import { cn } from '../../../utils';
|
|
10
|
+
const ComboboxOption = ({ value, size, ...props }) => {
|
|
11
|
+
const { label, disabled } = value;
|
|
12
|
+
return (_jsx(ComboboxPrimitiveOption, { disabled: disabled, value: value, ...props, children: ({ selected, focus, disabled }) => (_jsxs("div", { title: label, className: cn(optionVariants({ size }), focus && 'bg-draeger-cool-gray-100', disabled
|
|
13
|
+
? 'text-draeger-warm-gray-150 cursor-not-allowed'
|
|
14
|
+
: 'hover:bg-draeger-cool-gray-100', 'justify-between'), children: [_jsx("span", { className: "truncate", children: label }), selected && (_jsx(SvgIcon, { className: "shrink-0", icon: IconCheck, size: "md" }))] })) }));
|
|
15
|
+
};
|
|
16
|
+
const defaultFilterFunction = ({ label }, query) => label.toLowerCase().includes(query.toLowerCase());
|
|
17
|
+
const filterOptions = (options, query = '', filterFunction) => query === ''
|
|
18
|
+
? options
|
|
19
|
+
: options.filter(option => (filterFunction ?? defaultFilterFunction)(option, query));
|
|
20
|
+
const Combobox = ({ options, selected, onChange, disabled, label, helperText, invalidText, invalid = false, placeholder, filterFunction, size, wrapperClassName, }) => {
|
|
21
|
+
const [query, setQuery] = React.useState('');
|
|
22
|
+
const [focused, setFocused] = React.useState(false);
|
|
23
|
+
const { id, labelId, helperTextId } = useFieldId();
|
|
24
|
+
const inputRef = React.useRef(null);
|
|
25
|
+
const filteredOptions = filterOptions(options, query, filterFunction);
|
|
26
|
+
const hasQuery = Boolean(query?.length);
|
|
27
|
+
return (_jsx("div", { className: cn('font-text relative', wrapperClassName), children: _jsxs(ComboboxPrimitive, { as: "div", className: 'group', value: selected, onChange: value => {
|
|
28
|
+
onChange(value);
|
|
29
|
+
setQuery(value?.label ?? '');
|
|
30
|
+
}, disabled: disabled, immediate: true, children: [label && (_jsx(FormFieldLabel, { id: labelId, htmlFor: id, label: label, disabled: disabled })), _jsxs("div", { className: "relative inline-block w-full", children: [_jsx(ComboboxPrimitiveInput, { id: id, autoComplete: "off", ref: inputRef, displayValue: option => option?.label, onBlur: () => {
|
|
31
|
+
setQuery('');
|
|
32
|
+
setFocused(false);
|
|
33
|
+
}, onFocus: () => setFocused(true), onChange: event => setQuery(event.target.value), placeholder: placeholder, "data-invalid": invalid, "aria-labelledby": label && labelId, "aria-describedby": helperText && helperTextId, className: cn(formFieldWrapperVariants({ size }), 'pr-14', (hasQuery || invalid) && 'pr-24', hasQuery && invalid && 'pr-32') }), _jsxs(FormFieldIconsContainer, { children: [invalid && (_jsx(FormFieldIcon, { className: "pointer-events-auto", icon: IconFeedbackWarning })), focused && (hasQuery || selected) && (_jsxs(_Fragment, { children: [_jsx(FormFieldIcon, { className: "w-5 cursor-pointer pointer-events-auto text-draeger-cool-gray-750 peer-focus:border-2", onMouseDown: e => e.preventDefault(), onMouseUp: () => {
|
|
34
|
+
if (!inputRef.current)
|
|
35
|
+
return;
|
|
36
|
+
onChange(null);
|
|
37
|
+
inputRef.current.blur();
|
|
38
|
+
requestAnimationFrame(() => {
|
|
39
|
+
inputRef.current.focus();
|
|
40
|
+
inputRef.current.value = '';
|
|
41
|
+
});
|
|
42
|
+
}, icon: IconClose }), _jsx("div", { className: "w-px h-full bg-draeger-cool-gray-150 mx-0.5" })] })), _jsx(ComboboxPrimitiveButton, { children: _jsx(FormFieldIcon, { className: cn('cursor-pointer pointer-events-auto text-draeger-cool-gray-750 group-data-[headlessui-state=open]:rotate-180 transition-all duration-100', disabled && 'cursor-not-allowed text-draeger-cool-gray-250 '), icon: IconChevronDown }) })] })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(ComboboxPrimitiveOptions, { anchor: { to: 'bottom' }, className: cn(optionsVariants({ size }), 'empty:hidden w-[var(--input-width)] origin-top transition'), children: filteredOptions.map(option => (_jsx(ComboboxOption, { value: option, size: size }, option.label))) }) }), _jsx(FormFieldHelperText, { id: helperTextId, helperText: helperText, invalidText: invalidText, invalid: invalid, disabled: disabled })] }) }));
|
|
43
|
+
};
|
|
44
|
+
export { Combobox };
|
|
45
|
+
//# sourceMappingURL=Combobox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../src/components/actions/combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type FormField, type FormFieldWrapperVariants } from '../formField';
|
|
3
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
4
|
+
export interface SelectorOption {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface DropdownProps extends FormFieldWrapperVariants, FormField {
|
|
10
|
+
options: SelectorOption[];
|
|
11
|
+
selected?: SelectorOption | null;
|
|
12
|
+
onChange: (value: SelectorOption | null) => void;
|
|
13
|
+
placeholder: string;
|
|
14
|
+
}
|
|
15
|
+
export type OptionVariants = VariantProps<typeof optionVariants>;
|
|
16
|
+
declare const optionVariants: (props?: ({
|
|
17
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
18
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
19
|
+
declare const optionsVariants: (props?: ({
|
|
20
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
21
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
22
|
+
declare const Dropdown: React.FC<DropdownProps>;
|
|
23
|
+
export { Dropdown, optionVariants, optionsVariants };
|
|
24
|
+
//# sourceMappingURL=Dropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,wBAAwB,EAC9B,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,KAAK,YAAY,EAAM,MAAM,0BAA0B,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,EAAE,SAAS;IACxE,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAiBjE,QAAA,MAAM,cAAc;;mFAWlB,CAAC;AAEH,QAAA,MAAM,eAAe;;mFAWnB,CAAC;AAiCH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsFrC,CAAC;AAEF,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition, } from '@headlessui/react';
|
|
4
|
+
import { cn } from '../../../utils';
|
|
5
|
+
import { SvgIcon } from '../../images-icons/svg-icon';
|
|
6
|
+
import { IconCheck, IconChevronDown, IconFeedbackWarning } from '../../../icons';
|
|
7
|
+
import { FormFieldHelperText, FormFieldIcon, FormFieldIconsContainer, FormFieldLabel, formFieldWrapperVariants, } from '../formField';
|
|
8
|
+
import { useFieldId } from '../../../hooks';
|
|
9
|
+
import { cva } from 'class-variance-authority';
|
|
10
|
+
const dropdownOptionsClasses = cn(`
|
|
11
|
+
bg-draeger-cool-gray-50 z-10 overflow-scroll rounded-sm shadow-draeger-elevation-2
|
|
12
|
+
outline outline-2 outline-transparent outline-offset-0 focus:outline-draeger-air-blue
|
|
13
|
+
transition-[outline] duration-100
|
|
14
|
+
`);
|
|
15
|
+
const optionClasses = cn(`
|
|
16
|
+
relative flex items-center px-6 gap-x-2 text-draeger-dark-gray bg-draeger-cool-gray-50 cursor-pointer
|
|
17
|
+
after:content-[""] after:absolute after:bottom-0 after:left-6 after:right-6 after:h-px after:bg-draeger-cool-gray-100
|
|
18
|
+
`);
|
|
19
|
+
const optionVariants = cva(optionClasses, {
|
|
20
|
+
variants: {
|
|
21
|
+
size: {
|
|
22
|
+
sm: 'h-element-height-sm',
|
|
23
|
+
md: 'h-element-height-md',
|
|
24
|
+
lg: 'h-element-height-lg',
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
size: 'md',
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
const optionsVariants = cva(dropdownOptionsClasses, {
|
|
32
|
+
variants: {
|
|
33
|
+
size: {
|
|
34
|
+
sm: '!max-h-[calc(theme(height.element-height-sm)*5.5)]',
|
|
35
|
+
md: '!max-h-[calc(theme(height.element-height-md)*5.5)]',
|
|
36
|
+
lg: '!max-h-[calc(theme(height.element-height-lg)*5.5)]',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
size: 'md',
|
|
41
|
+
},
|
|
42
|
+
});
|
|
43
|
+
const DropdownOption = ({ option, size }) => {
|
|
44
|
+
const { label, disabled } = option;
|
|
45
|
+
return (_jsx(ListboxOption, { title: label, disabled: disabled, value: option, onMouseDown: e => e.preventDefault(), className: ({ selected, focus }) => cn(optionVariants({ size }), disabled
|
|
46
|
+
? 'text-draeger-warm-gray-150 cursor-not-allowed'
|
|
47
|
+
: 'hover:bg-draeger-cool-gray-100', (focus || selected) && 'bg-draeger-cool-gray-100', 'justify-between'), children: ({ selected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: label }), selected && (_jsx(SvgIcon, { className: "shrink-0", icon: IconCheck, size: "md" }))] })) }));
|
|
48
|
+
};
|
|
49
|
+
const Dropdown = ({ options, selected, onChange, label, disabled, helperText, invalidText, invalid = false, wrapperClassName, placeholder, size, }) => {
|
|
50
|
+
const { id, labelId, helperTextId } = useFieldId();
|
|
51
|
+
return (_jsxs("div", { className: cn('font-text', wrapperClassName), children: [label && (_jsx(FormFieldLabel, { id: labelId, htmlFor: id, label: label, disabled: disabled })), _jsx(Listbox, { disabled: disabled, value: selected, onChange: onChange, children: _jsxs("div", { className: "relative inline-block w-full", children: [_jsxs(ListboxButton, { id: id, tabIndex: 0, "data-invalid": invalid, "aria-labelledby": label && labelId, "aria-describedby": helperText && helperTextId, className: cn(formFieldWrapperVariants({ size }), 'group text-draeger-dark-gray relative text-left pr-14 hover:enabled:bg-draeger-cool-gray-100', invalid && 'pr-[5.5rem]'), children: [_jsx("span", { className: "block truncate", children: selected ? selected.label : placeholder }), _jsxs(FormFieldIconsContainer, { children: [invalid && (_jsx(FormFieldIcon, { className: "w-5", icon: IconFeedbackWarning })), _jsx(FormFieldIcon, { className: cn('text-draeger-cool-gray-750 group-data-[open]:rotate-180 transition-all duration-100', disabled && 'text-draeger-cool-gray-250'), icon: IconChevronDown })] })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(ListboxOptions, { anchor: { to: 'bottom' }, className: cn(optionsVariants({ size }), 'empty:hidden w-[var(--button-width)] origin-top transition'), children: options.map((option, idx) => (_jsx(DropdownOption, { size: size, option: option }, idx))) }) })] }) }), _jsx(FormFieldHelperText, { id: helperTextId, helperText: helperText, invalidText: invalidText, invalid: invalid, disabled: disabled })] }));
|
|
52
|
+
};
|
|
53
|
+
export { Dropdown, optionVariants, optionsVariants };
|
|
54
|
+
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/actions/dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -5,5 +5,9 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
|
|
5
5
|
subHeadline?: string;
|
|
6
6
|
footer: React.ReactNode;
|
|
7
7
|
}
|
|
8
|
+
export interface FormRowProps {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare const FormRow: React.FC<FormRowProps>;
|
|
8
12
|
export declare const Form: React.FC<FormProps>;
|
|
9
13
|
//# sourceMappingURL=Form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CASxC,CAAC;AAEJ,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmBpC,CAAC"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { Headline } from '../../typography/headline';
|
|
3
4
|
import { BodyText } from '../../typography/bodyText';
|
|
5
|
+
import { Grid, GridItem } from '../../layout/grid';
|
|
6
|
+
export const FormRow = ({ children }) => React.Children.toArray(children).length > 1 ? (_jsx(Grid, { cols: 2, children: React.Children.toArray(children).map((element, index) => (_jsx(GridItem, { children: element }, index))) })) : (children);
|
|
4
7
|
export const Form = ({ children, headline, subHeadline, footer, ...props }) => {
|
|
5
|
-
return (_jsxs("form", { ...props, children: [(headline || subHeadline) && (_jsxs("div", { className: 'font-text flex flex-col gap-1 pb-10', children: [headline && _jsx(Headline, { headingLevel: 'h4', children: headline }), subHeadline && _jsx(BodyText, { variant: 'medium', children: subHeadline })] })), children, _jsx("div", { className: 'font-text flex justify-end pt-12', children: footer })] }));
|
|
8
|
+
return (_jsxs("form", { ...props, children: [(headline || subHeadline) && (_jsxs("div", { className: 'font-text flex flex-col gap-1 pb-10', children: [headline && _jsx(Headline, { headingLevel: 'h4', children: headline }), subHeadline && _jsx(BodyText, { variant: 'medium', children: subHeadline })] })), _jsx("div", { className: "flex flex-col gap-y-12", children: children }), _jsx("div", { className: 'font-text flex justify-end pt-12', children: footer })] }));
|
|
6
9
|
};
|
|
7
10
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/actions/form/Form.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/actions/form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAajD,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAC5D,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC5C,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,YACV,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACxD,KAAC,QAAQ,cAAc,OAAO,IAAf,KAAK,CAAsB,CAC3C,CAAC,GACG,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;AAEJ,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,mBAAU,KAAK,aACZ,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,CAC5B,eAAK,SAAS,EAAE,qCAAqC,aAClD,QAAQ,IAAI,KAAC,QAAQ,IAAC,YAAY,EAAE,IAAI,YAAG,QAAQ,GAAY,EAC/D,WAAW,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,YAAG,WAAW,GAAY,IACjE,CACP,EACD,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,EACxD,cAAK,SAAS,EAAE,kCAAkC,YAAG,MAAM,GAAO,IAC7D,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/formField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAC,YAAY,EAAM,MAAM,0BAA0B,CAAC;AAG3D,MAAM,WAAW,SAAS;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,YAAY,CACjD,OAAO,wBAAwB,CAChC,CAAC;AA0BF,QAAA,MAAM,wBAAwB;;mFAc7B,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAcrD,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,wBAAwB,wFACyD,CAAC;AAExF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBjD,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/formField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAC,YAAY,EAAM,MAAM,0BAA0B,CAAC;AAG3D,MAAM,WAAW,SAAS;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,YAAY,CACjD,OAAO,wBAAwB,CAChC,CAAC;AA0BF,QAAA,MAAM,wBAAwB;;mFAc7B,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAcrD,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,wBAAwB,wFACyD,CAAC;AAExF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBjD,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyB3D,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,YAAY;CAAG;AAC3D,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAYlE,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAa/C,CAAC;AAEF,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,aAAa,EACb,wBAAwB,EACxB,wBAAwB,GACzB,CAAC"}
|
|
@@ -39,7 +39,12 @@ const formFieldWrapperVariants = cva(`text-draeger-dark-blue ${formFieldWrapperC
|
|
|
39
39
|
const FormFieldWrapper = ({ children, size, className, invalid, }) => (_jsx(BodyText, { asChild: true, "data-invalid": invalid, variant: 'small', className: cn(formFieldWrapperVariants({ size, className })), children: children }));
|
|
40
40
|
const formFieldTextBaseClasses = 'inline-block text-draeger-cool-gray-750 text-label-sm transition-color duration-150';
|
|
41
41
|
const FormFieldLabel = ({ label, disabled, className, ...props }) => (_jsx("label", { className: cn('mb-2', formFieldTextBaseClasses, disabled && 'text-draeger-cool-gray-250', className), ...props, children: label }));
|
|
42
|
-
const FormFieldHelperText = ({ helperText, invalidText, invalid, disabled, className, ...props }) =>
|
|
42
|
+
const FormFieldHelperText = ({ helperText, invalidText, invalid, disabled, className, ...props }) => {
|
|
43
|
+
if (!helperText && (!invalidText || !invalid)) {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
return (_jsx("p", { className: cn('mt-1', formFieldTextBaseClasses, disabled && 'text-draeger-cool-gray-150', invalid && 'text-draeger-warning', className), ...props, children: invalid && invalidText ? invalidText : helperText }));
|
|
47
|
+
};
|
|
43
48
|
const FormFieldIconsContainer = ({ className, children, }) => (_jsx("div", { className: cn('absolute h-6 top-1/2 right-6 -translate-y-1/2 flex gap-x-2 items-center', className), children: children }));
|
|
44
49
|
const FormFieldIcon = ({ className, icon, ...props }) => (_jsx(SvgIcon, { square: true, "aria-hidden": true, size: "md", icon: icon, className: cn(className), ...props }));
|
|
45
50
|
export { FormFieldWrapper, FormFieldHelperText, FormFieldLabel, FormFieldIconsContainer, FormFieldIcon, formFieldWrapperVariants, formFieldTextBaseClasses, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/actions/formField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAe,GAAG,EAAC,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAgBnD,uGAAuG;AAEvG,MAAM,uBAAuB,GAAG;;;;;;;CAO/B,CAAC;AAEF,MAAM,6BAA6B,GAAG;;;;;;;;;;;CAWrC,CAAC;AAEF,MAAM,wBAAwB,GAAG,GAAG,CAClC,0BAA0B,uBAAuB,IAAI,6BAA6B,EAAE,EACpF;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,qBAAqB;YACzB,EAAE,EAAE,qBAAqB;YACzB,EAAE,EAAE,qBAAqB;SAC1B;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAQF,MAAM,gBAAgB,GAAoC,CAAC,EACzD,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,KAAC,QAAQ,IACP,OAAO,wBACO,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,SAAS,EAAC,CAAC,CAAC,YAEzD,QAAQ,GACA,CACZ,CAAC;AAQF,MAAM,wBAAwB,GAC5B,qFAAqF,CAAC;AAExF,MAAM,cAAc,GAAkC,CAAC,EACrD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,gBACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,wBAAwB,EACxB,QAAQ,IAAI,4BAA4B,EACxC,SAAS,CACV,KACG,KAAK,YAER,KAAK,GACA,CACT,CAAC;AAUF,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/actions/formField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAe,GAAG,EAAC,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAgBnD,uGAAuG;AAEvG,MAAM,uBAAuB,GAAG;;;;;;;CAO/B,CAAC;AAEF,MAAM,6BAA6B,GAAG;;;;;;;;;;;CAWrC,CAAC;AAEF,MAAM,wBAAwB,GAAG,GAAG,CAClC,0BAA0B,uBAAuB,IAAI,6BAA6B,EAAE,EACpF;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,qBAAqB;YACzB,EAAE,EAAE,qBAAqB;YACzB,EAAE,EAAE,qBAAqB;SAC1B;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAQF,MAAM,gBAAgB,GAAoC,CAAC,EACzD,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,KAAC,QAAQ,IACP,OAAO,wBACO,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,SAAS,EAAC,CAAC,CAAC,YAEzD,QAAQ,GACA,CACZ,CAAC;AAQF,MAAM,wBAAwB,GAC5B,qFAAqF,CAAC;AAExF,MAAM,cAAc,GAAkC,CAAC,EACrD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,gBACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,wBAAwB,EACxB,QAAQ,IAAI,4BAA4B,EACxC,SAAS,CACV,KACG,KAAK,YAER,KAAK,GACA,CACT,CAAC;AAUF,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,YACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,wBAAwB,EACxB,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,sBAAsB,EACjC,SAAS,CACV,KACG,KAAK,YAER,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,GAChD,CACL,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,uBAAuB,GAA0C,CAAC,EACtE,SAAS,EACT,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,cACE,SAAS,EAAE,EAAE,CACX,yEAAyE,EACzE,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AAEF,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,KAAC,OAAO,IACN,MAAM,6BAEN,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KACpB,KAAK,GACT,CACH,CAAC;AAEF,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,aAAa,EACb,wBAAwB,EACxB,wBAAwB,GACzB,CAAC"}
|
|
@@ -18,7 +18,7 @@ export interface LinkListProps extends React.LinkHTMLAttributes<HTMLDivElement>,
|
|
|
18
18
|
}
|
|
19
19
|
declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
20
20
|
declare const linkListVariants: (props?: ({
|
|
21
|
-
direction?: "
|
|
21
|
+
direction?: "row" | "col" | null | undefined;
|
|
22
22
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
23
23
|
declare const LinkList: React.FC<LinkListProps>;
|
|
24
24
|
export { Link, LinkList };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type SelectorOption } from '../..';
|
|
3
|
+
import { type FormField, type FormFieldWrapperVariants } from '../formField';
|
|
4
|
+
export interface MultiselectProps extends FormFieldWrapperVariants, FormField {
|
|
5
|
+
options: SelectorOption[];
|
|
6
|
+
selected: SelectorOption[];
|
|
7
|
+
placeholder: string;
|
|
8
|
+
onChange: (value: SelectorOption[]) => void;
|
|
9
|
+
filterFunction?: (option: SelectorOption, query: string) => boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const Multiselect: React.FC<MultiselectProps>;
|
|
12
|
+
export { Multiselect };
|
|
13
|
+
//# sourceMappingURL=Multiselect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/multiselect/Multiselect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAML,KAAK,SAAS,EACd,KAAK,wBAAwB,EAC9B,MAAM,cAAc,CAAC;AAKtB,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,EAAE,SAAS;IAC3E,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACrE;AAmDD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmK3C,CAAC;AAEF,OAAO,EAAC,WAAW,EAAC,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Combobox as ComboboxPrimitive, ComboboxInput as ComboboxPrimitiveInput, ComboboxOption as ComboboxPrimitiveOption, ComboboxOptions as ComboboxPrimitiveOptions, ComboboxButton as ComboboxPrimitiveButton, Transition, } from '@headlessui/react';
|
|
5
|
+
import { Tag, Checkbox, optionVariants, optionsVariants, } from '../..';
|
|
6
|
+
import { FormFieldHelperText, FormFieldIcon, FormFieldIconsContainer, FormFieldLabel, formFieldWrapperVariants, } from '../formField';
|
|
7
|
+
import { IconChevronDown, IconClose, IconFeedbackWarning } from '../../../icons';
|
|
8
|
+
import { useFieldId } from '../../../hooks';
|
|
9
|
+
import { cn } from '../../../utils';
|
|
10
|
+
const MultiselectOption = ({ option, size, }) => {
|
|
11
|
+
const { label, disabled } = option;
|
|
12
|
+
return (_jsx(ComboboxPrimitiveOption, { disabled: disabled, value: option, children: ({ selected, focus, disabled }) => (_jsxs("div", { title: label, className: cn(optionVariants({ size }), focus && 'bg-draeger-cool-gray-100', disabled ? 'cursor-not-allowed' : 'hover:bg-draeger-cool-gray-100'), children: [_jsx(Checkbox, { disabled: disabled, checked: selected, size: 'sm' }), _jsx("span", { className: cn('block text-ellipsis overflow-hidden whitespace-nowrap', disabled && 'text-draeger-warm-gray-150'), children: label })] })) }));
|
|
13
|
+
};
|
|
14
|
+
const defaultFilterFunction = ({ label }, query) => label.toLowerCase().includes(query.toLowerCase());
|
|
15
|
+
const filterOptions = (options, query, filterFunction) => query === ''
|
|
16
|
+
? options
|
|
17
|
+
: options.filter(option => (filterFunction ?? defaultFilterFunction)(option, query));
|
|
18
|
+
const Multiselect = ({ options, selected, onChange, disabled, invalidText, invalid = false, label, helperText, placeholder, filterFunction, size, wrapperClassName, }) => {
|
|
19
|
+
const [query, setQuery] = React.useState('');
|
|
20
|
+
const [state, setState] = React.useState(0);
|
|
21
|
+
const { id, labelId, helperTextId } = useFieldId();
|
|
22
|
+
const filteredOptions = filterOptions(options, query, filterFunction);
|
|
23
|
+
const filteredSelectedOptions = filterOptions(selected, query, filterFunction);
|
|
24
|
+
const unselectedOptions = filteredOptions.filter(option => !selected.includes(option));
|
|
25
|
+
const sortedSelectedOptions = filteredSelectedOptions.sort((a, b) => a.label.localeCompare(b.label, undefined, {
|
|
26
|
+
numeric: true,
|
|
27
|
+
sensitivity: 'base',
|
|
28
|
+
}));
|
|
29
|
+
const hasQuery = Boolean(query.length);
|
|
30
|
+
return (_jsx("div", { className: cn('font-text relative', wrapperClassName), children: _jsxs(ComboboxPrimitive, { as: "div", className: 'group', value: selected, onChange: onChange, disabled: disabled, immediate: true, multiple: true, children: [label && (_jsx(FormFieldLabel, { id: labelId, htmlFor: id, label: label, disabled: disabled, className: "cursor-pointer" })), _jsxs("div", { className: "relative inline-block w-full", children: [selected.length > 0 && (_jsx(Tag, { className: "absolute -translate-y-1/2 top-1/2 left-6", onClose: () => onChange([]), label: selected.length, mode: 'dismissable', size: 'xs', value: "" }, state.toString())), _jsx(ComboboxPrimitiveInput, { id: id, autoComplete: "off", value: query, onChange: el => setQuery(el.target.value), onBlur: () => setQuery(''), onFocus: () => requestAnimationFrame(() => setState(state => state + 1)), placeholder: placeholder, "data-invalid": invalid, "aria-labelledby": labelId, "aria-describedby": helperText && helperTextId, className: cn(formFieldWrapperVariants({ size }), 'pr-14', selected.length && 'pl-24', (hasQuery || invalid) && 'pr-24', hasQuery && invalid && 'pr-32') }), _jsxs(FormFieldIconsContainer, { children: [hasQuery && (_jsx(FormFieldIcon, { className: "w-5 cursor-pointer pointer-events-auto text-draeger-cool-gray-750", onMouseDown: e => {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
setQuery('');
|
|
33
|
+
}, icon: IconClose })), invalid && (_jsx(FormFieldIcon, { className: "pointer-events-auto", icon: IconFeedbackWarning })), _jsx(ComboboxPrimitiveButton, { as: 'div', children: _jsx(FormFieldIcon, { className: cn('cursor-pointer pointer-events-auto text-draeger-cool-gray-750 group-data-[headlessui-state=open]:rotate-180 transition-all duration-100', disabled && 'cursor-not-allowed text-draeger-cool-gray-250'), onClick: () => requestAnimationFrame(() => setState(state => state + 1)), icon: IconChevronDown }) })] })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsxs(ComboboxPrimitiveOptions, { anchor: { to: 'bottom' }, className: cn(optionsVariants({ size }), 'empty:hidden w-[var(--input-width)] origin-top transition'), children: [sortedSelectedOptions.map(option => (_jsx(MultiselectOption, { option: option, size: size }, option.label))), unselectedOptions.map(option => (_jsx(MultiselectOption, { option: option, size: size }, option.label)))] }) }), _jsx(FormFieldHelperText, { id: helperTextId, helperText: helperText, invalidText: invalidText, invalid: invalid, disabled: disabled })] }) }));
|
|
34
|
+
};
|
|
35
|
+
export { Multiselect };
|
|
36
|
+
//# sourceMappingURL=Multiselect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Multiselect.js","sourceRoot":"","sources":["../../../../src/components/actions/multiselect/Multiselect.tsx"],"names":[],"mappings":"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"}
|