@coveord/plasma-mantine 56.4.0 → 56.5.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.
- package/.turbo/turbo-build.log +4 -4
- package/.turbo/turbo-test.log +105 -104
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/DateRangePicker/EditableDateRangePicker.js +6 -8
- package/dist/cjs/components/DateRangePicker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/DateRangePicker/EditableDateRangePicker.js +2 -6
- package/dist/esm/components/DateRangePicker/EditableDateRangePicker.js.map +1 -1
- package/package.json +3 -3
- package/src/components/DateRangePicker/EditableDateRangePicker.tsx +2 -2
- package/src/components/DateRangePicker/__tests__/EditableDateRangePicker.spec.tsx +41 -0
|
@@ -29,7 +29,7 @@ var EditableDateRangePicker = function(param) {
|
|
|
29
29
|
};
|
|
30
30
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
31
31
|
children: [
|
|
32
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, {
|
|
32
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, _object_spread._({
|
|
33
33
|
clearable: false,
|
|
34
34
|
label: "Start",
|
|
35
35
|
value: value === null || value === void 0 ? void 0 : value[0],
|
|
@@ -41,10 +41,9 @@ var EditableDateRangePicker = function(param) {
|
|
|
41
41
|
display: 'none'
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, {
|
|
44
|
+
}
|
|
45
|
+
}, startProps)),
|
|
46
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateInput, _object_spread._({
|
|
48
47
|
clearable: false,
|
|
49
48
|
label: "End",
|
|
50
49
|
value: value === null || value === void 0 ? void 0 : value[1],
|
|
@@ -56,9 +55,8 @@ var EditableDateRangePicker = function(param) {
|
|
|
56
55
|
display: 'none'
|
|
57
56
|
}
|
|
58
57
|
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
})
|
|
58
|
+
}
|
|
59
|
+
}, endProps))
|
|
62
60
|
]
|
|
63
61
|
});
|
|
64
62
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...startProps}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...endProps}\n />\n </>\n );\n};\nexport type {DateRangePickerPreset} from './DateRangePickerPresetSelect';\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","dayjs","startOf","toISOString","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;qBAjBmE;8DAC9D;AAgBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,mCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,SAACC;QACnBL,qBAAAA,+BAAAA,SAAW;YAACM,IAAAA,cAAK,EAACD,MAAME,OAAO,CAAC,OAAOC,WAAW;YAAIT,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;SAAC;IACrE;IACA,IAAMU,cAAc,SAACJ;QACjBL,qBAAAA,+BAAAA,SAAW;YAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;YAAEO,IAAAA,cAAK,EAACD,MAAMK,KAAK,CAAC,OAAOF,WAAW;SAAG;IACnE;IAEA,qBACI;;0BACI,qBAACG,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDf;0BAER,qBAACS,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDd;;;AAIpB"}
|
|
@@ -29,9 +29,7 @@ export const EditableDateRangePicker = ({ value, onChange, onFocus, startProps =
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
|
-
|
|
33
|
-
...startProps.styles
|
|
34
|
-
}
|
|
32
|
+
...startProps
|
|
35
33
|
}),
|
|
36
34
|
/*#__PURE__*/ _jsx(DateInput, {
|
|
37
35
|
clearable: false,
|
|
@@ -46,9 +44,7 @@ export const EditableDateRangePicker = ({ value, onChange, onFocus, startProps =
|
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
},
|
|
49
|
-
|
|
50
|
-
...endProps.styles
|
|
51
|
-
}
|
|
47
|
+
...endProps
|
|
52
48
|
})
|
|
53
49
|
]
|
|
54
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...startProps}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...endProps}\n />\n </>\n );\n};\nexport type {DateRangePickerPreset} from './DateRangePickerPresetSelect';\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","startOf","toISOString","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";AAAA,SAAQA,SAAS,QAA+D,iBAAiB;AACjG,OAAOC,WAAW,QAAQ;AAgB1B,OAAO,MAAMC,0BAA0B,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACc;IAC3B,MAAMC,gBAAgB,CAACC;QACnBL,WAAW;YAACH,MAAMQ,MAAMC,OAAO,CAAC,OAAOC,WAAW;YAAIR,OAAO,CAAC,EAAE;SAAC;IACrE;IACA,MAAMS,cAAc,CAACH;QACjBL,WAAW;YAACD,OAAO,CAAC,EAAE;YAAEF,MAAMQ,MAAMI,KAAK,CAAC,OAAOF,WAAW;SAAG;IACnE;IAEA,qBACI;;0BACI,KAACX;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACnD,GAAGb,UAAU;;0BAElB,KAACN;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUQ;gBACVP,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACnD,GAAGZ,QAAQ;;;;AAI5B,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "56.
|
|
3
|
+
"version": "56.5.0",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
"fast-deep-equal": "3.1.3",
|
|
82
82
|
"lodash.defaultsdeep": "4.6.1",
|
|
83
83
|
"monaco-editor": "0.54.0",
|
|
84
|
-
"@coveord/plasma-react-icons": "56.
|
|
85
|
-
"@coveord/plasma-tokens": "56.
|
|
84
|
+
"@coveord/plasma-react-icons": "56.5.0",
|
|
85
|
+
"@coveord/plasma-tokens": "56.5.0"
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
88
|
"@mantine/carousel": "8.3.6",
|
|
@@ -38,7 +38,7 @@ export const EditableDateRangePicker = ({
|
|
|
38
38
|
onChange={onChangeStart}
|
|
39
39
|
onFocus={onFocus}
|
|
40
40
|
popoverProps={{styles: {dropdown: {display: 'none'}}}}
|
|
41
|
-
|
|
41
|
+
{...startProps}
|
|
42
42
|
/>
|
|
43
43
|
<DateInput
|
|
44
44
|
clearable={false}
|
|
@@ -47,7 +47,7 @@ export const EditableDateRangePicker = ({
|
|
|
47
47
|
onChange={onChangeEnd}
|
|
48
48
|
onFocus={onFocus}
|
|
49
49
|
popoverProps={{styles: {dropdown: {display: 'none'}}}}
|
|
50
|
-
|
|
50
|
+
{...endProps}
|
|
51
51
|
/>
|
|
52
52
|
</>
|
|
53
53
|
);
|
|
@@ -39,4 +39,45 @@ describe('EditableDateRangePicker', () => {
|
|
|
39
39
|
|
|
40
40
|
expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
|
|
41
41
|
}, 10000);
|
|
42
|
+
|
|
43
|
+
it('accepts minDate and maxDate props for start and end inputs', async () => {
|
|
44
|
+
const user = userEvent.setup();
|
|
45
|
+
const minDate = '2022-10-10';
|
|
46
|
+
const maxDate = '2022-11-11';
|
|
47
|
+
const Fixture = () => {
|
|
48
|
+
const [value, setValue] = useState<DatesRangeValue<DateStringValue | null>>([null, null]);
|
|
49
|
+
return (
|
|
50
|
+
<>
|
|
51
|
+
<EditableDateRangePicker
|
|
52
|
+
value={value}
|
|
53
|
+
onChange={setValue}
|
|
54
|
+
startProps={{minDate, maxDate}}
|
|
55
|
+
endProps={{minDate, maxDate}}
|
|
56
|
+
/>
|
|
57
|
+
<code data-testid="json">{JSON.stringify(value)}</code>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
render(<Fixture />);
|
|
62
|
+
const startInput = screen.getByRole('textbox', {
|
|
63
|
+
name: /start/i,
|
|
64
|
+
});
|
|
65
|
+
await user.clear(startInput);
|
|
66
|
+
await user.type(startInput, 'Oct 11, 2022');
|
|
67
|
+
|
|
68
|
+
const endInput = screen.getByRole('textbox', {
|
|
69
|
+
name: /end/i,
|
|
70
|
+
});
|
|
71
|
+
await user.clear(endInput);
|
|
72
|
+
await user.type(endInput, 'Nov 10, 2022');
|
|
73
|
+
|
|
74
|
+
expect(screen.getByTestId('json')).toHaveTextContent('["2022-10-11T00:00:00.000Z","2022-11-10T23:59:59.999Z"]');
|
|
75
|
+
|
|
76
|
+
await user.clear(startInput);
|
|
77
|
+
await user.type(startInput, 'Oct 09, 2022');
|
|
78
|
+
await user.clear(endInput);
|
|
79
|
+
await user.type(endInput, 'Nov 12, 2022');
|
|
80
|
+
|
|
81
|
+
expect(screen.getByTestId('json')).toHaveTextContent('["2022-10-11T00:00:00.000Z","2022-11-10T23:59:59.999Z"]');
|
|
82
|
+
}, 10000);
|
|
42
83
|
});
|