@coveord/plasma-mantine 52.2.0 → 52.3.1

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 (29) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/.turbo/turbo-test.log +28 -28
  3. package/LICENSE +197 -11
  4. package/dist/.tsbuildinfo +1 -1
  5. package/dist/cjs/components/modal-wizard/ModalWizard.js +10 -5
  6. package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
  7. package/dist/cjs/components/modal-wizard/ModalWizardStep.js.map +1 -1
  8. package/dist/cjs/components/table/Table.js +3 -1
  9. package/dist/cjs/components/table/Table.js.map +1 -1
  10. package/dist/cjs/components/table/TableDateRangePicker.js +1 -0
  11. package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
  12. package/dist/definitions/components/modal-wizard/ModalWizard.d.ts +8 -1
  13. package/dist/definitions/components/modal-wizard/ModalWizard.d.ts.map +1 -1
  14. package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts +1 -1
  15. package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts.map +1 -1
  16. package/dist/definitions/components/table/Table.d.ts.map +1 -1
  17. package/dist/esm/components/modal-wizard/ModalWizard.js +10 -5
  18. package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
  19. package/dist/esm/components/modal-wizard/ModalWizardStep.js.map +1 -1
  20. package/dist/esm/components/table/Table.js +3 -1
  21. package/dist/esm/components/table/Table.js.map +1 -1
  22. package/dist/esm/components/table/TableDateRangePicker.js +1 -0
  23. package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
  24. package/package.json +28 -20
  25. package/src/components/modal-wizard/ModalWizard.tsx +18 -4
  26. package/src/components/modal-wizard/ModalWizardStep.tsx +1 -1
  27. package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx +34 -6
  28. package/src/components/table/Table.tsx +5 -1
  29. package/src/components/table/TableDateRangePicker.tsx +1 -1
