@sebgroup/green-react 3.9.0 → 3.11.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,8 +440,10 @@ var AccordionItem = function AccordionItem(_ref) {
   var labelElementLevel = item.labelElementLevel,
     label = item.label,
     subLabel = item.subLabel,
-    content = item.content;
-  var _useState = useState(false),
+    content = item.content,
+    customLabel = item.customLabel;
+  var contentRef = useRef(null);
+  var _useState = useState(item.defaultOpen || false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
@@ -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
       })
     })]

package/package.json

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

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

@@ -1,17 +1,19 @@
-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;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onOpen?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    defaultOpen?: boolean;
 }
 declare const AccordionItem: ({ item, index, uuid }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export default AccordionItem;