@dbcdk/react-components 0.0.105 → 0.0.106

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.
Files changed (7) hide show
  1. package/dist/components/accordion/Accordion.cjs +13 -3
  2. package/dist/components/accordion/Accordion.d.ts +6 -4
  3. package/dist/components/accordion/Accordion.js +13 -3
  4. package/dist/components/accordion/components/AccordionRow.cjs +12 -3
  5. package/dist/components/accordion/components/AccordionRow.d.ts +2 -1
  6. package/dist/components/accordion/components/AccordionRow.js +13 -4
  7. package/package.json +1 -1
package/dist/components/accordion/Accordion.cjs CHANGED
@@ -24,12 +24,15 @@ function Accordion({
24
24
  mode = "single",
25
25
  size = "md",
26
26
  variant = "default",
27
+ renderMode = "lazy",
27
28
  defaultOpenIndex = null,
28
29
  defaultOpenIndexes = [],
29
30
  openIndex,
30
31
  openIndexes,
31
32
  onOpenIndexChange,
32
- onOpenIndexesChange
33
+ onOpenIndexesChange,
34
+ className,
35
+ ...rest
33
36
  }) {
34
37
  const uid = react.useId();
35
38
  const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
@@ -92,7 +95,13 @@ function Accordion({
92
95
  return /* @__PURE__ */ jsxRuntime.jsx(
93
96
  "div",
94
97
  {
95
- className: [styles__default.default.container, styles__default.default[size], variant !== "default" ? styles__default.default[variant] : ""].filter(Boolean).join(" "),
98
+ ...rest,
99
+ className: [
100
+ styles__default.default.container,
101
+ styles__default.default[size],
102
+ variant !== "default" ? styles__default.default[variant] : "",
103
+ className
104
+ ].filter(Boolean).join(" "),
96
105
  children: items.map((item, i) => {
97
106
  var _a;
98
107
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -105,7 +114,8 @@ function Accordion({
105
114
  onToggle: toggle,
106
115
  shouldAnimate: hasMounted,
107
116
  headlineSize: size === "sm" ? 4 : 3,
108
- variant
117
+ variant,
118
+ renderMode
109
119
  },
110
120
  (_a = item.id) != null ? _a : i
111
121
  );
package/dist/components/accordion/Accordion.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import type { JSX, ReactNode } from 'react';
1
+ import type { HTMLAttributes, JSX, ReactNode } from 'react';
2
2
  import type { Severity } from '../../constants/severity.types';
3
3
  export interface AccordionItem {
4
4
  id?: string;
5
- header: string;
5
+ header: ReactNode;
6
6
  subheader?: ReactNode;
7
7
  headerAddition?: ReactNode;
8
8
  headerActions?: ReactNode;
@@ -15,11 +15,13 @@ type Size = 'sm' | 'md' | 'lg';
15
15
  type Mode = 'single' | 'multiple';
16
16
  type Variant = 'default' | 'outlined';
17
17
  type OpenIndexes = number[] | 'all';
18
- export interface AccordionProps {
18
+ type RenderMode = 'lazy' | 'eager';
19
+ export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
19
20
  items: AccordionItem[];
20
21
  mode?: Mode;
21
22
  size?: Size;
22
23
  variant?: Variant;
24
+ renderMode?: RenderMode;
23
25
  /** Uncontrolled defaults */
24
26
  defaultOpenIndex?: number | null;
25
27
  defaultOpenIndexes?: OpenIndexes;
@@ -30,5 +32,5 @@ export interface AccordionProps {
30
32
  onOpenIndexChange?: (index: number | null) => void;
31
33
  onOpenIndexesChange?: (indexes: number[]) => void;
32
34
  }
33
- export declare function Accordion({ items, mode, size, variant, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
35
+ export declare function Accordion({ items, mode, size, variant, renderMode, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, className, ...rest }: AccordionProps): JSX.Element;
34
36
  export {};
package/dist/components/accordion/Accordion.js CHANGED
@@ -18,12 +18,15 @@ function Accordion({
18
18
  mode = "single",
19
19
  size = "md",
20
20
  variant = "default",
21
+ renderMode = "lazy",
21
22
  defaultOpenIndex = null,
22
23
  defaultOpenIndexes = [],
23
24
  openIndex,
24
25
  openIndexes,
25
26
  onOpenIndexChange,
26
- onOpenIndexesChange
27
+ onOpenIndexesChange,
28
+ className,
29
+ ...rest
27
30
  }) {
28
31
  const uid = useId();
29
32
  const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
@@ -86,7 +89,13 @@ function Accordion({
86
89
  return /* @__PURE__ */ jsx(
87
90
  "div",
88
91
  {
89
- className: [styles.container, styles[size], variant !== "default" ? styles[variant] : ""].filter(Boolean).join(" "),
92
+ ...rest,
93
+ className: [
94
+ styles.container,
95
+ styles[size],
96
+ variant !== "default" ? styles[variant] : "",
97
+ className
98
+ ].filter(Boolean).join(" "),
90
99
  children: items.map((item, i) => {
91
100
  var _a;
92
101
  return /* @__PURE__ */ jsx(
@@ -99,7 +108,8 @@ function Accordion({
99
108
  onToggle: toggle,
100
109
  shouldAnimate: hasMounted,
101
110
  headlineSize: size === "sm" ? 4 : 3,
102
- variant
111
+ variant,
112
+ renderMode
103
113
  },
104
114
  (_a = item.id) != null ? _a : i
105
115
  );
package/dist/components/accordion/components/AccordionRow.cjs CHANGED
@@ -53,13 +53,22 @@ function AccordionRow({
53
53
  onToggle,
54
54
  shouldAnimate = true,
55
55
  headlineSize = 4,
56
- variant = "default"
56
+ variant = "default",
57
+ renderMode = "lazy"
57
58
  }) {
58
59
  const isDisabled = !!item.disabled;
59
60
  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
60
61
  const buttonId = `${uid}-acc-btn-${index}`;
61
62
  const panelId = `${uid}-acc-panel-${index}`;
62
63
  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
64
+ const [hasBeenOpened, setHasBeenOpened] = react.useState(isOpen);
65
+ const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
66
+ function handleToggle() {
67
+ if (!isOpen) {
68
+ setHasBeenOpened(true);
69
+ }
70
+ onToggle(index);
71
+ }
63
72
  return /* @__PURE__ */ jsxRuntime.jsxs(
64
73
  "section",
65
74
  {
@@ -75,7 +84,7 @@ function AccordionRow({
75
84
  className: styles__default.default.trigger,
76
85
  "aria-expanded": isOpen,
77
86
  "aria-controls": panelId,
78
- onClick: () => onToggle(index),
87
+ onClick: handleToggle,
79
88
  disabled: isDisabled,
80
89
  children: [
81
90
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.title, children: [
@@ -109,7 +118,7 @@ function AccordionRow({
109
118
  className: `${styles__default.default.panel} ${shouldAnimate ? styles__default.default.animate : styles__default.default.noAnimate}`,
110
119
  style: { height },
111
120
  onTransitionEnd,
112
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: styles__default.default.content, children: item.children })
121
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: styles__default.default.content, children: shouldRenderChildren ? item.children : null })
113
122
  }
114
123
  )
115
124
  ]
package/dist/components/accordion/components/AccordionRow.d.ts CHANGED
@@ -9,5 +9,6 @@ export type AccordionRowProps = {
9
9
  shouldAnimate?: boolean;
10
10
  headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
11
11
  variant?: 'default' | 'outlined';
12
+ renderMode?: 'lazy' | 'eager';
12
13
  };
13
- export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, }: AccordionRowProps): JSX.Element;
14
+ export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, renderMode, }: AccordionRowProps): JSX.Element;
package/dist/components/accordion/components/AccordionRow.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { ChevronDown } from 'lucide-react';
3
- import { useRef, useState, useLayoutEffect } from 'react';
3
+ import { useState, useRef, useLayoutEffect } from 'react';
4
4
  import { Headline } from '../../../components/headline/Headline';
5
5
  import styles from './AccordionRow.module.css';
6
6
 
@@ -47,13 +47,22 @@ function AccordionRow({
47
47
  onToggle,
48
48
  shouldAnimate = true,
49
49
  headlineSize = 4,
50
- variant = "default"
50
+ variant = "default",
51
+ renderMode = "lazy"
51
52
  }) {
52
53
  const isDisabled = !!item.disabled;
53
54
  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
54
55
  const buttonId = `${uid}-acc-btn-${index}`;
55
56
  const panelId = `${uid}-acc-panel-${index}`;
56
57
  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
58
+ const [hasBeenOpened, setHasBeenOpened] = useState(isOpen);
59
+ const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
60
+ function handleToggle() {
61
+ if (!isOpen) {
62
+ setHasBeenOpened(true);
63
+ }
64
+ onToggle(index);
65
+ }
57
66
  return /* @__PURE__ */ jsxs(
58
67
  "section",
59
68
  {
@@ -69,7 +78,7 @@ function AccordionRow({
69
78
  className: styles.trigger,
70
79
  "aria-expanded": isOpen,
71
80
  "aria-controls": panelId,
72
- onClick: () => onToggle(index),
81
+ onClick: handleToggle,
73
82
  disabled: isDisabled,
74
83
  children: [
75
84
  /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
@@ -103,7 +112,7 @@ function AccordionRow({
103
112
  className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
104
113
  style: { height },
105
114
  onTransitionEnd,
106
- children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: item.children })
115
+ children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: shouldRenderChildren ? item.children : null })
107
116
  }
108
117
  )
109
118
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.105",
3
+ "version": "0.0.106",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",