package/dist/esm/components/table/TableDateRangePicker.js CHANGED
@@ -37,6 +37,7 @@ export var TableDateRangePicker = function(param) {
37
37
  /*#__PURE__*/ _jsxs(Popover, {
38
38
  opened: opened,
39
39
  onChange: setOpened,
40
+ withinPortal: true,
40
41
  children: [
41
42
  /*#__PURE__*/ _jsx(Popover.Target, {
42
43
  children: /*#__PURE__*/ _jsx(Button, {
package/dist/esm/components/table/TableDateRangePicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n DateRangePickerInlineCalendar,\n DateRangePickerInlineCalendarProps,\n DateRangePickerPreset,\n DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\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 <Grid.Col span=\"content\" order={TableComponentsOrder.DateRangePicker} py=\"sm\">\n <Group spacing=\"xs\">\n <Text span>{formatedRange}</Text>\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 </Group>\n </Grid.Col>\n );\n};\n"],"names":["CalendarSize24Px","Grid","Group","Popover","Text","dayjs","useState","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","Col","span","order","DateRangePicker","py","spacing","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,QAAO,gBAAgB;AACzD,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BP,6BAAAA,SAAS,KAAK,OAAnCQ,SAAqBR,cAAbS,YAAaT;IAC5B,IAAM,AAACU,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;eAAejB,MAAMiB,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,KAACzB,KAAK0B,GAAG;QAACC,MAAK;QAAUC,OAAOpB,qBAAqBqB,eAAe;QAAEC,IAAG;kBACrE,cAAA,MAAC7B;YAAM8B,SAAQ;;8BACX,KAAC5B;oBAAKwB,IAAI;8BAAEJ;;8BACZ,MAACrB;oBAAQW,QAAQA;oBAAQmB,UAAUlB;;sCAC/B,KAACZ,QAAQ+B,MAAM;sCACX,cAAA,KAAC3B;gCAAO4B,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMtB,UAAU,IAAI;;gCAAGuB,IAAG;0CACtE,cAAA,KAACtC;oCAAiBuC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAACrC,QAAQsC,QAAQ;4BAACC,GAAG;sCACjB,cAAA,KAAClC;gCACGmC,cAAc3B,KAAKS,MAAM,CAACC,SAAS;gCACnCT,SAASA;gCACTG,UAAUA;gCACVR,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}
1
+ {"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n DateRangePickerInlineCalendar,\n DateRangePickerInlineCalendarProps,\n DateRangePickerPreset,\n DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\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 <Grid.Col span=\"content\" order={TableComponentsOrder.DateRangePicker} py=\"sm\">\n <Group spacing=\"xs\">\n <Text span>{formatedRange}</Text>\n <Popover opened={opened} onChange={setOpened} withinPortal>\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 </Group>\n </Grid.Col>\n );\n};\n"],"names":["CalendarSize24Px","Grid","Group","Popover","Text","dayjs","useState","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","Col","span","order","DateRangePicker","py","spacing","onChange","withinPortal","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,QAAO,gBAAgB;AACzD,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BP,6BAAAA,SAAS,KAAK,OAAnCQ,SAAqBR,cAAbS,YAAaT;IAC5B,IAAM,AAACU,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;eAAejB,MAAMiB,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,KAACzB,KAAK0B,GAAG;QAACC,MAAK;QAAUC,OAAOpB,qBAAqBqB,eAAe;QAAEC,IAAG;kBACrE,cAAA,MAAC7B;YAAM8B,SAAQ;;8BACX,KAAC5B;oBAAKwB,IAAI;8BAAEJ;;8BACZ,MAACrB;oBAAQW,QAAQA;oBAAQmB,UAAUlB;oBAAWmB,YAAY;;sCACtD,KAAC/B,QAAQgC,MAAM;sCACX,cAAA,KAAC5B;gCAAO6B,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMvB,UAAU,IAAI;;gCAAGwB,IAAG;0CACtE,cAAA,KAACvC;oCAAiBwC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAACtC,QAAQuC,QAAQ;4BAACC,GAAG;sCACjB,cAAA,KAACnC;gCACGoC,cAAc5B,KAAKS,MAAM,CAACC,SAAS;gCACnCT,SAASA;gCACTG,UAAUA;gCACVR,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "52.2.0",
3
+ "version": "52.3.1",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
@@ -8,54 +8,62 @@
8
8
  "components",
9
9
  "coveo"
10
10
  ],
11
+ "bugs": {
12
+ "url": "https://github.com/coveo/plasma/issues"
13
+ },
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "git+https://github.com/coveo/plasma.git",
17
+ "directory": "packages/mantine"
18
+ },
11
19
  "license": "Apache-2.0",
12
20
  "author": "Coveo",
13
21
  "main": "./dist/cjs/index.js",
14
22
  "module": "./dist/esm/index.js",
15
23
  "types": "./dist/definitions/index.d.ts",
16
24
  "dependencies": {
17
- "@mantine/utils": "6.0.6",
25
+ "@mantine/utils": "6.0.9",
18
26
  "@monaco-editor/react": "4.5.0",
19
- "@swc/helpers": "0.5.0",
27
+ "@swc/helpers": "0.5.1",
20
28
  "@tanstack/react-table": "8.8.5",
21
29
  "@tanstack/table-core": "8.8.5",
22
30
  "dayjs": "1.11.7",
23
31
  "fast-deep-equal": "3.1.3",
24
32
  "lodash.debounce": "4.0.8",
25
33
  "lodash.defaultsdeep": "4.6.1",
26
- "monaco-editor": "0.34.0",
34
+ "monaco-editor": "0.37.1",
27
35
  "react-beautiful-dnd": "13.1.1",
28
- "@coveord/plasma-react-icons": "52.2.0",
29
- "@coveord/plasma-tokens": "52.0.0"
36
+ "@coveord/plasma-react-icons": "52.3.1",
37
+ "@coveord/plasma-tokens": "52.3.1"
30
38
  },
31
39
  "devDependencies": {
32
40
  "@emotion/react": "11.10.6",
33
- "@mantine/carousel": "6.0.6",
34
- "@mantine/core": "6.0.6",
35
- "@mantine/dates": "6.0.6",
36
- "@mantine/form": "6.0.6",
37
- "@mantine/hooks": "6.0.6",
38
- "@mantine/modals": "6.0.6",
39
- "@mantine/notifications": "6.0.6",
41
+ "@mantine/carousel": "6.0.9",
42
+ "@mantine/core": "6.0.9",
43
+ "@mantine/dates": "6.0.9",
44
+ "@mantine/form": "6.0.9",
45
+ "@mantine/hooks": "6.0.9",
46
+ "@mantine/modals": "6.0.9",
47
+ "@mantine/notifications": "6.0.9",
40
48
  "@swc/cli": "0.1.62",
41
- "@swc/core": "1.3.49",
42
- "@swc/jest": "0.2.24",
43
- "@testing-library/dom": "8.18.1",
49
+ "@swc/core": "1.3.55",
50
+ "@swc/jest": "0.2.26",
51
+ "@testing-library/dom": "8.20.0",
44
52
  "@testing-library/jest-dom": "5.16.5",
45
53
  "@testing-library/react": "13.4.0",
46
54
  "@testing-library/user-event": "14.4.3",
47
55
  "@types/jest": "29.1.2",
48
56
  "@types/lodash.debounce": "^4.0.7",
49
57
  "@types/lodash.defaultsdeep": "4.6.7",
50
- "@types/react": "18.0.34",
58
+ "@types/react": "18.0.38",
51
59
  "@types/react-beautiful-dnd": "13.1.4",
52
60
  "@types/react-dom": "18.0.11",
53
61
  "@types/testing-library__jest-dom": "5.14.5",
54
62
  "csstype": "3.1.2",
55
63
  "embla-carousel-react": "7.1.0",
56
- "eslint-plugin-testing-library": "5.7.2",
57
- "eslint-plugin-vitest": "0.0.57",
58
- "eslint-plugin-vitest-globals": "1.2.0",
64
+ "eslint-plugin-testing-library": "5.10.3",
65
+ "eslint-plugin-vitest": "0.1.4",
66
+ "eslint-plugin-vitest-globals": "1.3.1",
59
67
  "identity-obj-proxy": "3.0.0",
60
68
  "jest": "29.2.1",
61
69
  "jest-environment-jsdom": "29.1.2",
package/src/components/modal-wizard/ModalWizard.tsx CHANGED
@@ -54,7 +54,7 @@ export interface ModalWizardProps
54
54
  /**
55
55
  * A callback function that is executed when the user clicks on the next button
56
56
  */
57
- onNext?: (newStep: number) => unknown;
57
+ onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;
58
58
 
59
59
  /**
60
60
  * A callback function that is executed when the user clicks on the previous button
@@ -82,6 +82,14 @@ export interface ModalWizardProps
82
82
  * Children to display in modal wizard
83
83
  * */
84
84
  children?: Array<ReturnType<typeof ModalWizardStep>>;
85
+
86
+ /**
87
+ * Indicates if step validation should be performed when clicking on to the next step
88
+ * If true, the next step will always be enabled
89
+ *
90
+ * @default false
91
+ */
92
+ isStepValidatedOnNext?: boolean;
85
93
  }
86
94
 
87
95
  interface ModalWizardType {
@@ -106,6 +114,7 @@ export const ModalWizard: ModalWizardType = ({
106
114
  styles,
107
115
  unstyled,
108
116
  children,
117
+ isStepValidatedOnNext,
109
118
  ...modalProps
110
119
  }) => {
111
120
  const {
@@ -126,7 +135,9 @@ export const ModalWizard: ModalWizardType = ({
126
135
  const isLastStep = currentStepIndex === numberOfSteps - 1;
127
136
  const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];
128
137
 
129
- const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
138
+ const {isValid} = isStepValidatedOnNext
139
+ ? {isValid: true}
140
+ : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
130
141
 
131
142
  useEffect(() => {
132
143
  if (opened) {
@@ -224,8 +235,11 @@ export const ModalWizard: ModalWizardType = ({
224
235
  if (isLastStep) {
225
236
  onFinish?.() ?? handleClose(false);
226
237
  } else {
227
- onNext?.(currentStepIndex + 1);
228
- setCurrentStepIndex(currentStepIndex + 1);
238
+ onNext?.(currentStepIndex + 1, setCurrentStepIndex);
239
+
240
+ if (!isStepValidatedOnNext) {
241
+ setCurrentStepIndex(currentStepIndex + 1);
242
+ }
229
243
  }
230
244
  }}
231
245
  >
package/src/components/modal-wizard/ModalWizardStep.tsx CHANGED
@@ -27,7 +27,7 @@ export interface ModalWizardStepProps {
27
27
  /**
28
28
  * A function to validate the current step, it determines if the next step should be enabled or not.
29
29
  */
30
- validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
30
+ validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
31
31
 
32
32
  /**
33
33
  * Show progress bar at this step
package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx CHANGED
@@ -79,8 +79,6 @@ describe('ModalWizard', () => {
79
79
 
80
80
  await user.click(nextButton);
81
81
 
82
- expect(onNextSpy).toHaveBeenCalledWith(1);
83
-
84
82
  expect(
85
83
  screen.getByRole('heading', {
86
84
  name: /current step is: 2/i,
@@ -108,8 +106,6 @@ describe('ModalWizard', () => {
108
106
 
109
107
  await user.click(nextButton);
110
108
 
111
- expect(onNextSpy).toHaveBeenCalledWith(2);
112
-
113
109
  expect(
114
110
  screen.getByRole('heading', {
115
111
  name: /current step is: 3/i,
@@ -143,8 +139,6 @@ describe('ModalWizard', () => {
143
139
  })
144
140
  );
145
141
 
146
- expect(onNextSpy).toHaveBeenCalledWith(1);
147
-
148
142
  expect(
149
143
  screen.getByRole('heading', {
150
144
  name: /current step is: 2/i,
@@ -372,4 +366,38 @@ describe('ModalWizard', () => {
372
366
 
373
367
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
374
368
  });
369
+
370
+ it('enables the next step button if isStepValidatedOnNext is provided', async () => {
371
+ render(
372
+ <ModalWizard opened={true} onClose={vi.fn()} isStepValidatedOnNext>
373
+ <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: false})}>
374
+ Content step 1
375
+ </ModalWizard.Step>
376
+ <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
377
+ Content step 2
378
+ </ModalWizard.Step>
379
+ </ModalWizard>
380
+ );
381
+
382
+ expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
383
+ });
384
+
385
+ it('enables the next step button in accordance to validateStep if isStepValidatedOnNext is not provided', async () => {
386
+ const user = userEvent.setup();
387
+
388
+ render(
389
+ <ModalWizard opened={true} onClose={vi.fn()}>
390
+ <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
391
+ Content step 1
392
+ </ModalWizard.Step>
393
+ <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
394
+ Content step 2
395
+ </ModalWizard.Step>
396
+ </ModalWizard>
397
+ );
398
+
399
+ expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
400
+ await user.click(screen.getByRole('button', {name: /next/i}));
401
+ expect(screen.getByRole('button', {name: /finish/i})).toBeDisabled();
402
+ });
375
403
  });
package/src/components/table/Table.tsx CHANGED
@@ -200,7 +200,11 @@ export const Table: TableType = <T,>({
200
200
  <thead className={classes.header}>
201
201
  {!!header ? (
202
202
  <tr>
203
- <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
203
+ <th
204
+ // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`
205
+ style={{padding: 0, fontWeight: 'unset'}}
206
+ colSpan={table.getAllColumns().length}
207
+ >
204
208
  {header}
205
209
  </th>
206
210
  </tr>
package/src/components/table/TableDateRangePicker.tsx CHANGED
@@ -51,7 +51,7 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
51
51
  <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
52
52
  <Group spacing="xs">
53
53
  <Text span>{formatedRange}</Text>
54
- <Popover opened={opened} onChange={setOpened}>
54
+ <Popover opened={opened} onChange={setOpened} withinPortal>
55
55
  <Popover.Target>
56
56
  <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
57
57
  <CalendarSize24Px width={24} height={24} />