@laerdal/life-react-components 1.4.1-dev.9 → 1.5.1-dev.1.full
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/Accordion/AccordionItem.cjs +77 -0
- package/dist/Accordion/AccordionItem.cjs.map +1 -0
- package/dist/Accordion/AccordionItem.d.ts +2 -0
- package/dist/Accordion/AccordionItem.js +8 -7
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +105 -0
- package/dist/Accordion/AccordionMenu.cjs.map +1 -0
- package/dist/Accordion/AccordionMenu.d.ts +2 -0
- package/dist/Accordion/AccordionMenu.js +8 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/ContentAccordion.cjs +172 -0
- package/dist/Accordion/ContentAccordion.cjs.map +1 -0
- package/dist/Accordion/index.cjs +38 -0
- package/dist/Accordion/index.cjs.map +1 -0
- package/dist/Accordion/styles.cjs +45 -0
- package/dist/Accordion/styles.cjs.map +1 -0
- package/dist/Accordion/styles.d.ts +5 -5
- package/dist/Accordion/styles.js +9 -10
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/AuthPage/AuthPage.cjs +80 -0
- package/dist/AuthPage/AuthPage.cjs.map +1 -0
- package/dist/AuthPage/Information.cjs +42 -0
- package/dist/AuthPage/Information.cjs.map +1 -0
- package/dist/AuthPage/ScreenSetsContainer.cjs +25 -0
- package/dist/AuthPage/ScreenSetsContainer.cjs.map +1 -0
- package/dist/AuthPage/_AuthPageSection.cjs +22 -0
- package/dist/AuthPage/_AuthPageSection.cjs.map +1 -0
- package/dist/AuthPage/index.cjs +64 -0
- package/dist/AuthPage/index.cjs.map +1 -0
- package/dist/AuthPage/screenSetsErrorMessages.cjs +13 -0
- package/dist/AuthPage/screenSetsErrorMessages.cjs.map +1 -0
- package/dist/Banners/Banner.cjs +190 -0
- package/dist/Banners/Banner.cjs.map +1 -0
- package/dist/Banners/Banner.d.ts +1 -0
- package/dist/Banners/Banner.js +84 -189
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Banners/OverviewBanner.cjs +55 -0
- package/dist/Banners/OverviewBanner.cjs.map +1 -0
- package/dist/Banners/index.cjs +24 -0
- package/dist/Banners/index.cjs.map +1 -0
- package/dist/Banners/styles.cjs +73 -0
- package/dist/Banners/styles.cjs.map +1 -0
- package/dist/Banners/styles.js +44 -7
- package/dist/Banners/styles.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +169 -0
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -0
- package/dist/Breadcrumb/BreadcrumbItem.cjs +6 -0
- package/dist/Breadcrumb/BreadcrumbItem.cjs.map +1 -0
- package/dist/Breadcrumb/index.cjs +16 -0
- package/dist/Breadcrumb/index.cjs.map +1 -0
- package/dist/Button/BackButton.cjs +75 -0
- package/dist/Button/BackButton.cjs.map +1 -0
- package/dist/Button/Button.cjs +266 -0
- package/dist/Button/Button.cjs.map +1 -0
- package/dist/Button/Button.js +27 -101
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/DualFunctionButton.cjs +162 -0
- package/dist/Button/DualFunctionButton.cjs.map +1 -0
- package/dist/Button/Iconbutton.cjs +195 -0
- package/dist/Button/Iconbutton.cjs.map +1 -0
- package/dist/Button/Iconbutton.d.ts +13 -0
- package/dist/Button/Iconbutton.js +2 -2
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Button/index.cjs +40 -0
- package/dist/Button/index.cjs.map +1 -0
- package/dist/Chips/ActionChip.cjs +81 -0
- package/dist/Chips/ActionChip.cjs.map +1 -0
- package/dist/Chips/ChipInput.cjs +199 -0
- package/dist/Chips/ChipInput.cjs.map +1 -0
- package/dist/Chips/ChipStyles.cjs +43 -0
- package/dist/Chips/ChipStyles.cjs.map +1 -0
- package/dist/Chips/ChipTypes.cjs +6 -0
- package/dist/Chips/ChipTypes.cjs.map +1 -0
- package/dist/Chips/ChoiceChips.cjs +94 -0
- package/dist/Chips/ChoiceChips.cjs.map +1 -0
- package/dist/Chips/FilterChip.cjs +81 -0
- package/dist/Chips/FilterChip.cjs.map +1 -0
- package/dist/Chips/InputChip.cjs +109 -0
- package/dist/Chips/InputChip.cjs.map +1 -0
- package/dist/Chips/index.cjs +48 -0
- package/dist/Chips/index.cjs.map +1 -0
- package/dist/Dropdown/BasicDropdown.cjs +300 -0
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -0
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/ChipDropdownInput.cjs +431 -0
- package/dist/Dropdown/ChipDropdownInput.cjs.map +1 -0
- package/dist/Dropdown/ChipDropdownInput.js +2 -4
- package/dist/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +81 -0
- package/dist/Dropdown/CommonStyling.cjs.map +1 -0
- package/dist/Dropdown/CommonStyling.d.ts +0 -5
- package/dist/Dropdown/CommonStyling.js +3 -10
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +161 -0
- package/dist/Dropdown/DropdownButton.cjs.map +1 -0
- package/dist/Dropdown/DropdownButtonTypes.cjs +6 -0
- package/dist/Dropdown/DropdownButtonTypes.cjs.map +1 -0
- package/dist/Dropdown/DropdownContent.cjs +566 -0
- package/dist/Dropdown/DropdownContent.cjs.map +1 -0
- package/dist/Dropdown/DropdownContent.js +19 -54
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +357 -0
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -0
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/Dropdown/index.cjs +40 -0
- package/dist/Dropdown/index.cjs.map +1 -0
- package/dist/Dropdown/index.d.ts +1 -0
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.cjs +69 -0
- package/dist/Footer/Components/FooterBottomLinks.cjs.map +1 -0
- package/dist/Footer/Components/FooterDropdownLinks.cjs +91 -0
- package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -0
- package/dist/Footer/Components/FooterNavSection.cjs +90 -0
- package/dist/Footer/Components/FooterNavSection.cjs.map +1 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs +129 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -0
- package/dist/Footer/Components/FooterTop.cjs +91 -0
- package/dist/Footer/Components/FooterTop.cjs.map +1 -0
- package/dist/Footer/Footer.cjs +41 -0
- package/dist/Footer/Footer.cjs.map +1 -0
- package/dist/Footer/SiteFooter.cjs +89 -0
- package/dist/Footer/SiteFooter.cjs.map +1 -0
- package/dist/Footer/index.cjs +24 -0
- package/dist/Footer/index.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Actions.cjs +185 -0
- package/dist/GlobalNavigationBar/Actions.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Avatar.cjs +106 -0
- package/dist/GlobalNavigationBar/Avatar.cjs.map +1 -0
- package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs +100 -0
- package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +303 -0
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -0
- package/dist/GlobalNavigationBar/Logo.cjs +102 -0
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -0
- package/dist/GlobalNavigationBar/MainMenu.cjs +169 -0
- package/dist/GlobalNavigationBar/MainMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/RightSideNav.cjs +89 -0
- package/dist/GlobalNavigationBar/RightSideNav.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs +108 -0
- package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs +176 -0
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs +168 -0
- package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/index.cjs +36 -0
- package/dist/GlobalNavigationBar/index.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +71 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs +49 -0
- package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs +91 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +290 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -0
- package/dist/HyperLink/HyperLink.cjs +72 -0
- package/dist/HyperLink/HyperLink.cjs.map +1 -0
- package/dist/HyperLink/index.cjs +30 -0
- package/dist/HyperLink/index.cjs.map +1 -0
- package/dist/HyperLink/styling.cjs +22 -0
- package/dist/HyperLink/styling.cjs.map +1 -0
- package/dist/InputFields/Checkbox.cjs +126 -0
- package/dist/InputFields/Checkbox.cjs.map +1 -0
- package/dist/InputFields/DatepickerField.cjs +252 -0
- package/dist/InputFields/DatepickerField.cjs.map +1 -0
- package/dist/InputFields/DatepickerFieldHeader.cjs +107 -0
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -0
- package/dist/InputFields/Label.cjs +104 -0
- package/dist/InputFields/Label.cjs.map +1 -0
- package/dist/InputFields/PasswordField.cjs +150 -0
- package/dist/InputFields/PasswordField.cjs.map +1 -0
- package/dist/InputFields/QuickSearch.cjs +201 -0
- package/dist/InputFields/QuickSearch.cjs.map +1 -0
- package/dist/InputFields/RadioButton.cjs +114 -0
- package/dist/InputFields/RadioButton.cjs.map +1 -0
- package/dist/InputFields/ResponsiveComponentWrapper.cjs +72 -0
- package/dist/InputFields/ResponsiveComponentWrapper.cjs.map +1 -0
- package/dist/InputFields/SearchBar.cjs +146 -0
- package/dist/InputFields/SearchBar.cjs.map +1 -0
- package/dist/InputFields/TextField.cjs +126 -0
- package/dist/InputFields/TextField.cjs.map +1 -0
- package/dist/InputFields/Textarea.cjs +96 -0
- package/dist/InputFields/Textarea.cjs.map +1 -0
- package/dist/InputFields/components/SearchBarInput.cjs +99 -0
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -0
- package/dist/InputFields/components/SearchField.cjs +71 -0
- package/dist/InputFields/components/SearchField.cjs.map +1 -0
- package/dist/InputFields/index.cjs +80 -0
- package/dist/InputFields/index.cjs.map +1 -0
- package/dist/InputFields/styling.cjs +76 -0
- package/dist/InputFields/styling.cjs.map +1 -0
- package/dist/Layouts/index.cjs +56 -0
- package/dist/Layouts/index.cjs.map +1 -0
- package/dist/List/ListRow.cjs +143 -0
- package/dist/List/ListRow.cjs.map +1 -0
- package/dist/List/index.cjs +16 -0
- package/dist/List/index.cjs.map +1 -0
- package/dist/LoadingIndicator/LoadingIndicator.cjs +71 -0
- package/dist/LoadingIndicator/LoadingIndicator.cjs.map +1 -0
- package/dist/LoadingIndicator/index.cjs +16 -0
- package/dist/LoadingIndicator/index.cjs.map +1 -0
- package/dist/LoadingPage/GlobalLoadingPage.cjs +66 -0
- package/dist/LoadingPage/GlobalLoadingPage.cjs.map +1 -0
- package/dist/LoadingPage/index.cjs +16 -0
- package/dist/LoadingPage/index.cjs.map +1 -0
- package/dist/MenuItem/MenuItem.cjs +104 -0
- package/dist/MenuItem/MenuItem.cjs.map +1 -0
- package/dist/MenuItem/MenuItem.d.ts +21 -0
- package/dist/MenuItem/MenuItem.js +64 -0
- package/dist/MenuItem/MenuItem.js.map +1 -0
- package/dist/MiniProductCard/MiniProductCard.cjs +80 -0
- package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -0
- package/dist/MiniProductCard/index.cjs +16 -0
- package/dist/MiniProductCard/index.cjs.map +1 -0
- package/dist/Modals/Modal.cjs +92 -0
- package/dist/Modals/Modal.cjs.map +1 -0
- package/dist/Modals/ModalContainer.cjs +176 -0
- package/dist/Modals/ModalContainer.cjs.map +1 -0
- package/dist/Modals/ModalContainer.js +1 -1
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +363 -0
- package/dist/Modals/ModalDialog.cjs.map +1 -0
- package/dist/Modals/ModalDialog.d.ts +1 -0
- package/dist/Modals/ModalDialog.js +16 -2
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalNote.cjs +93 -0
- package/dist/Modals/ModalNote.cjs.map +1 -0
- package/dist/Modals/ModalStyles.cjs +154 -0
- package/dist/Modals/ModalStyles.cjs.map +1 -0
- package/dist/Modals/ModalStyles.js +1 -1
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs +6 -0
- package/dist/Modals/ModalTypes.cjs.map +1 -0
- package/dist/Modals/index.cjs +70 -0
- package/dist/Modals/index.cjs.map +1 -0
- package/dist/Modals/index.d.ts +1 -0
- package/dist/Modals/index.js.map +1 -1
- package/dist/NavItem/NavItem.cjs +26 -0
- package/dist/NavItem/NavItem.cjs.map +1 -0
- package/dist/NavItem/index.cjs +16 -0
- package/dist/NavItem/index.cjs.map +1 -0
- package/dist/NotificationDot/NotificationDot.cjs +74 -0
- package/dist/NotificationDot/NotificationDot.cjs.map +1 -0
- package/dist/NotificationDot/index.cjs +16 -0
- package/dist/NotificationDot/index.cjs.map +1 -0
- package/dist/Paginator/Paginator.cjs +191 -0
- package/dist/Paginator/Paginator.cjs.map +1 -0
- package/dist/Paginator/index.cjs +16 -0
- package/dist/Paginator/index.cjs.map +1 -0
- package/dist/QuizButton/QuizButton.cjs +150 -0
- package/dist/QuizButton/QuizButton.cjs.map +1 -0
- package/dist/QuizButton/QuizButton.js +6 -6
- package/dist/QuizButton/QuizButton.js.map +1 -1
- package/dist/QuizButton/index.cjs +16 -0
- package/dist/QuizButton/index.cjs.map +1 -0
- package/dist/Services/functions.cjs +19 -0
- package/dist/Services/functions.cjs.map +1 -0
- package/dist/SkipToContent/SkipToContent.cjs +46 -0
- package/dist/SkipToContent/SkipToContent.cjs.map +1 -0
- package/dist/SkipToContent/index.cjs +16 -0
- package/dist/SkipToContent/index.cjs.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +120 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -0
- package/dist/Switcher/SwitcherMenuItem.cjs +62 -0
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -0
- package/dist/Switcher/index.cjs +24 -0
- package/dist/Switcher/index.cjs.map +1 -0
- package/dist/Table/Table.cjs +463 -0
- package/dist/Table/Table.cjs.map +1 -0
- package/dist/Table/TableBody.cjs +186 -0
- package/dist/Table/TableBody.cjs.map +1 -0
- package/dist/Table/TableFooter.cjs +119 -0
- package/dist/Table/TableFooter.cjs.map +1 -0
- package/dist/Table/TableHeaders.cjs +100 -0
- package/dist/Table/TableHeaders.cjs.map +1 -0
- package/dist/Table/TableStyles.cjs +104 -0
- package/dist/Table/TableStyles.cjs.map +1 -0
- package/dist/Table/TableTypes.cjs +6 -0
- package/dist/Table/TableTypes.cjs.map +1 -0
- package/dist/Table/index.cjs +16 -0
- package/dist/Table/index.cjs.map +1 -0
- package/dist/Table/index.d.ts +1 -0
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +98 -0
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -0
- package/dist/Tabs/HorizontalTabs.d.ts +1 -1
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/TabLink.cjs +128 -0
- package/dist/Tabs/TabLink.cjs.map +1 -0
- package/dist/Tabs/Tabs.cjs +121 -0
- package/dist/Tabs/Tabs.cjs.map +1 -0
- package/dist/Tabs/VerticalTabs.cjs +68 -0
- package/dist/Tabs/VerticalTabs.cjs.map +1 -0
- package/dist/Tabs/index.cjs +24 -0
- package/dist/Tabs/index.cjs.map +1 -0
- package/dist/Tabs/index.d.ts +2 -0
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Toasters/Toast.cjs +289 -0
- package/dist/Toasters/Toast.cjs.map +1 -0
- package/dist/Toasters/ToastContext.cjs +179 -0
- package/dist/Toasters/ToastContext.cjs.map +1 -0
- package/dist/Toasters/index.cjs +36 -0
- package/dist/Toasters/index.cjs.map +1 -0
- package/dist/Toggles/ToggleSwitch.cjs +73 -0
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -0
- package/dist/Toggles/TogglerStyles.cjs +39 -0
- package/dist/Toggles/TogglerStyles.cjs.map +1 -0
- package/dist/Toggles/TogglerTypes.cjs +6 -0
- package/dist/Toggles/TogglerTypes.cjs.map +1 -0
- package/dist/Toggles/index.cjs +16 -0
- package/dist/Toggles/index.cjs.map +1 -0
- package/dist/Tooltips/TooltipStyles.cjs +96 -0
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -0
- package/dist/Tooltips/TooltipTypes.cjs +11 -0
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -0
- package/dist/Tooltips/TooltipWrapper.cjs +51 -0
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -0
- package/dist/Tooltips/index.cjs +36 -0
- package/dist/Tooltips/index.cjs.map +1 -0
- package/dist/Tooltips/index.d.ts +2 -2
- package/dist/Tooltips/index.js +2 -2
- package/dist/Tooltips/index.js.map +1 -1
- package/dist/assets/index.cjs +173 -0
- package/dist/assets/index.cjs.map +1 -0
- package/dist/common/EventHandlers.cjs +20 -0
- package/dist/common/EventHandlers.cjs.map +1 -0
- package/dist/common/FocusVisible.cjs +77 -0
- package/dist/common/FocusVisible.cjs.map +1 -0
- package/dist/common/InputStyling.cjs +20 -0
- package/dist/common/InputStyling.cjs.map +1 -0
- package/dist/common/index.cjs +30 -0
- package/dist/common/index.cjs.map +1 -0
- package/dist/common/index.d.ts +1 -0
- package/dist/common/index.js +1 -0
- package/dist/common/index.js.map +1 -1
- package/dist/hooks/useClickOutside.cjs +35 -0
- package/dist/hooks/useClickOutside.cjs.map +1 -0
- package/dist/icons/contenticons/ContentIcons.cjs +4530 -0
- package/dist/icons/contenticons/ContentIcons.cjs.map +1 -0
- package/dist/icons/index.cjs +147 -0
- package/dist/icons/index.cjs.map +1 -0
- package/dist/icons/systemicons/SystemIcons.cjs +4134 -0
- package/dist/icons/systemicons/SystemIcons.cjs.map +1 -0
- package/dist/index.cjs +422 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/breakpoints.cjs +16 -0
- package/dist/styles/breakpoints.cjs.map +1 -0
- package/dist/styles/colors.cjs +108 -0
- package/dist/styles/colors.cjs.map +1 -0
- package/dist/styles/global.cjs +15 -0
- package/dist/styles/global.cjs.map +1 -0
- package/dist/styles/index.cjs +288 -0
- package/dist/styles/index.cjs.map +1 -0
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.js +1 -0
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/shadowstyles.cjs +14 -0
- package/dist/styles/shadowstyles.cjs.map +1 -0
- package/dist/styles/typography.cjs +640 -0
- package/dist/styles/typography.cjs.map +1 -0
- package/dist/styles/z-indexes.cjs +22 -0
- package/dist/styles/z-indexes.cjs.map +1 -0
- package/dist/types.cjs +59 -0
- package/dist/types.cjs.map +1 -0
- package/package.json +13 -5
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _ = require("..");
|
|
15
|
+
|
|
16
|
+
var _icons = require("../icons");
|
|
17
|
+
|
|
18
|
+
var _styles = require("./styles");
|
|
19
|
+
|
|
20
|
+
var _common = require("../common");
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
var AccordionItem = function AccordionItem(props) {
|
|
25
|
+
var id = props.id,
|
|
26
|
+
onSelect = props.onSelect,
|
|
27
|
+
isActive = props.isActive,
|
|
28
|
+
title = props.title,
|
|
29
|
+
icon = props.icon,
|
|
30
|
+
disabled = props.disabled,
|
|
31
|
+
isLast = props.isLast;
|
|
32
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AccordionItemContainer, {
|
|
33
|
+
id: id,
|
|
34
|
+
displaySeparator: !isActive && !isLast,
|
|
35
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, {
|
|
36
|
+
tabIndex: !disabled ? 0 : undefined,
|
|
37
|
+
onClick: function onClick() {
|
|
38
|
+
if (!disabled) {
|
|
39
|
+
onSelect(id);
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
onKeyDown: function onKeyDown(e) {
|
|
43
|
+
if (e.key === 'Enter') onSelect(id);
|
|
44
|
+
},
|
|
45
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
46
|
+
className: (isActive ? 'active' : '') + (disabled ? ' disabled' : ''),
|
|
47
|
+
children: [icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
48
|
+
size: '24px'
|
|
49
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
50
|
+
children: title
|
|
51
|
+
}), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
|
|
52
|
+
color: _.COLORS.neutral_800,
|
|
53
|
+
size: "20px"
|
|
54
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
|
|
55
|
+
color: _.COLORS.neutral_600,
|
|
56
|
+
size: "20px"
|
|
57
|
+
})]
|
|
58
|
+
}), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
|
|
59
|
+
padding: props.padding,
|
|
60
|
+
margin: props.margin,
|
|
61
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
|
|
62
|
+
children: props.children
|
|
63
|
+
})
|
|
64
|
+
})]
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
AccordionItem.propTypes = {
|
|
69
|
+
onSelect: _propTypes.default.func.isRequired,
|
|
70
|
+
isActive: _propTypes.default.bool.isRequired,
|
|
71
|
+
isLast: _propTypes.default.bool.isRequired,
|
|
72
|
+
padding: _propTypes.default.string,
|
|
73
|
+
margin: _propTypes.default.string
|
|
74
|
+
};
|
|
75
|
+
var _default = AccordionItem;
|
|
76
|
+
exports.default = _default;
|
|
77
|
+
//# sourceMappingURL=AccordionItem.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","margin","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEU,iCAVlC;AAWqB,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAACS,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAeID,QAAQ,gBACJ,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBId,QAAQ,iBACR,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAA2C,MAAA,MAAM,EAAElB,KAAK,CAACmB,MAAzD;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAanB,KAAK,CAACoB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPElB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;AACAC,EAAAA,M;;eAsCapB,a","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.cjs"}
|
|
@@ -4,6 +4,8 @@ interface AccordionItemPropsInner extends AccordionItemProps {
|
|
|
4
4
|
onSelect: (id: string) => void;
|
|
5
5
|
isActive: boolean;
|
|
6
6
|
isLast: boolean;
|
|
7
|
+
padding?: string;
|
|
8
|
+
margin?: string;
|
|
7
9
|
}
|
|
8
10
|
declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
|
|
9
11
|
export default AccordionItem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _pt from "prop-types";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { COLORS,
|
|
3
|
+
import { COLORS, ComponentS } from '..';
|
|
4
4
|
import { SystemIcons } from '../icons';
|
|
5
5
|
import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
|
|
6
6
|
import { defaultOnMouseDownHandler } from '../common';
|
|
@@ -29,13 +29,10 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
29
29
|
if (e.key === 'Enter') onSelect(id);
|
|
30
30
|
},
|
|
31
31
|
onMouseDown: defaultOnMouseDownHandler,
|
|
32
|
-
isActive:
|
|
33
|
-
isDisabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
|
32
|
+
className: (isActive ? 'active' : '') + (disabled ? ' disabled' : ''),
|
|
34
33
|
children: [icon && /*#__PURE__*/React.cloneElement(icon, {
|
|
35
34
|
size: '24px'
|
|
36
|
-
}), /*#__PURE__*/_jsx(
|
|
37
|
-
className: "headerLabel",
|
|
38
|
-
color: isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600,
|
|
35
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
39
36
|
children: title
|
|
40
37
|
}), isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
|
|
41
38
|
color: COLORS.neutral_800,
|
|
@@ -45,6 +42,8 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
45
42
|
size: "20px"
|
|
46
43
|
})]
|
|
47
44
|
}), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
|
|
45
|
+
padding: props.padding,
|
|
46
|
+
margin: props.margin,
|
|
48
47
|
children: /*#__PURE__*/_jsx(ComponentS, {
|
|
49
48
|
children: props.children
|
|
50
49
|
})
|
|
@@ -55,7 +54,9 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
55
54
|
AccordionItem.propTypes = {
|
|
56
55
|
onSelect: _pt.func.isRequired,
|
|
57
56
|
isActive: _pt.bool.isRequired,
|
|
58
|
-
isLast: _pt.bool.isRequired
|
|
57
|
+
isLast: _pt.bool.isRequired,
|
|
58
|
+
padding: _pt.string,
|
|
59
|
+
margin: _pt.string
|
|
59
60
|
};
|
|
60
61
|
export default AccordionItem;
|
|
61
62
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","margin","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAA4BC,UAA5B,QAA6C,IAA7C;AACA,SAAQC,WAAR,QAA0B,UAA1B;AAEA,SAAQC,sBAAR,EAAgCC,iBAAhC,EAAmDC,mBAAnD,QAA6E,UAA7E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAUA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEH,yBAVlC;AAWqB,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAACO,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAeID,QAAQ,gBACJ,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBIX,QAAQ,iBACR,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAA2C,MAAA,MAAM,EAAEf,KAAK,CAACgB,MAAzD;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAahB,KAAK,CAACiB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPEf,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;AACAC,EAAAA,M;;AAsCF,eAAejB,aAAf","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
|
|
18
|
+
var React = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
|
|
21
|
+
|
|
22
|
+
var _styles = require("./styles");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
var AccordionMenu = function AccordionMenu(_ref) {
|
|
31
|
+
var items = _ref.items,
|
|
32
|
+
selectedItems = _ref.selectedItems,
|
|
33
|
+
setSelectedItems = _ref.setSelectedItems,
|
|
34
|
+
onSelect = _ref.onSelect,
|
|
35
|
+
multipleActive = _ref.multipleActive,
|
|
36
|
+
padding = _ref.padding,
|
|
37
|
+
margin = _ref.margin;
|
|
38
|
+
|
|
39
|
+
var _React$useState = React.useState([]),
|
|
40
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
41
|
+
builtinSelectedItems = _React$useState2[0],
|
|
42
|
+
builtinSetSelectedItems = _React$useState2[1];
|
|
43
|
+
|
|
44
|
+
var getCollection = function getCollection() {
|
|
45
|
+
return selectedItems ? selectedItems : builtinSelectedItems;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var getUpdateFunction = function getUpdateFunction() {
|
|
49
|
+
return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
var onSelected = function onSelected(id) {
|
|
53
|
+
var collection = getCollection();
|
|
54
|
+
var updateFunc = getUpdateFunction();
|
|
55
|
+
var isActive = !!collection.find(function (x) {
|
|
56
|
+
return x == id;
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
if (multipleActive) {
|
|
60
|
+
if (isActive) updateFunc(collection.filter(function (x) {
|
|
61
|
+
return x != id;
|
|
62
|
+
}));else updateFunc([].concat((0, _toConsumableArray2.default)(collection), [id]));
|
|
63
|
+
} else updateFunc(isActive ? [] : [id]);
|
|
64
|
+
|
|
65
|
+
onSelect && onSelect(id);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AccordionMenuWrapper, {
|
|
69
|
+
children: items.map(function (item) {
|
|
70
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionItem.default, {
|
|
71
|
+
disabled: item.disabled,
|
|
72
|
+
id: item.id,
|
|
73
|
+
title: item.title,
|
|
74
|
+
icon: item.icon,
|
|
75
|
+
isActive: !!getCollection().find(function (x) {
|
|
76
|
+
return x == item.id;
|
|
77
|
+
}),
|
|
78
|
+
isLast: items.indexOf(item) === items.length - 1,
|
|
79
|
+
onSelect: onSelected,
|
|
80
|
+
padding: padding,
|
|
81
|
+
margin: margin,
|
|
82
|
+
children: item.children
|
|
83
|
+
}, item.id);
|
|
84
|
+
})
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
AccordionMenu.propTypes = {
|
|
89
|
+
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
90
|
+
id: _propTypes.default.string.isRequired,
|
|
91
|
+
disabled: _propTypes.default.bool,
|
|
92
|
+
title: _propTypes.default.string.isRequired,
|
|
93
|
+
icon: _propTypes.default.node,
|
|
94
|
+
children: _propTypes.default.node.isRequired
|
|
95
|
+
})).isRequired,
|
|
96
|
+
selectedItems: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
97
|
+
setSelectedItems: _propTypes.default.func,
|
|
98
|
+
onSelect: _propTypes.default.func,
|
|
99
|
+
multipleActive: _propTypes.default.bool,
|
|
100
|
+
padding: _propTypes.default.string,
|
|
101
|
+
margin: _propTypes.default.string
|
|
102
|
+
};
|
|
103
|
+
var _default = AccordionMenu;
|
|
104
|
+
exports.default = _default;
|
|
105
|
+
//# sourceMappingURL=AccordionMenu.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAoBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOV,aAAa,GAAGA,aAAH,GAAmBQ,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOV,gBAAgB,GAAGA,gBAAH,GAAsBQ,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGV,cAAH,EAAmB;AACjB,UAAGa,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFX,IAAAA,QAAQ,IAAIA,QAAQ,CAACW,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,qBAAC,4BAAD;AAAA,cACGd,KAAK,CAACqB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEd,KAAK,CAAC0B,OAAN,CAAcJ,IAAd,MAAwBtB,KAAK,CAAC2B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAER,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEd,EAAAA,K;AAUAc,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA3B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;eAsEaP,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.cjs"}
|
|
@@ -11,7 +11,9 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
11
11
|
selectedItems = _ref.selectedItems,
|
|
12
12
|
setSelectedItems = _ref.setSelectedItems,
|
|
13
13
|
onSelect = _ref.onSelect,
|
|
14
|
-
multipleActive = _ref.multipleActive
|
|
14
|
+
multipleActive = _ref.multipleActive,
|
|
15
|
+
padding = _ref.padding,
|
|
16
|
+
margin = _ref.margin;
|
|
15
17
|
|
|
16
18
|
var _React$useState = React.useState([]),
|
|
17
19
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -54,6 +56,8 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
54
56
|
}),
|
|
55
57
|
isLast: items.indexOf(item) === items.length - 1,
|
|
56
58
|
onSelect: onSelected,
|
|
59
|
+
padding: padding,
|
|
60
|
+
margin: margin,
|
|
57
61
|
children: item.children
|
|
58
62
|
}, item.id);
|
|
59
63
|
})
|
|
@@ -71,7 +75,9 @@ AccordionMenu.propTypes = {
|
|
|
71
75
|
selectedItems: _pt.arrayOf(_pt.string),
|
|
72
76
|
setSelectedItems: _pt.func,
|
|
73
77
|
onSelect: _pt.func,
|
|
74
|
-
multipleActive: _pt.bool
|
|
78
|
+
multipleActive: _pt.bool,
|
|
79
|
+
padding: _pt.string,
|
|
80
|
+
margin: _pt.string
|
|
75
81
|
};
|
|
76
82
|
export default AccordionMenu;
|
|
77
83
|
//# sourceMappingURL=AccordionMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;AAoBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDV,KAAK,CAACW,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGT,cAAH,EAAmB;AACjB,UAAGY,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,KAAC,oBAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEP,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGe,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEb,EAAAA,K;AAUAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;AAsEF,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.ContentAccordionWrapper = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContent = exports.ContentAccordionItem = exports.ContentAccordion = void 0;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
+
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireDefault(require("react"));
|
|
19
|
+
|
|
20
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
21
|
+
|
|
22
|
+
var _types = require("../types");
|
|
23
|
+
|
|
24
|
+
var _icons = require("../icons");
|
|
25
|
+
|
|
26
|
+
var _typography = require("../styles/typography");
|
|
27
|
+
|
|
28
|
+
var _styles = require("../styles");
|
|
29
|
+
|
|
30
|
+
var _zIndexes = require("../styles/z-indexes");
|
|
31
|
+
|
|
32
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
|
+
|
|
34
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
35
|
+
|
|
36
|
+
var ContentAccordionItemHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ", ";\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n box-shadow: none;\n z-index: ", ";\n }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.white, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active);
|
|
37
|
+
|
|
38
|
+
exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
|
|
39
|
+
|
|
40
|
+
var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
41
|
+
|
|
42
|
+
exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
|
|
43
|
+
|
|
44
|
+
var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
45
|
+
|
|
46
|
+
exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
|
|
47
|
+
|
|
48
|
+
var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n flex-direction: column;\n"])));
|
|
49
|
+
|
|
50
|
+
exports.ContentAccordionItemContent = ContentAccordionItemContent;
|
|
51
|
+
|
|
52
|
+
var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
53
|
+
|
|
54
|
+
exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
|
|
55
|
+
|
|
56
|
+
var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
57
|
+
|
|
58
|
+
exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
|
|
59
|
+
|
|
60
|
+
var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
61
|
+
|
|
62
|
+
exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
|
|
63
|
+
|
|
64
|
+
var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), _styles.COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, _styles.COLORS.neutral_300);
|
|
65
|
+
|
|
66
|
+
exports.ContentAccordionItem = ContentAccordionItem;
|
|
67
|
+
|
|
68
|
+
var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
|
|
69
|
+
|
|
70
|
+
exports.ContentAccordionWrapper = ContentAccordionWrapper;
|
|
71
|
+
|
|
72
|
+
var ContentAccordion = function ContentAccordion(props) {
|
|
73
|
+
var _props$size;
|
|
74
|
+
|
|
75
|
+
var _React$useState = _react.default.useState([]),
|
|
76
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
77
|
+
opened = _React$useState2[0],
|
|
78
|
+
setOpened = _React$useState2[1];
|
|
79
|
+
|
|
80
|
+
_react.default.useEffect(function () {
|
|
81
|
+
if (props.multi) {
|
|
82
|
+
setOpened(props.items.filter(function (item) {
|
|
83
|
+
return item.active;
|
|
84
|
+
}).map(function (item) {
|
|
85
|
+
return item.key;
|
|
86
|
+
}));
|
|
87
|
+
} else {
|
|
88
|
+
var _props$items$find;
|
|
89
|
+
|
|
90
|
+
var active = (_props$items$find = props.items.find(function (item) {
|
|
91
|
+
return !!item.active;
|
|
92
|
+
})) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
|
|
93
|
+
|
|
94
|
+
if (active) {
|
|
95
|
+
setOpened([active]);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, [props.items, props.multi]);
|
|
99
|
+
|
|
100
|
+
var onItemClick = function onItemClick(item) {
|
|
101
|
+
if (item.disabled) return;
|
|
102
|
+
|
|
103
|
+
if (opened.includes(item.key)) {
|
|
104
|
+
setOpened(opened.filter(function (key) {
|
|
105
|
+
return key !== item.key;
|
|
106
|
+
}));
|
|
107
|
+
} else {
|
|
108
|
+
if (props.multi) {
|
|
109
|
+
setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.key]));
|
|
110
|
+
} else {
|
|
111
|
+
setOpened([item.key]);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
var renderItem = function renderItem(item) {
|
|
117
|
+
var isActive = opened.includes(item.key);
|
|
118
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
|
|
119
|
+
id: "item_".concat(item.key),
|
|
120
|
+
className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
|
|
121
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, {
|
|
122
|
+
tabIndex: !item.disabled ? 0 : undefined,
|
|
123
|
+
onMouseDown: function onMouseDown(e) {
|
|
124
|
+
return e.preventDefault();
|
|
125
|
+
},
|
|
126
|
+
onClick: function onClick() {
|
|
127
|
+
return !item.disabled && onItemClick(item);
|
|
128
|
+
},
|
|
129
|
+
onKeyPress: function onKeyPress(event) {
|
|
130
|
+
return event.key === 'Enter' && onItemClick(item);
|
|
131
|
+
},
|
|
132
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderIcon, {
|
|
133
|
+
children: props.multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
|
|
134
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderText, {
|
|
135
|
+
children: item.title
|
|
136
|
+
})]
|
|
137
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
|
|
138
|
+
children: [item.header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
|
|
139
|
+
children: item.header
|
|
140
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {
|
|
141
|
+
children: item.body
|
|
142
|
+
}), item.footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentFooter, {
|
|
143
|
+
children: item.footer
|
|
144
|
+
})]
|
|
145
|
+
})]
|
|
146
|
+
}, item.key);
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
|
|
150
|
+
className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium)),
|
|
151
|
+
children: props.items.map(function (item) {
|
|
152
|
+
return renderItem(item);
|
|
153
|
+
})
|
|
154
|
+
});
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
exports.ContentAccordion = ContentAccordion;
|
|
158
|
+
ContentAccordion.propTypes = {
|
|
159
|
+
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
160
|
+
key: _propTypes.default.string.isRequired,
|
|
161
|
+
title: _propTypes.default.string.isRequired,
|
|
162
|
+
header: _propTypes.default.string,
|
|
163
|
+
body: _propTypes.default.any.isRequired,
|
|
164
|
+
footer: _propTypes.default.any,
|
|
165
|
+
disabled: _propTypes.default.bool,
|
|
166
|
+
active: _propTypes.default.bool
|
|
167
|
+
})).isRequired,
|
|
168
|
+
multi: _propTypes.default.bool
|
|
169
|
+
};
|
|
170
|
+
var _default = ContentAccordion;
|
|
171
|
+
exports.default = _default;
|
|
172
|
+
//# sourceMappingURL=ContentAccordion.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "AccordionMenu", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _AccordionMenu.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "AccordionMenuItem", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _AccordionMenu.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "AccordionMenuWrapper", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _styles.AccordionMenuWrapper;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "ContentAccordion", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _ContentAccordion.ContentAccordion;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
|
|
34
|
+
|
|
35
|
+
var _ContentAccordion = require("./ContentAccordion");
|
|
36
|
+
|
|
37
|
+
var _styles = require("./styles");
|
|
38
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.cjs"}
|