@coveord/plasma-mantine 53.0.1 → 53.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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +34 -34
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/action-icon/ActionIcon.js +1 -1
- package/dist/cjs/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/cjs/components/action-icon/index.js.map +1 -1
- package/dist/cjs/components/blank-slate/BlankSlate.js +1 -1
- package/dist/cjs/components/blank-slate/BlankSlate.js.map +1 -1
- package/dist/cjs/components/blank-slate/index.js.map +1 -1
- package/dist/cjs/components/browser-preview/BrowserPreview.js.map +1 -1
- package/dist/cjs/components/browser-preview/index.js.map +1 -1
- package/dist/cjs/components/button/Button.js +3 -3
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js +3 -3
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/cjs/components/button/index.js.map +1 -1
- package/dist/cjs/components/code-editor/CodeEditor.js +14 -17
- package/dist/cjs/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/cjs/components/code-editor/index.js.map +1 -1
- package/dist/cjs/components/code-editor/languages/xml.js +5 -5
- package/dist/cjs/components/code-editor/languages/xml.js.map +1 -1
- package/dist/cjs/components/code-editor/search/Search.js +2 -2
- package/dist/cjs/components/code-editor/search/Search.js.map +1 -1
- package/dist/cjs/components/code-editor/search/index.js.map +1 -1
- package/dist/cjs/components/collection/Collection.js +16 -22
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/collection/CollectionContext.js +1 -1
- package/dist/cjs/components/collection/CollectionContext.js.map +1 -1
- package/dist/cjs/components/collection/CollectionItem.js +5 -5
- package/dist/cjs/components/collection/CollectionItem.js.map +1 -1
- package/dist/cjs/components/collection/enhanceWithCollectionProps.js.map +1 -1
- package/dist/cjs/components/collection/index.js.map +1 -1
- package/dist/cjs/components/copyToClipboard/CopyToClipboard.js +4 -5
- package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/cjs/components/copyToClipboard/index.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +2 -2
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js +2 -3
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js +1 -2
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js +10 -13
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/date-range-picker/index.js.map +1 -1
- package/dist/cjs/components/header/Header.context.js +1 -1
- package/dist/cjs/components/header/Header.context.js.map +1 -1
- package/dist/cjs/components/header/Header.js +11 -11
- package/dist/cjs/components/header/Header.js.map +1 -1
- package/dist/cjs/components/header/HeaderActions/HeaderActions.js +3 -3
- package/dist/cjs/components/header/HeaderActions/HeaderActions.js.map +1 -1
- package/dist/cjs/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.js +2 -2
- package/dist/cjs/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.js.map +1 -1
- package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.js +4 -4
- package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/cjs/components/header/index.js.map +1 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirm.js +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmContext.js +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js +9 -9
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmTarget.js +1 -2
- package/dist/cjs/components/inline-confirm/InlineConfirmTarget.js.map +1 -1
- package/dist/cjs/components/inline-confirm/index.js.map +1 -1
- package/dist/cjs/components/menu/Menu.js +3 -3
- package/dist/cjs/components/menu/Menu.js.map +1 -1
- package/dist/cjs/components/menu/index.js.map +1 -1
- package/dist/cjs/components/prompt/Prompt.js.map +1 -1
- package/dist/cjs/components/prompt/PromptFooter.js +2 -2
- package/dist/cjs/components/prompt/PromptFooter.js.map +1 -1
- package/dist/cjs/components/prompt/index.js.map +1 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.d.ts +8 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.d.ts.map +1 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.js +5 -5
- package/dist/cjs/components/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.module.css +9 -0
- package/dist/cjs/components/sticky-footer/index.js.map +1 -1
- package/dist/cjs/components/table/Table.js +18 -21
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/Table.types.js.map +1 -1
- package/dist/cjs/components/table/TableContext.js +5 -5
- package/dist/cjs/components/table/TableContext.js.map +1 -1
- package/dist/cjs/components/table/index.js.map +1 -1
- package/dist/cjs/components/table/layouts/TableLayoutControl.js +1 -1
- package/dist/cjs/components/table/layouts/TableLayoutControl.js.map +1 -1
- package/dist/cjs/components/table/layouts/TableLayouts.js.map +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayout.js +3 -3
- package/dist/cjs/components/table/layouts/row-layout/RowLayout.js.map +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutBody.js +10 -12
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutBody.js.map +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutContext.js +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutContext.js.map +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutHeader.js +2 -2
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutHeader.js.map +1 -1
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutIcon.js +2 -2
- package/dist/cjs/components/table/layouts/row-layout/RowLayoutIcon.js.map +1 -1
- package/dist/cjs/components/table/table-actions/TableActions.js +3 -3
- package/dist/cjs/components/table/table-actions/TableActions.js.map +1 -1
- package/dist/cjs/components/table/table-column/TableCollapsibleColumn.js +8 -9
- package/dist/cjs/components/table/table-column/TableCollapsibleColumn.js.map +1 -1
- package/dist/cjs/components/table/table-column/TableSelectableColumn.js +4 -4
- package/dist/cjs/components/table/table-column/TableSelectableColumn.js.map +1 -1
- package/dist/cjs/components/table/table-columns-selector/TableColumnsSelector.js +10 -11
- package/dist/cjs/components/table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/dist/cjs/components/table/table-consumer/TableConsumer.js.map +1 -1
- package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.js +5 -5
- package/dist/cjs/components/table/table-date-range-picker/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/table-filter/TableFilter.js +6 -6
- package/dist/cjs/components/table/table-filter/TableFilter.js.map +1 -1
- package/dist/cjs/components/table/table-footer/TableFooter.js +2 -2
- package/dist/cjs/components/table/table-footer/TableFooter.js.map +1 -1
- package/dist/cjs/components/table/table-header/TableHeader.js +6 -6
- package/dist/cjs/components/table/table-header/TableHeader.js.map +1 -1
- package/dist/cjs/components/table/table-header/Th.js +7 -7
- package/dist/cjs/components/table/table-header/Th.js.map +1 -1
- package/dist/cjs/components/table/table-last-updated/TableLastUpdated.js +5 -5
- package/dist/cjs/components/table/table-last-updated/TableLastUpdated.js.map +1 -1
- package/dist/cjs/components/table/table-loading/TableLoading.js.map +1 -1
- package/dist/cjs/components/table/table-pagination/TablePagination.js +9 -10
- package/dist/cjs/components/table/table-pagination/TablePagination.js.map +1 -1
- package/dist/cjs/components/table/table-pagination/TablePagination.types.js.map +1 -1
- package/dist/cjs/components/table/table-per-page/TablePerPage.js +3 -5
- package/dist/cjs/components/table/table-per-page/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/table-per-page/TablePerPage.types.js.map +1 -1
- package/dist/cjs/components/table/table-predicate/TablePredicate.js +6 -6
- package/dist/cjs/components/table/table-predicate/TablePredicate.js.map +1 -1
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useClickWithLoading.js +2 -2
- package/dist/cjs/hooks/useClickWithLoading.js.map +1 -1
- package/dist/cjs/hooks/useControlledList.js +3 -6
- package/dist/cjs/hooks/useControlledList.js.map +1 -1
- package/dist/cjs/hooks/useParentHeight.js.map +1 -1
- package/dist/cjs/hooks/useRowSelection.js +5 -6
- package/dist/cjs/hooks/useRowSelection.js.map +1 -1
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/theme/PlasmaColors.js.map +1 -1
- package/dist/cjs/theme/Plasmantine.js.map +1 -1
- package/dist/cjs/theme/Theme.js +48 -48
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/cjs/theme/index.js.map +1 -1
- package/dist/cjs/theme/mergeCSSVariablesResolvers.js.map +1 -1
- package/dist/cjs/theme/plasmaCSSVariablesResolver.js +2 -2
- package/dist/cjs/theme/plasmaCSSVariablesResolver.js.map +1 -1
- package/dist/cjs/types/css/index.d.js.map +1 -1
- package/dist/cjs/utils/createFactoryComponent.js.map +1 -1
- package/dist/cjs/utils/createPolymorphicComponent.js.map +1 -1
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/cjs/utils/overrideComponent.js.map +1 -1
- package/dist/cjs/vars/Notification.vars.js +3 -3
- package/dist/cjs/vars/Notification.vars.js.map +1 -1
- package/dist/cjs/vars/Text.vars.js +1 -1
- package/dist/cjs/vars/Text.vars.js.map +1 -1
- package/dist/esm/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/esm/components/action-icon/index.js.map +1 -1
- package/dist/esm/components/blank-slate/BlankSlate.js.map +1 -1
- package/dist/esm/components/blank-slate/index.js.map +1 -1
- package/dist/esm/components/browser-preview/BrowserPreview.js.map +1 -1
- package/dist/esm/components/browser-preview/index.js.map +1 -1
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/esm/components/button/index.js.map +1 -1
- package/dist/esm/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/esm/components/code-editor/index.js.map +1 -1
- package/dist/esm/components/code-editor/languages/xml.js.map +1 -1
- package/dist/esm/components/code-editor/search/Search.js.map +1 -1
- package/dist/esm/components/code-editor/search/index.js.map +1 -1
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/collection/CollectionContext.js.map +1 -1
- package/dist/esm/components/collection/CollectionItem.js.map +1 -1
- package/dist/esm/components/collection/enhanceWithCollectionProps.js.map +1 -1
- package/dist/esm/components/collection/index.js.map +1 -1
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/esm/components/copyToClipboard/index.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/date-range-picker/index.js.map +1 -1
- package/dist/esm/components/header/Header.context.js.map +1 -1
- package/dist/esm/components/header/Header.js.map +1 -1
- package/dist/esm/components/header/HeaderActions/HeaderActions.js.map +1 -1
- package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.js.map +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/esm/components/header/index.js.map +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmTarget.js.map +1 -1
- package/dist/esm/components/inline-confirm/index.js.map +1 -1
- package/dist/esm/components/menu/Menu.js.map +1 -1
- package/dist/esm/components/menu/index.js.map +1 -1
- package/dist/esm/components/prompt/Prompt.js.map +1 -1
- package/dist/esm/components/prompt/PromptFooter.js.map +1 -1
- package/dist/esm/components/prompt/index.js.map +1 -1
- package/dist/esm/components/sticky-footer/StickyFooter.d.ts +8 -1
- package/dist/esm/components/sticky-footer/StickyFooter.d.ts.map +1 -1
- package/dist/esm/components/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/esm/components/sticky-footer/StickyFooter.module.css +9 -0
- package/dist/esm/components/sticky-footer/index.js.map +1 -1
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.types.js.map +1 -1
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/dist/esm/components/table/index.js.map +1 -1
- package/dist/esm/components/table/layouts/TableLayoutControl.js.map +1 -1
- package/dist/esm/components/table/layouts/TableLayouts.js.map +1 -1
- package/dist/esm/components/table/layouts/row-layout/RowLayout.js.map +1 -1
- package/dist/esm/components/table/layouts/row-layout/RowLayoutBody.js.map +1 -1
- package/dist/esm/components/table/layouts/row-layout/RowLayoutContext.js.map +1 -1
- package/dist/esm/components/table/layouts/row-layout/RowLayoutHeader.js.map +1 -1
- package/dist/esm/components/table/layouts/row-layout/RowLayoutIcon.js.map +1 -1
- package/dist/esm/components/table/table-actions/TableActions.js.map +1 -1
- package/dist/esm/components/table/table-column/TableCollapsibleColumn.js.map +1 -1
- package/dist/esm/components/table/table-column/TableSelectableColumn.js.map +1 -1
- package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/dist/esm/components/table/table-consumer/TableConsumer.js.map +1 -1
- package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/table-filter/TableFilter.js.map +1 -1
- package/dist/esm/components/table/table-footer/TableFooter.js.map +1 -1
- package/dist/esm/components/table/table-header/TableHeader.js.map +1 -1
- package/dist/esm/components/table/table-header/Th.js.map +1 -1
- package/dist/esm/components/table/table-last-updated/TableLastUpdated.js.map +1 -1
- package/dist/esm/components/table/table-loading/TableLoading.js.map +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.js +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.js.map +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.types.js.map +1 -1
- package/dist/esm/components/table/table-per-page/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/table-per-page/TablePerPage.types.js.map +1 -1
- package/dist/esm/components/table/table-predicate/TablePredicate.js.map +1 -1
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useClickWithLoading.js.map +1 -1
- package/dist/esm/hooks/useControlledList.js.map +1 -1
- package/dist/esm/hooks/useParentHeight.js.map +1 -1
- package/dist/esm/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/theme/PlasmaColors.js.map +1 -1
- package/dist/esm/theme/Plasmantine.js.map +1 -1
- package/dist/esm/theme/Theme.js.map +1 -1
- package/dist/esm/theme/index.js.map +1 -1
- package/dist/esm/theme/mergeCSSVariablesResolvers.js.map +1 -1
- package/dist/esm/theme/plasmaCSSVariablesResolver.js.map +1 -1
- package/dist/esm/types/css/index.d.js.map +1 -1
- package/dist/esm/utils/createFactoryComponent.js.map +1 -1
- package/dist/esm/utils/createPolymorphicComponent.js.map +1 -1
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/esm/utils/overrideComponent.js.map +1 -1
- package/dist/esm/vars/Notification.vars.js.map +1 -1
- package/dist/esm/vars/Text.vars.js.map +1 -1
- package/package.json +29 -29
- package/src/__tests__/VitestSetup.ts +1 -1
- package/src/components/sticky-footer/StickyFooter.module.css +9 -0
- package/src/components/sticky-footer/StickyFooter.tsx +8 -1
- package/src/components/table/__tests__/TablePagination.spec.tsx +22 -0
- package/src/components/table/table-pagination/TablePagination.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n Box,\n BoxProps,\n Factory,\n Group,\n Input,\n MantineSpacing,\n Stack,\n StylesApiProps,\n Tooltip,\n __InputWrapperProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The gap between the colleciton items\n *\n * @default 'xs'\n */\n gap?: MantineSpacing;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n props: CollectionProps<unknown>;\n ref: HTMLDivElement;\n stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n gap: 'xs',\n required: false,\n getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n gap,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n withAsterisk,\n description,\n descriptionProps,\n error,\n errorProps,\n getItemId,\n ref,\n\n // Style props\n style,\n className,\n classNames,\n styles,\n unstyled,\n ...others\n } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n const getStyles = useStyles<CollectionFactory>({\n name: 'Collection',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const _label = label ? (\n <Input.Label required={isRequired} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <>\n {_label}\n {_description}\n </>\n ) : null;\n\n const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftSection={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <CollectionProvider value={{getStyles}}>\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box ref={ref} {...others} {...getStyles('root')}>\n {_header}\n <Stack gap={gap}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n </CollectionProvider>\n );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","gap","required","getItemId","id","props","allowAdd","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftSection","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Stack","extend","identity"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n Box,\n BoxProps,\n Factory,\n Group,\n Input,\n MantineSpacing,\n Stack,\n StylesApiProps,\n Tooltip,\n __InputWrapperProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The gap between the colleciton items\n *\n * @default 'xs'\n */\n gap?: MantineSpacing;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n props: CollectionProps<unknown>;\n ref: HTMLDivElement;\n stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n gap: 'xs',\n required: false,\n getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n gap,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n withAsterisk,\n description,\n descriptionProps,\n error,\n errorProps,\n getItemId,\n ref,\n\n // Style props\n style,\n className,\n classNames,\n styles,\n unstyled,\n ...others\n } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n const getStyles = useStyles<CollectionFactory>({\n name: 'Collection',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const _label = label ? (\n <Input.Label required={isRequired} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <>\n {_label}\n {_description}\n </>\n ) : null;\n\n const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftSection={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <CollectionProvider value={{getStyles}}>\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box ref={ref} {...others} {...getStyles('root')}>\n {_header}\n <Stack gap={gap}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n </CollectionProvider>\n );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","gap","required","getItemId","id","props","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftSection","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Stack","extend","identity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
});
|
|
19
19
|
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
20
20
|
var _core = require("@mantine/core");
|
|
21
|
-
var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)(
|
|
21
|
+
var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)('Collection component was not found in tree'), 2);
|
|
22
22
|
var CollectionProvider = _createSafeContext[0], useCollectionContext = _createSafeContext[1];
|
|
23
23
|
|
|
24
24
|
//# sourceMappingURL=CollectionContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection';\n\ninterface CollectionContextType {\n getStyles: GetStylesApi<CollectionFactory>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n 'Collection component was not found in tree',\n);\n"],"names":["CollectionProvider","useCollectionContext","createSafeContext"],"mappings":";;;;;;;;;;;IAOcA,kBAAkB;eAAlBA;;IAAoBC,oBAAoB;eAApBA;;;;oBAPiB;IAOOC,wCAAAA,IAAAA,uBAAiB,EACvE;AADG,IAAOF,qBAA4CE,uBAAxBD,uBAAwBC"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection';\n\ninterface CollectionContextType {\n getStyles: GetStylesApi<CollectionFactory>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n 'Collection component was not found in tree',\n);\n"],"names":["CollectionProvider","useCollectionContext","createSafeContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOcA,kBAAkB;eAAlBA;;IAAoBC,oBAAoB;eAApBA;;;;oBAPiB;IAOOC,wCAAAA,IAAAA,uBAAiB,EACvE;AADG,IAAOF,qBAA4CE,uBAAxBD,uBAAwBC"}
|
|
@@ -21,7 +21,7 @@ var RemoveButton = function(param) {
|
|
|
21
21
|
var onClick = param.onClick;
|
|
22
22
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
|
|
23
23
|
style: {
|
|
24
|
-
alignSelf:
|
|
24
|
+
alignSelf: 'center'
|
|
25
25
|
},
|
|
26
26
|
variant: "subtle",
|
|
27
27
|
onClick: onClick,
|
|
@@ -44,7 +44,7 @@ var StaticCollectionItem = function(param) {
|
|
|
44
44
|
var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
|
|
45
45
|
onClick: onRemove
|
|
46
46
|
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButtonPlaceholder, {});
|
|
47
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles(
|
|
47
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles('item')), {
|
|
48
48
|
children: [
|
|
49
49
|
children,
|
|
50
50
|
removeButton
|
|
@@ -54,7 +54,7 @@ var StaticCollectionItem = function(param) {
|
|
|
54
54
|
var DisabledCollectionItem = function(param) {
|
|
55
55
|
var children = param.children;
|
|
56
56
|
var ctx = (0, _CollectionContext.useCollectionContext)();
|
|
57
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles(
|
|
57
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({}, ctx.getStyles('item')), {
|
|
58
58
|
children: children
|
|
59
59
|
}));
|
|
60
60
|
};
|
|
@@ -69,7 +69,7 @@ var DraggableCollectionItem = function(param) {
|
|
|
69
69
|
}), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
|
|
70
70
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
|
|
71
71
|
ref: setNodeRef
|
|
72
|
-
}, ctx.getStyles(
|
|
72
|
+
}, ctx.getStyles('item', {
|
|
73
73
|
style: transform ? {
|
|
74
74
|
transform: _utilities.CSS.Transform.toString(transform),
|
|
75
75
|
transition: transition
|
|
@@ -79,7 +79,7 @@ var DraggableCollectionItem = function(param) {
|
|
|
79
79
|
children: [
|
|
80
80
|
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
|
|
81
81
|
ref: setActivatorNodeRef
|
|
82
|
-
}, listeners, attributes, ctx.getStyles(
|
|
82
|
+
}, listeners, attributes, ctx.getStyles('dragHandle')), {
|
|
83
83
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize24Px, {
|
|
84
84
|
height: 16
|
|
85
85
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n id: string;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon style={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n <RemoveSize16Px height={16} />\n </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n onRemove,\n removable = true,\n children,\n}) => {\n const ctx = useCollectionContext();\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group {...ctx.getStyles('item')}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n const ctx = useCollectionContext();\n return <Group {...ctx.getStyles('item')}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n id,\n onRemove,\n removable = true,\n children,\n}) => {\n const ctx = useCollectionContext();\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n id,\n });\n\n return (\n <Group\n ref={setNodeRef}\n {...ctx.getStyles('item', {\n style: transform\n ? {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n : undefined,\n })}\n data-isdragging={isDragging}\n >\n <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n <DragAndDropSize24Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n draggable,\n disabled,\n ...otherProps\n}) => {\n if (disabled) {\n return <DisabledCollectionItem {...otherProps} />;\n }\n if (draggable) {\n return <DraggableCollectionItem {...otherProps} />;\n }\n return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","style","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","children","ctx","useCollectionContext","removeButton","Group","getStyles","DisabledCollectionItem","DraggableCollectionItem","id","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragAndDropSize24Px","draggable","disabled","otherProps"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;gCApFqC;wBACxB;yBACR;oBAC0B;iCAGT;AAanC,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC/E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIP,OAAO;YAACQ,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF;QAC1FC,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;uBAAe,qBAACJ;IAEpF,qBACI,sBAACU,WAAK,8CAAKH,IAAII,SAAS,CAAC;;YACpBL;YACAG;;;AAGb;AAEA,IAAMG,yBAA0F;QAAEN,iBAAAA;IAC9F,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,qBAAO,qBAACE,WAAK,8CAAKH,IAAII,SAAS,CAAC;kBAAUL;;AAC9C;AAEA,IAAMO,0BAA2F;QAC7FC,WAAAA,IACAV,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;SAAe;IACnF,IAAoGW,eAAAA,IAAAA,qBAAW,EAAC;QAC5GD,IAAAA;IACJ,IAFOE,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACZ,WAAK;QACFa,KAAKL;OACDX,IAAII,SAAS,CAAC,QAAQ;QACtBjB,OAAOyB,YACD;YACIA,WAAWK,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACP;YAClCC,YAAAA;QACJ,IACAO;IACV;QACAC,mBAAiBP;;0BAEjB,qBAACpB;gBAAIsB,KAAKD;eAAyBL,WAAeD,YAAgBT,IAAII,SAAS,CAAC;0BAC5E,cAAA,qBAACkB,qCAAmB;oBAAC9B,QAAQ;;;YAEhCO;YACAG;;;AAGb;AAEO,IAAMnB,iBAA4E;QACrFwC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACnB,6CAA2BoB;IACvC;IACA,IAAIF,WAAW;QACX,qBAAO,qBAACjB,8CAA4BmB;IACxC;IACA,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n id: string;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon style={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n <RemoveSize16Px height={16} />\n </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n onRemove,\n removable = true,\n children,\n}) => {\n const ctx = useCollectionContext();\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group {...ctx.getStyles('item')}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n const ctx = useCollectionContext();\n return <Group {...ctx.getStyles('item')}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n id,\n onRemove,\n removable = true,\n children,\n}) => {\n const ctx = useCollectionContext();\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n id,\n });\n\n return (\n <Group\n ref={setNodeRef}\n {...ctx.getStyles('item', {\n style: transform\n ? {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n : undefined,\n })}\n data-isdragging={isDragging}\n >\n <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n <DragAndDropSize24Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n draggable,\n disabled,\n ...otherProps\n}) => {\n if (disabled) {\n return <DisabledCollectionItem {...otherProps} />;\n }\n if (draggable) {\n return <DraggableCollectionItem {...otherProps} />;\n }\n return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","style","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","children","ctx","useCollectionContext","removeButton","Group","getStyles","DisabledCollectionItem","DraggableCollectionItem","id","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragAndDropSize24Px","draggable","disabled","otherProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;gCApFqC;wBACxB;yBACR;oBAC0B;iCAGT;AAanC,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC/E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIP,OAAO;YAACQ,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF;QAC1FC,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;uBAAe,qBAACJ;IAEpF,qBACI,sBAACU,WAAK,8CAAKH,IAAII,SAAS,CAAC;;YACpBL;YACAG;;;AAGb;AAEA,IAAMG,yBAA0F;QAAEN,iBAAAA;IAC9F,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,qBAAO,qBAACE,WAAK,8CAAKH,IAAII,SAAS,CAAC;kBAAUL;;AAC9C;AAEA,IAAMO,0BAA2F;QAC7FC,WAAAA,IACAV,iBAAAA,mCACAC,WAAAA,0CAAY,yBACZC,iBAAAA;IAEA,IAAMC,MAAMC,IAAAA,uCAAoB;IAChC,IAAMC,eAAeJ,aAAaD,yBAAW,qBAACb;QAAaC,SAASY;SAAe;IACnF,IAAoGW,eAAAA,IAAAA,qBAAW,EAAC;QAC5GD,IAAAA;IACJ,IAFOE,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACZ,WAAK;QACFa,KAAKL;OACDX,IAAII,SAAS,CAAC,QAAQ;QACtBjB,OAAOyB,YACD;YACIA,WAAWK,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACP;YAClCC,YAAAA;QACJ,IACAO;IACV;QACAC,mBAAiBP;;0BAEjB,qBAACpB;gBAAIsB,KAAKD;eAAyBL,WAAeD,YAAgBT,IAAII,SAAS,CAAC;0BAC5E,cAAA,qBAACkB,qCAAmB;oBAAC9B,QAAQ;;;YAEhCO;YACAG;;;AAGb;AAEO,IAAMnB,iBAA4E;QACrFwC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACnB,6CAA2BoB;IACvC;IACA,IAAIF,WAAW;QACX,qBAAO,qBAACjB,8CAA4BmB;IACxC;IACA,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/enhanceWithCollectionProps.ts"],"sourcesContent":["import {UseFormInput} from '@mantine/form';\nimport {CollectionProps} from './Collection';\n\nexport const enhanceWithCollectionProps = <FormValues>(\n payload: Parameters<UseFormInput<FormValues>['enhanceGetInputProps']>[0],\n field: (typeof payload)['field'],\n): Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'> => {\n if (payload.field === field) {\n return {\n onReorderItem: (reorderPayload: Record<'from' | 'to', number>) =>\n payload.form.reorderListItem(field, reorderPayload),\n onRemoveItem: (index: number) => payload.form.removeListItem(field, index),\n onInsertItem: (valueToInsert: unknown, index: number) =>\n payload.form.insertListItem(field, valueToInsert, index),\n };\n }\n\n return {};\n};\n"],"names":["enhanceWithCollectionProps","payload","field","onReorderItem","reorderPayload","form","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":";;;;+BAGaA;;;eAAAA;;;AAAN,IAAMA,6BAA6B,SACtCC,SACAC;IAEA,IAAID,QAAQC,KAAK,KAAKA,OAAO;QACzB,OAAO;YACHC,eAAe,SAACC;uBACZH,QAAQI,IAAI,CAACC,eAAe,CAACJ,OAAOE;;YACxCG,cAAc,SAACC;uBAAkBP,QAAQI,IAAI,CAACI,cAAc,CAACP,OAAOM;;YACpEE,cAAc,SAACC,eAAwBH;uBACnCP,QAAQI,IAAI,CAACO,cAAc,CAACV,OAAOS,eAAeH;;QAC1D;IACJ;IAEA,OAAO,CAAC;AACZ"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/enhanceWithCollectionProps.ts"],"sourcesContent":["import {UseFormInput} from '@mantine/form';\nimport {CollectionProps} from './Collection';\n\nexport const enhanceWithCollectionProps = <FormValues>(\n payload: Parameters<UseFormInput<FormValues>['enhanceGetInputProps']>[0],\n field: (typeof payload)['field'],\n): Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'> => {\n if (payload.field === field) {\n return {\n onReorderItem: (reorderPayload: Record<'from' | 'to', number>) =>\n payload.form.reorderListItem(field, reorderPayload),\n onRemoveItem: (index: number) => payload.form.removeListItem(field, index),\n onInsertItem: (valueToInsert: unknown, index: number) =>\n payload.form.insertListItem(field, valueToInsert, index),\n };\n }\n\n return {};\n};\n"],"names":["enhanceWithCollectionProps","payload","field","onReorderItem","reorderPayload","form","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGaA;;;eAAAA;;;AAAN,IAAMA,6BAA6B,SACtCC,SACAC;IAEA,IAAID,QAAQC,KAAK,KAAKA,OAAO;QACzB,OAAO;YACHC,eAAe,SAACC;uBACZH,QAAQI,IAAI,CAACC,eAAe,CAACJ,OAAOE;;YACxCG,cAAc,SAACC;uBAAkBP,QAAQI,IAAI,CAACI,cAAc,CAACP,OAAOM;;YACpEE,cAAc,SAACC,eAAwBH;uBACnCP,QAAQI,IAAI,CAACO,cAAc,CAACV,OAAOS,eAAeH;;QAC1D;IACJ;IAEA,OAAO,CAAC;AACZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\nexport {enhanceWithCollectionProps} from './enhanceWithCollectionProps';\n"],"names":["enhanceWithCollectionProps"],"mappings":";;;;+BACQA;;;eAAAA,sDAA0B;;;;uBADpB;0CAC2B"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\nexport {enhanceWithCollectionProps} from './enhanceWithCollectionProps';\n"],"names":["enhanceWithCollectionProps"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BACQA;;;eAAAA,sDAA0B;;;;uBADpB;0CAC2B"}
|
|
@@ -21,14 +21,13 @@ var CopyToClipboardButton = function(param) {
|
|
|
21
21
|
children: function(param) {
|
|
22
22
|
var copied = param.copied, copy = param.copy;
|
|
23
23
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
|
|
24
|
-
label: copied ?
|
|
24
|
+
label: copied ? 'Copied' : 'Copy',
|
|
25
25
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
|
|
26
26
|
variant: "subtle",
|
|
27
|
-
color: copied ?
|
|
27
|
+
color: copied ? 'success' : 'gray',
|
|
28
28
|
onClick: function() {
|
|
29
|
-
var _onCopy;
|
|
30
29
|
copy();
|
|
31
|
-
|
|
30
|
+
onCopy === null || onCopy === void 0 ? void 0 : onCopy();
|
|
32
31
|
},
|
|
33
32
|
children: copied ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {
|
|
34
33
|
height: 16
|
|
@@ -46,7 +45,7 @@ var CopyToClipboard = function(_param) {
|
|
|
46
45
|
]);
|
|
47
46
|
return withLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, {
|
|
48
47
|
classNames: {
|
|
49
|
-
input:
|
|
48
|
+
input: 'var(--mantine-color-gray-7)'
|
|
50
49
|
},
|
|
51
50
|
value: others.value,
|
|
52
51
|
readOnly: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n /**\n * Called each time the value is copied to the clipboard\n */\n onCopy?: () => void;\n}\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'}>\n <ActionIcon\n variant=\"subtle\"\n color={copied ? 'success' : 'gray'}\n onClick={() => {\n copy();\n onCopy?.();\n }}\n >\n {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n withLabel ? (\n <TextInput\n classNames={{input: 'var(--mantine-color-gray-7)'}}\n value={others.value}\n readOnly\n autoComplete=\"off\"\n rightSection={<CopyToClipboardButton {...others} />}\n />\n ) : (\n <CopyToClipboardButton {...others} />\n );\n"],"names":["CopyToClipboard","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","variant","color","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","TextInput","classNames","input","readOnly","autoComplete","rightSection"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;gCAvC6B;oBACe;AAmBzD,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW;0BAChC,cAAA,qBAACI,gBAAU;oBACPC,SAAQ;oBACRC,OAAON,SAAS,YAAY;oBAC5BO,SAAS;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n /**\n * Called each time the value is copied to the clipboard\n */\n onCopy?: () => void;\n}\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'}>\n <ActionIcon\n variant=\"subtle\"\n color={copied ? 'success' : 'gray'}\n onClick={() => {\n copy();\n onCopy?.();\n }}\n >\n {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n withLabel ? (\n <TextInput\n classNames={{input: 'var(--mantine-color-gray-7)'}}\n value={others.value}\n readOnly\n autoComplete=\"off\"\n rightSection={<CopyToClipboardButton {...others} />}\n />\n ) : (\n <CopyToClipboardButton {...others} />\n );\n"],"names":["CopyToClipboard","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","variant","color","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","TextInput","classNames","input","readOnly","autoComplete","rightSection"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuCaA;;;eAAAA;;;;;;gCAvC6B;oBACe;AAmBzD,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW;0BAChC,cAAA,qBAACI,gBAAU;oBACPC,SAAQ;oBACRC,OAAON,SAAS,YAAY;oBAC5BO,SAAS;wBACLN;wBACAJ,mBAAAA,6BAAAA;oBACJ;8BAECG,uBAAS,qBAACQ,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;;;;;;;AAO7E,IAAMf,kBAAiE;QAAEiB,mBAAAA,WAAcC;QAAdD;;WAC5EA,0BACI,qBAACE,eAAS;QACNC,YAAY;YAACC,OAAO;QAA6B;QACjDnB,OAAOgB,OAAOhB,KAAK;QACnBoB,QAAQ;QACRC,cAAa;QACbC,4BAAc,qBAACvB,4CAA0BiB;uBAG7C,qBAACjB,4CAA0BiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/copyToClipboard/index.ts"],"sourcesContent":["export * from './CopyToClipboard';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/copyToClipboard/index.ts"],"sourcesContent":["export * from './CopyToClipboard';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
@@ -26,7 +26,7 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
26
26
|
dates: initialRange
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
var calendarInputProps = form.getInputProps(
|
|
29
|
+
var calendarInputProps = form.getInputProps('dates');
|
|
30
30
|
var onCalendarApply = function() {
|
|
31
31
|
if (!form.values.dates[1]) {
|
|
32
32
|
form.values.dates[1] = form.values.dates[0]; // when date range is the same day
|
|
@@ -76,7 +76,7 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
76
76
|
type: "range",
|
|
77
77
|
styles: {
|
|
78
78
|
day: {
|
|
79
|
-
textAlign:
|
|
79
|
+
textAlign: 'center'
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
firstDayOfWeek: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /**\n * Initial selected range\n */\n initialRange: DateRangePickerValue;\n /**\n * Function called when the user applies the new date range\n *\n * @param range the newly selected dates\n */\n onApply: (range: DateRangePickerValue) => void;\n /**\n * Function called when the user click on the cancel button\n */\n onCancel: () => void;\n /**\n * The presets to display\n *\n * @default {}\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n */\n presets?: Record<string, DateRangePickerPreset>;\n /**\n * Props for RangeCalendar displayed in the popover\n */\n rangeCalendarProps?: Omit<\n DatePickerBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n initialRange,\n onApply,\n onCancel,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n const form = useForm({\n initialValues: {\n dates: initialRange,\n },\n });\n const calendarInputProps = form.getInputProps('dates');\n\n const onCalendarApply = () => {\n if (!form.values.dates[1]) {\n form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n }\n onApply(form.values.dates);\n };\n\n return (\n <>\n <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n <EditableDateRangePicker\n value={calendarInputProps.value}\n {...calendarInputProps}\n startProps={startProps}\n endProps={endProps}\n />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect\n value={calendarInputProps.value}\n presets={presets}\n {...calendarInputProps}\n selectProps={{comboboxProps: {withinPortal: false}}}\n />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <DatePicker\n numberOfColumns={2}\n type=\"range\"\n styles={{day: {textAlign: 'center'}}}\n firstDayOfWeek={0}\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n />\n </Center>\n\n <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","Group","align","gap","grow","px","py","className","DateRangeClasses","picker","EditableDateRangePicker","value","Space","w","DateRangePickerPresetSelect","selectProps","comboboxProps","withinPortal","Center","DatePicker","numberOfColumns","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Button","variant","size","onClick"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;oBA9CsB;qBACW;oBACxB;sBAED;2EACQ;2CACoC;uCACG;AAuC7D,IAAMA,gCAAgC;QACzCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,kBAAkB;QACpB,IAAI,CAACN,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF;QACAT,QAAQM,KAAKO,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,sBAACK,WAAK;gBAACC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACC,MAAM;;kCAClF,qBAACC,gDAAuB;wBACpBC,OAAOd,mBAAmBc,KAAK;uBAC3Bd;wBACJP,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,qBAACuB,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCACxBH,OAAOd,mBAAmBc,KAAK;gCAC/BtB,SAASA;+BACLQ;gCACJkB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,qBAACC,YAAM;gBAACZ,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACc,iBAAU;oBACPC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;mBAClBlC,oBACAK;;0BAIZ,sBAACI,WAAK;gBAAC0B,SAAQ;gBAAQxB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACoB,IAAI;;kCAC5E,qBAACC,cAAM;wBAACC,SAAQ;wBAAUC,MAAK;wBAAKC,SAAS5C;kCAAU;;kCAGvD,qBAACyC,cAAM;wBAACE,MAAK;wBAAKC,SAASjC;kCAAiB;;;;;;AAM5D"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /**\n * Initial selected range\n */\n initialRange: DateRangePickerValue;\n /**\n * Function called when the user applies the new date range\n *\n * @param range the newly selected dates\n */\n onApply: (range: DateRangePickerValue) => void;\n /**\n * Function called when the user click on the cancel button\n */\n onCancel: () => void;\n /**\n * The presets to display\n *\n * @default {}\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n */\n presets?: Record<string, DateRangePickerPreset>;\n /**\n * Props for RangeCalendar displayed in the popover\n */\n rangeCalendarProps?: Omit<\n DatePickerBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n initialRange,\n onApply,\n onCancel,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n const form = useForm({\n initialValues: {\n dates: initialRange,\n },\n });\n const calendarInputProps = form.getInputProps('dates');\n\n const onCalendarApply = () => {\n if (!form.values.dates[1]) {\n form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n }\n onApply(form.values.dates);\n };\n\n return (\n <>\n <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n <EditableDateRangePicker\n value={calendarInputProps.value}\n {...calendarInputProps}\n startProps={startProps}\n endProps={endProps}\n />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect\n value={calendarInputProps.value}\n presets={presets}\n {...calendarInputProps}\n selectProps={{comboboxProps: {withinPortal: false}}}\n />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <DatePicker\n numberOfColumns={2}\n type=\"range\"\n styles={{day: {textAlign: 'center'}}}\n firstDayOfWeek={0}\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n />\n </Center>\n\n <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","Group","align","gap","grow","px","py","className","DateRangeClasses","picker","EditableDateRangePicker","value","Space","w","DateRangePickerPresetSelect","selectProps","comboboxProps","withinPortal","Center","DatePicker","numberOfColumns","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Button","variant","size","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;oBA9CsB;qBACW;oBACxB;sBAED;2EACQ;2CACoC;uCACG;AAuC7D,IAAMA,gCAAgC;QACzCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,kBAAkB;QACpB,IAAI,CAACN,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF;QACAT,QAAQM,KAAKO,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,sBAACK,WAAK;gBAACC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACC,MAAM;;kCAClF,qBAACC,gDAAuB;wBACpBC,OAAOd,mBAAmBc,KAAK;uBAC3Bd;wBACJP,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,qBAACuB,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCACxBH,OAAOd,mBAAmBc,KAAK;gCAC/BtB,SAASA;+BACLQ;gCACJkB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,qBAACC,YAAM;gBAACZ,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACc,iBAAU;oBACPC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;mBAClBlC,oBACAK;;0BAIZ,sBAACI,WAAK;gBAAC0B,SAAQ;gBAAQxB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACoB,IAAI;;kCAC5E,qBAACC,cAAM;wBAACC,SAAQ;wBAAUC,MAAK;wBAAKC,SAAS5C;kCAAU;;kCAGvD,qBAACyC,cAAM;wBAACE,MAAK;wBAAKC,SAASjC;kCAAiB;;;;;;AAM5D"}
|
|
@@ -33,8 +33,7 @@ var DateRangePickerPopoverCalendar = function(param) {
|
|
|
33
33
|
]
|
|
34
34
|
}), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
|
|
35
35
|
var onCalendarChange = function(dates) {
|
|
36
|
-
|
|
37
|
-
(_handleChange = handleChange) === null || _handleChange === void 0 ? void 0 : _handleChange(dates);
|
|
36
|
+
handleChange === null || handleChange === void 0 ? void 0 : handleChange(dates);
|
|
38
37
|
if (dates[1] !== null) {
|
|
39
38
|
setOpened(false);
|
|
40
39
|
}
|
|
@@ -77,7 +76,7 @@ var DateRangePickerPopoverCalendar = function(param) {
|
|
|
77
76
|
type: "range",
|
|
78
77
|
styles: {
|
|
79
78
|
day: {
|
|
80
|
-
textAlign:
|
|
79
|
+
textAlign: 'center'
|
|
81
80
|
}
|
|
82
81
|
},
|
|
83
82
|
numberOfColumns: 2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /** Default value for uncontrolled input */\n defaultValue?: DateRangePickerValue;\n /** Value for controlled input */\n value?: DateRangePickerValue;\n /** onChange value for controlled input */\n onChange?(value: DateRangePickerValue): void;\n /**\n * The presets to display\n *\n * @default {}\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n */\n presets?: Record<string, DateRangePickerPreset>;\n\n /**\n * Props for RangeCalendar\n */\n rangeCalendarProps?: Omit<\n CalendarBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n presets,\n value,\n defaultValue,\n onChange,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n const [opened, setOpened] = useState(false);\n const ref = useClickOutside(() => setOpened(false));\n\n const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n value,\n defaultValue,\n onChange,\n finalValue: [null, null],\n });\n\n const onCalendarChange = (dates: DateRangePickerValue) => {\n handleChange?.(dates);\n if (dates[1] !== null) {\n setOpened(false);\n }\n };\n\n return (\n <>\n <Group align=\"center\">\n <EditableDateRangePicker\n value={_value}\n onChange={handleChange}\n onFocus={() => setOpened(true)}\n startProps={startProps}\n endProps={endProps}\n />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n </>\n ) : null}\n </Group>\n\n <Popover opened={opened} onChange={setOpened} trapFocus>\n <Popover.Dropdown>\n <DatePicker\n ref={ref}\n type=\"range\"\n styles={{day: {textAlign: 'center'}}}\n numberOfColumns={2}\n firstDayOfWeek={0}\n allowSingleDateInRange\n value={_value}\n onChange={onCalendarChange}\n {...rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","useState","opened","setOpened","ref","useClickOutside","useUncontrolled","finalValue","_value","handleChange","onCalendarChange","dates","Group","align","EditableDateRangePicker","onFocus","Space","w","DateRangePickerPresetSelect","Popover","trapFocus","Dropdown","DatePicker","type","styles","day","textAlign","numberOfColumns","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;oBArCuB;qBACQ;qBACG;qBACxB;2CAG0C;uCACG;AA8B7D,IAAMA,iCAAiC;QAC1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAMG,MAAMC,IAAAA,sBAAe,EAAC;eAAMF,UAAU;;IAE5C,IAA+BG,sCAAAA,IAAAA,sBAAe,EAAuB;QACjEX,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAU,YAAY;YAAC;YAAM;SAAK;IAC5B,QALOC,SAAwBF,qBAAhBG,eAAgBH;IAO/B,IAAMI,mBAAmB,SAACC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /** Default value for uncontrolled input */\n defaultValue?: DateRangePickerValue;\n /** Value for controlled input */\n value?: DateRangePickerValue;\n /** onChange value for controlled input */\n onChange?(value: DateRangePickerValue): void;\n /**\n * The presets to display\n *\n * @default {}\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n */\n presets?: Record<string, DateRangePickerPreset>;\n\n /**\n * Props for RangeCalendar\n */\n rangeCalendarProps?: Omit<\n CalendarBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n presets,\n value,\n defaultValue,\n onChange,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n const [opened, setOpened] = useState(false);\n const ref = useClickOutside(() => setOpened(false));\n\n const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n value,\n defaultValue,\n onChange,\n finalValue: [null, null],\n });\n\n const onCalendarChange = (dates: DateRangePickerValue) => {\n handleChange?.(dates);\n if (dates[1] !== null) {\n setOpened(false);\n }\n };\n\n return (\n <>\n <Group align=\"center\">\n <EditableDateRangePicker\n value={_value}\n onChange={handleChange}\n onFocus={() => setOpened(true)}\n startProps={startProps}\n endProps={endProps}\n />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n </>\n ) : null}\n </Group>\n\n <Popover opened={opened} onChange={setOpened} trapFocus>\n <Popover.Dropdown>\n <DatePicker\n ref={ref}\n type=\"range\"\n styles={{day: {textAlign: 'center'}}}\n numberOfColumns={2}\n firstDayOfWeek={0}\n allowSingleDateInRange\n value={_value}\n onChange={onCalendarChange}\n {...rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","useState","opened","setOpened","ref","useClickOutside","useUncontrolled","finalValue","_value","handleChange","onCalendarChange","dates","Group","align","EditableDateRangePicker","onFocus","Space","w","DateRangePickerPresetSelect","Popover","trapFocus","Dropdown","DatePicker","type","styles","day","textAlign","numberOfColumns","firstDayOfWeek","allowSingleDateInRange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCaA;;;eAAAA;;;;;;oBArCuB;qBACQ;qBACG;qBACxB;2CAG0C;uCACG;AA8B7D,IAAMA,iCAAiC;QAC1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,YAA9BC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAMG,MAAMC,IAAAA,sBAAe,EAAC;eAAMF,UAAU;;IAE5C,IAA+BG,sCAAAA,IAAAA,sBAAe,EAAuB;QACjEX,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAU,YAAY;YAAC;YAAM;SAAK;IAC5B,QALOC,SAAwBF,qBAAhBG,eAAgBH;IAO/B,IAAMI,mBAAmB,SAACC;QACtBF,yBAAAA,mCAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBR,UAAU;QACd;IACJ;IAEA,qBACI;;0BACI,sBAACS,WAAK;gBAACC,OAAM;;kCACT,qBAACC,gDAAuB;wBACpBnB,OAAOa;wBACPX,UAAUY;wBACVM,SAAS;mCAAMZ,UAAU;;wBACzBL,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,qBAACsB,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCAACxB,SAASA;gCAASC,OAAOa;gCAAQX,UAAUY;;;yBAE5E;;;0BAGR,qBAACU,aAAO;gBAACjB,QAAQA;gBAAQL,UAAUM;gBAAWiB,SAAS;0BACnD,cAAA,qBAACD,aAAO,CAACE,QAAQ;8BACb,cAAA,qBAACC,iBAAU;wBACPlB,KAAKA;wBACLmB,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtBlC,OAAOa;wBACPX,UAAUa;uBACNV;;;;;AAM5B"}
|
|
@@ -47,9 +47,8 @@ var DateRangePickerPresetSelect = function(param) {
|
|
|
47
47
|
value
|
|
48
48
|
]);
|
|
49
49
|
var onChangePreset = function(presetId) {
|
|
50
|
-
var _onChange;
|
|
51
50
|
var range = presets[presetId].range;
|
|
52
|
-
|
|
51
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(range);
|
|
53
52
|
};
|
|
54
53
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Select, _object_spread_props._(_object_spread._({
|
|
55
54
|
label: "Date range",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n label: string;\n range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n presets: Record<string, DateRangePickerPreset>;\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n presets,\n value,\n onChange,\n selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n const getSelectedPreset = () => {\n if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n const selected = Object.entries(presets).find(\n ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),\n );\n if (selected) {\n return selected[0];\n }\n }\n return null;\n };\n\n const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n useEffect(() => {\n const newPreset = getSelectedPreset();\n if (newPreset !== selectedPreset) {\n setSelectedPreset(newPreset);\n }\n }, [value]);\n\n const onChangePreset = (presetId: keyof typeof presets) => {\n const range = presets[presetId].range as any;\n onChange?.(range);\n };\n\n return (\n <Select\n label=\"Date range\"\n placeholder=\"Select a date range\"\n {...selectProps}\n value={selectedPreset}\n onChange={onChangePreset}\n data={selectData}\n maxDropdownHeight={240}\n />\n );\n};\n"],"names":["DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","dayjs","unix","selected","find","id","range","isSame","useState","selectedPreset","setSelectedPreset","useEffect","newPreset","onChangePreset","presetId","Select","placeholder","data","maxDropdownHeight"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;;oBAjBmC;8DAC9B;qBACgB;AAe3B,IAAMA,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;mDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEtG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,OAAOD,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,IAAI;YAC7F,IAAMC,WAAWR,OAAOC,OAAO,CAACN,SAASc,IAAI,CACzC;2DAAEC,gBAAI,AAACC,kBAAAA;uBAAYL,IAAAA,cAAK,EAACK,KAAK,CAAC,EAAE,EAAGC,MAAM,CAAChB,KAAK,CAAC,EAAE,KAAKU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAGgB,MAAM,CAAChB,KAAK,CAAC,EAAE;;YAE5F,IAAIY,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4CK,+BAAAA,IAAAA,eAAQ,EAAgBR,0BAA7DS,iBAAqCD,cAArBE,oBAAqBF;IAE5CG,IAAAA,gBAAS,EAAC;QACN,IAAMC,YAAYZ;QAClB,IAAIY,cAAcH,gBAAgB;YAC9BC,kBAAkBE;QACtB;IACJ,GAAG;QAACrB;KAAM;IAEV,IAAMsB,iBAAiB,SAACC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n label: string;\n range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n presets: Record<string, DateRangePickerPreset>;\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n presets,\n value,\n onChange,\n selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n const getSelectedPreset = () => {\n if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n const selected = Object.entries(presets).find(\n ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),\n );\n if (selected) {\n return selected[0];\n }\n }\n return null;\n };\n\n const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n useEffect(() => {\n const newPreset = getSelectedPreset();\n if (newPreset !== selectedPreset) {\n setSelectedPreset(newPreset);\n }\n }, [value]);\n\n const onChangePreset = (presetId: keyof typeof presets) => {\n const range = presets[presetId].range as any;\n onChange?.(range);\n };\n\n return (\n <Select\n label=\"Date range\"\n placeholder=\"Select a date range\"\n {...selectProps}\n value={selectedPreset}\n onChange={onChangePreset}\n data={selectData}\n maxDropdownHeight={240}\n />\n );\n};\n"],"names":["DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","dayjs","unix","selected","find","id","range","isSame","useState","selectedPreset","setSelectedPreset","useEffect","newPreset","onChangePreset","presetId","Select","placeholder","data","maxDropdownHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;;oBAjBmC;8DAC9B;qBACgB;AAe3B,IAAMA,8BAA8B;QACvCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;mDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEtG,IAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,OAAOD,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAEW,IAAI,IAAI;YAC7F,IAAMC,WAAWR,OAAOC,OAAO,CAACN,SAASc,IAAI,CACzC;2DAAEC,gBAAI,AAACC,kBAAAA;uBAAYL,IAAAA,cAAK,EAACK,KAAK,CAAC,EAAE,EAAGC,MAAM,CAAChB,KAAK,CAAC,EAAE,KAAKU,IAAAA,cAAK,EAACV,KAAK,CAAC,EAAE,EAAGgB,MAAM,CAAChB,KAAK,CAAC,EAAE;;YAE5F,IAAIY,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,IAA4CK,+BAAAA,IAAAA,eAAQ,EAAgBR,0BAA7DS,iBAAqCD,cAArBE,oBAAqBF;IAE5CG,IAAAA,gBAAS,EAAC;QACN,IAAMC,YAAYZ;QAClB,IAAIY,cAAcH,gBAAgB;YAC9BC,kBAAkBE;QACtB;IACJ,GAAG;QAACrB;KAAM;IAEV,IAAMsB,iBAAiB,SAACC;QACpB,IAAMR,QAAQhB,OAAO,CAACwB,SAAS,CAACR,KAAK;QACrCd,qBAAAA,+BAAAA,SAAWc;IACf;IAEA,qBACI,qBAACS,YAAM;QACHhB,OAAM;QACNiB,aAAY;OACRvB;QACJF,OAAOkB;QACPjB,UAAUqB;QACVI,MAAMvB;QACNwB,mBAAmB;;AAG/B"}
|
|
@@ -15,19 +15,16 @@ var _dates = require("@mantine/dates");
|
|
|
15
15
|
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
|
|
16
16
|
var EditableDateRangePicker = function(param) {
|
|
17
17
|
var value = param.value, onChange = param.onChange, onFocus = param.onFocus, _param_startProps = param.startProps, startProps = _param_startProps === void 0 ? {} : _param_startProps, _param_endProps = param.endProps, endProps = _param_endProps === void 0 ? {} : _param_endProps;
|
|
18
|
-
var _value, _value1;
|
|
19
18
|
var onChangeStart = function(date) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
(_value = value) === null || _value === void 0 ? void 0 : _value[1]
|
|
19
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([
|
|
20
|
+
(0, _dayjs.default)(date).startOf('day').toDate(),
|
|
21
|
+
value === null || value === void 0 ? void 0 : value[1]
|
|
24
22
|
]);
|
|
25
23
|
};
|
|
26
24
|
var onChangeEnd = function(date) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
(
|
|
30
|
-
(0, _dayjs.default)(date).endOf("day").toDate()
|
|
25
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([
|
|
26
|
+
value === null || value === void 0 ? void 0 : value[0],
|
|
27
|
+
(0, _dayjs.default)(date).endOf('day').toDate()
|
|
31
28
|
]);
|
|
32
29
|
};
|
|
33
30
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
@@ -35,13 +32,13 @@ var EditableDateRangePicker = function(param) {
|
|
|
35
32
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, {
|
|
36
33
|
clearable: false,
|
|
37
34
|
label: "Start",
|
|
38
|
-
value:
|
|
35
|
+
value: value === null || value === void 0 ? void 0 : value[0],
|
|
39
36
|
onChange: onChangeStart,
|
|
40
37
|
onFocus: onFocus,
|
|
41
38
|
popoverProps: {
|
|
42
39
|
styles: {
|
|
43
40
|
dropdown: {
|
|
44
|
-
display:
|
|
41
|
+
display: 'none'
|
|
45
42
|
}
|
|
46
43
|
}
|
|
47
44
|
},
|
|
@@ -50,13 +47,13 @@ var EditableDateRangePicker = function(param) {
|
|
|
50
47
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, {
|
|
51
48
|
clearable: false,
|
|
52
49
|
label: "End",
|
|
53
|
-
value:
|
|
50
|
+
value: value === null || value === void 0 ? void 0 : value[1],
|
|
54
51
|
onChange: onChangeEnd,
|
|
55
52
|
onFocus: onFocus,
|
|
56
53
|
popoverProps: {
|
|
57
54
|
styles: {
|
|
58
55
|
dropdown: {
|
|
59
|
-
display:
|
|
56
|
+
display: 'none'
|
|
60
57
|
}
|
|
61
58
|
}
|
|
62
59
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: Date) => {\n onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n };\n const onChangeEnd = (date: Date) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...startProps.styles}}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","dayjs","startOf","toDate","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;qBAlB4B;8DACvB;AAiBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,mCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: Date) => {\n onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n };\n const onChangeEnd = (date: Date) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...startProps.styles}}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","dayjs","startOf","toDate","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;;;qBAlB4B;8DACvB;AAiBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,mCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,SAACC;QACnBL,qBAAAA,+BAAAA,SAAW;YAACM,IAAAA,cAAK,EAACD,MAAME,OAAO,CAAC,OAAOC,MAAM;YAAIT,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;SAAC;IAChE;IACA,IAAMU,cAAc,SAACJ;QACjBL,qBAAAA,+BAAAA,SAAW;YAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;YAAEO,IAAAA,cAAK,EAACD,MAAMK,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,qBAACG,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,qBAAIb,WAAWa,MAAM;;0BAEjC,qBAACJ,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,qBAAIZ,SAASY,MAAM;;;;AAI3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["export * from './DateRangePickerInlineCalendar';\nexport * from './DateRangePickerPopoverCalendar';\nexport * from './DateRangePickerPresetSelect';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["export * from './DateRangePickerInlineCalendar';\nexport * from './DateRangePickerPopoverCalendar';\nexport * from './DateRangePickerPresetSelect';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}
|
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
});
|
|
19
19
|
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
20
20
|
var _core = require("@mantine/core");
|
|
21
|
-
var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)(
|
|
21
|
+
var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)('Header component was not found in tree'), 2);
|
|
22
22
|
var HeaderProvider = _createSafeContext[0], useHeaderContext = _createSafeContext[1];
|
|
23
23
|
|
|
24
24
|
//# sourceMappingURL=Header.context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/header/Header.context.ts"],"sourcesContent":["import {GetStylesApi, createSafeContext} from '@mantine/core';\nimport type {HeaderFactory} from './Header';\n\nexport interface HeaderContextValue {\n getStyles: GetStylesApi<HeaderFactory>;\n}\n\nexport const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(\n 'Header component was not found in tree',\n);\n"],"names":["HeaderProvider","useHeaderContext","createSafeContext"],"mappings":";;;;;;;;;;;IAOcA,cAAc;eAAdA;;IAAgBC,gBAAgB;eAAhBA;;;;oBAPgB;IAOIC,wCAAAA,IAAAA,uBAAiB,EAC/D;AADG,IAAOF,iBAAoCE,uBAApBD,mBAAoBC"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/header/Header.context.ts"],"sourcesContent":["import {GetStylesApi, createSafeContext} from '@mantine/core';\nimport type {HeaderFactory} from './Header';\n\nexport interface HeaderContextValue {\n getStyles: GetStylesApi<HeaderFactory>;\n}\n\nexport const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(\n 'Header component was not found in tree',\n);\n"],"names":["HeaderProvider","useHeaderContext","createSafeContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOcA,cAAc;eAAdA;;IAAgBC,gBAAgB;eAAhBA;;;;oBAPgB;IAOIC,wCAAAA,IAAAA,uBAAiB,EAC/D;AADG,IAAOF,iBAAoCE,uBAApBD,mBAAoBC"}
|
|
@@ -21,12 +21,12 @@ var _HeaderActions = require("./HeaderActions/HeaderActions");
|
|
|
21
21
|
var _HeaderBreadcrumbs = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
|
|
22
22
|
var _HeaderDocAnchor = require("./HeaderDocAnchor/HeaderDocAnchor");
|
|
23
23
|
var defaultProps = {
|
|
24
|
-
variant:
|
|
25
|
-
justify:
|
|
26
|
-
wrap:
|
|
24
|
+
variant: 'primary',
|
|
25
|
+
justify: 'space-between',
|
|
26
|
+
wrap: 'nowrap'
|
|
27
27
|
};
|
|
28
28
|
var Header = (0, _core.factory)(function(_props, ref) {
|
|
29
|
-
var props = (0, _core.useProps)(
|
|
29
|
+
var props = (0, _core.useProps)('PlasmaHeader', defaultProps, _props);
|
|
30
30
|
var className = props.className, description = props.description, borderBottom = props.borderBottom, variant = props.variant, children = props.children, style = props.style, classNames = props.classNames, unstyled = props.unstyled, vars = props.vars, styles = props.styles, others = _object_without_properties._(props, [
|
|
31
31
|
"className",
|
|
32
32
|
"description",
|
|
@@ -40,7 +40,7 @@ var Header = (0, _core.factory)(function(_props, ref) {
|
|
|
40
40
|
"styles"
|
|
41
41
|
]);
|
|
42
42
|
var getStyles = (0, _core.useStyles)({
|
|
43
|
-
name:
|
|
43
|
+
name: 'PlasmaHeader',
|
|
44
44
|
props: props,
|
|
45
45
|
classes: _Headermodulecss.default,
|
|
46
46
|
className: className,
|
|
@@ -75,7 +75,7 @@ var Header = (0, _core.factory)(function(_props, ref) {
|
|
|
75
75
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
|
|
76
76
|
ref: ref,
|
|
77
77
|
variant: variant
|
|
78
|
-
}, getStyles(
|
|
78
|
+
}, getStyles('root'), others), {
|
|
79
79
|
children: [
|
|
80
80
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
|
|
81
81
|
gap: 0,
|
|
@@ -83,15 +83,15 @@ var Header = (0, _core.factory)(function(_props, ref) {
|
|
|
83
83
|
breadcrumbs,
|
|
84
84
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Title, _object_spread_props._(_object_spread._({
|
|
85
85
|
variant: variant,
|
|
86
|
-
order: variant ===
|
|
87
|
-
}, getStyles(
|
|
86
|
+
order: variant === 'primary' ? 1 : 3
|
|
87
|
+
}, getStyles('title', stylesApiProps)), {
|
|
88
88
|
children: [
|
|
89
89
|
otherChildren,
|
|
90
90
|
docAnchor
|
|
91
91
|
]
|
|
92
92
|
})),
|
|
93
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, _object_spread_props._(_object_spread._({}, getStyles(
|
|
94
|
-
size: variant ===
|
|
93
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, _object_spread_props._(_object_spread._({}, getStyles('description', stylesApiProps)), {
|
|
94
|
+
size: variant === 'primary' ? 'md' : 'sm',
|
|
95
95
|
children: description
|
|
96
96
|
}))
|
|
97
97
|
]
|
|
@@ -99,7 +99,7 @@ var Header = (0, _core.factory)(function(_props, ref) {
|
|
|
99
99
|
actions
|
|
100
100
|
]
|
|
101
101
|
})),
|
|
102
|
-
borderBottom ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, _object_spread_props._(_object_spread._({}, getStyles(
|
|
102
|
+
borderBottom ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, _object_spread_props._(_object_spread._({}, getStyles('divider', stylesApiProps)), {
|
|
103
103
|
size: "xs"
|
|
104
104
|
})) : null
|
|
105
105
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n Divider,\n Factory,\n Group,\n GroupProps,\n Stack,\n StylesApiProps,\n Text,\n Title,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context';\nimport classes from './Header.module.css';\nimport {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type {HeaderActionsProps} from './HeaderActions/HeaderActions';\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n | 'root'\n | 'title'\n | 'description'\n | 'divider'\n | HeaderDocAnchorStyleNames\n | HeaderBreadcrumbsStyleNames\n | HeaderActionsStyleNames;\n\nexport interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * Use the primary variant for page header and secondary variant elsewhere\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary';\n /**\n * The title of the header.\n */\n children: ReactNode;\n}\n\nexport type HeaderFactory = Factory<{\n props: HeaderProps;\n ref: HTMLDivElement;\n variant: HeaderVariant;\n stylesNames: HeaderStyleNames;\n staticComponents: {\n Breadcrumbs: typeof HeaderBreadcrumbs;\n Actions: typeof HeaderActions;\n DocAnchor: typeof HeaderDocAnchor;\n };\n}>;\n\nconst defaultProps: Partial<HeaderProps> = {\n variant: 'primary',\n justify: 'space-between',\n wrap: 'nowrap',\n};\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n const props = useProps('PlasmaHeader', defaultProps, _props);\n const {\n className,\n description,\n borderBottom,\n variant,\n children,\n style,\n classNames,\n unstyled,\n vars,\n styles,\n ...others\n } = props;\n const getStyles = useStyles<HeaderFactory>({\n name: 'PlasmaHeader',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n const stylesApiProps = {classNames, styles};\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n const actions = convertedChildren.find((child) => child.type === HeaderActions);\n const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n const otherChildren = convertedChildren.filter(\n (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n );\n return (\n <HeaderProvider value={{getStyles}}>\n <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n <Stack gap={0}>\n {breadcrumbs}\n <Title\n variant={variant}\n order={variant === 'primary' ? 1 : 3}\n {...getStyles('title', stylesApiProps)}\n >\n {otherChildren}\n {docAnchor}\n </Title>\n <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>\n {description}\n </Text>\n </Stack>\n {actions}\n </Group>\n {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n </HeaderProvider>\n );\n});\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Header","defaultProps","variant","justify","wrap","factory","_props","ref","props","useProps","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","others","getStyles","useStyles","name","classes","stylesApiProps","convertedChildren","Children","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","HeaderProvider","value","Group","Stack","gap","Title","order","Text","size","Divider","Breadcrumbs","Actions","DocAnchor"],"mappings":";;;;+BAyEaA;;;eAAAA;;;;;;;;oBA7DN;qBACyC;6BACnB;wEACT;6BACiC;iCACQ;+BACJ;AAiDzD,IAAMC,eAAqC;IACvCC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEO,IAAMJ,SAASK,IAAAA,aAAO,EAAgB,SAACC,QAAQC;IAClD,IAAMC,QAAQC,IAAAA,cAAQ,EAAC,gBAAgBR,cAAcK;IACrD,IACII,YAWAF,MAXAE,WACAC,cAUAH,MAVAG,aACAC,eASAJ,MATAI,cACAV,UAQAM,MARAN,SACAW,WAOAL,MAPAK,UACAC,QAMAN,MANAM,OACAC,aAKAP,MALAO,YACAC,WAIAR,MAJAQ,UACAC,OAGAT,MAHAS,MACAC,SAEAV,MAFAU,QACGC,sCACHX;QAXAE;QACAC;QACAC;QACAV;QACAW;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGJ,IAAME,YAAYC,IAAAA,eAAS,EAAgB;QACvCC,MAAM;QACNd,OAAAA;QACAe,SAAAA,wBAAO;QACPb,WAAAA;QACAI,OAAAA;QACAC,YAAAA;QACAG,QAAAA;QACAF,UAAAA;QACAC,MAAAA;IACJ;IACA,IAAMO,iBAAiB;QAACT,YAAAA;QAAYG,QAAAA;IAAM;IAE1C,IAAMO,oBAAoBC,eAAQ,CAACC,OAAO,CAACd;IAC3C,IAAMe,cAAcH,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,oCAAiB;;IACtF,IAAMC,UAAUR,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG,4BAAa;;IAC9E,IAAMC,YAAYV,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK,gCAAe;;IAClF,IAAMC,gBAAgBZ,kBAAkBa,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,oCAAiB,IAAIF,MAAMC,IAAI,KAAKG,4BAAa,IAAIJ,MAAMC,IAAI,KAAKK,gCAAe;;IAEjH,qBACI,sBAACG,6BAAc;QAACC,OAAO;YAACpB,WAAAA;QAAS;;0BAC7B,sBAACqB,WAAK;gBAAClC,KAAKA;gBAAKL,SAASA;eAAakB,UAAU,SAAaD;;kCAC1D,sBAACuB,WAAK;wBAACC,KAAK;;4BACPf;0CACD,sBAACgB,WAAK;gCACF1C,SAASA;gCACT2C,OAAO3C,YAAY,YAAY,IAAI;+BAC/BkB,UAAU,SAASI;;oCAEtBa;oCACAF;;;0CAEL,qBAACW,UAAI,8CAAK1B,UAAU,eAAeI;gCAAiBuB,MAAM7C,YAAY,YAAY,OAAO;0CACpFS;;;;oBAGRsB;;;YAEJrB,6BAAe,qBAACoC,aAAO,8CAAK5B,UAAU,WAAWI;gBAAiBuB,MAAK;kBAAU;;;AAG9F;AAEA/C,OAAOiD,WAAW,GAAGjB,oCAAiB;AACtChC,OAAOkD,OAAO,GAAGhB,4BAAa;AAC9BlC,OAAOmD,SAAS,GAAGf,gCAAe"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n Divider,\n Factory,\n Group,\n GroupProps,\n Stack,\n StylesApiProps,\n Text,\n Title,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context';\nimport classes from './Header.module.css';\nimport {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type {HeaderActionsProps} from './HeaderActions/HeaderActions';\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n | 'root'\n | 'title'\n | 'description'\n | 'divider'\n | HeaderDocAnchorStyleNames\n | HeaderBreadcrumbsStyleNames\n | HeaderActionsStyleNames;\n\nexport interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * Use the primary variant for page header and secondary variant elsewhere\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary';\n /**\n * The title of the header.\n */\n children: ReactNode;\n}\n\nexport type HeaderFactory = Factory<{\n props: HeaderProps;\n ref: HTMLDivElement;\n variant: HeaderVariant;\n stylesNames: HeaderStyleNames;\n staticComponents: {\n Breadcrumbs: typeof HeaderBreadcrumbs;\n Actions: typeof HeaderActions;\n DocAnchor: typeof HeaderDocAnchor;\n };\n}>;\n\nconst defaultProps: Partial<HeaderProps> = {\n variant: 'primary',\n justify: 'space-between',\n wrap: 'nowrap',\n};\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n const props = useProps('PlasmaHeader', defaultProps, _props);\n const {\n className,\n description,\n borderBottom,\n variant,\n children,\n style,\n classNames,\n unstyled,\n vars,\n styles,\n ...others\n } = props;\n const getStyles = useStyles<HeaderFactory>({\n name: 'PlasmaHeader',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n const stylesApiProps = {classNames, styles};\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n const actions = convertedChildren.find((child) => child.type === HeaderActions);\n const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n const otherChildren = convertedChildren.filter(\n (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n );\n return (\n <HeaderProvider value={{getStyles}}>\n <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n <Stack gap={0}>\n {breadcrumbs}\n <Title\n variant={variant}\n order={variant === 'primary' ? 1 : 3}\n {...getStyles('title', stylesApiProps)}\n >\n {otherChildren}\n {docAnchor}\n </Title>\n <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>\n {description}\n </Text>\n </Stack>\n {actions}\n </Group>\n {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n </HeaderProvider>\n );\n});\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Header","defaultProps","variant","justify","wrap","factory","_props","ref","props","useProps","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","others","getStyles","useStyles","name","classes","stylesApiProps","convertedChildren","Children","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","HeaderProvider","value","Group","Stack","gap","Title","order","Text","size","Divider","Breadcrumbs","Actions","DocAnchor"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyEaA;;;eAAAA;;;;;;;;oBA7DN;qBACyC;6BACnB;wEACT;6BACiC;iCACQ;+BACJ;AAiDzD,IAAMC,eAAqC;IACvCC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEO,IAAMJ,SAASK,IAAAA,aAAO,EAAgB,SAACC,QAAQC;IAClD,IAAMC,QAAQC,IAAAA,cAAQ,EAAC,gBAAgBR,cAAcK;IACrD,IACII,YAWAF,MAXAE,WACAC,cAUAH,MAVAG,aACAC,eASAJ,MATAI,cACAV,UAQAM,MARAN,SACAW,WAOAL,MAPAK,UACAC,QAMAN,MANAM,OACAC,aAKAP,MALAO,YACAC,WAIAR,MAJAQ,UACAC,OAGAT,MAHAS,MACAC,SAEAV,MAFAU,QACGC,sCACHX;QAXAE;QACAC;QACAC;QACAV;QACAW;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGJ,IAAME,YAAYC,IAAAA,eAAS,EAAgB;QACvCC,MAAM;QACNd,OAAAA;QACAe,SAAAA,wBAAO;QACPb,WAAAA;QACAI,OAAAA;QACAC,YAAAA;QACAG,QAAAA;QACAF,UAAAA;QACAC,MAAAA;IACJ;IACA,IAAMO,iBAAiB;QAACT,YAAAA;QAAYG,QAAAA;IAAM;IAE1C,IAAMO,oBAAoBC,eAAQ,CAACC,OAAO,CAACd;IAC3C,IAAMe,cAAcH,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,oCAAiB;;IACtF,IAAMC,UAAUR,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG,4BAAa;;IAC9E,IAAMC,YAAYV,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK,gCAAe;;IAClF,IAAMC,gBAAgBZ,kBAAkBa,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,oCAAiB,IAAIF,MAAMC,IAAI,KAAKG,4BAAa,IAAIJ,MAAMC,IAAI,KAAKK,gCAAe;;IAEjH,qBACI,sBAACG,6BAAc;QAACC,OAAO;YAACpB,WAAAA;QAAS;;0BAC7B,sBAACqB,WAAK;gBAAClC,KAAKA;gBAAKL,SAASA;eAAakB,UAAU,SAAaD;;kCAC1D,sBAACuB,WAAK;wBAACC,KAAK;;4BACPf;0CACD,sBAACgB,WAAK;gCACF1C,SAASA;gCACT2C,OAAO3C,YAAY,YAAY,IAAI;+BAC/BkB,UAAU,SAASI;;oCAEtBa;oCACAF;;;0CAEL,qBAACW,UAAI,8CAAK1B,UAAU,eAAeI;gCAAiBuB,MAAM7C,YAAY,YAAY,OAAO;0CACpFS;;;;oBAGRsB;;;YAEJrB,6BAAe,qBAACoC,aAAO,8CAAK5B,UAAU,WAAWI;gBAAiBuB,MAAK;kBAAU;;;AAG9F;AAEA/C,OAAOiD,WAAW,GAAGjB,oCAAiB;AACtChC,OAAOkD,OAAO,GAAGhB,4BAAa;AAC9BlC,OAAOmD,SAAS,GAAGf,gCAAe"}
|