@televet/kibble-ui 2.1.2-beta.86796dgae.0 → 2.1.2
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/README.md +0 -15
- package/build/{alert.component-3f698ba2.js → alert.component-52451145.js} +2 -2
- package/build/{alert.component-3f698ba2.js.map → alert.component-52451145.js.map} +1 -1
- package/build/{avatar.component-05bcf698.js → avatar.component-a96cbc6b.js} +2 -2
- package/build/{avatar.component-05bcf698.js.map → avatar.component-a96cbc6b.js.map} +1 -1
- package/build/avatarGroup.component-98140be9.js +2 -0
- package/build/{avatarGroup.component-36ff0d62.js.map → avatarGroup.component-98140be9.js.map} +1 -1
- package/build/{button.component-31667514.js → button.component-957d9e9f.js} +2 -2
- package/build/{button.component-0b765852.js.map → button.component-957d9e9f.js.map} +1 -1
- package/build/card.component-20080f05.js +2 -0
- package/build/{card.component-de5d4b2a.js.map → card.component-20080f05.js.map} +1 -1
- package/build/chakra/index.js +1 -1
- package/build/{chakra-ui-checkbox.esm-4cded6a7.js → chakra-ui-checkbox.esm-499c8b0c.js} +2 -2
- package/build/{chakra-ui-checkbox.esm-4cded6a7.js.map → chakra-ui-checkbox.esm-499c8b0c.js.map} +1 -1
- package/build/{chakra-ui-menu.esm-3741fe08.js → chakra-ui-menu.esm-fe9ef385.js} +2 -2
- package/build/{chakra-ui-menu.esm-3741fe08.js.map → chakra-ui-menu.esm-fe9ef385.js.map} +1 -1
- package/build/{chakra-ui-modal.esm-fa7beddc.js → chakra-ui-modal.esm-5ec83d2f.js} +2 -2
- package/build/{chakra-ui-modal.esm-fa7beddc.js.map → chakra-ui-modal.esm-5ec83d2f.js.map} +1 -1
- package/build/{chakra-ui-popover.esm-1e836c11.js → chakra-ui-popover.esm-172468d8.js} +2 -2
- package/build/{chakra-ui-popover.esm-1e836c11.js.map → chakra-ui-popover.esm-172468d8.js.map} +1 -1
- package/build/{chakra-ui-skeleton.esm-839f0cbd.js → chakra-ui-skeleton.esm-75810d78.js} +2 -2
- package/build/{chakra-ui-skeleton.esm-839f0cbd.js.map → chakra-ui-skeleton.esm-75810d78.js.map} +1 -1
- package/build/{checkbox.component-ed814741.js → checkbox.component-b2d6ac56.js} +2 -2
- package/build/{checkbox.component-da6a6274.js.map → checkbox.component-b2d6ac56.js.map} +1 -1
- package/build/checkboxGroup.component-3fce48e7.js +2 -0
- package/build/{checkboxGroup.component-bac10237.js.map → checkboxGroup.component-3fce48e7.js.map} +1 -1
- package/build/{color.record-28a10e28.js → color.record-c0a60cfc.js} +2 -2
- package/build/{color.record-28a10e28.js.map → color.record-c0a60cfc.js.map} +1 -1
- package/build/color.types-7d5284ee.js +2 -0
- package/build/color.types-7d5284ee.js.map +1 -0
- package/build/components/Alert/index.js +1 -1
- package/build/components/Avatar/index.js +1 -1
- package/build/components/AvatarGroup/index.js +1 -1
- package/build/components/Button/index.js +1 -1
- package/build/components/Card/index.js +1 -1
- package/build/components/Checkbox/index.js +1 -1
- package/build/components/CheckboxGroup/index.js +1 -1
- package/build/components/DatePicker/index.js +1 -1
- package/build/components/Heading/index.js +1 -1
- package/build/components/Link/index.js +1 -1
- package/build/components/Logo/index.js +1 -1
- package/build/components/Menu/components/MenuButton/index.js +1 -1
- package/build/components/Menu/components/MenuContainer/index.js +1 -1
- package/build/components/Menu/components/MenuItem/index.js +1 -1
- package/build/components/Menu/components/MenuList/index.js +1 -1
- package/build/components/Menu/components/MenuOptionGroup/index.js +1 -1
- package/build/components/Menu/index.js +1 -1
- package/build/components/Modal/components/ModalBody/index.js +1 -1
- package/build/components/Modal/components/ModalCloseButton/index.js +1 -1
- package/build/components/Modal/components/ModalFooter/index.js +1 -1
- package/build/components/Modal/components/ModalFooterButtons/index.js +1 -1
- package/build/components/Modal/components/ModalHeader/index.js +1 -1
- package/build/components/Modal/index.js +1 -1
- package/build/components/NotificationCounter/index.js +1 -1
- package/build/components/Picture/index.js +1 -1
- package/build/components/Popover/components/PopoverFooter/index.js +1 -1
- package/build/components/Popover/components/PopoverHeader/index.js +1 -1
- package/build/components/Popover/index.js +1 -1
- package/build/components/Radio/index.js +1 -1
- package/build/components/RadioGroup/index.js +1 -1
- package/build/components/RatingDots/index.js +1 -1
- package/build/components/Select/index.js +1 -1
- package/build/components/SortableList/components/DragHandle/index.js +1 -1
- package/build/components/SortableList/index.js +1 -1
- package/build/components/Switch/index.js +1 -1
- package/build/components/Tabs/components/Tab/index.js +1 -1
- package/build/components/Tabs/index.js +1 -1
- package/build/components/TabsLayout/index.js +1 -1
- package/build/components/Tag/index.js +1 -1
- package/build/components/Text/index.js +1 -1
- package/build/components/TextInput/index.js +1 -1
- package/build/components/Textarea/index.js +1 -1
- package/build/components/TimePicker/index.js +1 -1
- package/build/components/TimeRange/index.js +1 -1
- package/build/components/Toast/index.js +1 -1
- package/build/components/Tooltip/index.js +1 -1
- package/build/components/index.js +1 -1
- package/build/{datepicker.types-a1e32bc8.js → datepicker.types-b402bb49.js} +2 -2
- package/build/{datepicker.types-a1e32bc8.js.map → datepicker.types-b402bb49.js.map} +1 -1
- package/build/{dragHandle.component-3e23aa5f.js → dragHandle.component-faffecf9.js} +2 -2
- package/build/{dragHandle.component-3e23aa5f.js.map → dragHandle.component-faffecf9.js.map} +1 -1
- package/build/{heading.component-e55f8364.js → heading.component-198f40a3.js} +2 -2
- package/build/{heading.component-e55f8364.js.map → heading.component-198f40a3.js.map} +1 -1
- package/build/{index-5a9be08d.js → index-6cdfadbe.js} +2 -2
- package/build/{index-5a9be08d.js.map → index-6cdfadbe.js.map} +1 -1
- package/build/{index-45f186fc.js → index-8fecff45.js} +1 -1
- package/build/{index-45f186fc.js.map → index-8fecff45.js.map} +1 -1
- package/build/index.js +1 -1
- package/build/{link.component-34c0870b.js → link.component-a5027ab7.js} +2 -2
- package/build/{link.component-0dc033e6.js.map → link.component-a5027ab7.js.map} +1 -1
- package/build/{logo.component-cea68030.js → logo.component-3ae8d1c6.js} +2 -2
- package/build/{logo.component-cea68030.js.map → logo.component-3ae8d1c6.js.map} +1 -1
- package/build/{menu.component-134f404d.js → menu.component-cd99977c.js} +2 -2
- package/build/{menu.component-134f404d.js.map → menu.component-cd99977c.js.map} +1 -1
- package/build/{menuButton.component-6aaeda05.js → menuButton.component-3280a201.js} +2 -2
- package/build/{menuButton.component-6aaeda05.js.map → menuButton.component-3280a201.js.map} +1 -1
- package/build/{menuContainer.component-e6d43e42.js → menuContainer.component-adb9204a.js} +2 -2
- package/build/{menuContainer.component-e6d43e42.js.map → menuContainer.component-adb9204a.js.map} +1 -1
- package/build/{menuItem.component-cbb96509.js → menuItem.component-f9f142c2.js} +2 -2
- package/build/{menuItem.component-cbb96509.js.map → menuItem.component-f9f142c2.js.map} +1 -1
- package/build/{menuList.component-a4b6a355.js → menuList.component-fa80fe83.js} +2 -2
- package/build/{menuList.component-94bc629a.js.map → menuList.component-fa80fe83.js.map} +1 -1
- package/build/{menuOptionGroup.component-e1c2df00.js → menuOptionGroup.component-bfcf4e53.js} +2 -2
- package/build/{menuOptionGroup.component-e1c2df00.js.map → menuOptionGroup.component-bfcf4e53.js.map} +1 -1
- package/build/modal.component-6990e35a.js +2 -0
- package/build/{modal.component-14279c46.js.map → modal.component-6990e35a.js.map} +1 -1
- package/build/modalBody.component-771775b3.js +2 -0
- package/build/{modalBody.component-b08c6819.js.map → modalBody.component-771775b3.js.map} +1 -1
- package/build/modalCloseButton.component-6e546d5a.js +2 -0
- package/build/{modalCloseButton.component-1e3c8bf1.js.map → modalCloseButton.component-6e546d5a.js.map} +1 -1
- package/build/modalFooter.component-a8dca3ea.js +2 -0
- package/build/{modalFooter.component-6173abd3.js.map → modalFooter.component-a8dca3ea.js.map} +1 -1
- package/build/{modalFooterButtons.component-5bf34aa6.js → modalFooterButtons.component-7f6ad8c5.js} +2 -2
- package/build/{modalFooterButtons.component-5bf34aa6.js.map → modalFooterButtons.component-7f6ad8c5.js.map} +1 -1
- package/build/modalHeader.component-d1fd5719.js +2 -0
- package/build/{modalHeader.component-90d0ac34.js.map → modalHeader.component-d1fd5719.js.map} +1 -1
- package/build/{motion-7de675ca.js → motion-b6060749.js} +2 -2
- package/build/{motion-7de675ca.js.map → motion-b6060749.js.map} +1 -1
- package/build/{notificationCounter.component-043f3ed6.js → notificationCounter.component-6581a359.js} +2 -2
- package/build/{notificationCounter.component-043f3ed6.js.map → notificationCounter.component-6581a359.js.map} +1 -1
- package/build/{picture.component-19489bee.js → picture.component-b0edf814.js} +2 -2
- package/build/{picture.component-19489bee.js.map → picture.component-b0edf814.js.map} +1 -1
- package/build/{popover.component-e2c8d816.js → popover.component-c06d692e.js} +2 -2
- package/build/{popover.component-e2c8d816.js.map → popover.component-c06d692e.js.map} +1 -1
- package/build/{popoverFooter.component-361655aa.js → popoverFooter.component-3280b596.js} +2 -2
- package/build/{popoverFooter.component-361655aa.js.map → popoverFooter.component-3280b596.js.map} +1 -1
- package/build/{popoverHeader.component-f08671c4.js → popoverHeader.component-63b549bf.js} +2 -2
- package/build/{popoverHeader.component-be710516.js.map → popoverHeader.component-63b549bf.js.map} +1 -1
- package/build/radio.component-de7ecece.js +2 -0
- package/build/{radio.component-1ebba5e1.js.map → radio.component-de7ecece.js.map} +1 -1
- package/build/radioGroup.component-5719cd37.js +2 -0
- package/build/{radioGroup.component-6a3d9466.js.map → radioGroup.component-5719cd37.js.map} +1 -1
- package/build/{ratingDots.component-eccf4bf3.js → ratingDots.component-2bc23086.js} +2 -2
- package/build/{ratingDots.component-eccf4bf3.js.map → ratingDots.component-2bc23086.js.map} +1 -1
- package/build/{select.component-d5ffca34.js → select.component-e14f46f5.js} +2 -2
- package/build/{select.component-d5ffca34.js.map → select.component-e14f46f5.js.map} +1 -1
- package/build/{switch.component-afb4b60c.js → switch.component-1065f097.js} +2 -2
- package/build/{switch.component-5eae26fb.js.map → switch.component-1065f097.js.map} +1 -1
- package/build/tab.component-df791b96.js +2 -0
- package/build/{tab.component-041a9f31.js.map → tab.component-df791b96.js.map} +1 -1
- package/build/tabs.component-cfe10d1e.js +2 -0
- package/build/{tabs.component-49941f67.js.map → tabs.component-cfe10d1e.js.map} +1 -1
- package/build/{tabsLayout.component-462ef244.js → tabsLayout.component-4055835c.js} +2 -2
- package/build/{tabsLayout.component-462ef244.js.map → tabsLayout.component-4055835c.js.map} +1 -1
- package/build/{tag.types-f979ec63.js → tag.types-892f3c99.js} +2 -2
- package/build/{tag.types-f979ec63.js.map → tag.types-892f3c99.js.map} +1 -1
- package/build/{text.component-057889c3.js → text.component-30355fe6.js} +2 -2
- package/build/{text.component-057889c3.js.map → text.component-30355fe6.js.map} +1 -1
- package/build/{textInput.component-103a9118.js → textInput.component-d63fb051.js} +2 -2
- package/build/{textInput.component-103a9118.js.map → textInput.component-d63fb051.js.map} +1 -1
- package/build/{textarea.component-1b3a0add.js → textarea.component-eda7f5d3.js} +2 -2
- package/build/{textarea.component-1b3a0add.js.map → textarea.component-eda7f5d3.js.map} +1 -1
- package/build/theme/index.js +1 -1
- package/build/theme/tokens/colors/color.types.d.ts +1 -1
- package/build/theme/tokens/colors/index.js +1 -1
- package/build/theme/tokens/index.js +1 -1
- package/build/{theme.provider-c08fee62.js → theme.provider-0d9a5ebb.js} +2 -2
- package/build/{theme.provider-c08fee62.js.map → theme.provider-0d9a5ebb.js.map} +1 -1
- package/build/{timePicker.component-f4d27357.js → timePicker.component-0385a923.js} +2 -2
- package/build/{timePicker.component-5f523119.js.map → timePicker.component-0385a923.js.map} +1 -1
- package/build/{timeRange.component-5504d3e9.js → timeRange.component-41f34bea.js} +2 -2
- package/build/{timeRange.component-5504d3e9.js.map → timeRange.component-41f34bea.js.map} +1 -1
- package/build/{tooltip.component-197bff7c.js → tooltip.component-76a21c48.js} +2 -2
- package/build/{tooltip.component-197bff7c.js.map → tooltip.component-76a21c48.js.map} +1 -1
- package/build/tslib.es6-194b75fc.js +16 -0
- package/build/tslib.es6-194b75fc.js.map +1 -0
- package/build/{useToast-a3b98fd6.js → useToast-aa0129c4.js} +2 -2
- package/build/{useToast-41fc54ac.js.map → useToast-aa0129c4.js.map} +1 -1
- package/build/{withFormControl-238d7eec.js → withFormControl-1971ad8f.js} +2 -2
- package/build/{withFormControl-238d7eec.js.map → withFormControl-1971ad8f.js.map} +1 -1
- package/build/{withTruncation-60a6b552.js → withTruncation-a7b4edf1.js} +2 -2
- package/build/{withTruncation-60a6b552.js.map → withTruncation-a7b4edf1.js.map} +1 -1
- package/package.json +1 -4
- package/build/alert.component-864beab4.js +0 -2
- package/build/alert.component-864beab4.js.map +0 -1
- package/build/avatar.component-433a4ec2.js +0 -2
- package/build/avatar.component-433a4ec2.js.map +0 -1
- package/build/avatarGroup.component-36ff0d62.js +0 -2
- package/build/avatarGroup.component-5c3fe7c2.js +0 -2
- package/build/avatarGroup.component-5c3fe7c2.js.map +0 -1
- package/build/button.component-0b765852.js +0 -2
- package/build/button.component-31667514.js.map +0 -1
- package/build/card.component-de5d4b2a.js +0 -2
- package/build/checkbox.component-da6a6274.js +0 -2
- package/build/checkbox.component-ed814741.js.map +0 -1
- package/build/checkboxGroup.component-bac10237.js +0 -2
- package/build/checkboxGroup.component-ec1440c6.js +0 -2
- package/build/checkboxGroup.component-ec1440c6.js.map +0 -1
- package/build/color.types-811fe442.js +0 -2
- package/build/color.types-811fe442.js.map +0 -1
- package/build/datepicker.types-d6ace025.js +0 -16
- package/build/datepicker.types-d6ace025.js.map +0 -1
- package/build/dragHandle.component-798e948c.js +0 -2
- package/build/dragHandle.component-798e948c.js.map +0 -1
- package/build/icon.component-d618e1f5.js +0 -2
- package/build/icon.component-d618e1f5.js.map +0 -1
- package/build/link.component-0dc033e6.js +0 -2
- package/build/link.component-34c0870b.js.map +0 -1
- package/build/menu.component-2eb7d477.js +0 -2
- package/build/menu.component-2eb7d477.js.map +0 -1
- package/build/menuButton.component-7445f9e4.js +0 -2
- package/build/menuButton.component-7445f9e4.js.map +0 -1
- package/build/menuItem.component-dac86ae6.js +0 -2
- package/build/menuItem.component-dac86ae6.js.map +0 -1
- package/build/menuList.component-94bc629a.js +0 -2
- package/build/menuList.component-a4b6a355.js.map +0 -1
- package/build/modal.component-14279c46.js +0 -2
- package/build/modalBody.component-b08c6819.js +0 -2
- package/build/modalCloseButton.component-1e3c8bf1.js +0 -2
- package/build/modalCloseButton.component-e94eccd3.js +0 -2
- package/build/modalCloseButton.component-e94eccd3.js.map +0 -1
- package/build/modalFooter.component-6173abd3.js +0 -2
- package/build/modalFooterButtons.component-898f34d4.js +0 -2
- package/build/modalFooterButtons.component-898f34d4.js.map +0 -1
- package/build/modalHeader.component-90d0ac34.js +0 -2
- package/build/playwright/resources/checkForNewSnapshots.d.ts +0 -1
- package/build/playwright/resources/checkForSnapshots.d.ts +0 -3
- package/build/playwright/resources/fetchSnapshots.d.ts +0 -1
- package/build/playwright/resources/pushNewSnapshots.d.ts +0 -3
- package/build/playwright/resources/pushSnapshots.d.ts +0 -1
- package/build/playwright/resources/runPlaywrightTests.d.ts +0 -1
- package/build/playwright/resources/utils.d.ts +0 -3
- package/build/playwright/tests/getStories.spec.d.ts +0 -1
- package/build/playwright/tests/snapshotTests.spec.d.ts +0 -1
- package/build/popover.component-fed9ff4e.js +0 -2
- package/build/popover.component-fed9ff4e.js.map +0 -1
- package/build/popoverFooter.component-d747dcfb.js +0 -2
- package/build/popoverFooter.component-d747dcfb.js.map +0 -1
- package/build/popoverHeader.component-be710516.js +0 -2
- package/build/popoverHeader.component-f08671c4.js.map +0 -1
- package/build/radio.component-1ebba5e1.js +0 -2
- package/build/radioGroup.component-6a3d9466.js +0 -2
- package/build/radioGroup.component-f797e33f.js +0 -2
- package/build/radioGroup.component-f797e33f.js.map +0 -1
- package/build/select.component-d3b85455.js +0 -2
- package/build/select.component-d3b85455.js.map +0 -1
- package/build/switch.component-5eae26fb.js +0 -2
- package/build/switch.component-afb4b60c.js.map +0 -1
- package/build/tab.component-041a9f31.js +0 -2
- package/build/tab.component-0abd2704.js +0 -2
- package/build/tab.component-0abd2704.js.map +0 -1
- package/build/tabs.component-49941f67.js +0 -2
- package/build/tabs.component-a39930c7.js +0 -2
- package/build/tabs.component-a39930c7.js.map +0 -1
- package/build/tabsLayout.component-a4fd4798.js +0 -2
- package/build/tabsLayout.component-a4fd4798.js.map +0 -1
- package/build/textInput.component-a8c1fd60.js +0 -2
- package/build/textInput.component-a8c1fd60.js.map +0 -1
- package/build/textarea.component-ebc0b2cc.js +0 -2
- package/build/textarea.component-ebc0b2cc.js.map +0 -1
- package/build/timePicker.component-5f523119.js +0 -2
- package/build/timePicker.component-f4d27357.js.map +0 -1
- package/build/timeRange.component-adc69da7.js +0 -2
- package/build/timeRange.component-adc69da7.js.map +0 -1
- package/build/tslib.es6-d6f17add.js +0 -2
- package/build/tslib.es6-d6f17add.js.map +0 -1
- package/build/useToast-41fc54ac.js +0 -2
- package/build/useToast-a3b98fd6.js.map +0 -1
- package/build/withFormControl-23bf744e.js +0 -2
- package/build/withFormControl-23bf744e.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuItem.component-
|
|
1
|
+
{"version":3,"file":"menuItem.component-f9f142c2.js","sources":["../src/components/Menu/components/MenuItem/menuItem.component.tsx"],"sourcesContent":["import React, {\n ReactNode,\n MutableRefObject,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n useMemo,\n ReactElement,\n} from 'react';\nimport { Box, Flex, HStack, useMenuState } from '@chakra-ui/react';\nimport { MenuItemConfig } from '../../menu.config';\nimport { Text } from '../../../Text/text.component';\nimport { Checkbox } from 'components/Checkbox';\nimport { TypographyVariant } from 'shared/types';\n\nexport interface MenuItemProps {\n canSelectAll?: boolean;\n children?: ReactNode;\n closeOnSelect?: boolean;\n groupLabel?: string;\n handleKeyboardNavigation?: (e: KeyboardEvent<HTMLDivElement>, elementIsInputField: boolean) => void;\n isDisabled?: boolean;\n isMultiSelect?: boolean;\n isSelected?: boolean;\n itemIndex?: string;\n label?: string | ReactElement;\n leftElement?: ReactNode;\n menuItemRefs?: MutableRefObject<HTMLDivElement[] | null[]>;\n onSelect?: (selectedItem: MenuItemProps) => void;\n shouldRetainSelection?: boolean;\n shouldTruncateText?: boolean;\n value?: string;\n isPlaceholder?: boolean;\n variant?: TypographyVariant;\n}\n\nexport const MenuItem = ({\n canSelectAll,\n children,\n groupLabel,\n handleKeyboardNavigation = (): void => {},\n isDisabled,\n isMultiSelect,\n isPlaceholder,\n closeOnSelect = !isMultiSelect,\n isSelected,\n itemIndex = '0',\n label,\n leftElement,\n menuItemRefs,\n onSelect,\n shouldRetainSelection = false,\n shouldTruncateText,\n value,\n variant,\n ...rest\n}: MenuItemProps): JSX.Element => {\n const { onClose } = useMenuState();\n\n const handleSelect = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n\n if (isDisabled) return;\n\n if (value && onSelect) {\n onSelect({\n label,\n leftElement,\n value,\n });\n }\n\n if (closeOnSelect) {\n onClose();\n }\n },\n [value, onSelect, onClose, closeOnSelect, isDisabled, label, leftElement],\n );\n\n const fontColor = useMemo(() => {\n if (variant) {\n return variant;\n }\n return isSelected && shouldRetainSelection ? 'interactive' : 'default';\n }, [isSelected, shouldRetainSelection, variant]);\n\n return (\n <Box\n {...MenuItemConfig}\n bg={isSelected && shouldRetainSelection && !isMultiSelect ? 'background.primaryAlpha.hover' : ''}\n className=\"MenuList__Item\"\n onClick={handleSelect}\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>): void => handleKeyboardNavigation(e, false)}\n tabIndex={parseInt(canSelectAll ? (itemIndex += 2) : itemIndex)}\n ref={(el): HTMLDivElement | null =>\n menuItemRefs && itemIndex ? (menuItemRefs.current[parseInt(itemIndex)] = el) : null\n }\n // @ts-ignore\n disabled={isDisabled}\n {...rest}\n >\n {children ? (\n <Box onClick={handleSelect}>{children}</Box>\n ) : (\n <HStack className=\"MenuList__ItemContainer\" justify=\"baseline\" spacing={3} minH={5} color={`text.${fontColor}`}>\n {isMultiSelect && (\n <Flex w={4} h={4} className=\"MenuList__ItemCheckbox\">\n <Checkbox size=\"md\" isChecked={isSelected} />\n </Flex>\n )}\n {leftElement && (\n <Flex align=\"center\" justify=\"center\" className=\"MenuList__ItemLeftElement\">\n {leftElement}\n </Flex>\n )}\n {typeof label === 'string' ? (\n <Text size=\"sm\" className=\"MenuList__ItemLabel\" variant={fontColor} isTruncated={shouldTruncateText}>\n {label}\n </Text>\n ) : (\n <Box className=\"MenuList__ItemLabel\" position=\"relative\" w=\"100%\">\n {label}\n </Box>\n )}\n </HStack>\n )}\n </Box>\n );\n};\n"],"names":["_a","canSelectAll","children","groupLabel","handleKeyboardNavigation","isDisabled","isMultiSelect","isPlaceholder","closeOnSelect","isSelected","itemIndex","label","leftElement","menuItemRefs","onSelect","shouldRetainSelection","shouldTruncateText","value","variant","rest","__rest","onClose","useMenuState","handleSelect","useCallback","e","stopPropagation","fontColor","useMemo","React","Box","Object","assign","MenuItemConfig","bg","className","onClick","onKeyDown","tabIndex","parseInt","ref","el","current","disabled","createElement","HStack","justify","spacing","minH","color","Flex","w","h","Checkbox","size","isChecked","align","Text","WrappedText","isTruncated","position"],"mappings":"0YAoCyBA,QAAAC,aACvBA,EAAYC,SACZA,EAAQC,WACRA,EAAUC,yBACVA,EAA2B,SAAcC,WACzCA,EAAUC,cACVA,EAAaC,cACbA,EAAaC,cACbA,GAAiBF,EAAaG,WAC9BA,EAAUC,UACVA,EAAY,IAAGC,MACfA,EAAKC,YACLA,EAAWC,aACXA,EAAYC,SACZA,EAAQC,sBACRA,GAAwB,EAAKC,mBAC7BA,EAAkBC,MAClBA,EAAKC,QACLA,KACGC,EAnBoBC,SAAApB,EAAA,CAAA,eAAA,WAAA,aAAA,2BAAA,aAAA,gBAAA,gBAAA,gBAAA,aAAA,YAAA,QAAA,cAAA,eAAA,WAAA,wBAAA,qBAAA,QAAA,YAqBvB,MAAMqB,QAAEA,GAAYC,EAAAA,eAEdC,EAAeC,eAClBC,IACCA,EAAEC,kBAEErB,IAEAY,GAASH,GACXA,EAAS,CACPH,MAAAA,EACAC,YAAAA,EACAK,MAAAA,IAIAT,GACFa,OAGJ,CAACJ,EAAOH,EAAUO,EAASb,EAAeH,EAAYM,EAAOC,IAGzDe,EAAYC,EAAAA,SAAQ,IACpBV,IAGGT,GAAcM,EAAwB,cAAgB,YAC5D,CAACN,EAAYM,EAAuBG,IAEvC,OACEW,wBAACC,MAAGC,OAAAC,OAAA,GACEC,iBACJ,CAAAC,GAAIzB,GAAcM,IAA0BT,EAAgB,gCAAkC,GAC9F6B,UAAU,iBACVC,QAASb,EACTc,UAAYZ,GAA2CrB,EAAyBqB,GAAG,GACnFa,SAAUC,SAAStC,EAAgBS,GAAa,EAAKA,GACrD8B,IAAMC,GACJ5B,GAAgBH,EAAaG,EAAa6B,QAAQH,SAAS7B,IAAc+B,EAAM,KAGjFE,SAAUtC,GACNc,GAEHjB,EACC2B,EAAAA,sBAACC,EAAGA,IAAA,CAACM,QAASb,GAAerB,GAE7B2B,EAAAA,QAACe,cAAAC,EAAMA,QAACV,UAAU,0BAA0BW,QAAQ,WAAWC,QAAS,EAAGC,KAAM,EAAGC,MAAO,QAAQtB,KAChGrB,GACCuB,EAAC,QAAAe,cAAAM,EAAAA,MAAKC,EAAG,EAAGC,EAAG,EAAGjB,UAAU,0BAC1BN,UAACe,cAAAS,EAAAA,gBAAS,CAAAC,KAAK,KAAKC,UAAW9C,KAGlCG,GACCiB,EAAAA,QAAAe,cAACM,EAAIA,KAAC,CAAAM,MAAM,SAASV,QAAQ,SAASX,UAAU,6BAC7CvB,GAGa,iBAAVD,EACNkB,EAAA,QAAAe,cAACa,EAAIC,YAAA,CAACJ,KAAK,KAAKnB,UAAU,sBAAsBjB,QAASS,EAAWgC,YAAa3C,GAC9EL,GAGHkB,EAAA,QAAAe,cAACd,EAAGA,IAAA,CAACK,UAAU,sBAAsByB,SAAS,WAAWT,EAAE,QACxDxC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-
|
|
2
|
-
//# sourceMappingURL=menuList.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),t=require("react"),l=require("./heading.component-198f40a3.js"),a=require("./text.component-30355fe6.js"),n=require("./menuItem.component-f9f142c2.js"),r=require("./textInput.component-d63fb051.js"),u=require("./chakra-ui-menu.esm-fe9ef385.js"),s=require("./button.component-957d9e9f.js"),o=require("./chakra-ui-layout.esm-6ee578f7.js"),c=require("./menu.context-22d23674.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(t);const m=({handleKeyboardNavigation:e,menuItems:l,onSearchCallback:a,searchInputRef:n,setFilteredMenuItems:s,placeholder:o="Search..."})=>{const{isOpen:c}=u.useMenuState(),i=t.useCallback((e=>{const t=e.target.value;if(""!==t&&t){const e=l.filter((e=>{var l;const a="string"==typeof e.label?e.label:null===(l=e.label)||void 0===l?void 0:l.key;return null==a?void 0:a.toLowerCase().includes(t.toLowerCase())}));s(e)}else s(l);a&&a(e)}),[l,a,s]);return t.useEffect((()=>{let e;return c&&(e=setTimeout((()=>{var e;null===(e=null==n?void 0:n.current)||void 0===e||e.focus()}),200)),()=>clearTimeout(e)}),[n,c]),d.default.createElement(r.WrappedTextInput,{className:"MenuList__SearchBar",placeholder:o,onChange:i,mt:1,onKeyDown:t=>e(t,!0),size:"sm",ref:n})},f=({groupName:e,handleToggleAllItems:t,hasSelectedItems:l,isGrouped:a})=>a?d.default.createElement(o.Box,{textAlign:"right",w:"50%",className:"MenuListItem__SelectAllButton"},l?d.default.createElement(s.Button,{variant:"ghostNeutral",iconName:"arrowCircle",size:"xs",onClick:()=>t({groupName:e,clear:!0}),isDisabled:!l},"Clear all"):d.default.createElement(s.Button,{variant:"ghost",size:"xs",onClick:()=>t({groupName:e,clear:!1})},"Select all")):d.default.createElement(o.Box,{mt:"8px",className:"MenuList__SelectAllButtons"},d.default.createElement(o.Flex,{justifyContent:"space-between"},d.default.createElement(s.Button,{variant:"ghost",size:"xs",onClick:()=>t({clear:!1})},"Select all"),d.default.createElement(s.Button,{variant:"ghostNeutral",iconName:"arrowCircle",size:"xs",onClick:()=>t({clear:!0}),isDisabled:!l},"Clear all")));exports.MenuList=r=>{var{canSelectAll:s=!1,canSelectGroups:i=!1,children:p,isGrouped:h=!1,isMatchWidthSet:v,isMultiSelect:S=!1,isSearchable:g=!1,menuItems:x,onSelect:b,onSelectAll:I,searchPlaceholder:E,shouldRetainSelection:M=!1,shouldTruncateText:k=!0,minW:N="240px",maxW:C,maxH:w="480px"}=r,y=e.__rest(r,["canSelectAll","canSelectGroups","children","isGrouped","isMatchWidthSet","isMultiSelect","isSearchable","menuItems","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH"]);const{filteredMenuItems:A,setFilteredMenuItems:B,allMenuItems:L,groups:_,setGroups:j,focusedItemIndex:T,setFocusedItemIndex:G,searchInputRef:W,menuItemRefs:q}=c.useMenuContext(),R=t.useCallback((e=>{var t,l;if(!(null==q?void 0:q.current))return;const a=0===T,n=T===(null==q?void 0:q.current.length)-1;let r=-1;if("ArrowDown"===e)if(n){if(g)return null===(t=null==W?void 0:W.current)||void 0===t||t.focus(),void G(-1);r=0}else r=T+1;else if("ArrowUp"===e)if(a){if(g)return null===(l=null==W?void 0:W.current)||void 0===l||l.focus(),void G(-1);r=q.current.length-1}else r=T-1;const u=null==q?void 0:q.current[r];u?(null==u||u.focus(),G(r)):G(-1)}),[T,g,q,W,G]),z=t.useCallback(((e,t)=>{e.persist(),(null==q?void 0:q.current)&&("ArrowDown"!==e.key&&"Tab"!==e.key||R("ArrowDown"),"ArrowUp"===e.key&&R("ArrowUp"),"Enter"===e.key&&(e.preventDefault(),e.target.click()))}),[R,q]),D=t.useCallback(((e,t)=>{if(A&&L){const l=[...A],a=l.find((t=>t.value===e.value));S&&a&&(a.isSelected=!a.isSelected),B(l);const n=L.filter((e=>e.isSelected));b&&a&&b(a,n),t&&a&&t(a,n)}}),[L,A,S,b,B]),F=t.useCallback((({groupName:e,clear:t=!1})=>{if(A&&L){const l=[...A],a=[];l.forEach((l=>{e?e===l.groupLabel&&(l.isSelected=!t,l.value&&l.isSelected&&a.push(l.value)):(l.isSelected=!t,l.value&&l.isSelected&&a.push(l.value))})),B(l),I&&I(L.filter((e=>e.isSelected)))}}),[A,L,I,B]);t.useEffect((()=>{if(h){const e=[...new Set(null==A?void 0:A.map((e=>e.groupLabel)))];e.length&&j(e)}}),[A,h,j]);const H=t.useCallback(((e,t)=>e.isPlaceholder?d.default.createElement(d.default.Fragment,{key:e.value}):d.default.createElement(n.MenuItem,Object.assign({},e,{key:e.value,canSelectAll:s,handleKeyboardNavigation:z,isMultiSelect:S,itemIndex:t.toString(),menuItemRefs:q,onSelect:t=>D(t,e.onSelect),shouldRetainSelection:M,shouldTruncateText:k}))),[z,D,S,q,M,k,s]);return v||(C="320px"),p?d.default.createElement(u.MenuList,Object.assign({},y),p):d.default.createElement(u.MenuList,Object.assign({className:"MeuList"},y,{maxW:C||"unset",maxH:w,minW:N,overflow:"hidden auto"}),(g||s&&S)&&d.default.createElement(o.Box,{className:"MenuList__Header",m:"0 12px 8px"},g&&d.default.createElement(m,{handleKeyboardNavigation:z,menuItems:x||[],searchInputRef:W,setFilteredMenuItems:B,placeholder:E}),s&&S&&d.default.createElement(f,{handleToggleAllItems:F,hasSelectedItems:Boolean(null==A?void 0:A.find((e=>e.isSelected))),isGrouped:!1})),d.default.createElement(o.Box,{className:"MenuList__Body"},(null==A?void 0:A.length)?h?null==_?void 0:_.map(((e,t)=>{const a=null==A?void 0:A.filter((t=>t.groupLabel===e));return d.default.createElement(o.Box,{className:"MenuList__Group",key:`${e||"noGroup"}-${t}`},e&&d.default.createElement(o.Flex,{minH:8,pt:4,pr:3,pb:1,pl:5,justify:"space-between",align:"center"},d.default.createElement(o.Box,{textAlign:"left",className:"MenuList__GroupTitle"},d.default.createElement(l.WrappedHeading,{size:"xs"},e)),S&&i&&d.default.createElement(f,{handleToggleAllItems:F,hasSelectedItems:Boolean(null==a?void 0:a.find((e=>e.isSelected))),isGrouped:!0,groupName:e})),null==a?void 0:a.map(((e,t)=>H(e,t))))})):null==A?void 0:A.map(((e,t)=>H(e,t))):d.default.createElement(o.Box,{textAlign:"center",display:"block",p:3},d.default.createElement(a.WrappedText,{size:"sm",variant:"subtle"},"No results found"))))};
|
|
2
|
+
//# sourceMappingURL=menuList.component-fa80fe83.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuList.component-94bc629a.js","sources":["../src/components/Menu/components/MenuSearchBar/menuSearchBar.component.tsx","../src/components/Menu/components/MenuSelectAllButtons/menuSelectAllButtons.component.tsx","../src/components/Menu/components/MenuList/menuList.component.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n Dispatch,\n SetStateAction,\n useCallback,\n KeyboardEvent,\n MutableRefObject,\n useEffect,\n} from 'react';\nimport { TextInput } from '../../../TextInput/textInput.component';\nimport { MenuItemProps } from '../MenuItem/menuItem.component';\nimport { useMenuState } from '@chakra-ui/react';\n\nexport interface MenuSearchBarProps {\n handleKeyboardNavigation: (e: KeyboardEvent<HTMLInputElement>, elementIsInputField: boolean) => void;\n menuItems: MenuItemProps[];\n onSearchCallback?: (e: ChangeEventHandler) => void;\n searchInputRef?: MutableRefObject<HTMLInputElement | null>;\n setFilteredMenuItems: Dispatch<SetStateAction<MenuItemProps[]>>;\n placeholder?: string;\n}\n\nexport const MenuSearchBar = ({\n handleKeyboardNavigation,\n menuItems,\n onSearchCallback,\n searchInputRef,\n setFilteredMenuItems,\n placeholder = 'Search...',\n}: MenuSearchBarProps): JSX.Element => {\n const { isOpen } = useMenuState();\n\n const handleSearch = useCallback(\n (e) => {\n const searchInput = e.target.value;\n\n if (searchInput === '' || !searchInput) {\n setFilteredMenuItems(menuItems);\n } else {\n const filterdItems = menuItems.filter((item) => {\n const labelText = typeof item.label === 'string' ? item.label : (item.label?.key as string);\n\n return labelText?.toLowerCase().includes(searchInput.toLowerCase());\n });\n setFilteredMenuItems(filterdItems);\n }\n\n if (onSearchCallback) {\n onSearchCallback(e);\n }\n },\n [menuItems, onSearchCallback, setFilteredMenuItems],\n );\n\n useEffect(() => {\n let focusTimeout: NodeJS.Timeout;\n\n if (isOpen) {\n focusTimeout = setTimeout(() => {\n searchInputRef?.current?.focus();\n }, 200);\n }\n\n return (): void => clearTimeout(focusTimeout);\n }, [searchInputRef, isOpen]);\n\n return (\n <TextInput\n className=\"MenuList__SearchBar\"\n placeholder={placeholder}\n onChange={handleSearch}\n mt={1}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => handleKeyboardNavigation(e, true)}\n size=\"sm\"\n ref={searchInputRef}\n />\n );\n};\n","import React from 'react';\nimport { Box, Flex } from '@chakra-ui/react';\nimport { Button } from '../../../Button/button.component';\n\nexport interface MenuSelectAllButtonsProps {\n groupName?: string;\n handleToggleAllItems: ({ groupName, clear }: { groupName?: string; clear?: boolean }) => void;\n hasSelectedItems: boolean;\n isGrouped: boolean;\n}\n\nexport const MenuSelectAllButtons = ({\n groupName,\n handleToggleAllItems,\n hasSelectedItems,\n isGrouped,\n}: MenuSelectAllButtonsProps): JSX.Element => {\n if (isGrouped) {\n return (\n <Box textAlign=\"right\" w=\"50%\" className=\"MenuListItem__SelectAllButton\">\n {hasSelectedItems ? (\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ groupName, clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n ) : (\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ groupName, clear: false })}>\n Select all\n </Button>\n )}\n </Box>\n );\n }\n\n return (\n <Box mt=\"8px\" className=\"MenuList__SelectAllButtons\">\n <Flex justifyContent=\"space-between\">\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ clear: false })}>\n Select all\n </Button>\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n </Flex>\n </Box>\n );\n};\n","import React, { useCallback, KeyboardEvent, useEffect } from 'react';\nimport { MenuList as CMenuList, MenuListProps as CMenuListProps, Box, Flex } from '@chakra-ui/react';\nimport { Heading } from '../../../Heading/heading.component';\nimport { Text } from '../../../Text/text.component';\nimport { MenuItem, MenuItemProps } from '../MenuItem/menuItem.component';\nimport { MenuSearchBar } from '../MenuSearchBar/menuSearchBar.component';\nimport { MenuSelectAllButtons } from '../MenuSelectAllButtons/menuSelectAllButtons.component';\nimport { useMenuContext } from '../../context/menu.context';\nimport { SelectOptionProps } from '../../../Select/select.types';\n\nexport interface MenuListProps extends Omit<CMenuListProps, 'onSelect'> {\n canSelectAll?: boolean;\n canSelectGroups?: boolean;\n isGrouped?: boolean;\n isMultiSelect?: boolean;\n isSearchable?: boolean;\n menuItems?: MenuItemProps[];\n onSelect?:\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => void)\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => Promise<void>);\n onSelectAll?: ((selectedItems: MenuItemProps[]) => void) | ((selectedItems: MenuItemProps[]) => Promise<void>);\n searchPlaceholder?: string;\n shouldRetainSelection?: boolean;\n isMatchWidthSet?: boolean;\n shouldTruncateText?: boolean;\n}\n\nexport const MenuList = ({\n canSelectAll = false,\n canSelectGroups = false,\n children,\n isGrouped = false,\n isMatchWidthSet,\n isMultiSelect = false,\n isSearchable = false,\n menuItems,\n onSelect,\n onSelectAll,\n searchPlaceholder,\n shouldRetainSelection = false,\n shouldTruncateText = true,\n minW = '240px',\n maxW,\n maxH = '480px',\n ...rest\n}: MenuListProps): JSX.Element => {\n const {\n filteredMenuItems,\n setFilteredMenuItems,\n allMenuItems,\n groups,\n setGroups,\n focusedItemIndex,\n setFocusedItemIndex,\n searchInputRef,\n menuItemRefs,\n } = useMenuContext();\n\n const focusNextListItem = useCallback(\n (direction) => {\n if (!menuItemRefs?.current) return;\n\n const isFirstOption = focusedItemIndex === 0;\n const isLastOption = focusedItemIndex === menuItemRefs?.current.length - 1;\n let newIndex = -1;\n\n if (direction === 'ArrowDown') {\n if (isLastOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = 0;\n } else {\n newIndex = focusedItemIndex + 1;\n }\n } else if (direction === 'ArrowUp') {\n if (isFirstOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = menuItemRefs.current.length - 1;\n } else {\n newIndex = focusedItemIndex - 1;\n }\n }\n\n const nextListItem = menuItemRefs?.current[newIndex];\n\n if (nextListItem) {\n nextListItem?.focus();\n setFocusedItemIndex(newIndex);\n } else {\n setFocusedItemIndex(-1);\n }\n },\n [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex],\n );\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLInputElement | HTMLDivElement>, elementIsInputField): void => {\n e.persist();\n\n if (!menuItemRefs?.current) return;\n\n if (e.key === 'ArrowDown' || e.key === 'Tab') {\n focusNextListItem('ArrowDown');\n }\n\n if (e.key === 'ArrowUp') {\n focusNextListItem('ArrowUp');\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n (e.target as HTMLElement).click();\n }\n },\n [focusNextListItem, menuItemRefs],\n );\n\n const handleToggleSingleItem = useCallback(\n (selectedValue: MenuItemProps, itemOnSelect) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const selectedItem = _filteredMenuItemsCopy.find((item) => item.value === selectedValue.value);\n\n if (isMultiSelect && selectedItem) {\n selectedItem.isSelected = !selectedItem.isSelected;\n }\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n const allSelectedItems = allMenuItems.filter((item) => item.isSelected);\n\n if (onSelect && selectedItem) {\n onSelect(selectedItem, allSelectedItems);\n }\n\n if (itemOnSelect && selectedItem) {\n itemOnSelect(selectedItem, allSelectedItems);\n }\n }\n },\n [allMenuItems, filteredMenuItems, isMultiSelect, onSelect, setFilteredMenuItems],\n );\n\n const handleToggleAllItems = useCallback(\n ({ groupName, clear = false }: { groupName?: string; clear?: boolean }) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const value: string[] = [];\n\n _filteredMenuItemsCopy.forEach((item) => {\n if (groupName) {\n if (groupName === item.groupLabel) {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n } else {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n });\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n if (onSelectAll) {\n onSelectAll(allMenuItems.filter((item) => item.isSelected));\n }\n }\n },\n [filteredMenuItems, allMenuItems, onSelectAll, setFilteredMenuItems],\n );\n\n useEffect(() => {\n if (isGrouped) {\n const groupNames = [...new Set(filteredMenuItems?.map((item) => item.groupLabel))];\n if (groupNames.length) {\n setGroups(groupNames);\n }\n }\n }, [filteredMenuItems, isGrouped, setGroups]);\n\n const getMenuItem = useCallback(\n (item: MenuItemProps, index: number) => {\n if (item.isPlaceholder) return <React.Fragment key={item.value}></React.Fragment>;\n\n return (\n <MenuItem\n {...item}\n key={item.value}\n canSelectAll={canSelectAll}\n handleKeyboardNavigation={handleKeyboardNavigation}\n isMultiSelect={isMultiSelect}\n itemIndex={index.toString()}\n menuItemRefs={menuItemRefs}\n onSelect={(selectedItem: SelectOptionProps): void => handleToggleSingleItem(selectedItem, item.onSelect)}\n shouldRetainSelection={shouldRetainSelection}\n shouldTruncateText={shouldTruncateText}\n />\n );\n },\n [\n handleKeyboardNavigation,\n handleToggleSingleItem,\n isMultiSelect,\n menuItemRefs,\n shouldRetainSelection,\n shouldTruncateText,\n canSelectAll,\n ],\n );\n\n if (!isMatchWidthSet) {\n maxW = '320px';\n }\n\n // Return default Chakra menu if user passes in custom child elements\n if (children) {\n return <CMenuList {...rest}>{children}</CMenuList>;\n }\n\n return (\n <CMenuList className=\"MeuList\" {...rest} maxW={maxW || 'unset'} maxH={maxH} minW={minW} overflow=\"hidden auto\">\n {(isSearchable || (canSelectAll && isMultiSelect)) && (\n <Box className=\"MenuList__Header\" m=\"0 12px 8px\">\n {isSearchable && (\n <MenuSearchBar\n handleKeyboardNavigation={handleKeyboardNavigation}\n menuItems={menuItems || []}\n searchInputRef={searchInputRef}\n setFilteredMenuItems={setFilteredMenuItems}\n placeholder={searchPlaceholder}\n />\n )}\n {canSelectAll && isMultiSelect && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(filteredMenuItems?.find((item) => item.isSelected))}\n isGrouped={false}\n />\n )}\n </Box>\n )}\n <Box className=\"MenuList__Body\">\n {!filteredMenuItems?.length ? (\n <Box textAlign=\"center\" display=\"block\" p={3}>\n <Text size=\"sm\" variant=\"subtle\">\n No results found\n </Text>\n </Box>\n ) : isGrouped ? (\n groups?.map((groupName, index) => {\n const menuItems = filteredMenuItems?.filter((item) => item.groupLabel === groupName);\n return (\n <Box className=\"MenuList__Group\" key={`${groupName || 'noGroup'}-${index}`}>\n {groupName && (\n <Flex minH={8} pt={4} pr={3} pb={1} pl={5} justify=\"space-between\" align=\"center\">\n <Box textAlign=\"left\" className=\"MenuList__GroupTitle\">\n <Heading size=\"xs\">{groupName}</Heading>\n </Box>\n {isMultiSelect && canSelectGroups && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(menuItems?.find((item) => item.isSelected))}\n isGrouped={true}\n groupName={groupName}\n />\n )}\n </Flex>\n )}\n {menuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })}\n </Box>\n );\n })\n ) : (\n filteredMenuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })\n )}\n </Box>\n </CMenuList>\n );\n};\n"],"names":["MenuSearchBar","handleKeyboardNavigation","menuItems","onSearchCallback","searchInputRef","setFilteredMenuItems","placeholder","isOpen","useMenuState","handleSearch","useCallback","e","searchInput","target","value","filterdItems","filter","item","labelText","label","_a","key","toLowerCase","includes","useEffect","focusTimeout","setTimeout","current","focus","clearTimeout","React","createElement","TextInput","WrappedTextInput","className","onChange","mt","onKeyDown","size","ref","MenuSelectAllButtons","groupName","handleToggleAllItems","hasSelectedItems","isGrouped","Box","textAlign","w","Button","variant","iconName","onClick","clear","isDisabled","Flex","justifyContent","canSelectAll","canSelectGroups","children","isMatchWidthSet","isMultiSelect","isSearchable","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH","rest","__rest","filteredMenuItems","allMenuItems","groups","setGroups","focusedItemIndex","setFocusedItemIndex","menuItemRefs","useMenuContext","focusNextListItem","direction","isFirstOption","isLastOption","length","newIndex","_b","nextListItem","elementIsInputField","persist","preventDefault","click","handleToggleSingleItem","selectedValue","itemOnSelect","_filteredMenuItemsCopy","selectedItem","find","isSelected","allSelectedItems","forEach","groupLabel","push","groupNames","Set","map","getMenuItem","index","isPlaceholder","Fragment","MenuItem","Object","assign","itemIndex","toString","CMenuList","overflow","m","Boolean","minH","pt","pr","pb","pl","justify","align","Heading","display","p","Text","WrappedText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menuList.component-fa80fe83.js","sources":["../src/components/Menu/components/MenuSearchBar/menuSearchBar.component.tsx","../src/components/Menu/components/MenuSelectAllButtons/menuSelectAllButtons.component.tsx","../src/components/Menu/components/MenuList/menuList.component.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n Dispatch,\n SetStateAction,\n useCallback,\n KeyboardEvent,\n MutableRefObject,\n useEffect,\n} from 'react';\nimport { TextInput } from '../../../TextInput/textInput.component';\nimport { MenuItemProps } from '../MenuItem/menuItem.component';\nimport { useMenuState } from '@chakra-ui/react';\n\nexport interface MenuSearchBarProps {\n handleKeyboardNavigation: (e: KeyboardEvent<HTMLInputElement>, elementIsInputField: boolean) => void;\n menuItems: MenuItemProps[];\n onSearchCallback?: (e: ChangeEventHandler) => void;\n searchInputRef?: MutableRefObject<HTMLInputElement | null>;\n setFilteredMenuItems: Dispatch<SetStateAction<MenuItemProps[]>>;\n placeholder?: string;\n}\n\nexport const MenuSearchBar = ({\n handleKeyboardNavigation,\n menuItems,\n onSearchCallback,\n searchInputRef,\n setFilteredMenuItems,\n placeholder = 'Search...',\n}: MenuSearchBarProps): JSX.Element => {\n const { isOpen } = useMenuState();\n\n const handleSearch = useCallback(\n (e) => {\n const searchInput = e.target.value;\n\n if (searchInput === '' || !searchInput) {\n setFilteredMenuItems(menuItems);\n } else {\n const filterdItems = menuItems.filter((item) => {\n const labelText = typeof item.label === 'string' ? item.label : (item.label?.key as string);\n\n return labelText?.toLowerCase().includes(searchInput.toLowerCase());\n });\n setFilteredMenuItems(filterdItems);\n }\n\n if (onSearchCallback) {\n onSearchCallback(e);\n }\n },\n [menuItems, onSearchCallback, setFilteredMenuItems],\n );\n\n useEffect(() => {\n let focusTimeout: NodeJS.Timeout;\n\n if (isOpen) {\n focusTimeout = setTimeout(() => {\n searchInputRef?.current?.focus();\n }, 200);\n }\n\n return (): void => clearTimeout(focusTimeout);\n }, [searchInputRef, isOpen]);\n\n return (\n <TextInput\n className=\"MenuList__SearchBar\"\n placeholder={placeholder}\n onChange={handleSearch}\n mt={1}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => handleKeyboardNavigation(e, true)}\n size=\"sm\"\n ref={searchInputRef}\n />\n );\n};\n","import React from 'react';\nimport { Box, Flex } from '@chakra-ui/react';\nimport { Button } from '../../../Button/button.component';\n\nexport interface MenuSelectAllButtonsProps {\n groupName?: string;\n handleToggleAllItems: ({ groupName, clear }: { groupName?: string; clear?: boolean }) => void;\n hasSelectedItems: boolean;\n isGrouped: boolean;\n}\n\nexport const MenuSelectAllButtons = ({\n groupName,\n handleToggleAllItems,\n hasSelectedItems,\n isGrouped,\n}: MenuSelectAllButtonsProps): JSX.Element => {\n if (isGrouped) {\n return (\n <Box textAlign=\"right\" w=\"50%\" className=\"MenuListItem__SelectAllButton\">\n {hasSelectedItems ? (\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ groupName, clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n ) : (\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ groupName, clear: false })}>\n Select all\n </Button>\n )}\n </Box>\n );\n }\n\n return (\n <Box mt=\"8px\" className=\"MenuList__SelectAllButtons\">\n <Flex justifyContent=\"space-between\">\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ clear: false })}>\n Select all\n </Button>\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n </Flex>\n </Box>\n );\n};\n","import React, { useCallback, KeyboardEvent, useEffect } from 'react';\nimport { MenuList as CMenuList, MenuListProps as CMenuListProps, Box, Flex } from '@chakra-ui/react';\nimport { Heading } from '../../../Heading/heading.component';\nimport { Text } from '../../../Text/text.component';\nimport { MenuItem, MenuItemProps } from '../MenuItem/menuItem.component';\nimport { MenuSearchBar } from '../MenuSearchBar/menuSearchBar.component';\nimport { MenuSelectAllButtons } from '../MenuSelectAllButtons/menuSelectAllButtons.component';\nimport { useMenuContext } from '../../context/menu.context';\nimport { SelectOptionProps } from '../../../Select/select.types';\n\nexport interface MenuListProps extends Omit<CMenuListProps, 'onSelect'> {\n canSelectAll?: boolean;\n canSelectGroups?: boolean;\n isGrouped?: boolean;\n isMultiSelect?: boolean;\n isSearchable?: boolean;\n menuItems?: MenuItemProps[];\n onSelect?:\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => void)\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => Promise<void>);\n onSelectAll?: ((selectedItems: MenuItemProps[]) => void) | ((selectedItems: MenuItemProps[]) => Promise<void>);\n searchPlaceholder?: string;\n shouldRetainSelection?: boolean;\n isMatchWidthSet?: boolean;\n shouldTruncateText?: boolean;\n}\n\nexport const MenuList = ({\n canSelectAll = false,\n canSelectGroups = false,\n children,\n isGrouped = false,\n isMatchWidthSet,\n isMultiSelect = false,\n isSearchable = false,\n menuItems,\n onSelect,\n onSelectAll,\n searchPlaceholder,\n shouldRetainSelection = false,\n shouldTruncateText = true,\n minW = '240px',\n maxW,\n maxH = '480px',\n ...rest\n}: MenuListProps): JSX.Element => {\n const {\n filteredMenuItems,\n setFilteredMenuItems,\n allMenuItems,\n groups,\n setGroups,\n focusedItemIndex,\n setFocusedItemIndex,\n searchInputRef,\n menuItemRefs,\n } = useMenuContext();\n\n const focusNextListItem = useCallback(\n (direction) => {\n if (!menuItemRefs?.current) return;\n\n const isFirstOption = focusedItemIndex === 0;\n const isLastOption = focusedItemIndex === menuItemRefs?.current.length - 1;\n let newIndex = -1;\n\n if (direction === 'ArrowDown') {\n if (isLastOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = 0;\n } else {\n newIndex = focusedItemIndex + 1;\n }\n } else if (direction === 'ArrowUp') {\n if (isFirstOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = menuItemRefs.current.length - 1;\n } else {\n newIndex = focusedItemIndex - 1;\n }\n }\n\n const nextListItem = menuItemRefs?.current[newIndex];\n\n if (nextListItem) {\n nextListItem?.focus();\n setFocusedItemIndex(newIndex);\n } else {\n setFocusedItemIndex(-1);\n }\n },\n [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex],\n );\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLInputElement | HTMLDivElement>, elementIsInputField): void => {\n e.persist();\n\n if (!menuItemRefs?.current) return;\n\n if (e.key === 'ArrowDown' || e.key === 'Tab') {\n focusNextListItem('ArrowDown');\n }\n\n if (e.key === 'ArrowUp') {\n focusNextListItem('ArrowUp');\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n (e.target as HTMLElement).click();\n }\n },\n [focusNextListItem, menuItemRefs],\n );\n\n const handleToggleSingleItem = useCallback(\n (selectedValue: MenuItemProps, itemOnSelect) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const selectedItem = _filteredMenuItemsCopy.find((item) => item.value === selectedValue.value);\n\n if (isMultiSelect && selectedItem) {\n selectedItem.isSelected = !selectedItem.isSelected;\n }\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n const allSelectedItems = allMenuItems.filter((item) => item.isSelected);\n\n if (onSelect && selectedItem) {\n onSelect(selectedItem, allSelectedItems);\n }\n\n if (itemOnSelect && selectedItem) {\n itemOnSelect(selectedItem, allSelectedItems);\n }\n }\n },\n [allMenuItems, filteredMenuItems, isMultiSelect, onSelect, setFilteredMenuItems],\n );\n\n const handleToggleAllItems = useCallback(\n ({ groupName, clear = false }: { groupName?: string; clear?: boolean }) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const value: string[] = [];\n\n _filteredMenuItemsCopy.forEach((item) => {\n if (groupName) {\n if (groupName === item.groupLabel) {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n } else {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n });\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n if (onSelectAll) {\n onSelectAll(allMenuItems.filter((item) => item.isSelected));\n }\n }\n },\n [filteredMenuItems, allMenuItems, onSelectAll, setFilteredMenuItems],\n );\n\n useEffect(() => {\n if (isGrouped) {\n const groupNames = [...new Set(filteredMenuItems?.map((item) => item.groupLabel))];\n if (groupNames.length) {\n setGroups(groupNames);\n }\n }\n }, [filteredMenuItems, isGrouped, setGroups]);\n\n const getMenuItem = useCallback(\n (item: MenuItemProps, index: number) => {\n if (item.isPlaceholder) return <React.Fragment key={item.value}></React.Fragment>;\n\n return (\n <MenuItem\n {...item}\n key={item.value}\n canSelectAll={canSelectAll}\n handleKeyboardNavigation={handleKeyboardNavigation}\n isMultiSelect={isMultiSelect}\n itemIndex={index.toString()}\n menuItemRefs={menuItemRefs}\n onSelect={(selectedItem: SelectOptionProps): void => handleToggleSingleItem(selectedItem, item.onSelect)}\n shouldRetainSelection={shouldRetainSelection}\n shouldTruncateText={shouldTruncateText}\n />\n );\n },\n [\n handleKeyboardNavigation,\n handleToggleSingleItem,\n isMultiSelect,\n menuItemRefs,\n shouldRetainSelection,\n shouldTruncateText,\n canSelectAll,\n ],\n );\n\n if (!isMatchWidthSet) {\n maxW = '320px';\n }\n\n // Return default Chakra menu if user passes in custom child elements\n if (children) {\n return <CMenuList {...rest}>{children}</CMenuList>;\n }\n\n return (\n <CMenuList className=\"MeuList\" {...rest} maxW={maxW || 'unset'} maxH={maxH} minW={minW} overflow=\"hidden auto\">\n {(isSearchable || (canSelectAll && isMultiSelect)) && (\n <Box className=\"MenuList__Header\" m=\"0 12px 8px\">\n {isSearchable && (\n <MenuSearchBar\n handleKeyboardNavigation={handleKeyboardNavigation}\n menuItems={menuItems || []}\n searchInputRef={searchInputRef}\n setFilteredMenuItems={setFilteredMenuItems}\n placeholder={searchPlaceholder}\n />\n )}\n {canSelectAll && isMultiSelect && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(filteredMenuItems?.find((item) => item.isSelected))}\n isGrouped={false}\n />\n )}\n </Box>\n )}\n <Box className=\"MenuList__Body\">\n {!filteredMenuItems?.length ? (\n <Box textAlign=\"center\" display=\"block\" p={3}>\n <Text size=\"sm\" variant=\"subtle\">\n No results found\n </Text>\n </Box>\n ) : isGrouped ? (\n groups?.map((groupName, index) => {\n const menuItems = filteredMenuItems?.filter((item) => item.groupLabel === groupName);\n return (\n <Box className=\"MenuList__Group\" key={`${groupName || 'noGroup'}-${index}`}>\n {groupName && (\n <Flex minH={8} pt={4} pr={3} pb={1} pl={5} justify=\"space-between\" align=\"center\">\n <Box textAlign=\"left\" className=\"MenuList__GroupTitle\">\n <Heading size=\"xs\">{groupName}</Heading>\n </Box>\n {isMultiSelect && canSelectGroups && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(menuItems?.find((item) => item.isSelected))}\n isGrouped={true}\n groupName={groupName}\n />\n )}\n </Flex>\n )}\n {menuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })}\n </Box>\n );\n })\n ) : (\n filteredMenuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })\n )}\n </Box>\n </CMenuList>\n );\n};\n"],"names":["MenuSearchBar","handleKeyboardNavigation","menuItems","onSearchCallback","searchInputRef","setFilteredMenuItems","placeholder","isOpen","useMenuState","handleSearch","useCallback","e","searchInput","target","value","filterdItems","filter","item","labelText","label","_a","key","toLowerCase","includes","useEffect","focusTimeout","setTimeout","current","focus","clearTimeout","React","createElement","TextInput","WrappedTextInput","className","onChange","mt","onKeyDown","size","ref","MenuSelectAllButtons","groupName","handleToggleAllItems","hasSelectedItems","isGrouped","Box","textAlign","w","Button","variant","iconName","onClick","clear","isDisabled","Flex","justifyContent","canSelectAll","canSelectGroups","children","isMatchWidthSet","isMultiSelect","isSearchable","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH","rest","__rest","filteredMenuItems","allMenuItems","groups","setGroups","focusedItemIndex","setFocusedItemIndex","menuItemRefs","useMenuContext","focusNextListItem","direction","isFirstOption","isLastOption","length","newIndex","_b","nextListItem","elementIsInputField","persist","preventDefault","click","handleToggleSingleItem","selectedValue","itemOnSelect","_filteredMenuItemsCopy","selectedItem","find","isSelected","allSelectedItems","forEach","groupLabel","push","groupNames","Set","map","getMenuItem","index","isPlaceholder","Fragment","MenuItem","Object","assign","itemIndex","toString","CMenuList","overflow","m","Boolean","minH","pt","pr","pb","pl","justify","align","Heading","display","p","Text","WrappedText"],"mappings":"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"}
|
package/build/{menuOptionGroup.component-e1c2df00.js → menuOptionGroup.component-bfcf4e53.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-
|
|
2
|
-
//# sourceMappingURL=menuOptionGroup.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),r=require("react"),t=require("./chakra-ui-menu.esm-fe9ef385.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=i(r);exports.MenuOptionGroup=r=>{var{children:i}=r,n=e.__rest(r,["children"]);return u.default.createElement(t.MenuOptionGroup,Object.assign({className:"MenuList__OptionGroup",position:"relative"},n),i)};
|
|
2
|
+
//# sourceMappingURL=menuOptionGroup.component-bfcf4e53.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuOptionGroup.component-
|
|
1
|
+
{"version":3,"file":"menuOptionGroup.component-bfcf4e53.js","sources":["../src/components/Menu/components/MenuOptionGroup/menuOptionGroup.component.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuOptionGroup as CMenuOptionGroup, MenuOptionGroupProps as CMenuOptionGroupProps } from '@chakra-ui/react';\n\nexport const MenuOptionGroup = ({ children, ...rest }: CMenuOptionGroupProps): JSX.Element => {\n return (\n <CMenuOptionGroup className=\"MenuList__OptionGroup\" position=\"relative\" {...rest}>\n {children}\n </CMenuOptionGroup>\n );\n};\n"],"names":["_a","children","rest","__rest","React","createElement","CMenuOptionGroup","MenuOptionGroup","Object","assign","className","position"],"mappings":"kOAGgCA,IAAA,IAAAC,SAAEA,GAA0CD,EAA7BE,EAAIC,EAAAA,OAAAH,EAAnB,cAC9B,OACEI,EAAC,QAAAC,cAAAC,EAAgBC,gBAACC,OAAAC,OAAA,CAAAC,UAAU,wBAAwBC,SAAS,YAAeT,GACzED"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),l=require("react"),s=require("./chakra-ui-media-query.esm-6217de7e.js"),a=require("./chakra-ui-modal.esm-5ec83d2f.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(l);exports.Modal=l=>{var{children:r,isOpen:i,onClose:t,isCentered:n=!0,responsiveModalSizes:u,allowEscape:c=!0,useFullScreenMobile:d=!0,initialFocusRef:b,scrollBehavior:m,size:f="xl"}=l,p=e.__rest(l,["children","isOpen","onClose","isCentered","responsiveModalSizes","allowEscape","useFullScreenMobile","initialFocusRef","scrollBehavior","size"]);const v=s.useBreakpointValue({base:"full",md:f}),k=s.useBreakpointValue({base:0,md:"xl"}),C=s.useBreakpointValue({base:d?0:16,md:16});return o.default.createElement(a.Modal,Object.assign({closeOnEsc:c,closeOnOverlayClick:c,autoFocus:!!b,isOpen:i,onClose:t,scrollBehavior:m,isCentered:n,size:d?v:f,motionPreset:"slideInBottom"},p),o.default.createElement(a.ModalOverlay,null),o.default.createElement(a.ModalContent,Object.assign({backgroundColor:"background.overlay",m:C},!d&&{mx:5},{borderRadius:d?k:"xl"},d&&{minH:{base:"-webkit-fill-available",md:"auto"}}),r))};
|
|
2
|
+
//# sourceMappingURL=modal.component-6990e35a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.component-
|
|
1
|
+
{"version":3,"file":"modal.component-6990e35a.js","sources":["../src/components/Modal/modal.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n Modal as CModal,\n ModalProps as CModalProps,\n ModalContent,\n ModalOverlay,\n useBreakpointValue,\n} from '@chakra-ui/react';\nimport { FocusableElement } from '@chakra-ui/utils';\nimport { ModalSize } from './modal.types';\n\ntype ResponsiveBreakpoints = 'base' | 'md';\n\nexport interface ModalProps extends CModalProps {\n children: ReactNode;\n isCentered?: boolean;\n responsiveModalSizes?: Partial<Record<ResponsiveBreakpoints, ModalSize>>;\n allowEscape?: boolean;\n useFullScreenMobile?: boolean;\n initialFocusRef?: React.RefObject<FocusableElement>;\n scrollBehavior?: 'inside' | 'outside';\n size?: string;\n}\n\nexport const Modal = ({\n children,\n isOpen,\n onClose,\n isCentered = true,\n responsiveModalSizes,\n allowEscape = true,\n useFullScreenMobile = true,\n initialFocusRef,\n scrollBehavior,\n size = 'xl',\n ...rest\n}: ModalProps): JSX.Element => {\n // Responsive values for full screen modals on phones.\n const fullScreenMobileSize = useBreakpointValue({ base: 'full', md: size });\n const fullScreenMobileBorderRadius = useBreakpointValue({ base: 0, md: 'xl' });\n const modalMargin = useBreakpointValue({ base: useFullScreenMobile ? 0 : 16, md: 16 });\n\n const Modal: JSX.Element = (\n <CModal\n closeOnEsc={allowEscape}\n closeOnOverlayClick={allowEscape}\n autoFocus={!!initialFocusRef}\n isOpen={isOpen}\n onClose={onClose}\n scrollBehavior={scrollBehavior}\n isCentered={isCentered}\n size={useFullScreenMobile ? fullScreenMobileSize : size}\n motionPreset=\"slideInBottom\"\n {...rest}\n >\n <ModalOverlay />\n <ModalContent\n backgroundColor=\"background.overlay\"\n m={modalMargin}\n {...(!useFullScreenMobile && { mx: 5 })}\n borderRadius={useFullScreenMobile ? fullScreenMobileBorderRadius : 'xl'}\n {...(useFullScreenMobile && { minH: { base: '-webkit-fill-available', md: 'auto' } })}\n >\n {children}\n </ModalContent>\n </CModal>\n );\n\n return Modal;\n};\n"],"names":["_a","children","isOpen","onClose","isCentered","responsiveModalSizes","allowEscape","useFullScreenMobile","initialFocusRef","scrollBehavior","size","rest","__rest","fullScreenMobileSize","useBreakpointValue","base","md","fullScreenMobileBorderRadius","modalMargin","React","createElement","CModal","Modal","closeOnEsc","closeOnOverlayClick","autoFocus","motionPreset","ModalOverlay","ModalContent","Object","assign","backgroundColor","m","mx","borderRadius","minH"],"mappings":"8QAwBsBA,IAAA,IAAAC,SACpBA,EAAQC,OACRA,EAAMC,QACNA,EAAOC,WACPA,GAAa,EAAIC,qBACjBA,EAAoBC,YACpBA,GAAc,EAAIC,oBAClBA,GAAsB,EAAIC,gBAC1BA,EAAeC,eACfA,EAAcC,KACdA,EAAO,MAEIV,EADRW,EAAIC,EAAAA,OAAAZ,EAXa,mJAcpB,MAAMa,EAAuBC,EAAAA,mBAAmB,CAAEC,KAAM,OAAQC,GAAIN,IAC9DO,EAA+BH,EAAAA,mBAAmB,CAAEC,KAAM,EAAGC,GAAI,OACjEE,EAAcJ,qBAAmB,CAAEC,KAAMR,EAAsB,EAAI,GAAIS,GAAI,KA4BjF,OAzBEG,EAAC,QAAAC,cAAAC,EAAMC,qBACLC,WAAYjB,EACZkB,oBAAqBlB,EACrBmB,YAAajB,EACbN,OAAQA,EACRC,QAASA,EACTM,eAAgBA,EAChBL,WAAYA,EACZM,KAAMH,EAAsBM,EAAuBH,EACnDgB,aAAa,iBACTf,GAEJQ,UAAAC,cAACO,EAAYA,aAAG,MAChBR,EAAC,QAAAC,cAAAQ,EAAYA,aACXC,OAAAC,OAAA,CAAAC,gBAAgB,qBAChBC,EAAGd,IACGX,GAAuB,CAAE0B,GAAI,GAAI,CACvCC,aAAc3B,EAAsBU,EAA+B,MAC9DV,GAAuB,CAAE4B,KAAM,CAAEpB,KAAM,yBAA0BC,GAAI,UAEzEf"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),r=require("react"),t=require("./chakra-ui-modal.esm-5ec83d2f.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(r);exports.ModalBody=r=>{var{children:a}=r,d=e.__rest(r,["children"]);return c.default.createElement(t.ModalBody,Object.assign({py:1},d),a)};
|
|
2
|
+
//# sourceMappingURL=modalBody.component-771775b3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalBody.component-
|
|
1
|
+
{"version":3,"file":"modalBody.component-771775b3.js","sources":["../src/components/Modal/components/ModalBody/modalBody.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalBody as CModalBody, ModalBodyProps as CModalBodyProps } from '@chakra-ui/react';\n\nexport interface ModalBodyProps extends CModalBodyProps {}\n\nexport const ModalBody = ({ children, ...rest }: ModalBodyProps): JSX.Element => {\n return (\n <CModalBody py={1} {...rest}>\n {children}\n </CModalBody>\n );\n};\n"],"names":["_a","children","rest","__rest","React","createElement","CModalBody","ModalBody","Object","assign","py"],"mappings":"6NAK0BA,IAAA,IAAAC,SAAEA,GAAmCD,EAAtBE,EAAIC,EAAAA,OAAAH,EAAnB,cACxB,OACEI,UAAAC,cAACC,EAAUC,UAAAC,OAAAC,OAAA,CAACC,GAAI,GAAOR,GACpBD"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),t=require("react"),o=require("./button.component-957d9e9f.js"),r=require("./chakra-ui-modal.esm-5ec83d2f.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=s(t);exports.ModalCloseButton=t=>{var{right:s=2,top:a=2,size:n="md"}=t,u=e.__rest(t,["right","top","size"]);const{onClose:c}=r.useModalContext();return i.default.createElement(o.Button,Object.assign({variant:"ghostNeutral",onClick:c,iconName:"close",position:"absolute",right:s,top:a,size:n},u))};
|
|
2
|
+
//# sourceMappingURL=modalCloseButton.component-6e546d5a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalCloseButton.component-
|
|
1
|
+
{"version":3,"file":"modalCloseButton.component-6e546d5a.js","sources":["../src/components/Modal/components/ModalCloseButton/modalCloseButton.component.tsx"],"sourcesContent":["import React from 'react';\nimport { useModalContext } from '@chakra-ui/react';\nimport { Button, ButtonProps } from '../../../Button/button.component';\n\nexport interface ModalCloseButtonProps extends ButtonProps {}\n\nexport const ModalCloseButton = ({ right = 2, top = 2, size = 'md', ...rest }: ModalCloseButtonProps): JSX.Element => {\n const { onClose } = useModalContext();\n return (\n <Button\n variant=\"ghostNeutral\"\n onClick={onClose}\n iconName=\"close\"\n position=\"absolute\"\n right={right}\n top={top}\n size={size}\n {...rest}\n />\n );\n};\n"],"names":["_a","right","top","size","rest","__rest","onClose","useModalContext","React","createElement","Button","Object","assign","variant","onClick","iconName","position"],"mappings":"gRAMiCA,IAAA,IAAAC,MAAEA,EAAQ,EAACC,IAAEA,EAAM,EAACC,KAAEA,EAAO,MAAsCH,EAA7BI,EAAIC,EAAAA,OAAAL,EAA1C,wBAC/B,MAAMM,QAAEA,GAAYC,EAAAA,kBACpB,OACEC,UAAAC,cAACC,EAAMA,OAAAC,OAAAC,OAAA,CACLC,QAAQ,eACRC,QAASR,EACTS,SAAS,QACTC,SAAS,WACTf,MAAOA,EACPC,IAAKA,EACLC,KAAMA,GACFC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),r=require("react"),t=require("./chakra-ui-modal.esm-5ec83d2f.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(r);exports.ModalFooter=r=>{var{children:a}=r,i=e.__rest(r,["children"]);return c.default.createElement(t.ModalFooter,Object.assign({pb:6},i),a)};
|
|
2
|
+
//# sourceMappingURL=modalFooter.component-a8dca3ea.js.map
|
package/build/{modalFooter.component-6173abd3.js.map → modalFooter.component-a8dca3ea.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalFooter.component-
|
|
1
|
+
{"version":3,"file":"modalFooter.component-a8dca3ea.js","sources":["../src/components/Modal/components/ModalFooter/modalFooter.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalFooter as CModalFooter, ModalFooterProps as CModalFooterProps } from '@chakra-ui/react';\n\nexport interface ModalFooterProps extends CModalFooterProps {}\n\nexport const ModalFooter = ({ children, ...rest }: ModalFooterProps): JSX.Element => {\n return (\n <CModalFooter pb={6} {...rest}>\n {children}\n </CModalFooter>\n );\n};\n"],"names":["_a","children","rest","__rest","React","createElement","CModalFooter","ModalFooter","Object","assign","pb"],"mappings":"+NAK4BA,IAAA,IAAAC,SAAEA,GAAqCD,EAAxBE,EAAIC,EAAAA,OAAAH,EAAnB,cAC1B,OACEI,UAAAC,cAACC,EAAYC,YAAAC,OAAAC,OAAA,CAACC,GAAI,GAAOR,GACtBD"}
|
package/build/{modalFooterButtons.component-5bf34aa6.js → modalFooterButtons.component-7f6ad8c5.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-
|
|
2
|
-
//# sourceMappingURL=modalFooterButtons.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),t=require("react"),a=require("./button.component-957d9e9f.js"),i=require("./chakra-ui-modal.esm-5ec83d2f.js"),n=require("./chakra-ui-layout.esm-6ee578f7.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(t);exports.ModalFooterButtons=t=>{var{submitText:l="Submit",isLoading:o,loadingText:s,isDisabled:u,isDestructive:c,mixpanelName:d,children:m,onSubmit:b,allowCancel:f=!0,onCancel:x}=t,p=e.__rest(t,["submitText","isLoading","loadingText","isDisabled","isDestructive","mixpanelName","children","onSubmit","allowCancel","onCancel"]);const{onClose:C}=i.useModalContext();return r.default.createElement(i.ModalFooter,Object.assign({},p,{pb:6}),r.default.createElement(n.Flex,{w:"100%"},f&&r.default.createElement(a.Button,{variant:"tertiary",onClick:()=>{x&&x(),C()}},"Cancel"),r.default.createElement(n.Spacer,null),r.default.createElement(a.Button,{"data-mixpanel-name":d,onClick:b,isLoading:o,loadingText:s,isDisabled:u,variant:c?"primaryDestructive":"primary"},l)))};
|
|
2
|
+
//# sourceMappingURL=modalFooterButtons.component-7f6ad8c5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalFooterButtons.component-
|
|
1
|
+
{"version":3,"file":"modalFooterButtons.component-7f6ad8c5.js","sources":["../src/components/Modal/components/ModalFooterButtons/modalFooterButtons.component.tsx"],"sourcesContent":["import React from 'react';\nimport {\n ModalFooter as CModalFooter,\n ModalFooterProps as CModalFooterProps,\n useModalContext,\n Flex,\n Spacer,\n} from '@chakra-ui/react';\nimport { Button } from '../../../Button/button.component';\n\nexport interface ModalFooterButtonProps extends CModalFooterProps {\n mixpanelName?: string;\n submitText?: string;\n isLoading?: boolean;\n loadingText?: string;\n isDisabled?: boolean;\n isDestructive?: boolean;\n onSubmit?: () => void;\n allowCancel?: boolean;\n onCancel?: () => void;\n}\n\nexport const ModalFooterButtons = ({\n submitText = 'Submit',\n isLoading,\n loadingText,\n isDisabled,\n isDestructive,\n mixpanelName,\n children,\n onSubmit,\n allowCancel = true,\n onCancel,\n ...rest\n}: ModalFooterButtonProps): JSX.Element => {\n const { onClose } = useModalContext();\n\n const handleCancel = (): void => {\n if (onCancel) {\n onCancel();\n }\n onClose();\n };\n\n return (\n <CModalFooter {...rest} pb={6}>\n <Flex w=\"100%\">\n {allowCancel && (\n <Button variant=\"tertiary\" onClick={handleCancel}>\n Cancel\n </Button>\n )}\n <Spacer />\n <Button\n data-mixpanel-name={mixpanelName}\n onClick={onSubmit}\n isLoading={isLoading}\n loadingText={loadingText}\n isDisabled={isDisabled}\n variant={isDestructive ? 'primaryDestructive' : 'primary'}\n >\n {submitText}\n </Button>\n </Flex>\n </CModalFooter>\n );\n};\n"],"names":["_a","submitText","isLoading","loadingText","isDisabled","isDestructive","mixpanelName","children","onSubmit","allowCancel","onCancel","rest","__rest","onClose","useModalContext","React","CModalFooter","ModalFooter","Object","assign","pb","createElement","Flex","w","Button","variant","onClick","Spacer"],"mappings":"kUAsBmCA,IAAA,IAAAC,WACjCA,EAAa,SAAQC,UACrBA,EAASC,YACTA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,aACbA,EAAYC,SACZA,EAAQC,SACRA,EAAQC,YACRA,GAAc,EAAIC,SAClBA,GAAQV,EACLW,EAX8BC,EAAAA,OAAAZ,EAAA,CAAA,aAAA,YAAA,cAAA,aAAA,gBAAA,eAAA,WAAA,WAAA,cAAA,aAajC,MAAMa,QAAEA,GAAYC,EAAAA,kBASpB,OACEC,wBAACC,EAAYC,YAAAC,OAAAC,OAAA,GAAKR,EAAM,CAAAS,GAAI,IAC1BL,EAAAA,QAAAM,cAACC,EAAAA,KAAI,CAACC,EAAE,QACLd,GACCM,EAAC,QAAAM,cAAAG,EAAAA,OAAO,CAAAC,QAAQ,WAAWC,QAXd,KACfhB,GACFA,IAEFG,gBAWIE,UAAAM,cAACM,EAAMA,OAAG,MACVZ,UAAAM,cAACG,EAAMA,OACe,CAAA,qBAAAlB,EACpBoB,QAASlB,EACTN,UAAWA,EACXC,YAAaA,EACbC,WAAYA,EACZqB,QAASpB,EAAgB,qBAAuB,WAE/CJ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-194b75fc.js"),r=require("react"),a=require("./heading.component-198f40a3.js"),t=require("./chakra-ui-modal.esm-5ec83d2f.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(r);exports.ModalHeader=r=>{var{size:i="md",children:s}=r,n=e.__rest(r,["size","children"]);return d.default.createElement(t.ModalHeader,Object.assign({px:6,pt:6,pb:2},n),d.default.createElement(a.WrappedHeading,{size:i},s))};
|
|
2
|
+
//# sourceMappingURL=modalHeader.component-d1fd5719.js.map
|
package/build/{modalHeader.component-90d0ac34.js.map → modalHeader.component-d1fd5719.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalHeader.component-
|
|
1
|
+
{"version":3,"file":"modalHeader.component-d1fd5719.js","sources":["../src/components/Modal/components/ModalHeader/modalHeader.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalHeader as CModalHeader, ModalHeaderProps as CModalHeaderProps } from '@chakra-ui/react';\nimport { HeadingSize } from '../../../Heading/heading.types';\nimport { Heading } from '../../../Heading/heading.component';\n\nexport interface ModalHeaderProps extends CModalHeaderProps {\n size?: HeadingSize;\n}\n\nexport const ModalHeader = ({ size = 'md', children, ...rest }: ModalHeaderProps): JSX.Element => {\n return (\n <CModalHeader px={6} pt={6} pb={2} {...rest}>\n <Heading size={size}>{children}</Heading>\n </CModalHeader>\n );\n};\n"],"names":["_a","size","children","rest","__rest","React","createElement","CModalHeader","ModalHeader","Object","assign","px","pt","pb","Heading"],"mappings":"4QAS4BA,QAAAC,KAAEA,EAAO,KAAIC,SAAEA,KAAaC,EAA5BC,EAAAA,OAAAJ,EAAA,CAAA,OAAA,aAC1B,OACEK,EAAC,QAAAC,cAAAC,EAAYC,YAACC,OAAAC,OAAA,CAAAC,GAAI,EAAGC,GAAI,EAAGC,GAAI,GAAOV,GACrCE,EAAC,QAAAC,cAAAQ,iBAAQ,CAAAb,KAAMA,GAAOC"}
|