@coveord/plasma-mantine 49.1.3 → 49.2.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 +9 -9
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/__tests__/GlobalSetup.js.map +1 -1
- package/dist/cjs/__tests__/Setup.js.map +1 -1
- package/dist/cjs/__tests__/SetupAfterEnv.js.map +1 -1
- package/dist/cjs/__tests__/Utils.js.map +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/button/Button.js.map +1 -1
- 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.map +1 -1
- package/dist/cjs/components/code-editor/__mocks__/@monaco-editor/react.js.map +1 -1
- package/dist/cjs/components/code-editor/__mocks__/monaco-editor.js.map +1 -1
- package/dist/cjs/components/code-editor/index.js.map +1 -1
- package/dist/cjs/components/code-editor/languages/xml.js.map +1 -1
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/collection/Collection.styles.js.map +1 -1
- package/dist/cjs/components/collection/CollectionItem.js.map +1 -1
- package/dist/cjs/components/collection/index.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- 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.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.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/cjs/components/inline-confirm/index.js.map +1 -1
- package/dist/cjs/components/inline-confirm/useInlineConfirm.js.map +1 -1
- package/dist/cjs/components/menu/Menu.js.map +1 -1
- package/dist/cjs/components/menu/index.js.map +1 -1
- package/dist/cjs/components/modal/Modal.js.map +1 -1
- package/dist/cjs/components/modal/index.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizardStep.js.map +1 -1
- package/dist/cjs/components/modal-wizard/index.js.map +1 -1
- package/dist/cjs/components/prompt/Prompt.js.map +1 -1
- 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.js.map +1 -1
- package/dist/cjs/components/sticky-footer/index.js.map +1 -1
- package/dist/cjs/components/table/Table.js +7 -5
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- package/dist/cjs/components/table/TableCollapsibleColumn.js +48 -15
- package/dist/cjs/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/cjs/components/table/TableContext.js.map +1 -1
- package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/TableFilter.js.map +1 -1
- package/dist/cjs/components/table/TableFooter.js.map +1 -1
- package/dist/cjs/components/table/TableHeader.js.map +1 -1
- package/dist/cjs/components/table/TablePagination.js +3 -2
- package/dist/cjs/components/table/TablePagination.js.map +1 -1
- package/dist/cjs/components/table/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/TablePredicate.js.map +1 -1
- package/dist/cjs/components/table/TableSelectableColumn.js.map +1 -1
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/cjs/components/table/index.js.map +1 -1
- package/dist/cjs/components/table/useRowSelection.js.map +1 -1
- package/dist/cjs/components/table/useTable.js.map +1 -1
- package/dist/cjs/form/FormProvider.js.map +1 -1
- package/dist/cjs/form/index.js.map +1 -1
- package/dist/cjs/form/useForm.js.map +1 -1
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useControlledList.js.map +1 -1
- package/dist/cjs/hooks/useParentHeight.js.map +1 -1
- package/dist/cjs/index.js +4 -4
- 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.map +1 -1
- package/dist/cjs/theme/index.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/definitions/components/table/Table.d.ts +5 -3
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/definitions/components/table/TableCollapsibleColumn.d.ts +4 -0
- package/dist/definitions/components/table/TableCollapsibleColumn.d.ts.map +1 -1
- package/dist/definitions/components/table/TableContext.d.ts +4 -0
- package/dist/definitions/components/table/TableContext.d.ts.map +1 -1
- package/dist/definitions/components/table/TablePagination.d.ts +2 -2
- package/dist/definitions/components/table/TablePagination.d.ts.map +1 -1
- package/dist/definitions/components/table/useTable.d.ts +1 -0
- package/dist/definitions/components/table/useTable.d.ts.map +1 -1
- package/dist/definitions/index.d.ts +3 -2
- package/dist/definitions/index.d.ts.map +1 -1
- package/dist/esm/__tests__/Utils.js.map +1 -1
- package/dist/esm/components/blank-slate/BlankSlate.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/code-editor/CodeEditor.js.map +1 -1
- package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js.map +1 -1
- package/dist/esm/components/code-editor/languages/xml.js.map +1 -1
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/collection/CollectionItem.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/header/Header.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/esm/components/menu/Menu.js.map +1 -1
- package/dist/esm/components/modal/Modal.js.map +1 -1
- package/dist/esm/components/modal-wizard/ModalWizard.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/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/esm/components/table/Table.js +8 -6
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableCollapsibleColumn.js +41 -14
- package/dist/esm/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/TableFilter.js.map +1 -1
- package/dist/esm/components/table/TableFooter.js.map +1 -1
- package/dist/esm/components/table/TableHeader.js.map +1 -1
- package/dist/esm/components/table/TablePagination.js +3 -2
- package/dist/esm/components/table/TablePagination.js.map +1 -1
- package/dist/esm/components/table/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/TablePredicate.js.map +1 -1
- package/dist/esm/components/table/TableSelectableColumn.js.map +1 -1
- package/dist/esm/components/table/Th.js.map +1 -1
- package/dist/esm/components/table/useRowSelection.js.map +1 -1
- package/dist/esm/form/FormProvider.js.map +1 -1
- package/dist/esm/form/useForm.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/index.js +2 -1
- package/dist/esm/index.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/utils/overrideComponent.js.map +1 -1
- package/package.json +5 -5
- package/src/components/table/Table.tsx +20 -4
- package/src/components/table/TableCollapsibleColumn.tsx +41 -15
- package/src/components/table/TableContext.tsx +5 -0
- package/src/components/table/TablePagination.tsx +6 -4
- package/src/components/table/__tests__/Table.spec.tsx +40 -0
- package/src/components/table/__tests__/TablePagination.spec.tsx +48 -2
- package/src/index.ts +13 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/code-editor/languages/xml.ts"],"sourcesContent":["import {Monaco} from '@monaco-editor/react';\n\nconst format = (xml: string): string => {\n // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default\n const PADDING = ' '.repeat(2);\n const reg = /(>)(<)(\\/*)/g;\n let pad = 0;\n\n xml = xml.replace(reg, '$1\\r\\n$2$3');\n\n return xml\n .split('\\r\\n')\n .map((node) => {\n let indent = 0;\n if (node.match(/.+<\\/\\w[^>]*>$/)) {\n indent = 0;\n } else if (node.match(/^<\\/\\w/) && pad > 0) {\n pad -= 1;\n } else if (node.match(/^<\\w[^>]*[^/]>.*$/)) {\n indent = 1;\n } else {\n indent = 0;\n }\n\n pad += indent;\n\n return PADDING.repeat(pad - indent) + node;\n })\n .join('\\r\\n');\n};\n\nconst register = (monaco: Monaco): void => {\n monaco.languages.registerDocumentFormattingEditProvider('xml', {\n provideDocumentFormattingEdits: async (model) => [\n {\n range: model.getFullModelRange(),\n text: format(model.getValue()),\n },\n ],\n });\n};\n\nexport const XML = {register};\n"],"names":["format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue","XML"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/code-editor/languages/xml.ts"],"sourcesContent":["import {Monaco} from '@monaco-editor/react';\n\nconst format = (xml: string): string => {\n // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default\n const PADDING = ' '.repeat(2);\n const reg = /(>)(<)(\\/*)/g;\n let pad = 0;\n\n xml = xml.replace(reg, '$1\\r\\n$2$3');\n\n return xml\n .split('\\r\\n')\n .map((node) => {\n let indent = 0;\n if (node.match(/.+<\\/\\w[^>]*>$/)) {\n indent = 0;\n } else if (node.match(/^<\\/\\w/) && pad > 0) {\n pad -= 1;\n } else if (node.match(/^<\\w[^>]*[^/]>.*$/)) {\n indent = 1;\n } else {\n indent = 0;\n }\n\n pad += indent;\n\n return PADDING.repeat(pad - indent) + node;\n })\n .join('\\r\\n');\n};\n\nconst register = (monaco: Monaco): void => {\n monaco.languages.registerDocumentFormattingEditProvider('xml', {\n provideDocumentFormattingEdits: async (model) => [\n {\n range: model.getFullModelRange(),\n text: format(model.getValue()),\n },\n ],\n });\n};\n\nexport const XML = {register};\n"],"names":["format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue","XML"],"mappings":";;AAEA,IAAMA,SAAS,SAACC,KAAwB;IACpC,oGAAoG;IACpG,IAAMC,UAAU,IAAIC,MAAM,CAAC;IAC3B,IAAMC,MAAM;IACZ,IAAIC,MAAM;IAEVJ,MAAMA,IAAIK,OAAO,CAACF,KAAK;IAEvB,OAAOH,IACFM,KAAK,CAAC,QACNC,GAAG,CAAC,SAACC,MAAS;QACX,IAAIC,SAAS;QACb,IAAID,KAAKE,KAAK,CAAC,mBAAmB;YAC9BD,SAAS;QACb,OAAO,IAAID,KAAKE,KAAK,CAAC,aAAaN,MAAM,GAAG;YACxCA,OAAO;QACX,OAAO,IAAII,KAAKE,KAAK,CAAC,sBAAsB;YACxCD,SAAS;QACb,OAAO;YACHA,SAAS;QACb,CAAC;QAEDL,OAAOK;QAEP,OAAOR,QAAQC,MAAM,CAACE,MAAMK,UAAUD;IAC1C,GACCG,IAAI,CAAC;AACd;AAEA,IAAMC,WAAW,SAACC,QAAyB;IACvCA,OAAOC,SAAS,CAACC,sCAAsC,CAAC,OAAO;QAC3DC,8BAA8B;uBAAE,oBAAA,SAAOC;;oBAAU;;;4BAC7C;gCACIC,OAAOD,MAAME,iBAAiB;gCAC9BC,MAAMrB,OAAOkB,MAAMI,QAAQ;4BAC/B;;;;;4BAJmCJ;;;;IAM3C;AACJ;AAEA,OAAO,IAAMK,MAAM;IAACV,UAAAA;AAAQ,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\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 * 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 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 spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\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\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\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\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const collectionID = useId('dnd-droppable');\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 items = value.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, 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 leftIcon={<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 return (\n <DragDropContext\n onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n {_header}\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["AddSize16Px","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","useId","DragDropContext","Droppable","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","items","map","item","index","onRemove","removable","addAllowed","_addButton","variant","leftIcon","height","onClick","onDragEnd","destination","source","from","to","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\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 * 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 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 spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\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\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\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\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const collectionID = useId('dnd-droppable');\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 items = value.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, 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 leftIcon={<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 return (\n <DragDropContext\n onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n {_header}\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["AddSize16Px","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","useId","DragDropContext","Droppable","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","items","map","item","index","onRemove","removable","addAllowed","_addButton","variant","leftIcon","height","onClick","onDragEnd","destination","source","from","to","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n index: number;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon 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 styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group className={cx(classes.item)}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n children,\n styles,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n index,\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n return (\n <Draggable index={index} draggableId={index.toString()}>\n {(provided, {isDragging}) => (\n <Group\n ref={provided.innerRef}\n {...provided.draggableProps}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n >\n <div {...provided.dragHandleProps}>\n <DragAndDropSize16Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n )}\n </Draggable>\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":["DragAndDropSize16Px","RemoveSize16Px","ActionIcon","Group","Draggable","useStyles","RemoveButton","onClick","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","name","classes","cx","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","index","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","CollectionItem","draggable","disabled","otherProps"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n index: number;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon 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 styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group className={cx(classes.item)}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n children,\n styles,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n index,\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n return (\n <Draggable index={index} draggableId={index.toString()}>\n {(provided, {isDragging}) => (\n <Group\n ref={provided.innerRef}\n {...provided.draggableProps}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n >\n <div {...provided.dragHandleProps}>\n <DragAndDropSize16Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n )}\n </Draggable>\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":["DragAndDropSize16Px","RemoveSize16Px","ActionIcon","Group","Draggable","useStyles","RemoveButton","onClick","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","name","classes","cx","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","index","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","CollectionItem","draggable","disabled","otherProps"],"mappings":";;;;;AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAEzE,SAAQC,SAAS,QAAO,sBAAsB;AAE9C,OAAOC,eAAe,sBAAsB;AAa5C,IAAMC,eAED;QAAEC,gBAAAA;yBACH,KAACL;QAAWM,SAAQ;QAASD,SAASA;QAASE,OAAM;kBACjD,cAAA,KAACR;YAAeS,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;uBAAe,KAACL,4BAA0B;IAE9G,qBACI,MAACR;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,IAAMG,yBAA0F,gBAG1F;QAFFP,iBAAAA,UACAD,eAAAA;IAEA,IAAsBb,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,qBAAO,KAACnB;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;kBAAIN;;AAChD;AAEA,IAAMQ,0BAA2F,gBAM3F;QALFC,cAAAA,OACAZ,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;SAAe,IAAI;IAEvF,qBACI,KAACZ;QAAUwB,OAAOA;QAAOC,aAAaD,MAAME,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,MAAC7B;gBACG8B,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BX,WAAWF,GAAGD,QAAQI,IAAI,EAAG,qBAACJ,QAAQe,YAAY,EAAGJ;;kCAErD,KAACpB,+CAAQmB,SAASM,eAAe;kCAC7B,cAAA,KAACrC;4BAAoBU,QAAQ;;;oBAEhCS;oBACAI;;;;;AAKrB;AAEA,OAAO,IAAMe,iBAA4E,iBAInF;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,KAACd,2CAA2Be;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,KAACZ,4CAA4Bc;IACxC,CAAC;IACD,qBAAO,KAAC1B,yCAAyB0B;AACrC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\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<RangeCalendarProps, 'value' | 'onChange'>;\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\n align=\"center\"\n spacing=\"xs\"\n grow\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <RangeCalendar\n amountOfMonths={2}\n styles={{cell: {textAlign: 'center'}}}\n firstDayOfWeek=\"sunday\"\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n />\n </Center>\n\n <Group\n position=\"right\"\n spacing=\"xs\"\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderTop: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["Center","Group","Space","RangeCalendar","useForm","Button","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","w","amountOfMonths","styles","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","size","onClick","variant"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\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<RangeCalendarProps, 'value' | 'onChange'>;\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\n align=\"center\"\n spacing=\"xs\"\n grow\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <RangeCalendar\n amountOfMonths={2}\n styles={{cell: {textAlign: 'center'}}}\n firstDayOfWeek=\"sunday\"\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n />\n </Center>\n\n <Group\n position=\"right\"\n spacing=\"xs\"\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderTop: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["Center","Group","Space","RangeCalendar","useForm","Button","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","w","amountOfMonths","styles","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","size","onClick","variant"],"mappings":";;;AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAA8BC,aAAa,QAA2B,iBAAiB;AACvF,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAmChG,OAAO,IAAMC,gCAAgC,gBAQH;QAPtCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOZ,QAAQ;QACjBa,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,IAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,IAAMC,kBAAkB,WAAM;QAC1B,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF,CAAC;QACDR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAACjB;gBACGsB,OAAM;gBACNC,SAAQ;gBACRC,IAAI;gBACJC,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZC,cAAc,AAAC,aAAiC,OAArBD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBACnD;;;kCAEA,KAACzB,iEAA4BY;wBAAoBN,YAAYA;wBAAYC,UAAUA;;oBAClFF,wBACG;;0CACI,KAACV;gCAAM+B,GAAE;;0CACT,KAAC3B;gCAA4BM,SAASA;+BAAaO;;yBAEvD,IAAI;;;0BAGZ,KAACnB;gBAAO2B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACvB;oBACG+B,gBAAgB;oBAChBC,QAAQ;wBAACC,MAAM;4BAACC,WAAW;wBAAQ;oBAAC;oBACpCC,gBAAe;oBACfC,sBAAsB;mBAClBxB,oBACAI;;0BAIZ,MAAClB;gBACGuC,UAAS;gBACThB,SAAQ;gBACRE,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZY,WAAW,AAAC,aAAiC,OAArBZ,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBAChD;;;kCAEA,KAAC3B;wBAAOqC,MAAK;wBAAKC,SAAStB;kCAAiB;;kCAG5C,KAAChB;wBAAOuC,SAAQ;wBAAUF,MAAK;wBAAKC,SAAShC;kCAAU;;;;;;AAMvE,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {Group, Popover, Space} from '@mantine/core';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\nimport {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';\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<RangeCalendarProps, 'value' | 'onChange'>;\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 <RangeCalendar\n ref={ref}\n styles={{cell: {textAlign: 'center'}}}\n amountOfMonths={2}\n firstDayOfWeek=\"sunday\"\n allowSingleDateInRange\n value={_value}\n onChange={onCalendarChange}\n {...rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["RangeCalendar","Group","Popover","Space","useClickOutside","useUncontrolled","useState","EditableDateRangePicker","DateRangePickerPresetSelect","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","finalValue","_value","handleChange","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","styles","cell","textAlign","amountOfMonths","firstDayOfWeek","allowSingleDateInRange"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {Group, Popover, Space} from '@mantine/core';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\nimport {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';\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<RangeCalendarProps, 'value' | 'onChange'>;\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 <RangeCalendar\n ref={ref}\n styles={{cell: {textAlign: 'center'}}}\n amountOfMonths={2}\n firstDayOfWeek=\"sunday\"\n allowSingleDateInRange\n value={_value}\n onChange={onCalendarChange}\n {...rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["RangeCalendar","Group","Popover","Space","useClickOutside","useUncontrolled","useState","EditableDateRangePicker","DateRangePickerPresetSelect","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","finalValue","_value","handleChange","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","styles","cell","textAlign","amountOfMonths","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;AAAA,SAA8BA,aAAa,QAA2B,iBAAiB;AACvF,SAAQC,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,SAAQC,uBAAuB,QAAqC,4BAA4B;AAChG,SAAQC,2BAA2B,QAA8B,gCAAgC;AA2BjG,OAAO,IAAMC,iCAAiC,gBAQA;QAP1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BV,6BAAAA,SAAS,KAAK,OAAnCW,SAAqBX,cAAbY,YAAaZ;IAC5B,IAAMa,MAAMf,gBAAgB;eAAMc,UAAU,KAAK;;IAEjD,IAA+Bb,oCAAAA,gBAAsC;QACjEM,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAO,YAAY;YAAC,IAAI;YAAE,IAAI;SAAC;IAC5B,QALOC,SAAwBhB,qBAAhBiB,eAAgBjB;IAO/B,IAAMkB,mBAAmB,SAACC,OAAgC;QACtDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,EAAE;YACnBN,UAAU,KAAK;QACnB,CAAC;IACL;IAEA,qBACI;;0BACI,MAACjB;gBAAMwB,OAAM;;kCACT,KAAClB;wBACGI,OAAOU;wBACPR,UAAUS;wBACVI,SAAS;mCAAMR,UAAU,IAAI;;wBAC7BJ,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,KAACP;gCAAMwB,GAAE;;0CACT,KAACnB;gCAA4BE,SAASA;gCAASC,OAAOU;gCAAQR,UAAUS;;;yBAE5E,IAAI;;;0BAGZ,KAACpB;gBAAQe,QAAQA;gBAAQJ,UAAUK;gBAAWU,SAAS;0BACnD,cAAA,KAAC1B,QAAQ2B,QAAQ;8BACb,cAAA,KAAC7B;wBACGmB,KAAKA;wBACLW,QAAQ;4BAACC,MAAM;gCAACC,WAAW;4BAAQ;wBAAC;wBACpCC,gBAAgB;wBAChBC,gBAAe;wBACfC,sBAAsB;wBACtBxB,OAAOU;wBACPR,UAAUU;uBACNP;;;;;AAM5B,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {DateRangePickerValue, isSameDate} from '@mantine/dates';\nimport {Select, SelectItem, SelectProps} from '@mantine/core';\nimport {useState, useEffect} from 'react';\nimport dayjs from 'dayjs';\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: SelectItem[] = 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]) && isSameDate(range[1]!, 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 />\n );\n};\n"],"names":["isSameDate","Select","useState","useEffect","dayjs","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {DateRangePickerValue, isSameDate} from '@mantine/dates';\nimport {Select, SelectItem, SelectProps} from '@mantine/core';\nimport {useState, useEffect} from 'react';\nimport dayjs from 'dayjs';\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: SelectItem[] = 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]) && isSameDate(range[1]!, 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 />\n );\n};\n"],"names":["isSameDate","Select","useState","useEffect","dayjs","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data"],"mappings":";;;;AAAA,SAA8BA,UAAU,QAAO,iBAAiB;AAChE,SAAQC,MAAM,QAAgC,gBAAgB;AAC9D,SAAQC,QAAQ,EAAEC,SAAS,QAAO,QAAQ;AAC1C,OAAOC,WAAW,QAAQ;AAc1B,OAAO,IAAMC,8BAA8B,gBAKC;QAJxCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;iDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEpG,IAAMC,oBAAoB,WAAM;QAC5B,IAAIT,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIH,MAAMG,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOb,MAAMG,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,IAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC;yDAAEC,gBAAI,AAACC,kBAAAA;uBAAYjB,MAAMiB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKP,WAAWqB,KAAK,CAAC,EAAE,EAAGd,KAAK,CAAC,EAAE;;YAE1F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB,CAAC;QACL,CAAC;QACD,OAAO,IAAI;IACf;IAEA,IAA4ChB,6BAAAA,SAAwBc,0BAA7DO,iBAAqCrB,cAArBsB,oBAAqBtB;IAE5CC,UAAU,WAAM;QACZ,IAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB,CAAC;IACL,GAAG;QAAClB;KAAM;IAEV,IAAMmB,iBAAiB,SAACC,UAAmC;QACvD,IAAMN,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;QACrCb,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;OACRnB;QACJF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;;AAGlB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n separator?: ReactNode;\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 separator = 'to',\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 <DatePicker\n allowFreeInput\n clearable={false}\n label=\"Start\"\n {...startProps}\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n styles={{...startProps.styles, dropdown: {display: 'none'}}}\n />\n {separator}\n <DatePicker\n allowFreeInput\n clearable={false}\n label=\"End\"\n {...endProps}\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n styles={{...endProps.styles, dropdown: {display: 'none'}}}\n />\n </>\n );\n};\n"],"names":["DatePicker","dayjs","EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","allowFreeInput","clearable","label","styles","dropdown","display"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n separator?: ReactNode;\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 separator = 'to',\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 <DatePicker\n allowFreeInput\n clearable={false}\n label=\"Start\"\n {...startProps}\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n styles={{...startProps.styles, dropdown: {display: 'none'}}}\n />\n {separator}\n <DatePicker\n allowFreeInput\n clearable={false}\n label=\"End\"\n {...endProps}\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n styles={{...endProps.styles, dropdown: {display: 'none'}}}\n />\n </>\n );\n};\n"],"names":["DatePicker","dayjs","EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","allowFreeInput","clearable","label","styles","dropdown","display"],"mappings":";;;AAAA,SAAQA,UAAU,QAA8C,iBAAiB;AACjF,OAAOC,WAAW,QAAQ;AAkB1B,OAAO,IAAMC,0BAA0B,gBAOH;QANhCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,mDACZC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,SAACC,MAAe;QAClCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACH,MAAMS,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIT,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;SAAC;IAChE;IACA,IAAMU,cAAc,SAACH,MAAe;QAChCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACD,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;YAAEF,MAAMS,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACZ;gBACGe,cAAc;gBACdC,WAAW,KAAK;gBAChBC,OAAM;eACFV;gBACJJ,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUK;gBACVJ,SAASA;gBACTa,QAAQ,wCAAIX,WAAWW,MAAM;oBAAEC,UAAU;wBAACC,SAAS;oBAAM;;;YAE5Dd;0BACD,KAACN;gBACGe,cAAc;gBACdC,WAAW,KAAK;gBAChBC,OAAM;eACFT;gBACJL,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,QAAQ,wCAAIV,SAASU,MAAM;oBAAEC,UAAU;wBAACC,SAAS;oBAAM;;;;;AAIvE,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize24Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Action buttons that can be displayed on the right of the header\n */\n actions?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n docLink?: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n docLinkTooltipLabel?: string;\n /**\n * The title of the header.\n * If more than one children are provided, each of them act as parts of a breadcrumb\n */\n children: ReactNode;\n}\n\nexport const Header: FunctionComponent<HeaderProps> = ({\n description,\n actions,\n borderBottom,\n docLink,\n docLinkTooltipLabel,\n children,\n ...others\n}) => (\n <>\n <Group position=\"apart\" py=\"md\" px=\"xl\" {...others}>\n <Stack spacing=\"xs\">\n <Title order={4}>\n <Group spacing={0}>\n <Breadcrumbs>{children}</Breadcrumbs>\n {docLink ? (\n <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"bottom\">\n <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\">\n <QuestionSize24Px height={24} />\n </Anchor>\n </Tooltip>\n ) : null}\n </Group>\n </Title>\n <Text size=\"sm\">{description}</Text>\n </Stack>\n <Group spacing=\"xs\">{actions}</Group>\n </Group>\n {borderBottom ? <Divider size=\"xs\" /> : null}\n </>\n);\n"],"names":["QuestionSize24Px","Anchor","Breadcrumbs","Divider","Group","Stack","Text","Title","Tooltip","Header","description","actions","borderBottom","docLink","docLinkTooltipLabel","children","others","position","py","px","spacing","order","label","disabled","inline","href","target","ml","height","size"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize24Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Action buttons that can be displayed on the right of the header\n */\n actions?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n docLink?: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n docLinkTooltipLabel?: string;\n /**\n * The title of the header.\n * If more than one children are provided, each of them act as parts of a breadcrumb\n */\n children: ReactNode;\n}\n\nexport const Header: FunctionComponent<HeaderProps> = ({\n description,\n actions,\n borderBottom,\n docLink,\n docLinkTooltipLabel,\n children,\n ...others\n}) => (\n <>\n <Group position=\"apart\" py=\"md\" px=\"xl\" {...others}>\n <Stack spacing=\"xs\">\n <Title order={4}>\n <Group spacing={0}>\n <Breadcrumbs>{children}</Breadcrumbs>\n {docLink ? (\n <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"bottom\">\n <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\">\n <QuestionSize24Px height={24} />\n </Anchor>\n </Tooltip>\n ) : null}\n </Group>\n </Title>\n <Text size=\"sm\">{description}</Text>\n </Stack>\n <Group spacing=\"xs\">{actions}</Group>\n </Group>\n {borderBottom ? <Divider size=\"xs\" /> : null}\n </>\n);\n"],"names":["QuestionSize24Px","Anchor","Breadcrumbs","Divider","Group","Stack","Text","Title","Tooltip","Header","description","actions","borderBottom","docLink","docLinkTooltipLabel","children","others","position","py","px","spacing","order","label","disabled","inline","href","target","ml","height","size"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAgC7G,OAAO,IAAMC,SAAyC,+BASlD;QARAC,qBAAAA,aACAC,iBAAAA,SACAC,sBAAAA,cACAC,iBAAAA,SACAC,6BAAAA,qBACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;WAGA;;0BACI,MAACX;gBAAMa,UAAS;gBAAQC,IAAG;gBAAKC,IAAG;eAASH;;kCACxC,MAACX;wBAAMe,SAAQ;;0CACX,KAACb;gCAAMc,OAAO;0CACV,cAAA,MAACjB;oCAAMgB,SAAS;;sDACZ,KAAClB;sDAAaa;;wCACbF,wBACG,KAACL;4CAAQc,OAAOR;4CAAqBS,UAAU,CAACT;4CAAqBG,UAAS;sDAC1E,cAAA,KAAChB;gDAAOuB,MAAM;gDAACC,MAAMZ;gDAASa,QAAO;gDAASC,IAAG;0DAC7C,cAAA,KAAC3B;oDAAiB4B,QAAQ;;;6CAGlC,IAAI;;;;0CAGhB,KAACtB;gCAAKuB,MAAK;0CAAMnB;;;;kCAErB,KAACN;wBAAMgB,SAAQ;kCAAMT;;;;YAExBC,6BAAe,KAACT;gBAAQ0B,MAAK;iBAAU,IAAI;;;AAC9C,EACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n Prompt: typeof InlineConfirmPrompt;\n Button: typeof InlineConfirmButton;\n MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const prompt = convertedChildren.find(\n (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId\n );\n const clearConfirm = () => setConfirmingId(null);\n\n return (\n <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n {prompt ?? children}\n </InlineConfirmContext.Provider>\n );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmMenuItem","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button","MenuItem"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n Prompt: typeof InlineConfirmPrompt;\n Button: typeof InlineConfirmButton;\n MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const prompt = convertedChildren.find(\n (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId\n );\n const clearConfirm = () => setConfirmingId(null);\n\n return (\n <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n {prompt ?? children}\n </InlineConfirmContext.Provider>\n );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmMenuItem","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button","MenuItem"],"mappings":";;AAAA,SAAQA,QAAQ,EAAsDC,QAAQ,QAAO,QAAQ;AAE7F,SAAQC,mBAAmB,QAAO,wBAAwB;AAC1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,mBAAmB,QAAO,wBAAwB;AAQ1D,OAAO,IAAMC,gBAAmC,gBAAgB;QAAdC,iBAAAA;IAC9C,IAAwCN,6BAAAA,SAAwB,IAAI,OAA7DO,eAAiCP,cAAnBQ,kBAAmBR;IAExC,IAAMS,oBAAoBV,SAASW,OAAO,CAACJ;IAC3C,IAAMK,SAASF,kBAAkBG,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKV,uBAAuBS,MAAME,KAAK,CAACC,EAAE,KAAKT;;IAExE,IAAMU,eAAe;eAAMT,gBAAgB,IAAI;;IAE/C,qBACI,KAACN,qBAAqBgB,QAAQ;QAACC,OAAO;YAACZ,cAAAA;YAAcC,iBAAAA;YAAiBS,cAAAA;QAAY;kBAC7EN,mBAAAA,oBAAAA,SAAUL,QAAQ;;AAG/B,EAAE;AAEFD,cAAce,MAAM,GAAGhB;AACvBC,cAAcgB,MAAM,GAAGpB;AACvBI,cAAciB,QAAQ,GAAGnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmButton.tsx"],"sourcesContent":["import {Button} from '@mantine/core';\nimport {forwardRef, MouseEventHandler} from 'react';\n\nimport {ButtonProps} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmButtonProps extends ButtonProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmButton = forwardRef<HTMLButtonElement, InlineConfirmButtonProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Button ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["Button","forwardRef","useInlineConfirm","InlineConfirmButton","ref","onClick","id","others","setConfirmingId","handleOnClick","e"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmButton.tsx"],"sourcesContent":["import {Button} from '@mantine/core';\nimport {forwardRef, MouseEventHandler} from 'react';\n\nimport {ButtonProps} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmButtonProps extends ButtonProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmButton = forwardRef<HTMLButtonElement, InlineConfirmButtonProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Button ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["Button","forwardRef","useInlineConfirm","InlineConfirmButton","ref","onClick","id","others","setConfirmingId","handleOnClick","e"],"mappings":";;;AAAA,SAAQA,MAAM,QAAO,gBAAgB;AACrC,SAAQC,UAAU,QAA0B,QAAQ;AAGpD,SAAQC,gBAAgB,QAAO,qBAAqB;AAOpD,OAAO,IAAMC,oCAAsBF,WAC/B,iBAA2BG,KAAQ;QAAjCC,iBAAAA,SAASC,YAAAA,IAAOC;QAAhBF;QAASC;;IACP,IAAM,AAACE,kBAAmBN,mBAAnBM;IACP,IAAMC,gBAAsD,SAACC,GAAM;QAC/DF,gBAAgBF;QAChBD,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUK;IACd;IAEA,qBAAO,KAACV;QAAOI,KAAKA;QAAKC,SAASI;OAAmBF;AACzD,GACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmMenuItem.tsx"],"sourcesContent":["import {forwardRef, MouseEventHandler} from 'react';\n\nimport {Menu, MenuItemProps} from '../menu';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmMenuItemProps extends MenuItemProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmMenuItem = forwardRef<HTMLButtonElement, InlineConfirmMenuItemProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Menu.Item ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["forwardRef","Menu","useInlineConfirm","InlineConfirmMenuItem","ref","onClick","id","others","setConfirmingId","handleOnClick","e","Item"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmMenuItem.tsx"],"sourcesContent":["import {forwardRef, MouseEventHandler} from 'react';\n\nimport {Menu, MenuItemProps} from '../menu';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmMenuItemProps extends MenuItemProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmMenuItem = forwardRef<HTMLButtonElement, InlineConfirmMenuItemProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Menu.Item ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["forwardRef","Menu","useInlineConfirm","InlineConfirmMenuItem","ref","onClick","id","others","setConfirmingId","handleOnClick","e","Item"],"mappings":";;;AAAA,SAAQA,UAAU,QAA0B,QAAQ;AAEpD,SAAQC,IAAI,QAAsB,UAAU;AAC5C,SAAQC,gBAAgB,QAAO,qBAAqB;AAOpD,OAAO,IAAMC,sCAAwBH,WACjC,iBAA2BI,KAAQ;QAAjCC,iBAAAA,SAASC,YAAAA,IAAOC;QAAhBF;QAASC;;IACP,IAAM,AAACE,kBAAmBN,mBAAnBM;IACP,IAAMC,gBAAsD,SAACC,GAAM;QAC/DF,gBAAgBF;QAChBD,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUK;IACd;IAEA,qBAAO,KAACT,KAAKU,IAAI;QAACP,KAAKA;QAAKC,SAASI;OAAmBF;AAC5D,GACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent, ReactNode, useEffect} from 'react';\n\nimport {Button} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\ninterface InlineConfirmPromptProps {\n id: string;\n label: ReactNode;\n onConfirm: () => void;\n confirmLabel?: ReactNode;\n cancelLabel?: ReactNode;\n}\n\nexport const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({\n id,\n label,\n confirmLabel = 'Delete',\n cancelLabel = 'Cancel',\n onConfirm,\n}) => {\n const {confirmingId, clearConfirm} = useInlineConfirm();\n\n const onClickConfirm = () => {\n onConfirm();\n clearConfirm();\n };\n\n useEffect(() => {\n if (confirmingId !== id) {\n clearConfirm();\n }\n }, []);\n\n if (confirmingId === id) {\n return (\n <Group spacing=\"xs\">\n {label}\n <Button onClick={onClickConfirm} color=\"red\">\n {confirmLabel}\n </Button>\n <Button onClick={clearConfirm} variant=\"outline\">\n {cancelLabel}\n </Button>\n </Group>\n );\n }\n return null;\n};\n"],"names":["Group","useEffect","Button","useInlineConfirm","InlineConfirmPrompt","id","label","confirmLabel","cancelLabel","onConfirm","confirmingId","clearConfirm","onClickConfirm","spacing","onClick","color","variant"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent, ReactNode, useEffect} from 'react';\n\nimport {Button} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\ninterface InlineConfirmPromptProps {\n id: string;\n label: ReactNode;\n onConfirm: () => void;\n confirmLabel?: ReactNode;\n cancelLabel?: ReactNode;\n}\n\nexport const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({\n id,\n label,\n confirmLabel = 'Delete',\n cancelLabel = 'Cancel',\n onConfirm,\n}) => {\n const {confirmingId, clearConfirm} = useInlineConfirm();\n\n const onClickConfirm = () => {\n onConfirm();\n clearConfirm();\n };\n\n useEffect(() => {\n if (confirmingId !== id) {\n clearConfirm();\n }\n }, []);\n\n if (confirmingId === id) {\n return (\n <Group spacing=\"xs\">\n {label}\n <Button onClick={onClickConfirm} color=\"red\">\n {confirmLabel}\n </Button>\n <Button onClick={clearConfirm} variant=\"outline\">\n {cancelLabel}\n </Button>\n </Group>\n );\n }\n return null;\n};\n"],"names":["Group","useEffect","Button","useInlineConfirm","InlineConfirmPrompt","id","label","confirmLabel","cancelLabel","onConfirm","confirmingId","clearConfirm","onClickConfirm","spacing","onClick","color","variant"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AACpC,SAAsCC,SAAS,QAAO,QAAQ;AAE9D,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,gBAAgB,QAAO,qBAAqB;AAUpD,OAAO,IAAMC,sBAAmE,gBAM1E;QALFC,WAAAA,IACAC,cAAAA,mCACAC,cAAAA,gDAAe,2DACfC,aAAAA,8CAAc,+BACdC,kBAAAA;IAEA,IAAqCN,oBAAAA,oBAA9BO,eAA8BP,kBAA9BO,cAAcC,eAAgBR,kBAAhBQ;IAErB,IAAMC,iBAAiB,WAAM;QACzBH;QACAE;IACJ;IAEAV,UAAU,WAAM;QACZ,IAAIS,iBAAiBL,IAAI;YACrBM;QACJ,CAAC;IACL,GAAG,EAAE;IAEL,IAAID,iBAAiBL,IAAI;QACrB,qBACI,MAACL;YAAMa,SAAQ;;gBACVP;8BACD,KAACJ;oBAAOY,SAASF;oBAAgBG,OAAM;8BAClCR;;8BAEL,KAACL;oBAAOY,SAASH;oBAAcK,SAAQ;8BAClCR;;;;IAIjB,CAAC;IACD,OAAO,IAAI;AACf,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';\nimport {forwardRef} from 'react';\n\nimport {createPolymorphicComponent, overrideComponent} from '../../utils';\nimport {ButtonWithDisabledTooltipProps} from '../button';\nimport {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip';\n\nexport interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}\n\nconst _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n ({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (\n <ButtonWithDisabledTooltip\n disabled={disabled}\n disabledTooltip={disabledTooltip}\n disabledTooltipProps={disabledTooltipProps}\n >\n <MantineMenu.Item ref={ref} disabled={disabled} {...others} />\n </ButtonWithDisabledTooltip>\n )\n);\n\nconst MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);\n\nexport const Menu = overrideComponent(MantineMenu, {\n displayName: '@coveord/plasma-mantine/Menu',\n Item: MenuItem,\n});\n"],"names":["Menu","MantineMenu","forwardRef","createPolymorphicComponent","overrideComponent","ButtonWithDisabledTooltip","_MenuItem","ref","disabledTooltip","disabled","disabledTooltipProps","others","Item","MenuItem","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';\nimport {forwardRef} from 'react';\n\nimport {createPolymorphicComponent, overrideComponent} from '../../utils';\nimport {ButtonWithDisabledTooltipProps} from '../button';\nimport {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip';\n\nexport interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}\n\nconst _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n ({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (\n <ButtonWithDisabledTooltip\n disabled={disabled}\n disabledTooltip={disabledTooltip}\n disabledTooltipProps={disabledTooltipProps}\n >\n <MantineMenu.Item ref={ref} disabled={disabled} {...others} />\n </ButtonWithDisabledTooltip>\n )\n);\n\nconst MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);\n\nexport const Menu = overrideComponent(MantineMenu, {\n displayName: '@coveord/plasma-mantine/Menu',\n Item: MenuItem,\n});\n"],"names":["Menu","MantineMenu","forwardRef","createPolymorphicComponent","overrideComponent","ButtonWithDisabledTooltip","_MenuItem","ref","disabledTooltip","disabled","disabledTooltipProps","others","Item","MenuItem","displayName"],"mappings":";;;AAAA,SAAQA,QAAQC,WAAW,QAA8C,gBAAgB;AACzF,SAAQC,UAAU,QAAO,QAAQ;AAEjC,SAAQC,0BAA0B,EAAEC,iBAAiB,QAAO,cAAc;AAE1E,SAAQC,yBAAyB,QAAO,sCAAsC;AAI9E,IAAMC,0BAAYJ,WACd,iBAA+DK,mBAC3D;QADFC,yBAAAA,iBAAiBC,kBAAAA,UAAUC,8BAAAA,sBAAyBC;QAApDH;QAAiBC;QAAUC;;WACzB,KAACL;QACGI,UAAUA;QACVD,iBAAiBA;QACjBE,sBAAsBA;kBAEtB,cAAA,KAACT,YAAYW,IAAI;YAACL,KAAKA;YAAKE,UAAUA;WAAcE;;AAC7B;AAInC,IAAME,WAAWV,2BAAoDG;AAErE,OAAO,IAAMN,OAAOI,kBAAkBH,aAAa;IAC/Ca,aAAa;IACbF,MAAMC;AACV,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n /**\n * Header component props (layout/Header)\n */\n header?: Omit<HeaderProps, 'children' | 'description'>;\n /**\n * The title text displayed on top of the modal\n */\n title: ReactNode;\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n <MantineModal\n {...otherProps}\n styles={{title: {width: '100%'}}}\n title={\n <Header py={0} px={0} description={description} {...header}>\n {title}\n </Header>\n }\n >\n {children}\n </MantineModal>\n);\n"],"names":["Modal","MantineModal","Header","children","title","header","description","otherProps","styles","width","py","px"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {Modal as MantineModal, ModalProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {Header, HeaderProps} from '../header';\n\nexport interface CustomModalProps extends Omit<ModalProps, 'title'> {\n /**\n * Header component props (layout/Header)\n */\n header?: Omit<HeaderProps, 'children' | 'description'>;\n /**\n * The title text displayed on top of the modal\n */\n title: ReactNode;\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: HeaderProps['description'];\n}\n\nexport const Modal: FunctionComponent<CustomModalProps> = ({children, title, header, description, ...otherProps}) => (\n <MantineModal\n {...otherProps}\n styles={{title: {width: '100%'}}}\n title={\n <Header py={0} px={0} description={description} {...header}>\n {title}\n </Header>\n }\n >\n {children}\n </MantineModal>\n);\n"],"names":["Modal","MantineModal","Header","children","title","header","description","otherProps","styles","width","py","px"],"mappings":";;;;AAAA,SAAQA,SAASC,YAAY,QAAmB,gBAAgB;AAEhE,SAAQC,MAAM,QAAoB,YAAY;AAiB9C,OAAO,IAAMF,QAA6C,+BACtD;QADwDG,kBAAAA,UAAUC,eAAAA,OAAOC,gBAAAA,QAAQC,qBAAAA,aAAgBC;QAAzCJ;QAAUC;QAAOC;QAAQC;;WACjF,KAACL,sDACOM;QACJC,QAAQ;YAACJ,OAAO;gBAACK,OAAO;YAAM;QAAC;QAC/BL,qBACI,KAACF;YAAOQ,IAAI;YAAGC,IAAI;YAAGL,aAAaA;WAAiBD;sBAC/CD;;kBAIRD;;AACS,EAChB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: () => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: () => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) * 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n docLinkTooltipLabel={currentStep.props.docLinkTooltipLabel}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","createStyles","Modal","Progress","Children","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","docLinkTooltipLabel","description","py","px","showProgressBar","color","size","value","sx","theme","marginTop","pt","pb","borderTop","variant","onClick","disabled","Step"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: () => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: () => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) * 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n docLinkTooltipLabel={currentStep.props.docLinkTooltipLabel}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","createStyles","Modal","Progress","Children","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","docLinkTooltipLabel","description","py","px","showProgressBar","color","size","value","sx","theme","marginTop","pt","pb","borderTop","variant","onClick","disabled","Step"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => {\n const white = '#fff';\n return {\n body: {\n padding: 0,\n },\n modalType: {overflow: 'hidden', width: 550},\n innerBody: {\n padding: `${theme.spacing.md}px ${theme.spacing.xl}px ${theme.spacing.lg}px`,\n },\n header: {\n padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,\n width: '100%',\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n fontSize: theme.headings.sizes.h4.fontSize,\n lineHeight: theme.headings.sizes.h4.fontSize,\n },\n default: {},\n success: {backgroundColor: theme.colors.lime[6], color: white},\n warning: {backgroundColor: theme.colors.yellow[5], color: white},\n critical: {\n backgroundColor: theme.colors.red[6],\n color: white,\n },\n info: {backgroundColor: theme.colors.navy[5], color: white},\n whiteClose: {color: white, '&:hover': {backgroundColor: 'transparent'}},\n };\n});\n\nexport interface PromptProps extends ModalProps {\n variant: 'default' | 'success' | 'warning' | 'critical' | 'info';\n children: ReactNode;\n}\ninterface PromptType {\n (props: PromptProps): ReactElement;\n Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {\n const {classes, cx} = useStyles();\n const defaultVariant = variant === 'default';\n const convertedChildren = Children.toArray(children) as ReactElement[];\n\n const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n const classNames = {\n header: cx(classes.header, classes[variant]),\n close: !defaultVariant && classes.whiteClose,\n body: classes.body,\n modal: !defaultVariant && classes.modalType,\n };\n\n return (\n <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>\n <div className={classes.innerBody}>{otherChildren}</div>\n {footer}\n </Modal>\n );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["createStyles","Modal","Children","PromptFooter","useStyles","theme","white","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h4","lineHeight","default","success","backgroundColor","lime","color","warning","yellow","critical","red","info","navy","whiteClose","Prompt","children","variant","size","otherProps","classes","cx","defaultVariant","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","classNames","close","modal","div","className","Footer"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => {\n const white = '#fff';\n return {\n body: {\n padding: 0,\n },\n modalType: {overflow: 'hidden', width: 550},\n innerBody: {\n padding: `${theme.spacing.md}px ${theme.spacing.xl}px ${theme.spacing.lg}px`,\n },\n header: {\n padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,\n width: '100%',\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n fontSize: theme.headings.sizes.h4.fontSize,\n lineHeight: theme.headings.sizes.h4.fontSize,\n },\n default: {},\n success: {backgroundColor: theme.colors.lime[6], color: white},\n warning: {backgroundColor: theme.colors.yellow[5], color: white},\n critical: {\n backgroundColor: theme.colors.red[6],\n color: white,\n },\n info: {backgroundColor: theme.colors.navy[5], color: white},\n whiteClose: {color: white, '&:hover': {backgroundColor: 'transparent'}},\n };\n});\n\nexport interface PromptProps extends ModalProps {\n variant: 'default' | 'success' | 'warning' | 'critical' | 'info';\n children: ReactNode;\n}\ninterface PromptType {\n (props: PromptProps): ReactElement;\n Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {\n const {classes, cx} = useStyles();\n const defaultVariant = variant === 'default';\n const convertedChildren = Children.toArray(children) as ReactElement[];\n\n const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n const classNames = {\n header: cx(classes.header, classes[variant]),\n close: !defaultVariant && classes.whiteClose,\n body: classes.body,\n modal: !defaultVariant && classes.modalType,\n };\n\n return (\n <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>\n <div className={classes.innerBody}>{otherChildren}</div>\n {footer}\n </Modal>\n );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["createStyles","Modal","Children","PromptFooter","useStyles","theme","white","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h4","lineHeight","default","success","backgroundColor","lime","color","warning","yellow","critical","red","info","navy","whiteClose","Prompt","children","variant","size","otherProps","classes","cx","defaultVariant","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","classNames","close","modal","div","className","Footer"],"mappings":";;;;AAAA,SAAQA,YAAY,EAAEC,KAAK,QAAmB,gBAAgB;AAC9D,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,IAAMC,YAAYJ,aAAa,SAACK,OAAU;IACtC,IAAMC,QAAQ;IACd,OAAO;QACHC,MAAM;YACFC,SAAS;QACb;QACAC,WAAW;YAACC,UAAU;YAAUC,OAAO;QAAG;QAC1CC,WAAW;YACPJ,SAAS,AAAC,GAAwBH,OAAtBA,MAAMQ,OAAO,CAACC,EAAE,EAAC,OAA2BT,OAAtBA,MAAMQ,OAAO,CAACE,EAAE,EAAC,OAAsB,OAAjBV,MAAMQ,OAAO,CAACG,EAAE,EAAC;QAC7E;QACAC,QAAQ;YACJT,SAAS,AAAC,GAAwBH,OAAtBA,MAAMQ,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBT,MAAMQ,OAAO,CAACE,EAAE,EAAC;YACnDJ,OAAO;YACPO,cAAc,AAAC,aAAiC,OAArBb,MAAMc,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/CC,UAAUhB,MAAMiB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACH,QAAQ;YAC1CI,YAAYpB,MAAMiB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACH,QAAQ;QAChD;QACAK,SAAS,CAAC;QACVC,SAAS;YAACC,iBAAiBvB,MAAMc,MAAM,CAACU,IAAI,CAAC,EAAE;YAAEC,OAAOxB;QAAK;QAC7DyB,SAAS;YAACH,iBAAiBvB,MAAMc,MAAM,CAACa,MAAM,CAAC,EAAE;YAAEF,OAAOxB;QAAK;QAC/D2B,UAAU;YACNL,iBAAiBvB,MAAMc,MAAM,CAACe,GAAG,CAAC,EAAE;YACpCJ,OAAOxB;QACX;QACA6B,MAAM;YAACP,iBAAiBvB,MAAMc,MAAM,CAACiB,IAAI,CAAC,EAAE;YAAEN,OAAOxB;QAAK;QAC1D+B,YAAY;YAACP,OAAOxB;YAAO,WAAW;gBAACsB,iBAAiB;YAAa;QAAC;IAC1E;AACJ;AAWA,OAAO,IAAMU,SAAqB,iBAA8C;QAA5CC,kBAAAA,UAAUC,iBAAAA,SAASC,cAAAA,MAASC;QAA5BH;QAAUC;QAASC;;IACnD,IAAsBrC,aAAAA,aAAfuC,UAAevC,WAAfuC,SAASC,KAAMxC,WAANwC;IAChB,IAAMC,iBAAiBL,YAAY;IACnC,IAAMM,oBAAoB5C,SAAS6C,OAAO,CAACR;IAE3C,IAAMS,gBAAgBF,kBAAkBG,MAAM,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKhD;;IACzE,IAAMiD,SAASN,kBAAkBO,IAAI,CAAC,SAACH;eAAUA,MAAMC,IAAI,KAAKhD;;IAEhE,IAAMmD,aAAa;QACfrC,QAAQ2B,GAAGD,QAAQ1B,MAAM,EAAE0B,OAAO,CAACH,QAAQ;QAC3Ce,OAAO,CAACV,kBAAkBF,QAAQN,UAAU;QAC5C9B,MAAMoC,QAAQpC,IAAI;QAClBiD,OAAO,CAACX,kBAAkBF,QAAQlC,SAAS;IAC/C;IAEA,qBACI,MAACR;QAAMO,SAAS;QAAG8C,YAAYA;QAAYb,MAAMI,iBAAiBJ,OAAO,IAAI;OAAMC;;0BAC/E,KAACe;gBAAIC,WAAWf,QAAQ/B,SAAS;0BAAGoC;;YACnCI;;;AAGb,EAAE;AAEFd,OAAOqB,MAAM,GAAGxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n <StickyFooter {...otherProps}>{children}</StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n <StickyFooter {...otherProps}>{children}</StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps"],"mappings":";;;;AACA,SAAQA,YAAY,QAA0B,mBAAmB;AAIjE,OAAO,IAAMC,eAAwE,+BACjF;QADmFC,kBAAAA,UAAaC;QAAbD;;WACnF,KAACF,sDAAiBG;kBAAaD;;AAAuB,EACxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n /**\n * Whether a border is render on top of the footer\n */\n borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n footer: {\n position: 'sticky',\n bottom: 0,\n zIndex: 1,\n backgroundColor: 'white',\n },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n borderTop,\n children,\n ...others\n}) => {\n const {classes} = useStyles();\n\n return (\n <>\n {borderTop ? <Divider size=\"xs\" /> : null}\n <Box className={classes.footer}>\n <Group position=\"right\" spacing=\"xs\" pt=\"md\" pb=\"md\" px=\"xl\" {...others}>\n {children}\n </Group>\n </Box>\n </>\n );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","pt","pb","px"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n /**\n * Whether a border is render on top of the footer\n */\n borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n footer: {\n position: 'sticky',\n bottom: 0,\n zIndex: 1,\n backgroundColor: 'white',\n },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n borderTop,\n children,\n ...others\n}) => {\n const {classes} = useStyles();\n\n return (\n <>\n {borderTop ? <Divider size=\"xs\" /> : null}\n <Box className={classes.footer}>\n <Group position=\"right\" spacing=\"xs\" pt=\"md\" pb=\"md\" px=\"xl\" {...others}>\n {children}\n </Group>\n </Box>\n </>\n );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","pt","pb","px"],"mappings":";;;;AAAA,SAAQA,GAAG,EAAEC,YAAY,EAAgBC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AAU9E,IAAMC,YAAYH,aAAa;WAAO;QAClCI,QAAQ;YACJC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;IACJ;;AAEA,OAAO,IAAMC,eAAwE,iBAI/E;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAM,AAACE,UAAWV,YAAXU;IAEP,qBACI;;YACKH,0BAAY,KAACT;gBAAQa,MAAK;iBAAU,IAAI;0BACzC,KAACf;gBAAIgB,WAAWF,QAAQT,MAAM;0BAC1B,cAAA,KAACF;oBAAMG,UAAS;oBAAQW,SAAQ;oBAAKC,IAAG;oBAAKC,IAAG;oBAAKC,IAAG;mBAASP;8BAC5DD;;;;;AAKrB,EAAE"}
|
|
@@ -11,7 +11,7 @@ import { defaultColumnSizing, flexRender, getCoreRowModel, useReactTable } from
|
|
|
11
11
|
import defaultsDeep from "lodash.defaultsdeep";
|
|
12
12
|
import { Children, Fragment, useCallback, useEffect, useState } from "react";
|
|
13
13
|
import { TableActions } from "./TableActions";
|
|
14
|
-
import { TableCollapsibleColumn } from "./TableCollapsibleColumn";
|
|
14
|
+
import { TableCollapsibleColumn, TableAccordionColumn } from "./TableCollapsibleColumn";
|
|
15
15
|
import { TableContext } from "./TableContext";
|
|
16
16
|
import { TableDateRangePicker } from "./TableDateRangePicker";
|
|
17
17
|
import { TableFilter } from "./TableFilter";
|
|
@@ -66,7 +66,7 @@ var useStyles = createStyles(function(theme, param) {
|
|
|
66
66
|
};
|
|
67
67
|
});
|
|
68
68
|
export var Table = function(param) {
|
|
69
|
-
var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
|
|
69
|
+
var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
|
|
70
70
|
var convertedChildren = Children.toArray(children);
|
|
71
71
|
var header = convertedChildren.find(function(child) {
|
|
72
72
|
return child.type === TableHeader;
|
|
@@ -93,7 +93,7 @@ export var Table = function(param) {
|
|
|
93
93
|
multiRowSelectionEnabled: multiRowSelectionEnabled
|
|
94
94
|
}), cx = _useStyles.cx, classes = _useStyles.classes;
|
|
95
95
|
var _ref;
|
|
96
|
-
var table = useReactTable({
|
|
96
|
+
var table = useReactTable(_object_spread({
|
|
97
97
|
initialState: defaultsDeep(initialStateWithoutForm, {
|
|
98
98
|
pagination: {
|
|
99
99
|
pageSize: TablePerPage.DEFAULT_SIZE
|
|
@@ -104,13 +104,13 @@ export var Table = function(param) {
|
|
|
104
104
|
TableSelectableColumn
|
|
105
105
|
].concat(columns) : columns,
|
|
106
106
|
getCoreRowModel: getCoreRowModel(),
|
|
107
|
-
manualPagination:
|
|
107
|
+
manualPagination: (options === null || options === void 0 ? void 0 : options.getPaginationRowModel) === undefined,
|
|
108
108
|
enableMultiRowSelection: !!multiRowSelectionEnabled,
|
|
109
109
|
getRowId: getRowId,
|
|
110
110
|
getRowCanExpand: function(row) {
|
|
111
111
|
return (_ref = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref !== void 0 ? _ref : false;
|
|
112
112
|
}
|
|
113
|
-
});
|
|
113
|
+
}, options));
|
|
114
114
|
var _useState = _sliced_to_array(useState(table.initialState), 2), state = _useState[0], setState = _useState[1];
|
|
115
115
|
table.setOptions(function(prev) {
|
|
116
116
|
return _object_spread_props(_object_spread({}, prev), {
|
|
@@ -223,7 +223,8 @@ export var Table = function(param) {
|
|
|
223
223
|
clearSelection: clearSelection,
|
|
224
224
|
form: form,
|
|
225
225
|
containerRef: outsideClickRef,
|
|
226
|
-
multiRowSelectionEnabled: multiRowSelectionEnabled
|
|
226
|
+
multiRowSelectionEnabled: multiRowSelectionEnabled,
|
|
227
|
+
getPageCount: table.getPageCount
|
|
227
228
|
},
|
|
228
229
|
children: [
|
|
229
230
|
header,
|
|
@@ -269,6 +270,7 @@ Table.Predicate = TablePredicate;
|
|
|
269
270
|
Table.PerPage = TablePerPage;
|
|
270
271
|
Table.Predicate = TablePredicate;
|
|
271
272
|
Table.CollapsibleColumn = TableCollapsibleColumn;
|
|
273
|
+
Table.AccordionColumn = TableAccordionColumn;
|
|
272
274
|
Table.DateRangePicker = TableDateRangePicker;
|
|
273
275
|
|
|
274
276
|
//# sourceMappingURL=Table.js.map
|