@sebgroup/green-react 3.10.0 → 3.12.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
 import { randomId, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
 import { createComponent } from '@lit/react';
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
@@ -440,7 +440,9 @@ var AccordionItem = function AccordionItem(_ref) {
   var labelElementLevel = item.labelElementLevel,
     label = item.label,
     subLabel = item.subLabel,
-    content = item.content;
+    content = item.content,
+    customLabel = item.customLabel;
+  var contentRef = useRef(null);
   var _useState = useState(item.defaultOpen || false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -450,6 +452,13 @@ var AccordionItem = function AccordionItem(_ref) {
     setIsOpen(function (state) {
       if (!state) {
         item.onOpen && item.onOpen(event);
+        window.requestAnimationFrame(function () {
+          var _a;
+          (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        });
       } else {
         item.onClose && item.onClose(event);
       }
@@ -467,7 +476,7 @@ var AccordionItem = function AccordionItem(_ref) {
         onClick: function onClick(event) {
           handleOnClick(event);
         },
-        children: [jsx("span", {
+        children: [customLabel ? customLabel : jsx("span", {
           children: label
         }), subLabel && jsx("span", {
           children: subLabel
@@ -487,6 +496,7 @@ var AccordionItem = function AccordionItem(_ref) {
       "aria-labelledby": "accordion-item-button-".concat(index, "-").concat(uuid),
       hidden: !isOpen,
       children: jsx("div", {
+        ref: contentRef,
         children: content
       })
     })]
@@ -943,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);
@@ -955,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({
@@ -964,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.10.0",
+  "version": "3.12.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"

package/src/lib/accordion/accordion-item.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 interface AccordionItemProps {
     item: AccordionItemInterface;
     index: number;
     uuid: string;
 }
 export interface AccordionItemInterface {
-    label: string;
+    label?: string;
+    customLabel?: ReactNode;
     labelElementLevel: 2 | 3 | 4 | 5 | 6;
     subLabel?: string;
     content: JSX.Element;

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;