@coveord/plasma-mantine 49.0.2 → 49.1.0

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.
Files changed (120) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/.turbo/turbo-test.log +13 -11
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/cjs/components/button/Button.js +28 -0
  5. package/dist/cjs/components/button/Button.js.map +1 -0
  6. package/dist/cjs/components/button/ButtonWithDisabledTooltip.js +64 -0
  7. package/dist/cjs/components/button/ButtonWithDisabledTooltip.js.map +1 -0
  8. package/dist/cjs/components/button/index.js +8 -0
  9. package/dist/cjs/components/button/index.js.map +1 -0
  10. package/dist/cjs/components/collection/Collection.js +2 -1
  11. package/dist/cjs/components/collection/Collection.js.map +1 -1
  12. package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +3 -2
  13. package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
  14. package/dist/cjs/components/index.js +2 -0
  15. package/dist/cjs/components/index.js.map +1 -1
  16. package/dist/cjs/components/inline-confirm/InlineConfirmButton.js +2 -2
  17. package/dist/cjs/components/inline-confirm/InlineConfirmButton.js.map +1 -1
  18. package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js +3 -2
  19. package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
  20. package/dist/cjs/components/menu/Menu.js +29 -0
  21. package/dist/cjs/components/menu/Menu.js.map +1 -0
  22. package/dist/cjs/components/menu/index.js +8 -0
  23. package/dist/cjs/components/menu/index.js.map +1 -0
  24. package/dist/cjs/components/modal-wizard/ModalWizard.js +4 -3
  25. package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
  26. package/dist/cjs/components/table/TableDateRangePicker.js +2 -1
  27. package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
  28. package/dist/cjs/components/table/TableHeader.js +2 -1
  29. package/dist/cjs/components/table/TableHeader.js.map +1 -1
  30. package/dist/cjs/index.js +6 -0
  31. package/dist/cjs/index.js.map +1 -1
  32. package/dist/cjs/utils/createPolymorphicComponent.js +14 -0
  33. package/dist/cjs/utils/createPolymorphicComponent.js.map +1 -0
  34. package/dist/cjs/utils/index.js +9 -0
  35. package/dist/cjs/utils/index.js.map +1 -0
  36. package/dist/cjs/utils/overrideComponent.js +29 -0
  37. package/dist/cjs/utils/overrideComponent.js.map +1 -0
  38. package/dist/definitions/components/button/Button.d.ts +16 -0
  39. package/dist/definitions/components/button/Button.d.ts.map +1 -0
  40. package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts +24 -0
  41. package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts.map +1 -0
  42. package/dist/definitions/components/button/index.d.ts +3 -0
  43. package/dist/definitions/components/button/index.d.ts.map +1 -0
  44. package/dist/definitions/components/collection/Collection.d.ts.map +1 -1
  45. package/dist/definitions/components/date-range-picker/DateRangePickerInlineCalendar.d.ts.map +1 -1
  46. package/dist/definitions/components/index.d.ts +2 -0
  47. package/dist/definitions/components/index.d.ts.map +1 -1
  48. package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts +1 -1
  49. package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts.map +1 -1
  50. package/dist/definitions/components/inline-confirm/InlineConfirmPrompt.d.ts.map +1 -1
  51. package/dist/definitions/components/menu/Menu.d.ts +16 -0
  52. package/dist/definitions/components/menu/Menu.d.ts.map +1 -0
  53. package/dist/definitions/components/menu/index.d.ts +2 -0
  54. package/dist/definitions/components/menu/index.d.ts.map +1 -0
  55. package/dist/definitions/components/modal-wizard/ModalWizard.d.ts.map +1 -1
  56. package/dist/definitions/components/table/TableDateRangePicker.d.ts.map +1 -1
  57. package/dist/definitions/components/table/TableHeader.d.ts.map +1 -1
  58. package/dist/definitions/index.d.ts +1 -1
  59. package/dist/definitions/index.d.ts.map +1 -1
  60. package/dist/definitions/utils/createPolymorphicComponent.d.ts +3 -0
  61. package/dist/definitions/utils/createPolymorphicComponent.d.ts.map +1 -0
  62. package/dist/definitions/utils/index.d.ts +3 -0
  63. package/dist/definitions/utils/index.d.ts.map +1 -0
  64. package/dist/definitions/utils/overrideComponent.d.ts +10 -0
  65. package/dist/definitions/utils/overrideComponent.d.ts.map +1 -0
  66. package/dist/esm/components/button/Button.js +18 -0
  67. package/dist/esm/components/button/Button.js.map +1 -0
  68. package/dist/esm/components/button/ButtonWithDisabledTooltip.js +54 -0
  69. package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -0
  70. package/dist/esm/components/button/index.js +3 -0
  71. package/dist/esm/components/button/index.js.map +1 -0
  72. package/dist/esm/components/collection/Collection.js +2 -1
  73. package/dist/esm/components/collection/Collection.js.map +1 -1
  74. package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +2 -1
  75. package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
  76. package/dist/esm/components/index.js +2 -0
  77. package/dist/esm/components/index.js.map +1 -1
  78. package/dist/esm/components/inline-confirm/InlineConfirmButton.js +1 -1
  79. package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
  80. package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js +2 -1
  81. package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
  82. package/dist/esm/components/menu/Menu.js +19 -0
  83. package/dist/esm/components/menu/Menu.js.map +1 -0
  84. package/dist/esm/components/menu/index.js +3 -0
  85. package/dist/esm/components/menu/index.js.map +1 -0
  86. package/dist/esm/components/modal-wizard/ModalWizard.js +3 -2
  87. package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
  88. package/dist/esm/components/table/TableDateRangePicker.js +2 -1
  89. package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
  90. package/dist/esm/components/table/TableHeader.js +2 -1
  91. package/dist/esm/components/table/TableHeader.js.map +1 -1
  92. package/dist/esm/index.js +1 -1
  93. package/dist/esm/index.js.map +1 -1
  94. package/dist/esm/utils/createPolymorphicComponent.js +8 -0
  95. package/dist/esm/utils/createPolymorphicComponent.js.map +1 -0
  96. package/dist/esm/utils/index.js +4 -0
  97. package/dist/esm/utils/index.js.map +1 -0
  98. package/dist/esm/utils/overrideComponent.js +19 -0
  99. package/dist/esm/utils/overrideComponent.js.map +1 -0
  100. package/package.json +5 -3
  101. package/src/components/button/Button.tsx +27 -0
  102. package/src/components/button/ButtonWithDisabledTooltip.tsx +58 -0
  103. package/src/components/button/__tests__/ButtonWithDisabledTooltip.spec.tsx +52 -0
  104. package/src/components/button/index.ts +2 -0
  105. package/src/components/collection/Collection.tsx +1 -1
  106. package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx +2 -1
  107. package/src/components/index.ts +2 -0
  108. package/src/components/inline-confirm/InlineConfirmButton.tsx +2 -1
  109. package/src/components/inline-confirm/InlineConfirmPrompt.tsx +2 -1
  110. package/src/components/menu/Menu.tsx +18 -0
  111. package/src/components/menu/index.ts +1 -0
  112. package/src/components/modal-wizard/ModalWizard.tsx +4 -2
  113. package/src/components/table/TableDateRangePicker.tsx +3 -1
  114. package/src/components/table/TableHeader.tsx +2 -1
  115. package/src/components/table/__tests__/TableActions.spec.tsx +1 -1
  116. package/src/index.ts +1 -1
  117. package/src/utils/__tests__/overrideComponent.spec.tsx +74 -0
  118. package/src/utils/createPolymorphicComponent.ts +8 -0
  119. package/src/utils/index.ts +2 -0
  120. package/src/utils/overrideComponent.ts +18 -0
