@sebgroup/green-react 3.10.0 → 3.11.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/index.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
2
+ import React, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
3
3
  import { randomId, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
4
4
  import { createComponent } from '@lit/react';
5
5
  import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
@@ -440,7 +440,9 @@ var AccordionItem = function AccordionItem(_ref) {
440
440
  var labelElementLevel = item.labelElementLevel,
441
441
  label = item.label,
442
442
  subLabel = item.subLabel,
443
- content = item.content;
443
+ content = item.content,
444
+ customLabel = item.customLabel;
445
+ var contentRef = useRef(null);
444
446
  var _useState = useState(item.defaultOpen || false),
445
447
  _useState2 = _slicedToArray(_useState, 2),
446
448
  isOpen = _useState2[0],
@@ -450,6 +452,13 @@ var AccordionItem = function AccordionItem(_ref) {
450
452
  setIsOpen(function (state) {
451
453
  if (!state) {
452
454
  item.onOpen && item.onOpen(event);
455
+ window.requestAnimationFrame(function () {
456
+ var _a;
457
+ (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
458
+ behavior: 'smooth',
459
+ block: 'nearest'
460
+ });
461
+ });
453
462
  } else {
454
463
  item.onClose && item.onClose(event);
455
464
  }
@@ -467,7 +476,7 @@ var AccordionItem = function AccordionItem(_ref) {
467
476
  onClick: function onClick(event) {
468
477
  handleOnClick(event);
469
478
  },
470
- children: [jsx("span", {
479
+ children: [customLabel ? customLabel : jsx("span", {
471
480
  children: label
472
481
  }), subLabel && jsx("span", {
473
482
  children: subLabel
@@ -487,6 +496,7 @@ var AccordionItem = function AccordionItem(_ref) {
487
496
  "aria-labelledby": "accordion-item-button-".concat(index, "-").concat(uuid),
488
497
  hidden: !isOpen,
489
498
  children: jsx("div", {
499
+ ref: contentRef,
490
500
  children: content
491
501
  })
492
502
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sebgroup/green-react",
3
- "version": "3.10.0",
3
+ "version": "3.11.0",
4
4
  "peerDependencies": {
5
5
  "react": "^17 || ^18",
6
6
  "react-dom": "^17 || ^18"
@@ -1,11 +1,12 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  interface AccordionItemProps {
3
3
  item: AccordionItemInterface;
4
4
  index: number;
5
5
  uuid: string;
6
6
  }
7
7
  export interface AccordionItemInterface {
8
- label: string;
8
+ label?: string;
9
+ customLabel?: ReactNode;
9
10
  labelElementLevel: 2 | 3 | 4 | 5 | 6;
10
11
  subLabel?: string;
11
12
  content: JSX.Element;