@frontify/fondue 12.0.0-beta.165 → 12.0.0-beta.166

package/dist/components/Accordion/Accordion.es.js

@@ -1,112 +1,120 @@
-import { useAccordion as K, useAccordionItem as b } from "@react-aria/accordion";
-import { useFocusRing as D } from "@react-aria/focus";
-import { mergeProps as N } from "@react-aria/utils";
-import { Item as P } from "@react-stately/collections";
-import { useTreeState as R } from "@react-stately/tree";
-import { FOCUS_STYLE_INSET as x } from "../../utilities/focusStyle.es.js";
-import { merge as w } from "../../utilities/merge.es.js";
-import i, { useRef as E, Children as m, useEffect as F, isValidElement as C } from "react";
-import { AccordionHeader as O } from "./AccordionHeader.es.js";
-import { CollapsibleWrap as T } from "../CollapsibleWrap/CollapsibleWrap.es.js";
-const L = "accordion", U = "accordion-item", _ = ({
+import { useAccordion as N, useAccordionItem as P } from "@react-aria/accordion";
+import { useFocusRing as R } from "@react-aria/focus";
+import { mergeProps as x } from "@react-aria/utils";
+import { Item as T } from "@react-stately/collections";
+import { useTreeState as F } from "@react-stately/tree";
+import { FOCUS_STYLE_INSET as O } from "../../utilities/focusStyle.es.js";
+import { merge as k } from "../../utilities/merge.es.js";
+import d, { useRef as w, Children as u, useEffect as L, isValidElement as C } from "react";
+import { AccordionHeader as U } from "./AccordionHeader.es.js";
+import { CollapsibleWrap as _ } from "../CollapsibleWrap/CollapsibleWrap.es.js";
+const M = "fondue-accordion", I = "fondue-accordion-item", S = ({
   item: e,
-  state: t,
-  header: r,
-  padding: c = !0,
-  divider: o = !1,
-  headerComponent: d = O
+  state: r,
+  header: t,
+  padding: o = !0,
+  divider: c = !1,
+  headerComponent: n = U,
+  "data-test-id": i = I
 }) => {
-  var l, p;
-  const { size: n, active: f, ...h } = r, y = E(null), { buttonProps: s, regionProps: A } = b({ item: e }, t, y), g = t.expandedKeys.has(e.key), { isFocusVisible: k, focusProps: a } = D();
-  return /* @__PURE__ */ i.createElement(
+  var a, m;
+  const { active: s, ...f } = t, h = w(null), { buttonProps: p, regionProps: y } = P({ item: e }, r, h), A = r.expandedKeys.has(e.key), { isFocusVisible: E, focusProps: g } = R();
+  return /* @__PURE__ */ d.createElement(
     "div",
     {
       key: e.key,
-      className: w([k ? x : "", o && "tw-divide-y tw-divide-black-10"])
+      className: k([E ? O : "", c && "tw-divide-y tw-divide-black-10"])
     },
-    /* @__PURE__ */ i.createElement(
+    /* @__PURE__ */ d.createElement(
       "button",
       {
-        ...N(s, a),
-        "data-test-id": U,
-        ref: y,
-        onClick: (u) => {
-          r.onClick && r.onClick(), s.onClick && s.onClick(u);
+        ...x(p, g),
+        "data-test-id": i,
+        ref: h,
+        onClick: (l) => {
+          t.onClick && t.onClick(), p.onClick && p.onClick(l);
         },
-        onKeyUp: (u) => {
-          r.onClick && u.key === "Enter" && r.onClick(), s.onKeyUp && s.onKeyUp(u);
+        onKeyUp: (l) => {
+          t.onClick && l.key === "Enter" && t.onClick(), p.onKeyUp && p.onKeyUp(l);
         },
         className: "tw-w-full focus-visible:tw-outline-none"
       },
-      /* @__PURE__ */ i.createElement(d, { isOpen: g, size: n, ...h })
+      /* @__PURE__ */ d.createElement(n, { isOpen: A, ...f })
     ),
-    /* @__PURE__ */ i.createElement(T, { isOpen: g, preventInitialAnimation: f }, /* @__PURE__ */ i.createElement("div", { ...A, className: w([c && "tw-px-8 tw-pb-6"]) }, (p = (l = e.props).children) == null ? void 0 : p.call(l)))
+    /* @__PURE__ */ d.createElement(_, { isOpen: A, preventInitialAnimation: s }, /* @__PURE__ */ d.createElement("div", { ...y, className: k([o && "tw-px-8 tw-pb-6"]) }, (m = (a = e.props).children) == null ? void 0 : m.call(a)))
   );
-}, M = (e) => {
-  const t = m.map(e, (c, o) => {
-    const { header: d, children: n } = c.props;
-    return /* @__PURE__ */ i.createElement(P, { key: o, textValue: d.children }, n ? () => n : null);
-  }), r = t.map((c) => c.key).filter((c, o) => {
-    var d, n;
-    return c && !!((n = (d = e[o]) == null ? void 0 : d.props.header) != null && n.active);
+}, V = (e) => {
+  const r = u.map(e, (o, c) => {
+    const { header: n, children: i } = o.props;
+    return /* @__PURE__ */ d.createElement(T, { key: c, textValue: n.children }, i ? () => i : null);
+  }), t = r.map((o) => o.key).filter((o, c) => {
+    var n, i;
+    return o && !!((i = (n = e[c]) == null ? void 0 : n.props.header) != null && i.active);
   }) || [];
-  return { children: t, defaultExpandedKeys: r };
-}, S = ({ children: e }) => m.toArray(e).reduce((t, r) => C(r) && !r.props.header ? (console.warn("Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly."), t) : (C(r) && t.push(r), t), []), V = ({ children: e }) => /* @__PURE__ */ i.createElement(i.Fragment, null, e);
-V.displayName = "FondueAccordionItem";
-const W = (e) => {
-  var r, c, o;
-  const t = m.toArray(e);
-  return ((o = (c = (r = t[t.length - 1]) == null ? void 0 : r.props) == null ? void 0 : c.header) == null ? void 0 : o.active) === !0;
-}, z = (e) => {
-  const { divider: t = !0, border: r = !0 } = e, c = S(e), o = M(c), d = E(null), n = R(o), f = E({ firstRender: !0, childLength: m.toArray(e.children).length }), h = m.toArray(e.children).length;
-  F(() => {
-    W(e.children) && !f.current.firstRender && m.toArray(e.children).length > f.current.childLength && n.toggleKey(o.defaultExpandedKeys[o.defaultExpandedKeys.length - 1]), f.current = { firstRender: !1, childLength: m.toArray(e.children).length };
-  }, [o.defaultExpandedKeys, h, e.children, n]);
+  return { children: r, defaultExpandedKeys: t };
+}, W = ({ children: e }) => u.toArray(e).reduce((r, t) => C(t) && !t.props.header ? (console.warn("Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly."), r) : (C(t) && r.push(t), r), []), H = ({ children: e }) => /* @__PURE__ */ d.createElement(d.Fragment, null, e);
+H.displayName = "FondueAccordionItem";
+const Y = (e) => {
+  var t, o, c;
+  const r = u.toArray(e);
+  return ((c = (o = (t = r[r.length - 1]) == null ? void 0 : t.props) == null ? void 0 : o.header) == null ? void 0 : c.active) === !0;
+}, j = (e) => {
+  const { divider: r = !0, border: t = !0, "data-test-id": o = M } = e, c = W(e), n = V(c), i = w(null), s = F(n), f = w({ firstRender: !0, childLength: u.toArray(e.children).length }), h = u.toArray(e.children).length;
+  L(() => {
+    Y(e.children) && !f.current.firstRender && u.toArray(e.children).length > f.current.childLength && s.toggleKey(n.defaultExpandedKeys[n.defaultExpandedKeys.length - 1]), f.current = { firstRender: !1, childLength: u.toArray(e.children).length };
+  }, [n.defaultExpandedKeys, h, e.children, s]);
   const {
     // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370
     // This makes it impossible to edit or select text in input fields inside the accordion
     // onKeydown automatically navigates away from child elements, including dropdown menus etc.
     // Focus should only be passed if the accordion item itself is focused
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    accordionProps: { onMouseDown: y, onKeyDown: s, ...A }
+    accordionProps: { onMouseDown: p, onKeyDown: y, ...A }
     // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
-  } = K({ ...o, disallowTypeAhead: !0 }, n, d), k = { ...A, onKeyDown: (a) => {
-    const l = a.target.dataset.key, p = n.selectionManager.focusedKey === l;
-    l && p && s && s(a);
+  } = N({ ...n, disallowTypeAhead: !0 }, s, i), g = { ...A, onKeyDown: (a) => {
+    const m = a.target.dataset.key, l = s.selectionManager.focusedKey === m;
+    m && l && y && y(a);
   } };
-  return /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ d.createElement(
     "div",
     {
-      ...k,
-      ref: d,
-      "data-test-id": L,
-      className: w([
-        t && "tw-divide-y tw-divide-black-10",
-        r && "tw-border-t tw-border-b tw-border-black-10"
+      ...g,
+      ref: i,
+      "data-test-id": o,
+      className: k([
+        r && "tw-divide-y tw-divide-black-10",
+        t && "tw-border-t tw-border-b tw-border-black-10"
       ])
     },
-    [...n.collection].map((a, l) => {
-      const { header: p, padding: u, headerComponent: v, divider: I } = c[l].props;
-      return /* @__PURE__ */ i.createElement(
-        _,
+    [...s.collection].map((a, m) => {
+      const {
+        header: l,
+        padding: v,
+        headerComponent: K,
+        divider: b,
+        "data-test-id": D = I
+      } = c[m].props;
+      return /* @__PURE__ */ d.createElement(
+        S,
         {
           key: a.key,
           item: a,
-          state: n,
-          divider: I,
-          header: p,
-          padding: u,
-          headerComponent: v
+          state: s,
+          divider: b,
+          header: l,
+          padding: v,
+          headerComponent: K,
+          "data-test-id": D
         }
       );
     })
   );
 };
-z.displayName = "FondueAccordion";
+j.displayName = "FondueAccordion";
 export {
-  z as Accordion,
-  V as AccordionItem
+  j as Accordion,
+  H as AccordionItem
 };
 //# sourceMappingURL=Accordion.es.js.map

package/dist/components/Accordion/Accordion.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, Key, KeyboardEvent, ReactElement, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'accordion';\nconst ACCORDION_ITEM_ID = 'accordion-item';\n\nconst AriaAccordionItem = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n}: AriaAccordionItemProps): ReactElement => {\n    const { size, active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={ACCORDION_ITEM_ID}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} size={size} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? () => children : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion = (props: AccordionProps): ReactElement => {\n    const { divider = true, border = true } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={ACCORDION_ID}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const { header, padding, headerComponent, divider } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","size","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent"],"mappings":"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"}
+{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, Key, KeyboardEvent, ReactElement, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'fondue-accordion';\nconst ACCORDION_ITEM_ID = 'fondue-accordion-item';\n\nconst AriaAccordionItem = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n    'data-test-id': dataTestId = ACCORDION_ITEM_ID,\n}: AriaAccordionItemProps): ReactElement => {\n    const { active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={dataTestId}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? () => children : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion = (props: AccordionProps): ReactElement => {\n    const { divider = true, border = true, 'data-test-id': dataTestId = ACCORDION_ID } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={dataTestId}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const {\n                    header,\n                    padding,\n                    headerComponent,\n                    divider,\n                    'data-test-id': itemDataTestId = ACCORDION_ITEM_ID,\n                } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                        data-test-id={itemDataTestId}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","dataTestId","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent","itemDataTestId"],"mappings":"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"}

package/dist/components/Accordion/AccordionHeader.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { AccordionHeaderProps } from './types';
+export declare const ACCORDION_HEADER_TEST_ID = "fondue-accordion-header";
 export declare const AccordionHeader: {
-    ({ isOpen, decorator, disabled, children, size, bold, type, }: AccordionHeaderProps): JSX.Element;
+    ({ isOpen, decorator, disabled, children, "data-test-id": dataTestId, }: AccordionHeaderProps): JSX.Element;
     displayName: string;
 };

package/dist/components/Accordion/AccordionHeader.es.js

@@ -1,47 +1,46 @@
-import e, { useState as w, isValidElement as f, cloneElement as p } from "react";
+import t, { useState as s, isValidElement as m, cloneElement as w } from "react";
 import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
-import { merge as c } from "../../utilities/merge.es.js";
-import { AccordionHeaderIconSize as u } from "./types.es.js";
-import { AccordionHeaderIcon as E } from "./AccordionHeaderIcon.es.js";
-const h = ({
-  isOpen: r = !1,
-  decorator: n,
-  disabled: t = !1,
-  children: i,
-  size: l = u.Medium,
-  bold: m = !0,
-  type: s
+import { merge as d } from "../../utilities/merge.es.js";
+import { AccordionHeaderIcon as f } from "./AccordionHeaderIcon.es.js";
+const p = "fondue-accordion-header", E = ({
+  isOpen: a = !1,
+  decorator: r,
+  disabled: n = !1,
+  children: l,
+  "data-test-id": e = p
 }) => {
-  const [a, d] = w(null), o = /* @__PURE__ */ e.createElement(E, { isOpen: r, disabled: t, size: l, type: s });
-  return /* @__PURE__ */ e.createElement("span", { "data-test-id": "accordion-header", className: "tw-block tw-px-8 tw-py-6" }, /* @__PURE__ */ e.createElement(
+  const [o, i] = s(null), c = /* @__PURE__ */ t.createElement(f, { isOpen: a });
+  return /* @__PURE__ */ t.createElement("span", { "data-test-id": e, className: "tw-block tw-px-8 tw-py-6" }, /* @__PURE__ */ t.createElement(
     "span",
     {
-      "data-test-id": "fieldset-header",
+      "data-test-id": `${e}-container`,
       role: "navigation",
-      "aria-label": `${(a == null ? void 0 : a.innerText) || ""}`,
-      className: c([
+      "aria-label": `${(o == null ? void 0 : o.innerText) || ""}`,
+      className: d([
         "tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row",
-        !t && r ? "tw-text-black" : "tw-text-black-80",
-        t ? "tw-text-black-40" : "dark:tw-text-white"
+        !n && a && "tw-text-text",
+        !n && !a && "tw-text-text-weak hover:tw-text-text",
+        n && "tw-text-text-disabled"
       ])
     },
-    f(n) && /* @__PURE__ */ e.createElement("span", { "data-test-id": "accordion-header-decorator", className: "tw-shrink-0 tw-leading-4" }, p(n, {
+    m(r) && /* @__PURE__ */ t.createElement("span", { "data-test-id": `${e}-decorator`, className: "tw-shrink-0 tw-leading-4" }, w(r, {
       size: x.Size16
     })),
-    /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ t.createElement(
       "span",
       {
-        ref: d,
-        "data-test-id": "accordion-header-text",
-        className: c(["tw-text-left tw-text-m", m ? "tw-font-medium" : "tw-font-normal"])
+        ref: i,
+        "data-test-id": `${e}-text`,
+        className: "tw-text-left tw-text-m tw-font-normal"
       },
-      i
+      l
     ),
-    o && /* @__PURE__ */ e.createElement("span", { "data-test-id": "header-icon-container", className: "tw-ml-auto tw-shrink-0" }, o)
+    c && /* @__PURE__ */ t.createElement("span", { "data-test-id": `${e}-icon-container`, className: "tw-ml-auto tw-shrink-0" }, c)
   ));
 };
-h.displayName = "FondueAccordionHeader";
+E.displayName = "FondueAccordionHeader";
 export {
-  h as AccordionHeader
+  p as ACCORDION_HEADER_TEST_ID,
+  E as AccordionHeader
 };
 //# sourceMappingURL=AccordionHeader.es.js.map

package/dist/components/Accordion/AccordionHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.es.js","sources":["../../../src/components/Accordion/AccordionHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement, isValidElement, useState } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { merge } from '@utilities/merge';\nimport { AccordionHeaderIconSize, AccordionHeaderProps } from './types';\nimport { AccordionHeaderIcon } from './AccordionHeaderIcon';\n\nexport const AccordionHeader = ({\n    isOpen = false,\n    decorator,\n    disabled = false,\n    children,\n    size = AccordionHeaderIconSize.Medium,\n    bold = true,\n    type,\n}: AccordionHeaderProps) => {\n    const [headingRef, setHeadingRef] = useState<HTMLSpanElement | null>(null);\n    const icon = <AccordionHeaderIcon isOpen={isOpen} disabled={disabled} size={size} type={type} />;\n\n    return (\n        <span data-test-id=\"accordion-header\" className=\"tw-block tw-px-8 tw-py-6\">\n            <span\n                data-test-id=\"fieldset-header\"\n                role=\"navigation\"\n                aria-label={`${headingRef?.innerText || ''}`}\n                className={merge([\n                    'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                    !disabled && isOpen ? 'tw-text-black' : 'tw-text-black-80',\n                    disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n                ])}\n            >\n                {isValidElement(decorator) && (\n                    <span data-test-id=\"accordion-header-decorator\" className=\"tw-shrink-0 tw-leading-4\">\n                        {cloneElement(decorator as ReactElement<IconProps>, {\n                            size: IconSize.Size16,\n                        })}\n                    </span>\n                )}\n                <span\n                    ref={setHeadingRef}\n                    data-test-id=\"accordion-header-text\"\n                    className={merge(['tw-text-left tw-text-m', bold ? 'tw-font-medium' : 'tw-font-normal'])}\n                >\n                    {children}\n                </span>\n                {icon && (\n                    <span data-test-id=\"header-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </span>\n    );\n};\nAccordionHeader.displayName = 'FondueAccordionHeader';\n"],"names":["AccordionHeader","isOpen","decorator","disabled","children","size","AccordionHeaderIconSize","bold","type","headingRef","setHeadingRef","useState","icon","React","AccordionHeaderIcon","merge","isValidElement","cloneElement","IconSize"],"mappings":";;;;;AASO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAwB;AAAA,EAC/B,MAAAC,IAAO;AAAA,EACP,MAAAC;AACJ,MAA4B;AACxB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAiC,IAAI,GACnEC,IAAQ,gBAAAC,EAAA,cAAAC,GAAA,EAAoB,QAAAb,GAAgB,UAAAE,GAAoB,MAAAE,GAAY,MAAAG,EAAY,CAAA;AAE9F,SACK,gBAAAK,EAAA,cAAA,QAAA,EAAK,gBAAa,oBAAmB,WAAU,8BAC5C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAY,IAAGJ,KAAA,gBAAAA,EAAY,cAAa;AAAA,MACxC,WAAWM,EAAM;AAAA,QACb;AAAA,QACA,CAACZ,KAAYF,IAAS,kBAAkB;AAAA,QACxCE,IAAW,qBAAqB;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,IAEAa,EAAed,CAAS,KACpB,gBAAAW,EAAA,cAAA,QAAA,EAAK,gBAAa,8BAA6B,WAAU,8BACrDI,EAAaf,GAAsC;AAAA,MAChD,MAAMgB,EAAS;AAAA,IAAA,CAClB,CACL;AAAA,IAEJ,gBAAAL,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKH;AAAA,QACL,gBAAa;AAAA,QACb,WAAWK,EAAM,CAAC,0BAA0BR,IAAO,mBAAmB,gBAAgB,CAAC;AAAA,MAAA;AAAA,MAEtFH;AAAA,IACL;AAAA,IACCQ,KACI,gBAAAC,EAAA,cAAA,QAAA,EAAK,gBAAa,yBAAwB,WAAU,4BAChDD,CACL;AAAA,EAAA,CAGZ;AAER;AACAZ,EAAgB,cAAc;"}
+{"version":3,"file":"AccordionHeader.es.js","sources":["../../../src/components/Accordion/AccordionHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement, isValidElement, useState } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { merge } from '@utilities/merge';\nimport { AccordionHeaderProps } from './types';\nimport { AccordionHeaderIcon } from './AccordionHeaderIcon';\n\nexport const ACCORDION_HEADER_TEST_ID = 'fondue-accordion-header';\n\nexport const AccordionHeader = ({\n    isOpen = false,\n    decorator,\n    disabled = false,\n    children,\n    'data-test-id': dataTestId = ACCORDION_HEADER_TEST_ID,\n}: AccordionHeaderProps) => {\n    const [headingRef, setHeadingRef] = useState<HTMLSpanElement | null>(null);\n    const icon = <AccordionHeaderIcon isOpen={isOpen} />;\n\n    return (\n        <span data-test-id={dataTestId} className=\"tw-block tw-px-8 tw-py-6\">\n            <span\n                data-test-id={`${dataTestId}-container`}\n                role=\"navigation\"\n                aria-label={`${headingRef?.innerText || ''}`}\n                className={merge([\n                    'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                    !disabled && isOpen && 'tw-text-text',\n                    !disabled && !isOpen && 'tw-text-text-weak hover:tw-text-text',\n                    disabled && 'tw-text-text-disabled',\n                ])}\n            >\n                {isValidElement(decorator) && (\n                    <span data-test-id={`${dataTestId}-decorator`} className=\"tw-shrink-0 tw-leading-4\">\n                        {cloneElement(decorator as ReactElement<IconProps>, {\n                            size: IconSize.Size16,\n                        })}\n                    </span>\n                )}\n                <span\n                    ref={setHeadingRef}\n                    data-test-id={`${dataTestId}-text`}\n                    className=\"tw-text-left tw-text-m tw-font-normal\"\n                >\n                    {children}\n                </span>\n                {icon && (\n                    <span data-test-id={`${dataTestId}-icon-container`} className=\"tw-ml-auto tw-shrink-0\">\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </span>\n    );\n};\nAccordionHeader.displayName = 'FondueAccordionHeader';\n"],"names":["ACCORDION_HEADER_TEST_ID","AccordionHeader","isOpen","decorator","disabled","children","dataTestId","headingRef","setHeadingRef","useState","icon","React","AccordionHeaderIcon","merge","isValidElement","cloneElement","IconSize"],"mappings":";;;;AASO,MAAMA,IAA2B,2BAE3BC,IAAkB,CAAC;AAAA,EAC5B,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAaN;AACjC,MAA4B;AACxB,QAAM,CAACO,GAAYC,CAAa,IAAIC,EAAiC,IAAI,GACnEC,IAAQ,gBAAAC,EAAA,cAAAC,GAAA,EAAoB,QAAAV,EAAgB,CAAA;AAElD,SACK,gBAAAS,EAAA,cAAA,QAAA,EAAK,gBAAcL,GAAY,WAAU,8BACtC,gBAAAK,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,GAAGL;AAAA,MACjB,MAAK;AAAA,MACL,cAAY,IAAGC,KAAA,gBAAAA,EAAY,cAAa;AAAA,MACxC,WAAWM,EAAM;AAAA,QACb;AAAA,QACA,CAACT,KAAYF,KAAU;AAAA,QACvB,CAACE,KAAY,CAACF,KAAU;AAAA,QACxBE,KAAY;AAAA,MAAA,CACf;AAAA,IAAA;AAAA,IAEAU,EAAeX,CAAS,KACpB,gBAAAQ,EAAA,cAAA,QAAA,EAAK,gBAAc,GAAGL,eAAwB,WAAU,2BACpD,GAAAS,EAAaZ,GAAsC;AAAA,MAChD,MAAMa,EAAS;AAAA,IAAA,CAClB,CACL;AAAA,IAEJ,gBAAAL,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKH;AAAA,QACL,gBAAc,GAAGF;AAAA,QACjB,WAAU;AAAA,MAAA;AAAA,MAETD;AAAA,IACL;AAAA,IACCK,qCACI,QAAK,EAAA,gBAAc,GAAGJ,oBAA6B,WAAU,4BACzDI,CACL;AAAA,EAAA,CAGZ;AAER;AACAT,EAAgB,cAAc;"}

package/dist/components/Accordion/AccordionHeaderIcon.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { AccordionHeaderIconProps } from './types';
+export declare const ACCORDION_HEADER_ICON_ID = "fondue-accordion-header-icon";
 export declare const AccordionHeaderIcon: {
-    ({ size, isOpen, disabled, type, }: AccordionHeaderIconProps): Nullable<ReactElement>;
+    ({ size, isOpen, "data-test-id": dataTestId, }: AccordionHeaderIconProps): ReactElement;
     displayName: string;
 };

package/dist/components/Accordion/AccordionHeaderIcon.es.js

@@ -1,13 +1,32 @@
-import { AccordionHeaderIconSize as e } from "./types.es.js";
-import { renderFieldsetHeaderIconType as i, FieldsetHeaderSize as n, FieldsetHeaderType as a } from "../FieldsetHeader/FieldsetHeader.es.js";
-const t = ({
-  size: o = e.Medium,
-  isOpen: d,
-  disabled: r = !1,
-  type: c = a.Accordion
-}) => i(c, "", n[e[o]], d, r);
-t.displayName = "FondueAccordionHeaderIcon";
+import e from "react";
+import { merge as i } from "../../utilities/merge.es.js";
+import { IconSize as t } from "../../foundation/Icon/IconSize.es.js";
+import c from "../../foundation/Icon/Generated/IconCaretDown.es.js";
+const m = "fondue-accordion-header-icon", s = {
+  small: t.Size12,
+  medium: t.Size16,
+  large: t.Size20
+}, d = ({
+  size: a = "medium",
+  isOpen: r,
+  "data-test-id": o = m
+}) => {
+  const n = {
+    "aria-labelledby": "",
+    size: s[a]
+  };
+  return /* @__PURE__ */ e.createElement("span", { "data-test-id": `${o}-wrapper`, className: "tw-block" }, /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      "data-test-id": o,
+      className: i(["tw-block tw-transition-transform", r && "tw-rotate-180 tw-duration-300"])
+    },
+    /* @__PURE__ */ e.createElement(c, { ...n })
+  ));
+};
+d.displayName = "FondueAccordionHeaderIcon";
 export {
-  t as AccordionHeaderIcon
+  m as ACCORDION_HEADER_ICON_ID,
+  d as AccordionHeaderIcon
 };
 //# sourceMappingURL=AccordionHeaderIcon.es.js.map

package/dist/components/Accordion/AccordionHeaderIcon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FieldsetHeaderSize, FieldsetHeaderType, renderFieldsetHeaderIconType } from '@components/FieldsetHeader';\nimport { ReactElement } from 'react';\nimport { AccordionHeaderIconProps, AccordionHeaderIconSize } from './types';\n\nexport const AccordionHeaderIcon = ({\n    size = AccordionHeaderIconSize.Medium,\n    isOpen,\n    disabled = false,\n    type = FieldsetHeaderType.Accordion,\n}: AccordionHeaderIconProps): Nullable<ReactElement> =>\n    renderFieldsetHeaderIconType(type, '', FieldsetHeaderSize[AccordionHeaderIconSize[size]], isOpen, disabled);\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["AccordionHeaderIcon","size","AccordionHeaderIconSize","isOpen","disabled","type","FieldsetHeaderType","renderFieldsetHeaderIconType","FieldsetHeaderSize"],"mappings":";;AAMO,MAAMA,IAAsB,CAAC;AAAA,EAChC,MAAAC,IAAOC,EAAwB;AAAA,EAC/B,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAOC,EAAmB;AAC9B,MACIC,EAA6BF,GAAM,IAAIG,EAAmBN,EAAwBD,CAAI,CAAC,GAAGE,GAAQC,CAAQ;AAC9GJ,EAAoB,cAAc;"}
+{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconCaretDown } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { AccordionHeaderIconProps, AccordionHeaderIconSize } from './types';\n\nexport const ACCORDION_HEADER_ICON_ID = 'fondue-accordion-header-icon';\n\nconst sizeMap: Record<AccordionHeaderIconSize, IconSize> = {\n    small: IconSize.Size12,\n    medium: IconSize.Size16,\n    large: IconSize.Size20,\n};\n\nexport const AccordionHeaderIcon = ({\n    size = 'medium',\n    isOpen,\n    'data-test-id': dataTestId = ACCORDION_HEADER_ICON_ID,\n}: AccordionHeaderIconProps): ReactElement => {\n    const props = {\n        'aria-labelledby': '',\n        size: sizeMap[size],\n    };\n\n    return (\n        <span data-test-id={`${dataTestId}-wrapper`} className=\"tw-block\">\n            <span\n                data-test-id={dataTestId}\n                className={merge(['tw-block tw-transition-transform', isOpen && 'tw-rotate-180 tw-duration-300'])}\n            >\n                <IconCaretDown {...props} />\n            </span>\n        </span>\n    );\n};\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["ACCORDION_HEADER_ICON_ID","sizeMap","IconSize","AccordionHeaderIcon","size","isOpen","dataTestId","props","React","merge","IconCaretDown"],"mappings":";;;;AAQO,MAAMA,IAA2B,gCAElCC,IAAqD;AAAA,EACvD,OAAOC,EAAS;AAAA,EAChB,QAAQA,EAAS;AAAA,EACjB,OAAOA,EAAS;AACpB,GAEaC,IAAsB,CAAC;AAAA,EAChC,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,gBAAgBC,IAAaN;AACjC,MAA8C;AAC1C,QAAMO,IAAQ;AAAA,IACV,mBAAmB;AAAA,IACnB,MAAMN,EAAQG,CAAI;AAAA,EAAA;AAGtB,yCACK,QAAK,EAAA,gBAAc,GAAGE,aAAsB,WAAU,WACnD,GAAA,gBAAAE,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAcF;AAAA,MACd,WAAWG,EAAM,CAAC,oCAAoCJ,KAAU,+BAA+B,CAAC;AAAA,IAAA;AAAA,IAEhG,gBAAAG,EAAA,cAACE,GAAe,EAAA,GAAGH,EAAO,CAAA;AAAA,EAAA,CAElC;AAER;AACAJ,EAAoB,cAAc;"}

package/dist/components/Accordion/types.d.ts

@@ -1,11 +1,11 @@
 import { TreeState } from '@react-stately/tree';
 import { ReactElement, ReactNode } from 'react';
 import { Node } from '@react-types/shared';
-import { FieldsetHeaderSize, FieldsetHeaderType } from '../FieldsetHeader';
 export type AccordionProps = {
     children?: ReactNode;
     divider?: boolean;
     border?: boolean;
+    'data-test-id'?: string;
 };
 export type AriaAccordionItemProps = {
     item: Node<AccordionItemProps>;
@@ -17,6 +17,7 @@ export type AriaAccordionItemProps = {
     padding?: boolean;
     divider?: boolean;
     headerComponent?: (props: AccordionHeaderProps) => ReactElement;
+    'data-test-id'?: string;
 };
 export type AccordionItemProps = {
     header: Omit<AccordionHeaderProps, 'isOpen'> & {
@@ -26,34 +27,19 @@ export type AccordionItemProps = {
     padding?: boolean;
     divider?: boolean;
     headerComponent?: (props: AccordionHeaderProps) => ReactElement;
+    'data-test-id'?: string;
     children?: ReactNode;
 };
-export declare enum AccordionHeaderIconSize {
-    Small = "Small",
-    Medium = "Medium",
-    Large = "Large"
-}
+export type AccordionHeaderIconSize = 'small' | 'medium' | 'large';
 export type AccordionHeaderProps = {
     decorator?: ReactNode;
     children: string;
     disabled?: boolean;
     isOpen: boolean;
-    /** @deprecated use headerComponent prop for custom header styles */
-    size?: AccordionHeaderIconSize | FieldsetHeaderSize;
-    /** @deprecated use headerComponent prop for custom header styles */
-    bold?: boolean;
-    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.
-     Use headerComponent prop for custom header styles */
-    type?: FieldsetHeaderType;
-    /** @deprecated use headerComponent prop for custom header styles */
-    as?: keyof JSX.IntrinsicElements;
+    'data-test-id'?: string;
 };
 export type AccordionHeaderIconProps = {
     isOpen: boolean;
-    size?: AccordionHeaderIconSize | FieldsetHeaderSize;
-    disabled?: boolean;
-    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.
-     Use headerComponent prop for custom header styles */
-    type?: FieldsetHeaderType;
-    children?: ReactNode;
+    size?: AccordionHeaderIconSize;
+    'data-test-id'?: string;
 };

package/dist/components/LinkChooser/utils/helpers.d.ts

@@ -9,11 +9,11 @@ export declare const decoratedResults: (results: SearchResult[]) => {
     style?: import("../..").MenuItemStyle | undefined;
     children?: import("react").ReactNode;
     disabled?: boolean | undefined;
-    size?: import("../..").MenuItemContentSize | undefined;
-    type?: string | undefined;
     active?: boolean | undefined;
     onClick?: (<T extends HTMLButtonElement | HTMLAnchorElement>(event: import("react").MouseEvent<T, MouseEvent>) => void) | undefined;
     id: string | number;
+    type?: string | undefined;
+    size?: import("../..").MenuItemContentSize | undefined;
     checked?: boolean | undefined;
     subtitle?: string | undefined;
     ariaProps?: import("react").HTMLAttributes<HTMLElement> | undefined;