@@ -0,0 +1,19 @@
1
+ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Menu as MantineMenu } from "@mantine/core";
4
+ import { forwardRef } from "react";
5
+ import { createPolymorphicComponent, overrideComponent } from "../../utils";
6
+ import { Button } from "../button";
7
+ var _MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
8
+ return /*#__PURE__*/ _jsx(Button.DisabledTooltip, _object_spread({
9
+ component: MantineMenu.Item,
10
+ ref: ref
11
+ }, props));
12
+ });
13
+ var MenuItem = createPolymorphicComponent(_MenuItem);
14
+ export var Menu = overrideComponent(MantineMenu, {
15
+ displayName: "@coveord/plasma-mantine/Menu",
16
+ Item: MenuItem
17
+ });
18
+
19
+ //# sourceMappingURL=Menu.js.map
@@ -0,0 +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 {Button, ButtonWithDisabledTooltipProps} from '../button';\n\nexport interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}\n\nconst _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>((props, ref) => (\n <Button.DisabledTooltip component={MantineMenu.Item} ref={ref} {...props} />\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","Button","_MenuItem","props","ref","DisabledTooltip","component","Item","MenuItem","displayName"],"mappings":"AAAA;;AAAA,SAAQA,QAAQC,WAAW,QAA8C,gBAAgB;AACzF,SAAQC,UAAU,QAAO,QAAQ;AAEjC,SAAQC,0BAA0B,EAAEC,iBAAiB,QAAO,cAAc;AAC1E,SAAQC,MAAM,QAAuC,YAAY;AAIjE,IAAMC,0BAAYJ,WAA6C,SAACK,OAAOC;yBACnE,KAACH,OAAOI,eAAe;QAACC,WAAWT,YAAYU,IAAI;QAAEH,KAAKA;OAASD;;AAGvE,IAAMK,WAAWT,2BAAoDG;AAErE,OAAO,IAAMN,OAAOI,kBAAkBH,aAAa;IAC/CY,aAAa;IACbF,MAAMC;AACV,GAAG"}
@@ -0,0 +1,3 @@
1
+ export * from "./Menu";
2
+
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/menu/index.ts"],"sourcesContent":["export * from './Menu';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS"}
@@ -3,11 +3,12 @@ import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
3
3
  import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
4
4
  import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
5
5
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
- import { Box, Button, createStyles, Modal, Progress } from "@mantine/core";
6
+ import { Box, createStyles, Modal, Progress } from "@mantine/core";
7
7
  import { Children, useMemo, useState } from "react";
8
+ import { Button } from "../button";
9
+ import { Header } from "../header";
8
10
  import { StickyFooter } from "../sticky-footer";
9
11
  import { ModalWizardStep } from "./ModalWizardStep";
10
- import { Header } from "../header";
11
12
  var useStyles = createStyles(function() {
12
13
  return {
13
14
  modal: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\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","Button","createStyles","Modal","Progress","Children","useMemo","useState","StickyFooter","ModalWizardStep","Header","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,9 +1,10 @@
1
1
  import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { CalendarSize24Px } from "@coveord/plasma-react-icons";
4
- import { Popover, Button } from "@mantine/core";
4
+ import { Popover } from "@mantine/core";
5
5
  import dayjs from "dayjs";
6
6
  import { useState } from "react";
7
+ import { Button } from "../button";
7
8
  import { DateRangePickerInlineCalendar } from "../date-range-picker";
8
9
  import { useTable } from "./useTable";
9
10
  export var TableDateRangePicker = function(param) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover, Button} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\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","Button","dayjs","useState","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;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,OAAO,EAAEC,MAAM,QAAO,gBAAgB;AAE9C,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAClD,SAAQC,6BAA6B,QAA2C,uBAAuB;AAEvG,SAAQC,QAAQ,QAAO,aAAa;AAkBpC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BL,6BAAAA,SAAS,KAAK,OAAnCM,SAAqBN,cAAbO,YAAaP;IAC5B,IAAM,AAACQ,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;eAAef,MAAMe,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,KAACtB;4BAAOuB,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
+ {"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;;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"}
@@ -3,7 +3,8 @@ import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
3
3
  import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
4
4
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
5
  import { CrossSize16Px } from "@coveord/plasma-react-icons";
6
- import { Button, createStyles, Group, Space, Tooltip } from "@mantine/core";
6
+ import { createStyles, Group, Space, Tooltip } from "@mantine/core";
7
+ import { Button } from "../button";
7
8
  import { useTable } from "./useTable";
8
9
  var useStyles = createStyles(function(theme) {
9
10
  return {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\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","Button","createStyles","Group","Space","Tooltip","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;;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,MAAM,EAAEC,YAAY,EAAgBC,KAAK,EAAaC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAGnG,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYL,aAAa,SAACM;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,MAACrB;QAAMO,UAAS;QAAQmB,WAAWH,QAAQjB,IAAI;;YAC1CmB,aAAaE,MAAM,GAAG,kBACnB,KAACzB;gBAAQ0B,OAAM;0BACX,cAAA,MAAC9B;oBAAO+B,SAASP;oBAAgBQ,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,KAACnC;wBAAcoC,QAAQ;;;wBACtFR,aAAaE,MAAM;wBAAC;;;+BAI7B,KAAC1B,UACJ;0BACD,KAACD;gBAAMO,UAAS;gBAAQ2B,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASjB;0BACpDD;;;uBAIT,KAAClB;QAAMO,UAAS;QAAQ2B,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKV,WAAWH,QAAQjB,IAAI;OAAMa;kBAC7ED;OAER;AACL,EAAE"}
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;;;;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"}
package/dist/esm/index.js CHANGED
@@ -5,7 +5,7 @@ export { createColumnHelper } from "@tanstack/table-core";
5
5
  export * from "./components";
6
6
  export * from "@mantine/form";
7
7
  // explicitly overriding mantine components
8
- export { Header, Table, Modal } from "./components";
8
+ export { Header, Table, Modal, Button, Menu } from "./components";
9
9
  export { useForm, createFormContext } from "./form";
10
10
  export * from "./theme";
11
11
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\n// explicitly overriding mantine components\nexport {Header, Table, type HeaderProps, Modal} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n export interface MantineThemeColorsOverride {\n // eslint-disable-next-line @typescript-eslint/ban-types\n colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n }\n}\n"],"names":["createColumnHelper","Header","Table","Modal","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,SAAQA,kBAAkB,QAAuB,uBAAuB;AACxE,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,EAAoBC,KAAK,QAAO,eAAe;AACpE,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}
1
+ {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\n// explicitly overriding mantine components\nexport {Header, Table, type HeaderProps, Modal, Button, type ButtonProps, Menu, type MenuItemProps} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n export interface MantineThemeColorsOverride {\n // eslint-disable-next-line @typescript-eslint/ban-types\n colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n }\n}\n"],"names":["createColumnHelper","Header","Table","Modal","Button","Menu","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,SAAQA,kBAAkB,QAAuB,uBAAuB;AACxE,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,EAAoBC,KAAK,EAAEC,MAAM,EAAoBC,IAAI,QAA2B,eAAe;AACxH,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}
@@ -0,0 +1,8 @@
1
+ import { createPolymorphicComponent as mantineCreatePolymorphicComponent } from "@mantine/utils";
2
+ /*
3
+ * createPolymorphicComponent is already exported from @mantine/core, but there is an issue when using pnpm + typescript
4
+ * that forces us to use it directly from @mantine/utils (see https://github.com/microsoft/TypeScript/issues/47663)
5
+ * We are simply rexporting it here to avoid having to deal with this issue everywhere
6
+ */ export var createPolymorphicComponent = mantineCreatePolymorphicComponent;
7
+
8
+ //# sourceMappingURL=createPolymorphicComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/createPolymorphicComponent.ts"],"sourcesContent":["import {createPolymorphicComponent as mantineCreatePolymorphicComponent} from '@mantine/utils';\n\n/*\n * createPolymorphicComponent is already exported from @mantine/core, but there is an issue when using pnpm + typescript\n * that forces us to use it directly from @mantine/utils (see https://github.com/microsoft/TypeScript/issues/47663)\n * We are simply rexporting it here to avoid having to deal with this issue everywhere\n */\nexport const createPolymorphicComponent = mantineCreatePolymorphicComponent;\n"],"names":["createPolymorphicComponent","mantineCreatePolymorphicComponent"],"mappings":"AAAA,SAAQA,8BAA8BC,iCAAiC,QAAO,iBAAiB;AAE/F;;;;CAIC,GACD,OAAO,IAAMD,6BAA6BC,kCAAkC"}
@@ -0,0 +1,4 @@
1
+ export * from "./createPolymorphicComponent";
2
+ export * from "./overrideComponent";
3
+
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from './createPolymorphicComponent';\nexport * from './overrideComponent';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,cAAc,sBAAsB"}
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Allows to override static properties from a component function
3
+ *
4
+ * @param component The component which holds the static properties
5
+ * @param properties The new static properties to assign on the component
6
+ * @returns A new component with the specified properties. It doesn't change the original component
7
+ * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem
8
+ */ import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
9
+ export var overrideComponent = function(component, properties) {
10
+ var componentClone = function() {
11
+ for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
12
+ args[_key] = arguments[_key];
13
+ }
14
+ return component.apply(void 0, _to_consumable_array(args));
15
+ };
16
+ return Object.assign(componentClone, component, properties);
17
+ };
18
+
19
+ //# sourceMappingURL=overrideComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/overrideComponent.ts"],"sourcesContent":["/**\n * Allows to override static properties from a component function\n *\n * @param component The component which holds the static properties\n * @param properties The new static properties to assign on the component\n * @returns A new component with the specified properties. It doesn't change the original component\n * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem\n */\nexport const overrideComponent = <\n Component extends (...args: Parameters<Component>) => ReturnType<Component>,\n StaticProperties = Record<keyof Component, never>\n>(\n component: Component,\n properties: StaticProperties\n): ((...args: Parameters<Component>) => ReturnType<Component>) & Component & StaticProperties => {\n const componentClone = (...args: Parameters<Component>) => component(...args);\n return Object.assign(componentClone, component, properties);\n};\n"],"names":["overrideComponent","component","properties","componentClone","args","Object","assign"],"mappings":"AAAA;;;;;;;CAOC,GACD;AAAA,OAAO,IAAMA,oBAAoB,SAI7BC,WACAC,YAC6F;IAC7F,IAAMC,iBAAiB;yCAAIC;YAAAA;;eAAgCH,UAAAA,MAAAA,KAAAA,GAAU,qBAAGG;;IACxE,OAAOC,OAAOC,MAAM,CAACH,gBAAgBF,WAAWC;AACpD,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "49.0.2",
3
+ "version": "49.1.0",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
@@ -14,6 +14,7 @@
14
14
  "module": "./dist/esm/index.js",
15
15
  "types": "./dist/definitions/index.d.ts",
16
16
  "dependencies": {
17
+ "@mantine/utils": "5.10.1",
17
18
  "@monaco-editor/react": "4.4.5",
18
19
  "@swc/helpers": "0.4.12",
19
20
  "@tanstack/react-table": "8.5.11",
@@ -46,6 +47,7 @@
46
47
  "@types/react-beautiful-dnd": "13.1.2",
47
48
  "@types/react-dom": "18.0.6",
48
49
  "@types/testing-library__jest-dom": "5.14.5",
50
+ "csstype": "3.1.1",
49
51
  "embla-carousel-react": "7.0.4",
50
52
  "eslint-plugin-jest": "27.1.1",
51
53
  "eslint-plugin-testing-library": "5.7.2",
@@ -62,13 +64,13 @@
62
64
  },
63
65
  "peerDependencies": {
64
66
  "@emotion/react": "^11.10.0",
65
- "@mantine/carousel": "5.8.3",
67
+ "@mantine/carousel": "^5.8.3",
66
68
  "@mantine/core": "^5.6.2",
67
69
  "@mantine/dates": "^5.6.2",
68
70
  "@mantine/form": "^5.6.2",
69
71
  "@mantine/hooks": "^5.6.2",
70
72
  "@mantine/modals": "^5.6.2",
71
- "embla-carousel-react": "7.0.4",
73
+ "embla-carousel-react": "^7.0.4",
72
74
  "react": ">= 18.0.0",
73
75
  "react-dom": ">= 18.0.0"
74
76
  },
@@ -0,0 +1,27 @@
1
+ import {Button as MantineButton, ButtonProps as MantineButtonProps, useMantineTheme} from '@mantine/core';
2
+ import {forwardRef} from 'react';
3
+
4
+ import {createPolymorphicComponent} from '../../utils';
5
+ import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';
6
+
7
+ export interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {}
8
+
9
+ const _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
10
+ const theme = useMantineTheme();
11
+ return (
12
+ <ButtonWithDisabledTooltip
13
+ component={MantineButton}
14
+ ref={ref}
15
+ disabledHoverColor={theme.colors.gray[2]}
16
+ {...props}
17
+ />
18
+ );
19
+ });
20
+
21
+ export const Button = createPolymorphicComponent<
22
+ 'button',
23
+ ButtonProps,
24
+ {Group: typeof MantineButton.Group; DisabledTooltip: typeof ButtonWithDisabledTooltip}
25
+ >(_Button);
26
+
27
+ Button.DisabledTooltip = ButtonWithDisabledTooltip;
@@ -0,0 +1,58 @@
1
+ import {Box, Tooltip} from '@mantine/core';
2
+ import {Property} from 'csstype';
3
+ import {forwardRef, MouseEventHandler} from 'react';
4
+
5
+ import {createPolymorphicComponent} from '../../utils';
6
+
7
+ export interface ButtonWithDisabledTooltipProps {
8
+ disabled?: boolean;
9
+ onClick?: MouseEventHandler<HTMLButtonElement>;
10
+ /**
11
+ * The tooltip message to display when disabled
12
+ */
13
+ disabledTooltip?: string;
14
+ /**
15
+ * The background color when disabled
16
+ *
17
+ * @default 'unset'
18
+ */
19
+ disabledHoverColor?: Property.BackgroundColor;
20
+ }
21
+
22
+ const _ButtonWithDisabledTooltip = forwardRef<HTMLButtonElement, ButtonWithDisabledTooltipProps>(
23
+ ({disabledTooltip, disabled, onClick, disabledHoverColor: hoverColor = 'unset', ...others}, ref) =>
24
+ disabledTooltip ? (
25
+ <Tooltip label={disabledTooltip} disabled={!disabled}>
26
+ <Box
27
+ component="button"
28
+ ref={ref}
29
+ {...(disabled ? {'data-disabled': true} : {})}
30
+ sx={(theme) => ({
31
+ '&[data-disabled]': {
32
+ pointerEvents: 'all',
33
+ color: theme.colors.gray[5],
34
+ },
35
+ '&[data-disabled]:hover': {
36
+ backgroundColor: hoverColor,
37
+ cursor: 'not-allowed',
38
+ },
39
+ })}
40
+ onClick={(event) => {
41
+ if (disabled) {
42
+ event.preventDefault();
43
+ event.stopPropagation();
44
+ } else {
45
+ onClick?.(event);
46
+ }
47
+ }}
48
+ {...others}
49
+ />
50
+ </Tooltip>
51
+ ) : (
52
+ <Box component="button" ref={ref} disabled={disabled} onClick={onClick} {...others} />
53
+ )
54
+ );
55
+
56
+ export const ButtonWithDisabledTooltip = createPolymorphicComponent<'button', ButtonWithDisabledTooltipProps>(
57
+ _ButtonWithDisabledTooltip
58
+ );
@@ -0,0 +1,52 @@
1
+ import {render, screen, userEvent} from '@test-utils';
2
+ import {ButtonWithDisabledTooltip} from '../ButtonWithDisabledTooltip';
3
+
4
+ describe('ButtonWithDisabledTooltip', () => {
5
+ it('disables the button when disabled prop is true', async () => {
6
+ const user = userEvent.setup();
7
+ const onClickSpy = jest.fn();
8
+ render(
9
+ <ButtonWithDisabledTooltip disabled onClick={onClickSpy}>
10
+ save
11
+ </ButtonWithDisabledTooltip>
12
+ );
13
+
14
+ const button = screen.getByRole('button', {name: /save/i});
15
+ await user.click(button);
16
+ expect(button).toBeDisabled();
17
+ expect(onClickSpy).not.toHaveBeenCalled();
18
+ });
19
+
20
+ it('does not disable the button when disabled prop is false', async () => {
21
+ const user = userEvent.setup();
22
+ const onClickSpy = jest.fn();
23
+ render(<ButtonWithDisabledTooltip onClick={onClickSpy}>save</ButtonWithDisabledTooltip>);
24
+
25
+ const button = screen.getByRole('button', {name: /save/i});
26
+ await user.click(button);
27
+ expect(button).toBeEnabled();
28
+ expect(onClickSpy).toHaveBeenCalledTimes(1);
29
+ });
30
+
31
+ it('shows a tooltip when hovering over the disabled button', async () => {
32
+ const user = userEvent.setup();
33
+ render(
34
+ <ButtonWithDisabledTooltip disabled disabledTooltip="tooltip message">
35
+ save
36
+ </ButtonWithDisabledTooltip>
37
+ );
38
+ const button = screen.getByRole('button', {name: /save/i});
39
+ expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
40
+ await user.hover(button);
41
+ expect(screen.getByRole('tooltip', {name: /tooltip message/i})).toBeInTheDocument();
42
+ });
43
+
44
+ it('does not show the tooltip when hovering over the button if it is not disabled', async () => {
45
+ const user = userEvent.setup();
46
+ render(<ButtonWithDisabledTooltip disabledTooltip="tooltip message">save</ButtonWithDisabledTooltip>);
47
+ const button = screen.getByRole('button', {name: /save/i});
48
+ expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
49
+ await user.hover(button);
50
+ expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
51
+ });
52
+ });
@@ -0,0 +1,2 @@
1
+ export * from './Button';
2
+ export {type ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';
@@ -1,7 +1,6 @@
1
1
  import {AddSize16Px} from '@coveord/plasma-react-icons';
2
2
  import {
3
3
  Box,
4
- Button,
5
4
  DefaultProps,
6
5
  Group,
7
6
  Input,
@@ -17,6 +16,7 @@ import {useDidUpdate, useId} from '@mantine/hooks';
17
16
  import {ReactNode} from 'react';
18
17
  import {DragDropContext, Droppable} from 'react-beautiful-dnd';
19
18
 
19
+ import {Button} from '../button';
20
20
  import useStyles from './Collection.styles';
21
21
  import {CollectionItem} from './CollectionItem';
22
22
 
@@ -1,7 +1,8 @@
1
- import {Button, Center, Group, Space} from '@mantine/core';
1
+ import {Center, Group, Space} from '@mantine/core';
2
2
  import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
3
3
  import {useForm} from '@mantine/form';
4
4
 
5
+ import {Button} from '../button';
5
6
  import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
6
7
  import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
7
8
 
@@ -9,3 +9,5 @@ export * from './table';
9
9
  export * from './prompt';
10
10
  export * from './modal';
11
11
  export * from './modal-wizard';
12
+ export * from './button';
13
+ export * from './menu';
@@ -1,5 +1,6 @@
1
- import {Button, ButtonProps} from '@mantine/core';
2
1
  import {HTMLAttributes, MouseEventHandler} from 'react';
2
+
3
+ import {Button, ButtonProps} from '../button';
3
4
  import {useInlineConfirm} from './useInlineConfirm';
4
5
 
5
6
  interface InlineConfirmButtonProps extends ButtonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
@@ -1,6 +1,7 @@
1
- import {Button, Group} from '@mantine/core';
1
+ import {Group} from '@mantine/core';
2
2
  import {FunctionComponent, ReactNode, useEffect} from 'react';
3
3
 
4
+ import {Button} from '../button';
4
5
  import {useInlineConfirm} from './useInlineConfirm';
5
6
 
6
7
  interface InlineConfirmPromptProps {
@@ -0,0 +1,18 @@
1
+ import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';
2
+ import {forwardRef} from 'react';
3
+
4
+ import {createPolymorphicComponent, overrideComponent} from '../../utils';
5
+ import {Button, ButtonWithDisabledTooltipProps} from '../button';
6
+
7
+ export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
8
+
9
+ const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>((props, ref) => (
10
+ <Button.DisabledTooltip component={MantineMenu.Item} ref={ref} {...props} />
11
+ ));
12
+
13
+ const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);
14
+
15
+ export const Menu = overrideComponent(MantineMenu, {
16
+ displayName: '@coveord/plasma-mantine/Menu',
17
+ Item: MenuItem,
18
+ });
@@ -0,0 +1 @@
1
+ export * from './Menu';
@@ -1,8 +1,10 @@
1
- import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';
1
+ import {Box, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';
2
2
  import {Children, ReactElement, useMemo, useState} from 'react';
3
+
4
+ import {Button} from '../button';
5
+ import {Header} from '../header';
3
6
  import {StickyFooter} from '../sticky-footer';
4
7
  import {ModalWizardStep} from './ModalWizardStep';
5
- import {Header} from '../header';
6
8
 
7
9
  const useStyles = createStyles(() => ({
8
10
  modal: {
@@ -1,8 +1,10 @@
1
1
  import {CalendarSize24Px} from '@coveord/plasma-react-icons';
2
- import {Popover, Button} from '@mantine/core';
2
+ import {Popover} from '@mantine/core';
3
3
  import {DateRangePickerValue} from '@mantine/dates';
4
4
  import dayjs from 'dayjs';
5
5
  import {FunctionComponent, useState} from 'react';
6
+
7
+ import {Button} from '../button';
6
8
  import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';
7
9
  import {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';
8
10
  import {useTable} from './useTable';
@@ -1,7 +1,8 @@
1
1
  import {CrossSize16Px} from '@coveord/plasma-react-icons';
2
- import {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';
2
+ import {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';
3
3
  import {FunctionComponent, ReactNode} from 'react';
4
4
 
5
+ import {Button} from '../button';
5
6
  import {useTable} from './useTable';
6
7
 
7
8
  const useStyles = createStyles((theme) => ({
@@ -1,7 +1,7 @@
1
- import {Button} from '@mantine/core';
2
1
  import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
3
2
  import {render, screen, userEvent} from '@test-utils';
4
3
 
4
+ import {Button} from '../../button';
5
5
  import {Table} from '../Table';
6
6
 
7
7
  type RowData = {name: string};
package/src/index.ts CHANGED
@@ -10,7 +10,7 @@ export {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
10
10
  export * from './components';
11
11
  export * from '@mantine/form';
12
12
  // explicitly overriding mantine components
13
- export {Header, Table, type HeaderProps, Modal} from './components';
13
+ export {Header, Table, type HeaderProps, Modal, Button, type ButtonProps, Menu, type MenuItemProps} from './components';
14
14
  export {useForm, createFormContext} from './form';
15
15
 
16
16
  export * from './theme';