grep-components 2.23.0-GREPF-2944.1 → 2.23.0

package/dist/components/GrepDatePicker/stories/DatePicker.stories.d.ts

@@ -11,4 +11,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithError: Story;
 export declare const WithHelperText: Story;
+export declare const WithClearText: Story;
 export declare const WithMoreControls: Story;

package/dist/index.js

@@ -3127,16 +3127,12 @@ const useContentElements = (container, selector, options) => {
     return elements;
 };
 
-const GrepDatePicker = ({ id, label, value, variant, errorMessage, fullWidth, required, margin, clearable, sx, ...props }) => {
+const GrepDatePicker = ({ id, label, value, variant, errorMessage, fullWidth, required, margin, sx, clearable, ...props }) => {
     const [date, setDate] = useDate(value);
     const [error, setError] = useState();
     const helperText = errorMessage || error || props.helperText;
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: 'nb' },
-        React__default.createElement(DatePicker
-        // clearable @todo
-        , { 
-            // clearable @todo
-            format: "DD/MM/YYYY", onError: (reason) => {
+        React__default.createElement(DatePicker, { format: "DD/MM/YYYY", onError: (reason) => {
                 switch (reason) {
                     case 'invalidDate':
                         setError('Ugyldig dato');
@@ -3155,7 +3151,10 @@ const GrepDatePicker = ({ id, label, value, variant, errorMessage, fullWidth, re
                         setError(undefined);
                 }
             }, value: date, onChange: setDate, slotProps: {
-                field: { clearable: clearable },
+                field: {
+                    clearable: !!clearable,
+                    onClear: () => setDate(null),
+                },
                 textField: {
                     id: id,
                     label: label,
@@ -3170,16 +3169,18 @@ const GrepDatePicker = ({ id, label, value, variant, errorMessage, fullWidth, re
             }, ...props })));
 };
 
-const GrepDateRange = ({ onChange, spacing = 3, style, fullWidth, from: fromProperties, to: toProperties, ...properties }) => {
+const GrepDateRange = ({ onChange, spacing = 3, style, fullWidth, clearable, from: fromProperties, to: toProperties, ...properties }) => {
     const [from, setFrom] = useDate(fromProperties.value);
     const [to, setTo] = useDate(toProperties.value);
     const { minDate, maxDate, ...commonProperties } = properties;
-    useEffect(() => onChange(new DateRangeValue(from ? String(from) : from, to ? String(to) : to)), [String(from), String(to)]);
+    useEffect(() => {
+        onChange(new DateRangeValue(from ? String(from) : from, to ? String(to) : to));
+    }, [String(from), String(to)]);
     return (React__default.createElement(Grid, { container: true, spacing: spacing, style: style },
         React__default.createElement(Grid, { size: { xs: 12, sm: fullWidth ? 12 : 6 } },
-            React__default.createElement(GrepDatePicker, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom })),
+            React__default.createElement(GrepDatePicker, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom, clearable: clearable || fromProperties.clearable })),
         React__default.createElement(Grid, { size: { xs: 12, sm: fullWidth ? 12 : 6 } },
-            React__default.createElement(GrepDatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo }))));
+            React__default.createElement(GrepDatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo, clearable: clearable || toProperties.clearable }))));
 };
 
 const renderField = ({ key, value }) => (React.createElement(Box$1, { key: key, sx: { display: 'flex', marginRight: '20px' } },