@sebgroup/green-react 3.11.0 → 3.12.0

package/index.esm.js

@@ -953,9 +953,10 @@ var Datepicker = function Datepicker(_a) {
     value = _a.value,
     showWeeks = _a.showWeeks,
     testId = _a.testId,
+    validator = _a.validator,
     selectedDate = _a.selectedDate,
     currentDate = _a.currentDate,
-    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "selectedDate", "currentDate"]);
+    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "validator", "selectedDate", "currentDate"]);
   if (currentDate && !value) value = currentDate;
   if (selectedDate && !value) value = selectedDate;
   var min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
@@ -965,6 +966,12 @@ var Datepicker = function Datepicker(_a) {
       onChange(e.detail.value);
     }
   };
+  var ref = React.useRef(null);
+  useEffect(function () {
+    if (ref.current) {
+      ref.current.validator = validator;
+    }
+  }, [validator]);
   return jsx("div", {
     className: "form-group",
     children: jsx(CoreDatepicker, Object.assign({
@@ -974,9 +981,8 @@ var Datepicker = function Datepicker(_a) {
       max: max,
       showWeekNumbers: showWeeks,
       onchange: onChangeHandler,
-      size: props.size,
       value: value,
-      hideLabel: props.hideLabel
+      ref: ref
     }, props))
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"

package/src/lib/datepicker/datepicker.d.ts

@@ -1,55 +1,78 @@
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
+import { GdsValidator } from '@sebgroup/green-core/components/form/form-control';
 export declare const CoreDatepicker: import("@lit/react").ReactWebComponent<GdsDatepicker, {
     onchange: string;
 }>;
-export interface DatepickerOptions {
+export type DatepickerOptions = {
     /**
-     * The label for the Datepicker.
+     * An array of dates that should be disabled in the calendar.
      */
-    label?: string;
+    disabledDates?: Date[];
     /**
-     * Callback function that is called when the value of the Datepicker changes.
+     * Whether to disable weekends in the calendar.
      */
-    onChange?: (value: any) => void;
+    disabledWeekends: boolean;
     /**
-     * The minimum date that can be selected.
+     * Whether to hide the label above the input field.
      */
-    minDate?: Date;
+    hideLabel: boolean;
+    /**
+     * Validation state of the form control. Setting this to true triggers the invalid state of the control.
+     */
+    invalid: boolean;
+    /**
+     * Validate the form control element. Should return the validity state and an optional validation message.
+     */
+    validator: GdsValidator;
+    /**
+     * The label text displayed above the datepicker. This should always be set to a descriptive label.
+     */
+    label: string;
     /**
      * The maximum date that can be selected.
      */
-    maxDate?: Date;
+    maxDate: Date;
     /**
-     * The value of the Datepicker.
+     * The minimum date that can be selected.
      */
-    value?: Date;
+    minDate: Date;
     /**
-     * Whether to show the week numbers.
+     * Controls whether the datepicker popover is open.
      */
-    showWeeks?: boolean;
+    open: boolean;
     /**
-     * The test ID used for testing.
+     * Callback function that is called when the value of the Datepicker changes.
      */
-    testId?: string;
+    onChange?: (value: any) => void;
     /**
-     * The size of the Datepicker.
+     * Sets the datepicker as a required field for forms.
      */
-    size?: 'small' | 'medium';
+    required: boolean;
     /**
-     * Whether to hide the label.
+     * Whether to show a column of week numbers in the calendar.
      */
-    hideLabel?: boolean;
+    showWeeks: boolean;
     /**
-     * Whether to disable weekends.
+     * Whether to use the small variant of the datepicker field.
      */
-    disabledWeekends?: boolean;
+    size: 'small' | 'medium';
     /**
-     * An array of disabled dates.
+     * The test ID used for testing.
+     */
+    testId?: string;
+    /**
+     * The Date value of the datepicker. This can be set to undefined to clear the datepicker.
+     * This can be a string if set via the value attribute in markup, or via the setAttribute DOM API.
+     */
+    value?: Date;
+    /**
+     * @deprecated Use `value` instead.
      */
-    disabledDates?: Date[];
-    /** @deprecated Use `value` instead */
     selectedDate?: Date;
-    /** @deprecated Use `value` instead */
+    /**
+     * @deprecated Use `value` instead.
+     */
     currentDate?: Date;
-}
-export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, validator, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+export default Datepicker;