@coveord/plasma-mantine 49.2.0 → 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 +7 -7
- 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.map +1 -1
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- 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.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.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/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.map +1 -1
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableCollapsibleColumn.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.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/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 +3 -3
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableAccordionColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableAccordionColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n /**\n * Function that return components for the selected row or selected rows when multi row selection is enabled\n *\n * @param datum the data of the selected row(s)\n * @example\n * <Table.Actions<MyType>>\n * {(datum: MyType) => (\n * <Button\n * component={Link}\n * to={`edit/${datum.id}`}\n * leftIcon={<EditSize24Px />}\n * variant=\"subtle\"\n * color=\"navyBlue.8\"\n * >\n * Edit\n * </Button>\n * )}\n * </Table.Actions>\n */\n children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["Group","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","spacing"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n /**\n * Function that return components for the selected row or selected rows when multi row selection is enabled\n *\n * @param datum the data of the selected row(s)\n * @example\n * <Table.Actions<MyType>>\n * {(datum: MyType) => (\n * <Button\n * component={Link}\n * to={`edit/${datum.id}`}\n * leftIcon={<EditSize24Px />}\n * variant=\"subtle\"\n * color=\"navyBlue.8\"\n * >\n * Edit\n * </Button>\n * )}\n * </Table.Actions>\n */\n children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["Group","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","spacing"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AAEpC,SAAQC,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO,KAACP;QAAMQ,SAAQ;kBAAML,SAASE,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAClG,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => {\n const onToggle = () => {\n // close all other rows when the current row not is expanded\n if (!info.row.getIsExpanded()) {\n info.table.toggleAllRowsExpanded(false);\n }\n };\n\n return <CollapsibleIcon onToggle={onToggle} info={info} />;\n },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n info: CellContext<unknown, unknown>;\n onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onToggle?.(e);\n handler();\n };\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => {\n const onToggle = () => {\n // close all other rows when the current row not is expanded\n if (!info.row.getIsExpanded()) {\n info.table.toggleAllRowsExpanded(false);\n }\n };\n\n return <CollapsibleIcon onToggle={onToggle} info={info} />;\n },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n info: CellContext<unknown, unknown>;\n onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onToggle?.(e);\n handler();\n };\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":";;;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC,IAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,IAAMC,yBAA6C,wCACnDL;IACHM,MAAM,SAACC;6BAAS,KAACC;YAAgBD,MAAMA;;;GACzC;AAEF;;CAEC,GACD,OAAO,IAAME,uBAA2C,wCACjDT;IACHM,MAAM,SAACC,MAAS;QACZ,IAAMG,WAAW,WAAM;YACnB,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC,KAAK;YAC1C,CAAC;QACL;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;GACF;AAEF,IAAMC,kBAGD,gBAAsB;QAApBD,aAAAA,MAAMG,iBAAAA;IACT,IAAMK,UAAUR,KAAKI,GAAG,CAACK,wBAAwB;IACjD,IAAMC,UAAU,SAACC,GAA0C;QACvDA,EAAEC,eAAe;QACjBT,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWQ;QACXH;IACJ;IACA,OAAOR,KAAKI,GAAG,CAACS,YAAY,mBACxB,KAACrB;QAAWkB,SAASA;QAASI,SAAQ;QAASC,QAAO;kBACjDf,KAAKI,GAAG,CAACC,aAAa,mBAAK,KAACd,yCAAyB,KAACD,0BAAwB;SAEnF,IAAI;AACZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n /**\n * An object containing date presets.\n * If empty the preset dropdown won't be shown\n *\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 * @default {}\n */\n presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n presets = {},\n rangeCalendarProps,\n}) => {\n const [opened, setOpened] = useState(false);\n const {form} = useTable();\n\n const onApply = (dates: DateRangePickerValue) => {\n form.setFieldValue('dateRange', dates);\n setOpened(false);\n };\n const onCancel = () => {\n setOpened(false);\n };\n\n const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n return (\n <>\n {formatedRange}\n <Popover opened={opened} onChange={setOpened}>\n <Popover.Target>\n <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n <CalendarSize24Px width={24} height={24} />\n </Button>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={form.values.dateRange}\n onApply={onApply}\n onCancel={onCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["CalendarSize24Px","Popover","dayjs","useState","Button","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n /**\n * An object containing date presets.\n * If empty the preset dropdown won't be shown\n *\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 * @default {}\n */\n presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n presets = {},\n rangeCalendarProps,\n}) => {\n const [opened, setOpened] = useState(false);\n const {form} = useTable();\n\n const onApply = (dates: DateRangePickerValue) => {\n form.setFieldValue('dateRange', dates);\n setOpened(false);\n };\n const onCancel = () => {\n setOpened(false);\n };\n\n const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n return (\n <>\n {formatedRange}\n <Popover opened={opened} onChange={setOpened}>\n <Popover.Target>\n <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n <CalendarSize24Px width={24} height={24} />\n </Button>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={form.values.dateRange}\n onApply={onApply}\n onCancel={onCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["CalendarSize24Px","Popover","dayjs","useState","Button","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,6BAA6B,QAA2C,uBAAuB;AAEvG,SAAQC,QAAQ,QAAO,aAAa;AAkBpC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BN,6BAAAA,SAAS,KAAK,OAAnCO,SAAqBP,cAAbQ,YAAaR;IAC5B,IAAM,AAACS,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC,OAAgC;QAC7CF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU,KAAK;IACnB;IACA,IAAMK,WAAW,WAAM;QACnBL,UAAU,KAAK;IACnB;IAEA,IAAMM,aAAa,SAACC;eAAehB,MAAMgB,MAAMC,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,MAACnB;gBAAQS,QAAQA;gBAAQa,UAAUZ;;kCAC/B,KAACV,QAAQuB,MAAM;kCACX,cAAA,KAACpB;4BAAOqB,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMhB,UAAU,IAAI;;4BAAGiB,IAAG;sCACtE,cAAA,KAAC5B;gCAAiB6B,OAAO;gCAAIC,QAAQ;;;;kCAG7C,KAAC7B,QAAQ8B,QAAQ;wBAACC,GAAG;kCACjB,cAAA,KAAC3B;4BACG4B,cAAcrB,KAAKS,MAAM,CAACC,SAAS;4BACnCT,SAASA;4BACTG,UAAUA;4BACVR,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n const {value} = event.currentTarget;\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n value={state.globalFilter}\n onChange={handleSearchChange}\n {...others}\n />\n );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n const {value} = event.currentTarget;\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n value={state.globalFilter}\n onChange={handleSearchChange}\n {...others}\n />\n );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","className","mb","rightSection","height","onChange"],"mappings":";;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,KAACvB;QACG8B,WAAWb,QAAQb,OAAO;QAC1BO,aAAaA;QACboB,IAAG;QACHC,4BAAc,KAAClC;YAAemC,QAAQ;YAAIH,WAAWZ,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBK,UAAUb;OACNN;AAGhB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import {Group, DefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\ninterface TableFooterProps extends DefaultProps {\n children?: ReactNode;\n}\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n <Group position=\"apart\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n);\n"],"names":["Group","TableFooter","children","others","position","px","py"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import {Group, DefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\ninterface TableFooterProps extends DefaultProps {\n children?: ReactNode;\n}\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n <Group position=\"apart\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n);\n"],"names":["Group","TableFooter","children","others","position","px","py"],"mappings":";;;;AAAA,SAAQA,KAAK,QAAqB,gBAAgB;AAMlD,OAAO,IAAMC,cAAmD,+BAC5D;QAD8DC,kBAAAA,UAAaC;QAAbD;;WAC9D,KAACF;QAAMI,UAAS;QAAQC,IAAG;QAAKC,IAAG;OAASH;kBACvCD;;AACE,EACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return multiRowSelectionEnabled ? (\n <Group position=\"apart\" className={classes.root}>\n {selectedRows.length > 0 ? (\n <Tooltip label=\"Unselect all\">\n <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n ) : (\n <Space />\n )}\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n </Group>\n ) : (\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["CrossSize16Px","createStyles","Group","Space","Tooltip","Button","useTable","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","className","length","label","onClick","ml","variant","leftIcon","height","spacing","px","py"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return multiRowSelectionEnabled ? (\n <Group position=\"apart\" className={classes.root}>\n {selectedRows.length > 0 ? (\n <Tooltip label=\"Unselect all\">\n <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n ) : (\n <Space />\n )}\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n </Group>\n ) : (\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["CrossSize16Px","createStyles","Group","Space","Tooltip","Button","useTable","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","className","length","label","onClick","ml","variant","leftIcon","height","spacing","px","py"],"mappings":";;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,YAAY,EAAgBC,KAAK,EAAaC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAG3F,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEf,YAAAA,YAA7DiB,kBAA6DjB,UAA7DiB,iBAAiBC,2BAA4ClB,UAA5CkB,0BAA0BC,iBAAkBnB,UAAlBmB;IAClD,IAAM,AAACC,UAAWnB,UAAU,IAAI,EAAE;QAACoB,MAAM;QAAeT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EM;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,MAACtB;QAAMQ,UAAS;QAAQmB,WAAWH,QAAQjB,IAAI;;YAC1CmB,aAAaE,MAAM,GAAG,kBACnB,KAAC1B;gBAAQ2B,OAAM;0BACX,cAAA,MAAC1B;oBAAO2B,SAASP;oBAAgBQ,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,KAACnC;wBAAcoC,QAAQ;;;wBACtFR,aAAaE,MAAM;wBAAC;;;+BAI7B,KAAC3B,UACJ;0BACD,KAACD;gBAAMQ,UAAS;gBAAQ2B,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASjB;0BACpDD;;;uBAIT,KAACnB;QAAMQ,UAAS;QAAQ2B,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKV,WAAWH,QAAQjB,IAAI;OAAMa;kBAC7ED;OAER;AACL,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n /**\n * The total number of page. Use null only if your table is paginated client side\n */\n totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n const {state, setState, containerRef, getPageCount} = useTable();\n const updatePage = (newPage: number) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {...prevState.pagination, pageIndex: newPage - 1},\n }));\n containerRef.current.scrollIntoView({behavior: 'smooth'});\n };\n\n const total = totalPages === null ? getPageCount() : totalPages;\n\n return (\n <Pagination\n page={state.pagination.pageIndex + 1}\n onChange={updatePage}\n total={total}\n boundaries={0}\n size=\"md\"\n getItemAriaLabel={(label) => {\n switch (label) {\n case 'prev':\n return 'previous page';\n case 'next':\n return 'next page';\n default:\n return `${label}`;\n }\n }}\n />\n );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n /**\n * The total number of page. Use null only if your table is paginated client side\n */\n totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n const {state, setState, containerRef, getPageCount} = useTable();\n const updatePage = (newPage: number) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {...prevState.pagination, pageIndex: newPage - 1},\n }));\n containerRef.current.scrollIntoView({behavior: 'smooth'});\n };\n\n const total = totalPages === null ? getPageCount() : totalPages;\n\n return (\n <Pagination\n page={state.pagination.pageIndex + 1}\n onChange={updatePage}\n total={total}\n boundaries={0}\n size=\"md\"\n getItemAriaLabel={(label) => {\n switch (label) {\n case 'prev':\n return 'previous page';\n case 'next':\n return 'next page';\n default:\n return `${label}`;\n }\n }}\n />\n );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,aAAa;AASpC,OAAO,IAAMC,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDF,YAAAA,YAA/CG,QAA+CH,UAA/CG,OAAOC,WAAwCJ,UAAxCI,UAAUC,eAA8BL,UAA9BK,cAAcC,eAAgBN,UAAhBM;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQb,eAAe,IAAI,GAAGI,iBAAiBJ,UAAU;IAE/D,qBACI,KAACH;QACGiB,MAAMb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n /**\n * The label displayed before the control\n *\n * @default Results per page\n */\n label?: string;\n /**\n * The per page choices to display\n *\n * @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group>\n <Text>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"md\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n /**\n * The label displayed before the control\n *\n * @default Results per page\n */\n label?: string;\n /**\n * The per page choices to display\n *\n * @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group>\n <Text>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"md\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGe,OAAOT,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACG,QAAQ,gBAAlCV,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACW,QAAQ,EAAE;gBACrEC,UAAUT;gBACVU,MAAMb,OAAOc,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFlB,aAAamB,YAAY,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Select, SelectItem, Group, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePredicateProps {\n /**\n * Unique identifier for this predicate. Will be used to access the selected value in the table state\n */\n id: string;\n /**\n * The values to display in the predicate\n */\n data: SelectItem[];\n /**\n * Input label (not displayed for now)\n *\n * @default default to the predicate id\n */\n label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n const {onChange, form} = useTable();\n\n const onUpdate = (newValue: string) => {\n form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n onChange?.();\n };\n\n return (\n <Group spacing=\"xs\">\n {label ? <Text>{label}:</Text> : null}\n <Select\n withinPortal\n value={form.values.predicates[id]}\n onChange={onUpdate}\n data={data}\n aria-label={label ?? id}\n searchable={data.length > 7}\n />\n </Group>\n );\n};\n"],"names":["Select","Group","Text","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Select, SelectItem, Group, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePredicateProps {\n /**\n * Unique identifier for this predicate. Will be used to access the selected value in the table state\n */\n id: string;\n /**\n * The values to display in the predicate\n */\n data: SelectItem[];\n /**\n * Input label (not displayed for now)\n *\n * @default default to the predicate id\n */\n label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n const {onChange, form} = useTable();\n\n const onUpdate = (newValue: string) => {\n form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n onChange?.();\n };\n\n return (\n <Group spacing=\"xs\">\n {label ? <Text>{label}:</Text> : null}\n <Select\n withinPortal\n value={form.values.predicates[id]}\n onChange={onUpdate}\n data={data}\n aria-label={label ?? id}\n searchable={data.length > 7}\n />\n </Group>\n );\n};\n"],"names":["Select","Group","Text","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;AAAA,SAAQA,MAAM,EAAcC,KAAK,EAAEC,IAAI,QAAO,gBAAgB;AAE9D,SAAQC,QAAQ,QAAO,aAAa;AAmBpC,OAAO,IAAMC,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,MAACP;QAAMc,SAAQ;;YACVR,sBAAQ,MAACL;;oBAAMK;oBAAM;;iBAAW,IAAI;0BACrC,KAACP;gBACGgB,YAAY;gBACZC,OAAOR,KAAKI,MAAM,CAACC,UAAU,CAACT,GAAG;gBACjCG,UAAUE;gBACVJ,MAAMA;gBACNY,cAAYX,kBAAAA,mBAAAA,QAASF,EAAE;gBACvBc,YAAYb,KAAKc,MAAM,GAAG;;;;AAI1C,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n id: 'select',\n enableSorting: false,\n header: ({table}) => {\n const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n return (\n <Tooltip label={label}>\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={table.getIsSomePageRowsSelected()}\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label={label}\n />\n </Tooltip>\n );\n },\n cell: ({row}) => (\n <Checkbox\n checked={row.getIsSelected()}\n indeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label=\"Select row\"\n />\n ),\n};\n"],"names":["Checkbox","Tooltip","TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n id: 'select',\n enableSorting: false,\n header: ({table}) => {\n const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n return (\n <Tooltip label={label}>\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={table.getIsSomePageRowsSelected()}\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label={label}\n />\n </Tooltip>\n );\n },\n cell: ({row}) => (\n <Checkbox\n checked={row.getIsSelected()}\n indeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label=\"Select row\"\n />\n ),\n};\n"],"names":["Checkbox","Tooltip","TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";AAAA,SAAQA,QAAQ,EAAEC,OAAO,QAAO,gBAAgB;AAGhD;;CAEC,GACD,OAAO,IAAMC,wBAA4C;IACrDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ,gBAAa;YAAXC,cAAAA;QACN,IAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC,2BAA2B;QACxG,qBACI,KAACP;YAAQM,OAAOA;sBACZ,cAAA,KAACP;gBACGS,SAASH,MAAMI,wBAAwB;gBACvCC,eAAeL,MAAMM,yBAAyB;gBAC9CC,UAAUP,MAAMQ,mCAAmC;gBACnDC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYV;;;IAI5B;IACAW,MAAM;YAAEC,YAAAA;6BACJ,KAACnB;YACGS,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":";AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMlB,QAAQgB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACvB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBnC,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASd,OAAOG,MAAM,CAACY,uBAAuB;IACpD,IAAMC,eAAehB,OAAOG,MAAM,CAACc,WAAW;IAC9C,IAAMC,OAAOvB,YAAY,CAACqB,gBAAgBhB,OAAOG,MAAM,CAACgB,eAAe,GAAG;IAE1E,qBACI,KAACxC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACvB,OAAAA;QAAK;QAAGkC,aAAWJ,eAAelB,aAAa,CAACkB,aAAa,GAAG,MAAM;kBACrG,cAAA,KAAC1C;YAAe+C,SAASP;YAAQN,WAAWP,QAAQhB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;kCAAM1B,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC3C;wBAAOsD,IAAI,SAAC9C;mCAAW;gCAACI,OAAOkC,eAAetC,MAAMe,MAAM,CAACgC,MAAM,CAAC,EAAE,GAAGpB,SAAS;4BAAA;;kCAC7E,cAAA,KAACa;4BAAKQ,QAAQ;;;;;;;AAMtC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {functionalUpdate, Table} from '@tanstack/table-core';\nimport {useState} from 'react';\n\nexport const useRowSelection = <T>(table: Table<T>) => {\n const [rowSelection, setRowSelection] = useState<Record<string, T>>({});\n\n table.setOptions((prev) => ({\n ...prev,\n onRowSelectionChange: (rowSelectionUpdater) => {\n table.setState((old) => {\n const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);\n setRowSelection((current) => {\n const currentRowsById = table.getRowModel().rowsById;\n return Object.keys(selectedRowsIds).reduce((memo, rowId) => {\n if (current[rowId]) {\n memo[rowId] = current[rowId];\n } else {\n memo[rowId] = currentRowsById[rowId].original;\n }\n return memo;\n }, {} as Record<string, T>);\n });\n\n return {\n ...old,\n rowSelection: selectedRowsIds,\n };\n });\n },\n }));\n\n const clearSelection = () => {\n table.resetRowSelection(true);\n };\n\n const getSelectedRows = () => Object.values(rowSelection);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n return {\n clearSelection,\n getSelectedRow,\n getSelectedRows,\n };\n};\n"],"names":["functionalUpdate","useState","useRowSelection","table","rowSelection","setRowSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","selectedRowsIds","current","currentRowsById","getRowModel","rowsById","Object","keys","reduce","memo","rowId","original","clearSelection","resetRowSelection","getSelectedRows","values","getSelectedRow"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {functionalUpdate, Table} from '@tanstack/table-core';\nimport {useState} from 'react';\n\nexport const useRowSelection = <T>(table: Table<T>) => {\n const [rowSelection, setRowSelection] = useState<Record<string, T>>({});\n\n table.setOptions((prev) => ({\n ...prev,\n onRowSelectionChange: (rowSelectionUpdater) => {\n table.setState((old) => {\n const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);\n setRowSelection((current) => {\n const currentRowsById = table.getRowModel().rowsById;\n return Object.keys(selectedRowsIds).reduce((memo, rowId) => {\n if (current[rowId]) {\n memo[rowId] = current[rowId];\n } else {\n memo[rowId] = currentRowsById[rowId].original;\n }\n return memo;\n }, {} as Record<string, T>);\n });\n\n return {\n ...old,\n rowSelection: selectedRowsIds,\n };\n });\n },\n }));\n\n const clearSelection = () => {\n table.resetRowSelection(true);\n };\n\n const getSelectedRows = () => Object.values(rowSelection);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n return {\n clearSelection,\n getSelectedRow,\n getSelectedRows,\n };\n};\n"],"names":["functionalUpdate","useState","useRowSelection","table","rowSelection","setRowSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","selectedRowsIds","current","currentRowsById","getRowModel","rowsById","Object","keys","reduce","memo","rowId","original","clearSelection","resetRowSelection","getSelectedRows","values","getSelectedRow"],"mappings":";;;AAAA,SAAQA,gBAAgB,QAAc,uBAAuB;AAC7D,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,OAAO,IAAMC,kBAAkB,SAAIC,OAAoB;IACnD,IAAwCF,6BAAAA,SAA4B,CAAC,QAA9DG,eAAiCH,cAAnBI,kBAAmBJ;IAExCE,MAAMG,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHC,sBAAsB,SAACC,qBAAwB;gBAC3CN,MAAMO,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBZ,iBAAiBS,qBAAqBE,GAAG,CAAC,eAAe;oBACjFN,gBAAgB,SAACQ,SAAY;wBACzB,IAAMC,kBAAkBX,MAAMY,WAAW,GAAGC,QAAQ;wBACpD,OAAOC,OAAOC,IAAI,CAACN,iBAAiBO,MAAM,CAAC,SAACC,MAAMC,OAAU;4BACxD,IAAIR,OAAO,CAACQ,MAAM,EAAE;gCAChBD,IAAI,CAACC,MAAM,GAAGR,OAAO,CAACQ,MAAM;4BAChC,OAAO;gCACHD,IAAI,CAACC,MAAM,GAAGP,eAAe,CAACO,MAAM,CAACC,QAAQ;4BACjD,CAAC;4BACD,OAAOF;wBACX,GAAG,CAAC;oBACR;oBAEA,OAAO,wCACAT;wBACHP,cAAcQ;;gBAEtB;YACJ;;;IAGJ,IAAMW,iBAAiB,WAAM;QACzBpB,MAAMqB,iBAAiB,CAAC,IAAI;IAChC;IAEA,IAAMC,kBAAkB;eAAMR,OAAOS,MAAM,CAACtB;;QAEfqB;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB,IAAI;;IAEzD,OAAO;QACHF,gBAAAA;QACAI,gBAAAA;QACAF,iBAAAA;IACJ;AACJ,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/FormProvider.tsx"],"sourcesContent":["/* eslint-disable prefer-arrow/prefer-arrow-functions */\nimport {_TransformValues, UseForm, UseFormReturnType} from '@mantine/form/lib/types';\nimport React, {createContext, useContext} from 'react';\n\nimport {useForm} from './useForm';\n\nexport interface FormProviderProps<Form> {\n form: Form;\n children: React.ReactNode;\n}\n\nexport function createFormContext<\n Values,\n TransformValues extends _TransformValues<Values> = (values: Values) => Values\n>() {\n type Form = UseFormReturnType<Values, TransformValues>;\n\n const FormContext = createContext<Form>(null);\n\n function FormProvider({form, children}: FormProviderProps<Form>) {\n return <FormContext.Provider value={form}>{children}</FormContext.Provider>;\n }\n\n function useFormContext() {\n const ctx = useContext(FormContext);\n if (!ctx) {\n throw new Error('useFormContext was called outside of FormProvider context');\n }\n\n return ctx;\n }\n\n return [FormProvider, useFormContext, useForm] as [\n React.FC<FormProviderProps<Form>>,\n () => Form,\n UseForm<Values, TransformValues>\n ];\n}\n"],"names":["React","createContext","useContext","useForm","createFormContext","FormProvider","form","children","FormContext","Provider","value","useFormContext","ctx","Error"],"mappings":"AAAA,sDAAsD
|
|
1
|
+
{"version":3,"sources":["../../../src/form/FormProvider.tsx"],"sourcesContent":["/* eslint-disable prefer-arrow/prefer-arrow-functions */\nimport {_TransformValues, UseForm, UseFormReturnType} from '@mantine/form/lib/types';\nimport React, {createContext, useContext} from 'react';\n\nimport {useForm} from './useForm';\n\nexport interface FormProviderProps<Form> {\n form: Form;\n children: React.ReactNode;\n}\n\nexport function createFormContext<\n Values,\n TransformValues extends _TransformValues<Values> = (values: Values) => Values\n>() {\n type Form = UseFormReturnType<Values, TransformValues>;\n\n const FormContext = createContext<Form>(null);\n\n function FormProvider({form, children}: FormProviderProps<Form>) {\n return <FormContext.Provider value={form}>{children}</FormContext.Provider>;\n }\n\n function useFormContext() {\n const ctx = useContext(FormContext);\n if (!ctx) {\n throw new Error('useFormContext was called outside of FormProvider context');\n }\n\n return ctx;\n }\n\n return [FormProvider, useFormContext, useForm] as [\n React.FC<FormProviderProps<Form>>,\n () => Form,\n UseForm<Values, TransformValues>\n ];\n}\n"],"names":["React","createContext","useContext","useForm","createFormContext","FormProvider","form","children","FormContext","Provider","value","useFormContext","ctx","Error"],"mappings":"AAAA,sDAAsD;AAEtD,OAAOA,SAAQC,aAAa,EAAEC,UAAU,QAAO,QAAQ;AAEvD,SAAQC,OAAO,QAAO,YAAY;AAOlC,OAAO,SAASC,oBAGZ;QAKSC,eAAT,SAASA,aAAa,KAAyC,EAAE;YAA1CC,OAAD,MAACA,MAAMC,WAAP,MAAOA;QACzB,qBAAO,KAACC,YAAYC,QAAQ;YAACC,OAAOJ;sBAAOC;;IAC/C;QAESI,iBAAT,SAASA,iBAAiB;QACtB,IAAMC,MAAMV,WAAWM;QACvB,IAAI,CAACI,KAAK;YACN,MAAM,IAAIC,MAAM,6DAA6D;QACjF,CAAC;QAED,OAAOD;IACX;IAbA,IAAMJ,4BAAcP,cAAoB,IAAI;IAe5C,OAAO;QAACI;QAAcM;QAAgBR;KAAQ;AAKlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/useForm.ts"],"sourcesContent":["import {useForm as useMantineForm} from '@mantine/form';\nimport {GetInputProps} from '@mantine/form/lib/types';\n\nexport const useForm: typeof useMantineForm = (options) => {\n const form = useMantineForm(options);\n\n const getInputProps: GetInputProps<Record<string, unknown>> = (\n path,\n {type = 'input', withError = type === 'input', withFocus = true} = {}\n ) => {\n const originalPayload = form.getInputProps(path, {type, withError, withFocus});\n if (Array.isArray(originalPayload.value)) {\n return {\n ...originalPayload,\n onReorderItem: (payload: Record<'from' | 'to', number>) => form.reorderListItem(path, payload),\n onRemoveItem: (index: number) => form.removeListItem(path, index),\n onInsertItem: (valueToInsert: unknown, index: number) =>\n form.insertListItem(path, valueToInsert, index),\n };\n }\n\n return originalPayload;\n };\n\n return {...form, getInputProps};\n};\n"],"names":["useForm","useMantineForm","options","form","getInputProps","path","type","withError","withFocus","originalPayload","Array","isArray","value","onReorderItem","payload","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/form/useForm.ts"],"sourcesContent":["import {useForm as useMantineForm} from '@mantine/form';\nimport {GetInputProps} from '@mantine/form/lib/types';\n\nexport const useForm: typeof useMantineForm = (options) => {\n const form = useMantineForm(options);\n\n const getInputProps: GetInputProps<Record<string, unknown>> = (\n path,\n {type = 'input', withError = type === 'input', withFocus = true} = {}\n ) => {\n const originalPayload = form.getInputProps(path, {type, withError, withFocus});\n if (Array.isArray(originalPayload.value)) {\n return {\n ...originalPayload,\n onReorderItem: (payload: Record<'from' | 'to', number>) => form.reorderListItem(path, payload),\n onRemoveItem: (index: number) => form.removeListItem(path, index),\n onInsertItem: (valueToInsert: unknown, index: number) =>\n form.insertListItem(path, valueToInsert, index),\n };\n }\n\n return originalPayload;\n };\n\n return {...form, getInputProps};\n};\n"],"names":["useForm","useMantineForm","options","form","getInputProps","path","type","withError","withFocus","originalPayload","Array","isArray","value","onReorderItem","payload","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":";;AAAA,SAAQA,WAAWC,cAAc,QAAO,gBAAgB;AAGxD,OAAO,IAAMD,UAAiC,SAACE,SAAY;IACvD,IAAMC,OAAOF,eAAeC;IAE5B,IAAME,gBAAwD,SAC1DC,MAEC;oFADkE,CAAC,oBAAnEC,MAAAA,8BAAO,2CAASC,WAAAA,wCAAYD,SAAS,gDAASE,WAAAA,wCAAY,IAAI;QAE/D,IAAMC,kBAAkBN,KAAKC,aAAa,CAACC,MAAM;YAACC,MAAAA;YAAMC,WAAAA;YAAWC,WAAAA;QAAS;QAC5E,IAAIE,MAAMC,OAAO,CAACF,gBAAgBG,KAAK,GAAG;YACtC,OAAO,wCACAH;gBACHI,eAAe,SAACC;2BAA2CX,KAAKY,eAAe,CAACV,MAAMS;;gBACtFE,cAAc,SAACC;2BAAkBd,KAAKe,cAAc,CAACb,MAAMY;;gBAC3DE,cAAc,SAACC,eAAwBH;2BACnCd,KAAKkB,cAAc,CAAChB,MAAMe,eAAeH;;;QAErD,CAAC;QAED,OAAOR;IACX;IAEA,OAAO,wCAAIN;QAAMC,eAAAA;;AACrB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useControlledList.ts"],"sourcesContent":["import {useUncontrolled} from '@mantine/hooks';\n\ninterface UseControlledList<T> {\n /** Initial value for uncontrolled state */\n defaultValue?: T[];\n /** Value for controlled state */\n value?: T[];\n /** Controlled state onChange handler */\n onChange?: (values: T[]) => void;\n}\n\ninterface ListHandlers<T> {\n /** Appends the item at the end of the list */\n append: (item: T) => void;\n /** Removes the item at the index from the list */\n remove: (index: number) => void;\n /** Moves the item at the \"from\" position to another position within the list */\n reorder: ({from, to}: {from: number; to: number}) => void;\n}\n\n/**\n * Manage a list of items in a controlled fashion, to be used with inputs\n */\nexport const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {\n const [values, handleChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const remove = (index: number) => {\n const newValues = values.filter((_, i) => i !== index);\n handleChange?.(newValues);\n };\n\n const append = (item: T) => {\n const newValues = [...values, item];\n handleChange?.(newValues);\n };\n\n const reorder = ({from, to}: {from: number; to: number}) => {\n const newValues = [...values];\n const item = values[from];\n\n newValues.splice(from, 1);\n newValues.splice(to, 0, item);\n\n handleChange?.(newValues);\n };\n\n return [values, {remove, append, reorder}];\n};\n"],"names":["useUncontrolled","useControlledList","defaultValue","value","onChange","finalValue","values","handleChange","remove","index","newValues","filter","_","i","append","item","reorder","from","to","splice"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useControlledList.ts"],"sourcesContent":["import {useUncontrolled} from '@mantine/hooks';\n\ninterface UseControlledList<T> {\n /** Initial value for uncontrolled state */\n defaultValue?: T[];\n /** Value for controlled state */\n value?: T[];\n /** Controlled state onChange handler */\n onChange?: (values: T[]) => void;\n}\n\ninterface ListHandlers<T> {\n /** Appends the item at the end of the list */\n append: (item: T) => void;\n /** Removes the item at the index from the list */\n remove: (index: number) => void;\n /** Moves the item at the \"from\" position to another position within the list */\n reorder: ({from, to}: {from: number; to: number}) => void;\n}\n\n/**\n * Manage a list of items in a controlled fashion, to be used with inputs\n */\nexport const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {\n const [values, handleChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const remove = (index: number) => {\n const newValues = values.filter((_, i) => i !== index);\n handleChange?.(newValues);\n };\n\n const append = (item: T) => {\n const newValues = [...values, item];\n handleChange?.(newValues);\n };\n\n const reorder = ({from, to}: {from: number; to: number}) => {\n const newValues = [...values];\n const item = values[from];\n\n newValues.splice(from, 1);\n newValues.splice(to, 0, item);\n\n handleChange?.(newValues);\n };\n\n return [values, {remove, append, reorder}];\n};\n"],"names":["useUncontrolled","useControlledList","defaultValue","value","onChange","finalValue","values","handleChange","remove","index","newValues","filter","_","i","append","item","reorder","from","to","splice"],"mappings":";;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAoB/C;;CAEC,GACD,OAAO,IAAMC,oBAAoB,gBAAsF;QAAjFC,qBAAAA,cAAcC,cAAAA,OAAOC,iBAAAA;IACvD,IAA+BJ,oCAAAA,gBAAgB;QAC3CG,OAAAA;QACAD,cAAAA;QACAG,YAAY,EAAE;QACdD,UAAAA;IACJ,QALOE,SAAwBN,qBAAhBO,eAAgBP;IAO/B,IAAMQ,SAAS,SAACC,OAAkB;QAC9B,IAAMC,YAAYJ,OAAOK,MAAM,CAAC,SAACC,GAAGC;mBAAMA,MAAMJ;;QAChDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMI,SAAS,SAACC,MAAY;QACxB,IAAML,YAAY,AAAC,qBAAGJ,eAAJ;YAAYS;SAAK;QACnCR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMM,UAAU,gBAA4C;YAA1CC,aAAAA,MAAMC,WAAAA;QACpB,IAAMR,YAAa,qBAAGJ;QACtB,IAAMS,OAAOT,MAAM,CAACW,KAAK;QAEzBP,UAAUS,MAAM,CAACF,MAAM;QACvBP,UAAUS,MAAM,CAACD,IAAI,GAAGH;QAExBR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,OAAO;QAACJ;QAAQ;YAACE,QAAAA;YAAQM,QAAAA;YAAQE,SAAAA;QAAO;KAAE;AAC9C,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useParentHeight.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nconst getElementInnerHeight = (el: HTMLElement): number => {\n const fullHeight = el.getBoundingClientRect().height;\n const cs = getComputedStyle(el);\n const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n return fullHeight - padding - border;\n};\n\n/**\n * Computes the available height of the parent element on mount\n */\nexport const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {\n const [height, setHeight] = useState(-1);\n const ref = useRef<HTMLDivElement>();\n\n useEffect(() => {\n if (ref.current) {\n setHeight(getElementInnerHeight(ref.current.parentElement));\n }\n }, [ref.current]);\n\n return [height, ref];\n};\n"],"names":["useEffect","useRef","useState","getElementInnerHeight","el","fullHeight","getBoundingClientRect","height","cs","getComputedStyle","padding","parseFloat","paddingTop","paddingBottom","border","borderTopWidth","borderBottomWidth","useParentHeight","setHeight","ref","current","parentElement"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useParentHeight.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nconst getElementInnerHeight = (el: HTMLElement): number => {\n const fullHeight = el.getBoundingClientRect().height;\n const cs = getComputedStyle(el);\n const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n return fullHeight - padding - border;\n};\n\n/**\n * Computes the available height of the parent element on mount\n */\nexport const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {\n const [height, setHeight] = useState(-1);\n const ref = useRef<HTMLDivElement>();\n\n useEffect(() => {\n if (ref.current) {\n setHeight(getElementInnerHeight(ref.current.parentElement));\n }\n }, [ref.current]);\n\n return [height, ref];\n};\n"],"names":["useEffect","useRef","useState","getElementInnerHeight","el","fullHeight","getBoundingClientRect","height","cs","getComputedStyle","padding","parseFloat","paddingTop","paddingBottom","border","borderTopWidth","borderBottomWidth","useParentHeight","setHeight","ref","current","parentElement"],"mappings":";AAAA,SAAQA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAElD,IAAMC,wBAAwB,SAACC,IAA4B;IACvD,IAAMC,aAAaD,GAAGE,qBAAqB,GAAGC,MAAM;IACpD,IAAMC,KAAKC,iBAAiBL;IAC5B,IAAMM,UAAUC,WAAWH,GAAGI,UAAU,IAAID,WAAWH,GAAGK,aAAa;IACvE,IAAMC,SAASH,WAAWH,GAAGO,cAAc,IAAIJ,WAAWH,GAAGQ,iBAAiB;IAC9E,OAAOX,aAAaK,UAAUI;AAClC;AAEA;;CAEC,GACD,OAAO,IAAMG,kBAAkB,WAAwD;IACnF,IAA4Bf,6BAAAA,SAAS,CAAC,QAA/BK,SAAqBL,cAAbgB,YAAahB;IAC5B,IAAMiB,MAAMlB;IAEZD,UAAU,WAAM;QACZ,IAAImB,IAAIC,OAAO,EAAE;YACbF,UAAUf,sBAAsBgB,IAAIC,OAAO,CAACC,aAAa;QAC7D,CAAC;IACL,GAAG;QAACF,IAAIC,OAAO;KAAC;IAEhB,OAAO;QAACb;QAAQY;KAAI;AACxB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n {children}\n </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n {children}\n </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":";AAAA,SAAQA,eAAe,QAAO,gBAAgB;AAG9C,SAAQC,WAAW,QAAO,UAAU;AAEpC,OAAO,IAAMC,cAAoD;QAAEC,iBAAAA;yBAC/D,KAACH;QAAgBI,gBAAgB;QAACC,gBAAgB;QAACC,OAAOL;kBACrDE;;EAEP"}
|