npm - @frontify/fondue - Versions diffs - 13.0.0-rc.12 → 13.0.0-rc.14 - Mend

@frontify/fondue 13.0.0-rc.12 → 13.0.0-rc.14

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 (326) hide show

package/dist/components/ActionMenu/Aria/AriaMenuItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { type TreeState } from '@react-stately/tree';\nimport { type Node } from '@react-types/shared';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { type ActionMenuItemType, type ActionMenuSwitchItemType } from '@components/ActionMenu/ActionMenu';\nimport { type MenuItemType } from '@components/Dropdown';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch/Switch';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use a custom component instead.\n /\nexport type AriaOptionProps = {\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType;\n node: Node<object>;\n isSelected?: boolean;\n state: TreeState<object>;\n /\n @deprecated Use `menuItem.onClick` instead\n * /\n onClick?: () => void;\n};\n\ninterface SwitchObject {\n switchComponent: ReactElement \| undefined;\n switchValue: boolean \| null;\n toggleSwitch: VoidFunction \| null;\n}\n\nconst isActionMenuItem = (\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n const [switchObject, setSwitchObject] = useState<SwitchObject>({\n switchComponent: undefined,\n switchValue: null,\n toggleSwitch: null,\n });\n\n useEffect(() => {\n if (isSwitch) {\n const toggleSwitch = () => setSwitchValue(!switchValue);\n const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n setSwitchObject({\n switchComponent,\n switchValue,\n toggleSwitch,\n });\n }\n }, [isSwitch, switchValue]);\n\n return switchObject;\n};\n\n/\n @deprecated Please use a custom component instead.\n */\nexport const AriaMenuItem = ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement => {\n const ref = useRef<HTMLLIElement \| null>(null);\n const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n const {\n switchComponent = undefined,\n switchValue = null,\n toggleSwitch = null,\n } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue);\n\n const { menuItemProps } = useMenuItem(\n {\n ...node,\n onAction: () => {\n if (isActionMenuItem(menuItem)) {\n menuItem.onClick();\n }\n if (isActionMenuSwitchItem(menuItem)) {\n toggleSwitch?.();\n menuItem.onClick(Boolean(!switchValue));\n }\n },\n isDisabled: menuItem?.disabled \|\| false,\n 'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n },\n state,\n ref,\n );\n const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <li\n {...mergeProps(menuItemProps, focusProps, { onClick: () => onClick?.() })}\n data-test-id=\"menu-item\"\n className={merge([\n 'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n disabled && 'tw-pointer-events-none tw-top-px',\n isFocusVisible && FOCUS_STYLE_INSET,\n ])}\n ref={ref}\n >\n <MenuItem\n title={title}\n decorator={decorator}\n subtitle={subtitle}\n size={size}\n style={style}\n disabled={disabled}\n active={isSelected}\n selectionIndicator={selectionIndicator}\n switchComponent={switchComponent}\n />\n </li>\n );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","toggleSwitch","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","jsx","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;;;AAoCA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,IAAIP,~~KAIAM~~,EAAgB;AAAA,MACZ,~~mCAHqBE~~,GAAA,EAAO,MAAK,SAAQ,MAAMN,IAAc,OAAO,OAAO;AAAA,~~MAI3E~~,aAAAA;AAAA,MACA,~~cANiB~~,MAAMC,EAAe,CAACD,CAAW;AAAA,~~IAMlD~~,CACH;AAAA,EAET,GAAG,CAACF,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAKaI,IAAe,CAAC,EAAE,UAAAZ,GAAU,MAAAa,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAA6C;AAC3G,QAAMC,IAAMC,EAA6B,IAAI,GACvCd,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAmB,IAAkB;AAAA,IAClB,aAAAd,IAAc;AAAA,IACd,cAAAe,IAAe;AAAA,EAAA,IACflB,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGT;AAAA,MACH,UAAU,MAAM;AACZ,QAAId,EAAiBC,CAAQ,KACzBA,EAAS,QAAA,GAETC,EAAuBD,CAAQ,MAC/BoB,KAAA,QAAAA,KACApB,EAAS,QAAgB,CAACK,CAAY;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAAA;AAAA,IAE1Ec;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAM,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,MAAuB7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAA,IAAeC,EAAA;AAEvC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWb,GAAeU,GAAY,EAAE,SAAS,MAAMf,KAAA,gBAAAA,KAAa;AAAA,MACxE,gBAAa;AAAA,MACb,WAAWmB,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAnB;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OAAAd;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQb;AAAA,UACR,oBAAAc;AAAA,UACA,iBAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAP,EAAa,cAAc;"}
1	+ {"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { type TreeState } from '@react-stately/tree';\nimport { type Node } from '@react-types/shared';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { type ActionMenuItemType, type ActionMenuSwitchItemType } from '@components/ActionMenu/ActionMenu';\nimport { type MenuItemType } from '@components/Dropdown';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch/Switch';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use a custom component instead.\n /\nexport type AriaOptionProps = {\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType;\n node: Node<object>;\n isSelected?: boolean;\n state: TreeState<object>;\n /\n @deprecated Use `menuItem.onClick` instead\n * /\n onClick?: () => void;\n};\n\ninterface SwitchObject {\n switchComponent: ReactElement \| undefined;\n switchValue: boolean \| null;\n toggleSwitch: VoidFunction \| null;\n}\n\nconst isActionMenuItem = (\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n menuItem: MenuItemType \| ActionMenuItemType \| ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n const [switchObject, setSwitchObject] = useState<SwitchObject>({\n switchComponent: undefined,\n switchValue: null,\n toggleSwitch: null,\n });\n\n useEffect(() => {\n if (isSwitch) {\n const toggleSwitch = () => setSwitchValue(!switchValue);\n const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setSwitchObject({\n switchComponent,\n switchValue,\n toggleSwitch,\n });\n }\n }, [isSwitch, switchValue]);\n\n return switchObject;\n};\n\n/\n @deprecated Please use a custom component instead.\n */\nexport const AriaMenuItem = ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement => {\n const ref = useRef<HTMLLIElement \| null>(null);\n const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n const {\n switchComponent = undefined,\n switchValue = null,\n toggleSwitch = null,\n } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue);\n\n const { menuItemProps } = useMenuItem(\n {\n ...node,\n onAction: () => {\n if (isActionMenuItem(menuItem)) {\n menuItem.onClick();\n }\n if (isActionMenuSwitchItem(menuItem)) {\n toggleSwitch?.();\n menuItem.onClick(Boolean(!switchValue));\n }\n },\n isDisabled: menuItem?.disabled \|\| false,\n 'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n },\n state,\n ref,\n );\n const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <li\n {...mergeProps(menuItemProps, focusProps, { onClick: () => onClick?.() })}\n data-test-id=\"menu-item\"\n className={merge([\n 'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n disabled && 'tw-pointer-events-none tw-top-px',\n isFocusVisible && FOCUS_STYLE_INSET,\n ])}\n ref={ref}\n >\n <MenuItem\n title={title}\n decorator={decorator}\n subtitle={subtitle}\n size={size}\n style={style}\n disabled={disabled}\n active={isSelected}\n selectionIndicator={selectionIndicator}\n switchComponent={switchComponent}\n />\n </li>\n );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","toggleSwitch","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","jsx","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;;;AAoCA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,IAAIP,KAKAM,EAAgB;AAAA,MACZ,mCAJqBE,GAAA,EAAO,MAAK,SAAQ,MAAMN,IAAc,OAAO,OAAO;AAAA,MAK3E,aAAAA;AAAA,MACA,cAPiB,MAAMC,EAAe,CAACD,CAAW;AAAA,IAOlD,CACH;AAAA,EAET,GAAG,CAACF,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAKaI,IAAe,CAAC,EAAE,UAAAZ,GAAU,MAAAa,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAA6C;AAC3G,QAAMC,IAAMC,EAA6B,IAAI,GACvCd,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAmB,IAAkB;AAAA,IAClB,aAAAd,IAAc;AAAA,IACd,cAAAe,IAAe;AAAA,EAAA,IACflB,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGT;AAAA,MACH,UAAU,MAAM;AACZ,QAAId,EAAiBC,CAAQ,KACzBA,EAAS,QAAA,GAETC,EAAuBD,CAAQ,MAC/BoB,KAAA,QAAAA,KACApB,EAAS,QAAgB,CAACK,CAAY;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAAA;AAAA,IAE1Ec;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAM,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,MAAuB7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAA,IAAeC,EAAA;AAEvC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWb,GAAeU,GAAY,EAAE,SAAS,MAAMf,KAAA,gBAAAA,KAAa;AAAA,MACxE,gBAAa;AAAA,MACb,WAAWmB,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAnB;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OAAAd;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQb;AAAA,UACR,oBAAAc;AAAA,UACA,iBAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAP,EAAa,cAAc;"}

package/dist/components/AssetInput/SingleAsset/SelectedAsset.es.js CHANGED Viewed

@@ -16,8 +16,8 @@ import { AssetInputSize as m } from "../AssetInput.es.js";
 import { AssetThumbnail as q } from "../AssetThumbnail.es.js";
 import { AssetSubline as G } from "./AssetSubline.es.js";
 import { SpinningCircle as H } from "./SpinningCircle.es.js";
-import { AnimatePresence as J } from "../../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
-import { motion as K } from "../../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { motion as J } from "../../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { AnimatePresence as K } from "../../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
 const Q = ({
   asset: e,
   size: s,
@@ -118,8 +118,8 @@ const Q = ({
             ]
           }
         ),
-        /* @__PURE__ */ t(J, { children: i && /* @__PURE__ */ t(
-          K.div,
+        /* @__PURE__ */ t(K, { children: i && /* @__PURE__ */ t(
+          J.div,
           {
             style: {
               width: I

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js CHANGED Viewed

@@ -51,7 +51,8 @@ const T = () => /* @__PURE__ */ r(
       ]),
       "data-test-id": `${d}-item`,
       children: [
-        l ?? /* @__PURE__ */ a(t, { ref: n, ...h, className: g, children: [
+        l ?? // eslint-disable-next-line react-hooks/static-components
+        /* @__PURE__ */ a(t, { ref: n, ...h, className: g, children: [
           p,
           s
         ] }),

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n <svg\n aria-hidden=\"true\"\n width=\"13\"\n height=\"17\"\n viewBox=\"0 0 13 17\"\n fill=\"none\"\n className=\"tw-stroke-current tw-text-black-20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n </svg>\n);\n\n/\n * @deprecated This type is deprecated and will be removed in the next major version.\n /\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' \| 'link' \| 'onClick' \| 'decorator'> & {\n showSeparator: boolean;\n children?: ReactElement;\n 'data-test-id'?: string;\n};\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const BreadcrumbItem = ({\n decorator,\n label,\n link,\n onClick,\n showSeparator,\n children,\n 'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n const ref = useRef(null);\n\n const Element = getItemElementType(link, onClick);\n const isInteractive = Element !== 'span';\n\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: false,\n children: label,\n elementType: Element,\n },\n ref,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const elementTypeProps = {\n a: { href: link },\n button: { onClick, type: 'button' as const },\n span: { tabIndex: -1 },\n };\n const props = isInteractive\n ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n : elementTypeProps[Element];\n\n const classNames = merge([\n 'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded',\n isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n ]);\n\n return (\n <li\n className={merge([\n 'tw-flex tw-items-center tw-text-text-weak tw-text-xs tw-transition-colors',\n isInteractive && 'hover:tw-text-text',\n ])}\n data-test-id={`${dataTestId}-item`}\n >\n {children ?? (\n <Element ref={ref} {...props} className={classNames}>\n {decorator}\n {label}\n </Element>\n )}\n {showSeparator && <Separator />}\n </li>\n );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","elementTypeProps","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAA,CAAW;AAAA,EAAA;AAC/D,GAeSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AACrC,QAAMC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAC1CQ,IAAgBF,MAAY,QAE5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUZ;AAAA,MACV,aAAaQ;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGE,EAAE,gBAAAO,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMf,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAEnBe,IAAQP,IACRQ,EAAWP,GAAWG,GAAYE,EAAiBR,CAAO,CAAC,IAC3DQ,EAAiBR,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAV,KAAiBG,KAAkBQ;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAV,KAAiB;AAAA,MAAA,CACpB;AAAA,MACD,gBAAc,GAAGL,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD,~~uBACII~~,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAApB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}
1	+ {"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n <svg\n aria-hidden=\"true\"\n width=\"13\"\n height=\"17\"\n viewBox=\"0 0 13 17\"\n fill=\"none\"\n className=\"tw-stroke-current tw-text-black-20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n </svg>\n);\n\n/\n * @deprecated This type is deprecated and will be removed in the next major version.\n /\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' \| 'link' \| 'onClick' \| 'decorator'> & {\n showSeparator: boolean;\n children?: ReactElement;\n 'data-test-id'?: string;\n};\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const BreadcrumbItem = ({\n decorator,\n label,\n link,\n onClick,\n showSeparator,\n children,\n 'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n const ref = useRef(null);\n\n const Element = getItemElementType(link, onClick);\n const isInteractive = Element !== 'span';\n\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: false,\n children: label,\n elementType: Element,\n },\n ref,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const elementTypeProps = {\n a: { href: link },\n button: { onClick, type: 'button' as const },\n span: { tabIndex: -1 },\n };\n const props = isInteractive\n ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n : elementTypeProps[Element];\n\n const classNames = merge([\n 'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded',\n isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n ]);\n\n return (\n <li\n className={merge([\n 'tw-flex tw-items-center tw-text-text-weak tw-text-xs tw-transition-colors',\n isInteractive && 'hover:tw-text-text',\n ])}\n data-test-id={`${dataTestId}-item`}\n >\n {children ?? (\n // eslint-disable-next-line react-hooks/static-components\n <Element ref={ref} {...props} className={classNames}>\n {decorator}\n {label}\n </Element>\n )}\n {showSeparator && <Separator />}\n </li>\n );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","elementTypeProps","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAA,CAAW;AAAA,EAAA;AAC/D,GAeSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AACrC,QAAMC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAC1CQ,IAAgBF,MAAY,QAE5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUZ;AAAA,MACV,aAAaQ;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGE,EAAE,gBAAAO,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMf,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAEnBe,IAAQP,IACRQ,EAAWP,GAAWG,GAAYE,EAAiBR,CAAO,CAAC,IAC3DQ,EAAiBR,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAV,KAAiBG,KAAkBQ;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAV,KAAiB;AAAA,MAAA,CACpB;AAAA,MACD,gBAAc,GAAGL,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD;AAAA,0BAEII,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAApB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}

package/dist/components/Breadcrumbs/Breadcrumbs.es.js CHANGED Viewed

@@ -31,7 +31,6 @@ const p = (r) => ({
 };
 b.displayName = "FondueBreadcrumbs";
 export {
-  b as Breadcrumbs,
-  u as verticalGapClassMap
+  b as Breadcrumbs
 };
 //# sourceMappingURL=Breadcrumbs.es.js.map

package/dist/components/Breadcrumbs/Breadcrumbs.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { type MouseEvent, type ReactElement } from 'react';\n\nimport { type BadgeProps } from '@components/Badge';\nimport { type IconProps } from '@foundation/Icon/IconProps';\nimport { merge } from '@utilities/merge';\n\nimport { FormattedBreadcrumbs } from './FormattedBreadcrumbs';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n children: items.map(({ label }, index) => (\n <li key={`breadcrumb-${index}`} aria-label={label}>\n {label}\n </li>\n )),\n});\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport type Breadcrumb = {\n label: string;\n link?: string;\n onClick?: <T extends HTMLButtonElement \| HTMLAnchorElement>(event: MouseEvent<T>) => void;\n decorator?: ReactElement<IconProps>;\n bold?: boolean;\n badges?: BadgeProps[];\n 'data-test-id'?: string;\n} & Pick<BreadcrumbsProps, 'activeInline'>;\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport type BreadcrumbsProps = {\n items: Breadcrumb[];\n keepRoot?: boolean;\n activeInline?: boolean;\n truncate?: boolean;\n 'data-test-id'?: string;\n verticalGap?: BreadcrumbGap;\n};\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport enum BreadcrumbGap {\n None = 'None',\n Small = 'Small',\n Medium = 'Medium',\n}\n\n/\n @deprecated This constant is deprecated and will be removed in the next major version.\n /\~~nexport~~ ~~const~~ verticalGapClassMap: Record<BreadcrumbGap, string> = {\n [BreadcrumbGap.None]: 'tw-gap-y-0',\n [BreadcrumbGap.Small]: 'tw-gap-y-0.5',\n [BreadcrumbGap.Medium]: 'tw-gap-y-1',\n};\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const Breadcrumbs = ({\n items,\n keepRoot = true,\n truncate = false,\n activeInline = false,\n 'data-test-id': dataTestId = 'breadcrumb',\n verticalGap = BreadcrumbGap.Medium,\n}: BreadcrumbsProps): ReactElement => {\n const props = mapBreadcrumbsToAriaProps(items);\n const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n return (\n <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\" data-test-id={dataTestId}>\n <ol className={merge(['tw-list-none tw-flex tw-flex-wrap', verticalGapClassMap[verticalGap]])}>\n <FormattedBreadcrumbs\n items={items}\n keepRoot={keepRoot}\n truncate={truncate}\n activeInline={activeInline}\n data-test-id={dataTestId}\n />\n </ol>\n </nav>\n );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","jsx","verticalGapClassMap","Breadcrumbs","keepRoot","truncate","activeInline","dataTestId","verticalGap","props","navProps","useBreadcrumbs","merge","FormattedBreadcrumbs"],"mappings":";;;;AAWA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC5B,gBAAAC,EAAC,MAAA,EAA+B,cAAYF,GACvC,UAAAA,EAAA,GADI,cAAcC,CAAK,EAE5B,CACH;AACL,~~IAuCaE~~,IAAqD;AAAA,~~EAC7D~~,MAAqB;AAAA,EACrB,OAAsB;AAAA,EACtB,QAAuB;AAC5B,GAKaC,IAAc,CAAC;AAAA,EACxB,OAAAL;AAAA,EACA,UAAAM,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,aAAAC,IAAc;AAAA;AAClB,MAAsC;AAClC,QAAMC,IAAQZ,EAA0BC,CAAK,GACvC,EAAE,UAAAY,EAAA,IAAaC,EAAeF,CAA6B;AAEjE,SACI,gBAAAR,EAAC,SAAK,GAAGS,GAAU,WAAU,gBAAe,cAAW,cAAa,gBAAcH,GAC9E,4BAAC,MAAA,EAAG,WAAWK,EAAM,CAAC,qCAAqCV,EAAoBM,CAAW,CAAC,CAAC,GACxF,UAAA,gBAAAP;AAAA,IAACY;AAAA,IAAA;AAAA,MACG,OAAAf;AAAA,MACA,UAAAM;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,gBAAcC;AAAA,IAAA;AAAA,EAAA,GAEtB,EAAA,CACJ;AAER;AACAJ,EAAY,cAAc;"}
1	+ {"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { type MouseEvent, type ReactElement } from 'react';\n\nimport { type BadgeProps } from '@components/Badge/types';\nimport { type IconProps } from '@foundation/Icon/IconProps';\nimport { merge } from '@utilities/merge';\n\nimport { FormattedBreadcrumbs } from './FormattedBreadcrumbs';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n children: items.map(({ label }, index) => (\n <li key={`breadcrumb-${index}`} aria-label={label}>\n {label}\n </li>\n )),\n});\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport type Breadcrumb = {\n label: string;\n link?: string;\n onClick?: <T extends HTMLButtonElement \| HTMLAnchorElement>(event: MouseEvent<T>) => void;\n decorator?: ReactElement<IconProps>;\n bold?: boolean;\n badges?: BadgeProps[];\n 'data-test-id'?: string;\n} & Pick<BreadcrumbsProps, 'activeInline'>;\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport type BreadcrumbsProps = {\n items: Breadcrumb[];\n keepRoot?: boolean;\n activeInline?: boolean;\n truncate?: boolean;\n 'data-test-id'?: string;\n verticalGap?: BreadcrumbGap;\n};\n\n/\n @deprecated This type is deprecated and will be removed in the next major version.\n /\nexport enum BreadcrumbGap {\n None = 'None',\n Small = 'Small',\n Medium = 'Medium',\n}\n\n/\n @deprecated This constant is deprecated and will be removed in the next major version.\n /\nconst verticalGapClassMap: Record<BreadcrumbGap, string> = {\n [BreadcrumbGap.None]: 'tw-gap-y-0',\n [BreadcrumbGap.Small]: 'tw-gap-y-0.5',\n [BreadcrumbGap.Medium]: 'tw-gap-y-1',\n};\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const Breadcrumbs = ({\n items,\n keepRoot = true,\n truncate = false,\n activeInline = false,\n 'data-test-id': dataTestId = 'breadcrumb',\n verticalGap = BreadcrumbGap.Medium,\n}: BreadcrumbsProps): ReactElement => {\n const props = mapBreadcrumbsToAriaProps(items);\n const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n return (\n <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\" data-test-id={dataTestId}>\n <ol className={merge(['tw-list-none tw-flex tw-flex-wrap', verticalGapClassMap[verticalGap]])}>\n <FormattedBreadcrumbs\n items={items}\n keepRoot={keepRoot}\n truncate={truncate}\n activeInline={activeInline}\n data-test-id={dataTestId}\n />\n </ol>\n </nav>\n );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","jsx","verticalGapClassMap","Breadcrumbs","keepRoot","truncate","activeInline","dataTestId","verticalGap","props","navProps","useBreadcrumbs","merge","FormattedBreadcrumbs"],"mappings":";;;;AAWA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC5B,gBAAAC,EAAC,MAAA,EAA+B,cAAYF,GACvC,UAAAA,EAAA,GADI,cAAcC,CAAK,EAE5B,CACH;AACL,IAuCME,IAAqD;AAAA,EACtD,MAAqB;AAAA,EACrB,OAAsB;AAAA,EACtB,QAAuB;AAC5B,GAKaC,IAAc,CAAC;AAAA,EACxB,OAAAL;AAAA,EACA,UAAAM,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,aAAAC,IAAc;AAAA;AAClB,MAAsC;AAClC,QAAMC,IAAQZ,EAA0BC,CAAK,GACvC,EAAE,UAAAY,EAAA,IAAaC,EAAeF,CAA6B;AAEjE,SACI,gBAAAR,EAAC,SAAK,GAAGS,GAAU,WAAU,gBAAe,cAAW,cAAa,gBAAcH,GAC9E,4BAAC,MAAA,EAAG,WAAWK,EAAM,CAAC,qCAAqCV,EAAoBM,CAAW,CAAC,CAAC,GACxF,UAAA,gBAAAP;AAAA,IAACY;AAAA,IAAA;AAAA,MACG,OAAAf;AAAA,MACA,UAAAM;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,gBAAcC;AAAA,IAAA;AAAA,EAAA,GAEtB,EAAA,CACJ;AAER;AACAJ,EAAY,cAAc;"}

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { useRef as E, createElement as I } from "react";
 import { useBreadcrumbItem as N } from "@react-aria/breadcrumbs";
 import { useFocusRing as T } from "@react-aria/focus";
 import { mergeProps as B } from "@react-aria/utils";
-import { getItemElementType as P } from "../../utilities/elements.es.js";
-import { FOCUS_STYLE_NO_OFFSET as C } from "../../utilities/focusStyle.es.js";
+import { Badge as P } from "../Badge/Badge.es.js";
+import { getItemElementType as C } from "../../utilities/elements.es.js";
+import { FOCUS_STYLE_NO_OFFSET as O } from "../../utilities/focusStyle.es.js";
 import { merge as a } from "../../utilities/merge.es.js";
-import { Badge as O } from "../Badge/Badge.es.js";
 const S = ({
   label: r,
   badges: e,
@@ -17,7 +17,7 @@ const S = ({
   activeInline: s,
   "data-test-id": w = "breadcrumb"
 }) => {
-  const n = E(null), t = P(m, o), i = t !== "span", { itemProps: d } = N(
+  const n = E(null), t = C(m, o), i = t !== "span", { itemProps: d } = N(
     {
       isCurrent: !0,
       children: r,
@@ -32,7 +32,7 @@ const S = ({
     "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded",
     u && "tw-font-bold",
     s && "tw-text-xs",
-    i && f && C
+    i && f && O
   ]);
   return /* @__PURE__ */ c(
     "li",
@@ -47,7 +47,7 @@ const S = ({
           l,
           r
         ] }),
-        e == null ? void 0 : e.map(({ children: g, ...y }, F) => /* @__PURE__ */ I(O, { ...y, key: `breadcrumb-badge-${F}` }, g))
+        e == null ? void 0 : e.map(({ children: g, ...y }, F) => /* @__PURE__ */ I(P, { ...y, key: `breadcrumb-badge-${F}` }, g))
       ]
     }
   );

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { Badge } from '@components/Badge';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const CurrentBreadcrumbItem = ({\n label,\n badges,\n bold,\n decorator,\n link,\n onClick,\n activeInline,\n 'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n const ref = useRef(null);\n const Element = getItemElementType(link, onClick);\n const isInteractive = Element !== 'span';\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: true,\n children: label,\n elementType: Element,\n },\n ref,\n );\n\n const elementTypeProps = {\n a: { href: link },\n button: { onClick, type: 'button' as const },\n span: { tabIndex: -1 },\n };\n\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = isInteractive\n ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n : elementTypeProps[Element];\n\n const classNames = merge([\n 'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n bold && 'tw-font-bold',\n activeInline && 'tw-text-xs',\n isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n ]);\n\n return (\n <li\n className={merge([\n 'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n ])}\n data-test-id={`${dataTestId}-item`}\n >\n <Element ref={ref} {...props} className={classNames}>\n {decorator}\n {label}\n </Element>\n {badges?.map(({ children: badge, ...props }, index) => (\n <Badge {...props} key={`breadcrumb-badge-${index}`}>\n {badge}\n </Badge>\n ))}\n </li>\n );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","createElement","Badge"],"mappings":";;;;;;;;;AAmBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AAC5C,QAAMC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1CO,IAAgBF,MAAY,QAC5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUd;AAAA,MACV,aAAaU;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGEO,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMX,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAGnB,EAAE,gBAAAW,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAQP,IACRQ,EAAWP,GAAWI,GAAYF,EAAiBL,CAAO,CAAC,IAC3DK,EAAiBL,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACApB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBM,KAAiBI,KAAkBO;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAhB,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,~~MAE3B~~,UAAA;AAAA,QAAA,gBAAAiB,EAACd,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUwB,GAAO,GAAGN,EAAAA,GAASO,MACzC,gBAAAC,EAACC,GAAA,EAAO,GAAGT,GAAO,KAAK,oBAAoBO,CAAK,GAAA,GAC3CD,CACL;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACA1B,EAAsB,cAAc;"}
1	+ {"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { Badge } from '@components/Badge/Badge';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\n/\n @deprecated This component is deprecated and will be removed in the next major version.\n /\nexport const CurrentBreadcrumbItem = ({\n label,\n badges,\n bold,\n decorator,\n link,\n onClick,\n activeInline,\n 'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n const ref = useRef(null);\n const Element = getItemElementType(link, onClick);\n const isInteractive = Element !== 'span';\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: true,\n children: label,\n elementType: Element,\n },\n ref,\n );\n\n const elementTypeProps = {\n a: { href: link },\n button: { onClick, type: 'button' as const },\n span: { tabIndex: -1 },\n };\n\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = isInteractive\n ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n : elementTypeProps[Element];\n\n const classNames = merge([\n 'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n bold && 'tw-font-bold',\n activeInline && 'tw-text-xs',\n isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n ]);\n\n return (\n <li\n className={merge([\n 'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n ])}\n data-test-id={`${dataTestId}-item`}\n >\n {/ eslint-disable-next-line react-hooks/static-components */}\n <Element ref={ref} {...props} className={classNames}>\n {decorator}\n {label}\n </Element>\n {badges?.map(({ children: badge, ...props }, index) => (\n <Badge {...props} key={`breadcrumb-badge-${index}`}>\n {badge}\n </Badge>\n ))}\n </li>\n );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","createElement","Badge"],"mappings":";;;;;;;;;AAmBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AAC5C,QAAMC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1CO,IAAgBF,MAAY,QAC5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUd;AAAA,MACV,aAAaU;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGEO,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMX,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAGnB,EAAE,gBAAAW,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAQP,IACRQ,EAAWP,GAAWI,GAAYF,EAAiBL,CAAO,CAAC,IAC3DK,EAAiBL,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACApB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBM,KAAiBI,KAAkBO;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAhB,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAG3B,UAAA;AAAA,QAAA,gBAAAiB,EAACd,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUwB,GAAO,GAAGN,EAAAA,GAASO,MACzC,gBAAAC,EAACC,GAAA,EAAO,GAAGT,GAAO,KAAK,oBAAoBO,CAAK,GAAA,GAC3CD,CACL;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACA1B,EAAsB,cAAc;"}

package/dist/components/Button/Button.es.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { FOCUS_VISIBLE_STYLE as T } from "../../utilities/focusStyle.es.js";
 import { merge as r } from "../../utilities/merge.es.js";
 import { useForwardedRef as U } from "../../utilities/useForwardedRef.es.js";
 import { ButtonStyleClasses as W, ButtonDisabledClasses as Y, ButtonCommonClasses as q, ButtonRoundingClasses as v, ButtonSizeClasses as d, IconSpacingClasses as A } from "./ButtonClasses.es.js";
-import { ButtonStyle as o, ButtonType as G, ButtonRounding as H, ButtonSize as J, ButtonEmphasis as u } from "./ButtonTypes.es.js";
+import { ButtonType as G, ButtonRounding as H, ButtonSize as J, ButtonStyle as o, ButtonEmphasis as u } from "./ButtonTypes.es.js";
 const K = ({
   type: S = G.Button,
   title: b = "",

package/dist/components/Checkbox/Checkbox.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n type ForwardRefRenderFunction,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconMinus from '@foundation/Icon/Generated/IconMinus';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n Strong = 'Strong',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n XLarge = 'XLarge',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n 'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked \|\| checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n [CheckboxEmphasis.Weak]:\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel,\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n 'data-test-id': dataTestId = 'checkbox',\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement \| null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const labelContainer = useRef<HTMLSpanElement>(null);\n const helperTextContainer = useRef<HTMLSpanElement>(null);\n const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n return () => {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n };\n }, []);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel,\n value,\n },\n toggleState,\n inputRef,\n );\n\n const stateMap: Record<CheckboxState, ReactNode> = {\n [CheckboxState.Checked]: (\n <IconCheckMark size={size === CheckboxSize.XLarge ? IconSize.Size24 : IconSize.Size16} />\n ),\n [CheckboxState.Mixed]: <IconMinus />,\n [CheckboxState.Unchecked]: null,\n };\n\n const checkedOrMixed = isCheckedOrMixed(state);\n\n const disabledClasses = merge([\n 'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n ]);\n\n const enabledClasses = checkedOrMixed\n ? emphasisCheckedClassesMap[emphasis]\n : merge([\n 'tw-bg-base hover:tw-bg-box-neutral',\n emphasis === CheckboxEmphasis.Strong\n ? 'tw-border-2 tw-border-box-selected-strong'\n : 'tw-border tw-border-line-xx-strong',\n ]);\n\n const checkOverflowing = useCallback(() => {\n if (labelContainer.current) {\n setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n }\n\n if (helperTextContainer.current) {\n setIsHelperTextOverflowing(\n helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n );\n }\n }, [labelContainer, helperTextContainer]);\n\n useEffect(() => {\n if ((!label && !helperText) \|\| hideLabel) {\n return;\n }\n checkOverflowing();\n\n window.removeEventListener('resize', checkOverflowing);\n window.addEventListener('resize', checkOverflowing);\n\n return () => {\n window.removeEventListener('resize', checkOverflowing);\n };\n }, [label, helperText, hideLabel, checkOverflowing]);\n\n return (\n <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n <InputLabel\n id={`${id}-label`}\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip}\n required={required}\n bold={checkedOrMixed}\n >\n <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n <span className=\"tw-inline-flex\">\n <input\n {...mergeProps(groupInputProps \|\| inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id={`${dataTestId}-input`}\n role=\"checkbox\"\n aria-checked={state === CheckboxState.Checked}\n required={required}\n aria-label={ariaLabel}\n aria-labelledby={label ? `${id}-label` : undefined}\n />\n <span\n data-test-id={`${dataTestId}-icon-box`}\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n sizeClassesMap[size],\n disabled ? disabledClasses : enabledClasses,\n ])}\n >\n {stateMap[state]}\n </span>\n </span>\n {!hideLabel && (\n <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n {label && (\n <span\n ref={labelContainer}\n data-test-id={`${dataTestId}-label`}\n className={merge([\n 'tw-text-ellipsis tw-overflow-hidden',\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n checkedOrMixed && 'tw-font-medium',\n ])}\n title={isLabelOverflowing ? label : undefined}\n >\n {label}\n </span>\n )}\n {helperText && (\n <span\n ref={helperTextContainer}\n data-test-id={`${dataTestId}-helper-text`}\n className={merge([\n 'tw-text-ellipsis tw-overflow-hidden',\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-weak',\n ])}\n title={isHelperTextOverflowing ? helperText : undefined}\n >\n {helperText}\n </span>\n )}\n </span>\n )}\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconSize","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n type ForwardRefRenderFunction,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconMinus from '@foundation/Icon/Generated/IconMinus';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n Strong = 'Strong',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n XLarge = 'XLarge',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n /\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n 'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked \|\| checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n [CheckboxEmphasis.Weak]:\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel,\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n 'data-test-id': dataTestId = 'checkbox',\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement \| null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const labelContainer = useRef<HTMLSpanElement>(null);\n const helperTextContainer = useRef<HTMLSpanElement>(null);\n const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n return () => {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n };\n }, []);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel,\n value,\n },\n toggleState,\n inputRef,\n );\n\n const stateMap: Record<CheckboxState, ReactNode> = {\n [CheckboxState.Checked]: (\n <IconCheckMark size={size === CheckboxSize.XLarge ? IconSize.Size24 : IconSize.Size16} />\n ),\n [CheckboxState.Mixed]: <IconMinus />,\n [CheckboxState.Unchecked]: null,\n };\n\n const checkedOrMixed = isCheckedOrMixed(state);\n\n const disabledClasses = merge([\n 'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n ]);\n\n const enabledClasses = checkedOrMixed\n ? emphasisCheckedClassesMap[emphasis]\n : merge([\n 'tw-bg-base hover:tw-bg-box-neutral',\n emphasis === CheckboxEmphasis.Strong\n ? 'tw-border-2 tw-border-box-selected-strong'\n : 'tw-border tw-border-line-xx-strong',\n ]);\n\n // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n const checkOverflowing = useCallback(() => {\n if (labelContainer.current) {\n setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n }\n\n if (helperTextContainer.current) {\n setIsHelperTextOverflowing(\n helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n );\n }\n }, [labelContainer, helperTextContainer]);\n\n useEffect(() => {\n if ((!label && !helperText) \|\| hideLabel) {\n return;\n }\n // eslint-disable-next-line react-hooks/set-state-in-effect\n checkOverflowing();\n\n window.removeEventListener('resize', checkOverflowing);\n window.addEventListener('resize', checkOverflowing);\n\n return () => {\n window.removeEventListener('resize', checkOverflowing);\n };\n }, [label, helperText, hideLabel, checkOverflowing]);\n\n return (\n <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n <InputLabel\n id={`${id}-label`}\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip}\n required={required}\n bold={checkedOrMixed}\n >\n <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n <span className=\"tw-inline-flex\">\n <input\n {...mergeProps(groupInputProps \|\| inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id={`${dataTestId}-input`}\n role=\"checkbox\"\n aria-checked={state === CheckboxState.Checked}\n required={required}\n aria-label={ariaLabel}\n aria-labelledby={label ? `${id}-label` : undefined}\n />\n <span\n data-test-id={`${dataTestId}-icon-box`}\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n sizeClassesMap[size],\n disabled ? disabledClasses : enabledClasses,\n ])}\n >\n {stateMap[state]}\n </span>\n </span>\n {!hideLabel && (\n <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n {label && (\n <span\n ref={labelContainer}\n data-test-id={`${dataTestId}-label`}\n className={merge([\n 'tw-text-ellipsis tw-overflow-hidden',\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n checkedOrMixed && 'tw-font-medium',\n ])}\n title={isLabelOverflowing ? label : undefined}\n >\n {label}\n </span>\n )}\n {helperText && (\n <span\n ref={helperTextContainer}\n data-test-id={`${dataTestId}-helper-text`}\n className={merge([\n 'tw-text-ellipsis tw-overflow-hidden',\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-weak',\n ])}\n title={isHelperTextOverflowing ? helperText : undefined}\n >\n {helperText}\n </span>\n )}\n </span>\n )}\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconSize","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":"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"}

package/dist/components/Checklist/Checklist.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { type CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Checkbox, type CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport enum ChecklistDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type Columns = 1 \| 2 \| 3 \| 4;\n\nconst columnsStyle: Record<Columns, string> = {\n 1: 'tw-grid-cols-1',\n 2: 'tw-grid-cols-2',\n 3: 'tw-grid-cols-3',\n 4: 'tw-grid-cols-4',\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' \| 'groupInputProps' \| 'value'> & { value: string };\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type ChecklistBase = {\n checkboxes: CheckboxValue[];\n setActiveValues: (value: string[]) => void;\n activeValues?: string[];\n ariaLabel?: string;\n 'data-test-id'?: string;\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type ChecklistProps = ChecklistBase & {\n direction: ChecklistDirection.Vertical \| ChecklistDirection.Horizontal;\n columns?: Columns;\n};\n\ntype ChecklistItemProps = {\n checkbox: CheckboxValue;\n state: CheckboxGroupState;\n forwardedRef?: (ref: HTMLInputElement) => void;\n};\n\nconst ChecklistItem = ({ checkbox, state, forwardedRef }: ChecklistItemProps) => {\n const ref = useRef<HTMLInputElement \| null>(null);\n const { value, disabled, label, 'aria-label': checkboxAriaLabel, state: checkboxState } = checkbox;\n const [checkState, setCheckState] = useState(checkboxState);\n const isSelected = state.isSelected(value);\n const { inputProps } = useCheckboxGroupItem(\n { value, isDisabled: disabled, 'aria-label': checkboxAriaLabel \|\| label },\n state,\n ref,\n );\n\n useEffect(() => {\n if (checkState === CheckboxState.Mixed && !isSelected) {\n setCheckState(CheckboxState.Mixed);\n } else {\n setCheckState(isSelected ? CheckboxState.Checked : CheckboxState.Unchecked);\n }\n }, [checkState, isSelected]);\n\n useEffect(() => {\n if (forwardedRef && ref.current) {\n forwardedRef(ref.current);\n }\n }, [forwardedRef, isSelected]);\n\n return <Checkbox {...checkbox} state={checkState} groupInputProps={inputProps} ref={ref} />;\n};\n\nconst getLastItemColumnSpan = (items: CheckboxValue[], columns: number) => {\n if (!columns \|\| columns <= 1) {\n return '';\n }\n\n const gridSpan = 'auto / span';\n const spanItems = items.length % columns;\n\n if (spanItems === 0) {\n return '';\n }\n\n return `${gridSpan} ${columns - spanItems + 1}`;\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport const Checklist = ({\n checkboxes,\n setActiveValues,\n ariaLabel = 'Checklist',\n activeValues = [],\n direction = ChecklistDirection.Horizontal,\n 'data-test-id': dataTestId = 'checklist',\n ...props\n}: ChecklistProps) => {\n const checkboxRefs = useRef<(HTMLInputElement \| null)[]>(Array.from({ length: checkboxes.length }));\n const listContainerRef = useRef<HTMLDivElement \| null>(null);\n const state = useCheckboxGroupState({\n value: activeValues,\n onChange: setActiveValues,\n });\n const { groupProps } = useCheckboxGroup(\n {\n 'aria-label': ariaLabel,\n },\n state,\n );\n\n const columns = ('columns' in props && props.columns) \|\| 1;\n\n useLayoutEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const focusableElements = checkboxRefs.current.filter((el) => el !== null);\n const currentIndex = focusableElements.indexOf(document.activeElement as HTMLInputElement);\n let nextIndex = currentIndex;\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n nextIndex++;\n if (nextIndex === focusableElements.length) {\n nextIndex = 0;\n }\n if (focusableElements[nextIndex].disabled) {\n nextIndex++;\n }\n } else if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n nextIndex--;\n if (nextIndex === -1) {\n nextIndex = focusableElements.length - 1;\n }\n\n if (focusableElements[nextIndex].disabled) {\n nextIndex--;\n }\n } else {\n return;\n }\n\n focusableElements[nextIndex].focus();\n\n const tabEvent = new KeyboardEvent('keyup', {\n key: 'Tab',\n code: 'Tab',\n keyCode: 9,\n bubbles: true,\n });\n\n focusableElements[nextIndex].dispatchEvent(tabEvent);\n };\n\n const listElem = listContainerRef.current;\n listElem?.addEventListener('keydown', handleKeyDown);\n\n return () => {\n listElem?.removeEventListener('keydown', handleKeyDown);\n };\n }, [checkboxes.length]);\n\n return (\n <div\n {...groupProps}\n data-test-id={dataTestId}\n className={merge([\n direction === ChecklistDirection.Horizontal\n ? 'tw-flex tw-flex-row tw-gap-12'\n : `tw-grid tw-gap-4 ${columnsStyle[columns]}`,\n ])}\n ref={listContainerRef}\n >\n {checkboxes.map((checkbox, index) => (\n <div\n key={checkbox.value}\n style={{\n maxWidth: listContainerRef?.current?.getBoundingClientRect().width,\n gridColumn:\n index === checkboxes.length - 1 && direction === ChecklistDirection.Vertical\n ? getLastItemColumnSpan(checkboxes, columns)\n : undefined,\n }}\n >\n <ChecklistItem\n checkbox={checkbox}\n state={state}\n forwardedRef={(el) => (checkboxRefs.current[index] = el)}\n />\n </div>\n ))}\n </div>\n );\n};\n\n/\n @deprecated Use multiple `Checkbox` components from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checklist the migration guide}.\n */\nChecklist.displayName = 'FondueChecklist';\n"],"names":["ChecklistDirection","columnsStyle","ChecklistItem","checkbox","state","forwardedRef","ref","useRef","value","disabled","label","checkboxAriaLabel","checkboxState","checkState","setCheckState","useState","isSelected","inputProps","useCheckboxGroupItem","useEffect","CheckboxState","jsx","Checkbox","getLastItemColumnSpan","items","columns","gridSpan","spanItems","Checklist","checkboxes","setActiveValues","ariaLabel","activeValues","direction","dataTestId","props","checkboxRefs","listContainerRef","useCheckboxGroupState","groupProps","useCheckboxGroup","useLayoutEffect","handleKeyDown","event","focusableElements","el","nextIndex","tabEvent","listElem","merge","index","_a"],"mappings":"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"}
1	+ {"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { type CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Checkbox, type CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport enum ChecklistDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type Columns = 1 \| 2 \| 3 \| 4;\n\nconst columnsStyle: Record<Columns, string> = {\n 1: 'tw-grid-cols-1',\n 2: 'tw-grid-cols-2',\n 3: 'tw-grid-cols-3',\n 4: 'tw-grid-cols-4',\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' \| 'groupInputProps' \| 'value'> & { value: string };\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type ChecklistBase = {\n checkboxes: CheckboxValue[];\n setActiveValues: (value: string[]) => void;\n activeValues?: string[];\n ariaLabel?: string;\n 'data-test-id'?: string;\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport type ChecklistProps = ChecklistBase & {\n direction: ChecklistDirection.Vertical \| ChecklistDirection.Horizontal;\n columns?: Columns;\n};\n\ntype ChecklistItemProps = {\n checkbox: CheckboxValue;\n state: CheckboxGroupState;\n forwardedRef?: (ref: HTMLInputElement) => void;\n};\n\nconst ChecklistItem = ({ checkbox, state, forwardedRef }: ChecklistItemProps) => {\n const ref = useRef<HTMLInputElement \| null>(null);\n const { value, disabled, label, 'aria-label': checkboxAriaLabel, state: checkboxState } = checkbox;\n const [checkState, setCheckState] = useState(checkboxState);\n const isSelected = state.isSelected(value);\n const { inputProps } = useCheckboxGroupItem(\n { value, isDisabled: disabled, 'aria-label': checkboxAriaLabel \|\| label },\n state,\n ref,\n );\n\n useEffect(() => {\n if (checkState === CheckboxState.Mixed && !isSelected) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setCheckState(CheckboxState.Mixed);\n } else {\n setCheckState(isSelected ? CheckboxState.Checked : CheckboxState.Unchecked);\n }\n }, [checkState, isSelected]);\n\n useEffect(() => {\n if (forwardedRef && ref.current) {\n forwardedRef(ref.current);\n }\n }, [forwardedRef, isSelected]);\n\n return <Checkbox {...checkbox} state={checkState} groupInputProps={inputProps} ref={ref} />;\n};\n\nconst getLastItemColumnSpan = (items: CheckboxValue[], columns: number) => {\n if (!columns \|\| columns <= 1) {\n return '';\n }\n\n const gridSpan = 'auto / span';\n const spanItems = items.length % columns;\n\n if (spanItems === 0) {\n return '';\n }\n\n return `${gridSpan} ${columns - spanItems + 1}`;\n};\n\n/\n @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n /\nexport const Checklist = ({\n checkboxes,\n setActiveValues,\n ariaLabel = 'Checklist',\n activeValues = [],\n direction = ChecklistDirection.Horizontal,\n 'data-test-id': dataTestId = 'checklist',\n ...props\n}: ChecklistProps) => {\n const checkboxRefs = useRef<(HTMLInputElement \| null)[]>(Array.from({ length: checkboxes.length }));\n const listContainerRef = useRef<HTMLDivElement \| null>(null);\n const state = useCheckboxGroupState({\n value: activeValues,\n onChange: setActiveValues,\n });\n const { groupProps } = useCheckboxGroup(\n {\n 'aria-label': ariaLabel,\n },\n state,\n );\n\n const columns = ('columns' in props && props.columns) \|\| 1;\n\n useLayoutEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const focusableElements = checkboxRefs.current.filter((el) => el !== null);\n const currentIndex = focusableElements.indexOf(document.activeElement as HTMLInputElement);\n let nextIndex = currentIndex;\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n nextIndex++;\n if (nextIndex === focusableElements.length) {\n nextIndex = 0;\n }\n if (focusableElements[nextIndex].disabled) {\n nextIndex++;\n }\n } else if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n nextIndex--;\n if (nextIndex === -1) {\n nextIndex = focusableElements.length - 1;\n }\n\n if (focusableElements[nextIndex].disabled) {\n nextIndex--;\n }\n } else {\n return;\n }\n\n focusableElements[nextIndex].focus();\n\n const tabEvent = new KeyboardEvent('keyup', {\n key: 'Tab',\n code: 'Tab',\n keyCode: 9,\n bubbles: true,\n });\n\n focusableElements[nextIndex].dispatchEvent(tabEvent);\n };\n\n const listElem = listContainerRef.current;\n listElem?.addEventListener('keydown', handleKeyDown);\n\n return () => {\n listElem?.removeEventListener('keydown', handleKeyDown);\n };\n }, [checkboxes.length]);\n\n return (\n <div\n {...groupProps}\n data-test-id={dataTestId}\n className={merge([\n direction === ChecklistDirection.Horizontal\n ? 'tw-flex tw-flex-row tw-gap-12'\n : `tw-grid tw-gap-4 ${columnsStyle[columns]}`,\n ])}\n ref={listContainerRef}\n >\n {/ eslint-disable-next-line react-hooks/refs /}\n {checkboxes.map((checkbox, index) => (\n <div\n key={checkbox.value}\n style={{\n maxWidth: listContainerRef?.current?.getBoundingClientRect().width,\n gridColumn:\n index === checkboxes.length - 1 && direction === ChecklistDirection.Vertical\n ? getLastItemColumnSpan(checkboxes, columns)\n : undefined,\n }}\n >\n <ChecklistItem\n checkbox={checkbox}\n state={state}\n forwardedRef={(el) => (checkboxRefs.current[index] = el)}\n />\n </div>\n ))}\n </div>\n );\n};\n\n/\n @deprecated Use multiple `Checkbox` components from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checklist the migration guide}.\n */\nChecklist.displayName = 'FondueChecklist';\n"],"names":["ChecklistDirection","columnsStyle","ChecklistItem","checkbox","state","forwardedRef","ref","useRef","value","disabled","label","checkboxAriaLabel","checkboxState","checkState","setCheckState","useState","isSelected","inputProps","useCheckboxGroupItem","useEffect","CheckboxState","jsx","Checkbox","getLastItemColumnSpan","items","columns","gridSpan","spanItems","Checklist","checkboxes","setActiveValues","ariaLabel","activeValues","direction","dataTestId","props","checkboxRefs","listContainerRef","useCheckboxGroupState","groupProps","useCheckboxGroup","useLayoutEffect","handleKeyDown","event","focusableElements","el","nextIndex","tabEvent","listElem","merge","index","_a"],"mappings":"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"}

package/dist/components/CollapsibleWrap/CollapsibleWrap.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
-import { AnimatePresence as n } from "../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
-import { motion as p } from "../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { AnimatePresence as n } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
+import { motion as p } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
 const s = ({
   children: e,
   isOpen: o = !1,

package/dist/components/ComponentEnum.es.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue - ActionMenu"] = "ActionMenu", e["Fondue - AssetInput"] = "AssetInput", e["Fondue - AssetThumbnail"] = "AssetThumbnail", e["Fondue - Badge"] = "Badge", e["Fondue - BadgeStatusIcon"] = "BadgeStatusIcon", e["Fondue - Box"] = "Box", e["Fondue - BreadcrumbItem"] = "BreadcrumbItem", e["Fondue - Breadcrumbs"] = "Breadcrumbs", e["Fondue - CurrentBreadcrumbItem"] = "CurrentBreadcrumbItem", e["Fondue - FormattedBreadcrumbs"] = "FormattedBreadcrumbs", e["Fondue - Button"] = "Button", e["Fondue - Checkbox"] = "Checkbox", e["Fondue - Checklist"] = "Checklist", e["Fondue - CollapsibleWrap"] = "CollapsibleWrap", e["Fondue - Container"] = "Container", e["Fondue - DatePicker"] = "DatePicker", e["Fondue - DatePickerTrigger"] = "DatePickerTrigger", e["Fondue - Dropdown"] = "Dropdown", e["Fondue - EditableText"] = "EditableText", e["Fondue - FilterableMultiSelect"] = "FilterableMultiSelect", e["Fondue - FormControl"] = "FormControl", e["Fondue - FormField"] = "FormField", e["Fondue - FrontifyPattern"] = "FrontifyPattern", e["Fondue - InputLabel"] = "InputLabel", e["Fondue - LegacyTextarea"] = "LegacyTextarea", e["Fondue - BrightHeader"] = "BrightHeader", e["Fondue - LegacyTooltip"] = "LegacyTooltip", e["Fondue - LoadingCircle"] = "LoadingCircle", e["Fondue - Menu"] = "Menu", e["Fondue - MenuItem"] = "MenuItem", e["Fondue - MenuItemContent"] = "MenuItemContent", e["Fondue - MultiSelect"] = "MultiSelect", e["Fondue - OrderableList"] = "OrderableList", e["Fondue - OverflowMenu"] = "OverflowMenu", e["Fondue - Popper"] = "Popper", e["Fondue - RadioButton"] = "RadioButton", e["Fondue - RadioList"] = "RadioList", e["Fondue - SegmentedControls"] = "SegmentedControls", e["Fondue - Switch"] = "Switch", e["Fondue - Table"] = "Table", e["Fondue - TableCell"] = "TableCell", e["Fondue - TableColumnHeader"] = "TableColumnHeader", e["Fondue - TableHeaderRow"] = "TableHeaderRow", e["Fondue - TableRow"] = "TableRow", e["Fondue - TabItem"] = "TabItem", e["Fondue - Tabs"] = "Tabs", e["Fondue - Tag"] = "Tag", e["Fondue - TextInput"] = "TextInput", e["Fondue - Textarea"] = "Textarea", e["Fondue - Toast"] = "Toast", e["Fondue - Tooltip"] = "Tooltip", e["Fondue - TooltipIcon"] = "TooltipIcon", e["Fondue - Tree"] = "Tree", e["Fondue - Trigger"] = "Trigger", e))(d || {});
+var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue - ActionMenu"] = "ActionMenu", e["Fondue - AssetInput"] = "AssetInput", e["Fondue - AssetThumbnail"] = "AssetThumbnail", e["Fondue - Badge"] = "Badge", e["Fondue - BadgeStatusIcon"] = "BadgeStatusIcon", e["Fondue - Box"] = "Box", e["Fondue - BreadcrumbItem"] = "BreadcrumbItem", e["Fondue - Breadcrumbs"] = "Breadcrumbs", e["Fondue - CurrentBreadcrumbItem"] = "CurrentBreadcrumbItem", e["Fondue - FormattedBreadcrumbs"] = "FormattedBreadcrumbs", e["Fondue - Button"] = "Button", e["Fondue - Checkbox"] = "Checkbox", e["Fondue - Checklist"] = "Checklist", e["Fondue - CollapsibleWrap"] = "CollapsibleWrap", e["Fondue - Container"] = "Container", e["Fondue - DatePicker"] = "DatePicker", e["Fondue - DatePickerTrigger"] = "DatePickerTrigger", e["Fondue - Dropdown"] = "Dropdown", e["Fondue - EditableText"] = "EditableText", e["Fondue - FilterableMultiSelect"] = "FilterableMultiSelect", e["Fondue - FormControl"] = "FormControl", e["Fondue - FormField"] = "FormField", e["Fondue - FrontifyPattern"] = "FrontifyPattern", e["Fondue - InputLabel"] = "InputLabel", e["Fondue - LegacyTextarea"] = "LegacyTextarea", e["Fondue - BrightHeader"] = "BrightHeader", e["Fondue - LegacyTooltip"] = "LegacyTooltip", e["Fondue - LoadingCircle"] = "LoadingCircle", e["Fondue - Menu"] = "Menu", e["Fondue - MenuItem"] = "MenuItem", e["Fondue - MenuItemContent"] = "MenuItemContent", e["Fondue - MultiSelect"] = "MultiSelect", e["Fondue - OrderableList"] = "OrderableList", e["Fondue - OverflowMenu"] = "OverflowMenu", e["Fondue - Popper"] = "Popper", e["Fondue - RadioButton"] = "RadioButton", e["Fondue - RadioList"] = "RadioList", e["Fondue - SegmentedControls"] = "SegmentedControls", e["Fondue - Switch"] = "Switch", e["Fondue - Table"] = "Table", e["Fondue - TableCell"] = "TableCell", e["Fondue - TableColumnHeader"] = "TableColumnHeader", e["Fondue - TableHeaderRow"] = "TableHeaderRow", e["Fondue - TableRow"] = "TableRow", e["Fondue - TabItem"] = "TabItem", e["Fondue - Tabs"] = "Tabs", e["Fondue - Tag"] = "Tag", e["Fondue - TextInput"] = "TextInput", e["Fondue - Toast"] = "Toast", e["Fondue - Tooltip"] = "Tooltip", e["Fondue - TooltipIcon"] = "TooltipIcon", e["Fondue - Tree"] = "Tree", e["Fondue - Trigger"] = "Trigger", e))(d || {});
 export {
   d as ComponentEnum
 };

package/dist/components/ComponentEnum.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue - ActionMenu\" = \"ActionMenu\",\n\"Fondue - AssetInput\" = \"AssetInput\",\n\"Fondue - AssetThumbnail\" = \"AssetThumbnail\",\n\"Fondue - Badge\" = \"Badge\",\n\"Fondue - BadgeStatusIcon\" = \"BadgeStatusIcon\",\n\"Fondue - Box\" = \"Box\",\n\"Fondue - BreadcrumbItem\" = \"BreadcrumbItem\",\n\"Fondue - Breadcrumbs\" = \"Breadcrumbs\",\n\"Fondue - CurrentBreadcrumbItem\" = \"CurrentBreadcrumbItem\",\n\"Fondue - FormattedBreadcrumbs\" = \"FormattedBreadcrumbs\",\n\"Fondue - Button\" = \"Button\",\n\"Fondue - Checkbox\" = \"Checkbox\",\n\"Fondue - Checklist\" = \"Checklist\",\n\"Fondue - CollapsibleWrap\" = \"CollapsibleWrap\",\n\"Fondue - Container\" = \"Container\",\n\"Fondue - DatePicker\" = \"DatePicker\",\n\"Fondue - DatePickerTrigger\" = \"DatePickerTrigger\",\n\"Fondue - Dropdown\" = \"Dropdown\",\n\"Fondue - EditableText\" = \"EditableText\",\n\"Fondue - FilterableMultiSelect\" = \"FilterableMultiSelect\",\n\"Fondue - FormControl\" = \"FormControl\",\n\"Fondue - FormField\" = \"FormField\",\n\"Fondue - FrontifyPattern\" = \"FrontifyPattern\",\n\"Fondue - InputLabel\" = \"InputLabel\",\n\"Fondue - LegacyTextarea\" = \"LegacyTextarea\",\n\"Fondue - BrightHeader\" = \"BrightHeader\",\n\"Fondue - LegacyTooltip\" = \"LegacyTooltip\",\n\"Fondue - LoadingCircle\" = \"LoadingCircle\",\n\"Fondue - Menu\" = \"Menu\",\n\"Fondue - MenuItem\" = \"MenuItem\",\n\"Fondue - MenuItemContent\" = \"MenuItemContent\",\n\"Fondue - MultiSelect\" = \"MultiSelect\",\n\"Fondue - OrderableList\" = \"OrderableList\",\n\"Fondue - OverflowMenu\" = \"OverflowMenu\",\n\"Fondue - Popper\" = \"Popper\",\n\"Fondue - RadioButton\" = \"RadioButton\",\n\"Fondue - RadioList\" = \"RadioList\",\n\"Fondue - SegmentedControls\" = \"SegmentedControls\",\n\"Fondue - Switch\" = \"Switch\",\n\"Fondue - Table\" = \"Table\",\n\"Fondue - TableCell\" = \"TableCell\",\n\"Fondue - TableColumnHeader\" = \"TableColumnHeader\",\n\"Fondue - TableHeaderRow\" = \"TableHeaderRow\",\n\"Fondue - TableRow\" = \"TableRow\",\n\"Fondue - TabItem\" = \"TabItem\",\n\"Fondue - Tabs\" = \"Tabs\",\n\"Fondue - Tag\" = \"Tag\",\n\"Fondue - TextInput\" = \"TextInput\",\n\"Fondue - ~~Textarea\" = \"Textarea\",\n\"Fondue -~~ Toast\" = \"Toast\",\n\"Fondue - Tooltip\" = \"Tooltip\",\n\"Fondue - TooltipIcon\" = \"TooltipIcon\",\n\"Fondue - Tree\" = \"Tree\",\n\"Fondue - Trigger\" = \"Trigger\"\n };\n "],"names":["ComponentEnum"],"mappings":"AACe,IAAKA,sBAAAA,OACRA,EAAA,oBAAA,IAAuB,aACnCA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,8BAAA,IAAiC,uBACjCA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,gBAAA,IAAmB,SACnBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,cAAA,IAAiB,OACjBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,gCAAA,IAAmC,yBACnCA,EAAA,+BAAA,IAAkC,wBAClCA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,gCAAA,IAAmC,yBACnCA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,eAAA,IAAkB,QAClBA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,gBAAA,IAAmB,SACnBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,kBAAA,IAAqB,WACrBA,EAAA,eAAA,IAAkB,QAClBA,EAAA,cAAA,IAAiB,OACjBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,~~mBAAA,IAAsB,YACtBA,EAAA,~~gBAAA,IAAmB,SACnBA,EAAA,kBAAA,IAAqB,WACrBA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,eAAA,IAAkB,QAClBA,EAAA,kBAAA,IAAqB,~~WAzDDA~~,IAAAA,KAAA,CAAA,CAAA;"}
1	+ {"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue - ActionMenu\" = \"ActionMenu\",\n\"Fondue - AssetInput\" = \"AssetInput\",\n\"Fondue - AssetThumbnail\" = \"AssetThumbnail\",\n\"Fondue - Badge\" = \"Badge\",\n\"Fondue - BadgeStatusIcon\" = \"BadgeStatusIcon\",\n\"Fondue - Box\" = \"Box\",\n\"Fondue - BreadcrumbItem\" = \"BreadcrumbItem\",\n\"Fondue - Breadcrumbs\" = \"Breadcrumbs\",\n\"Fondue - CurrentBreadcrumbItem\" = \"CurrentBreadcrumbItem\",\n\"Fondue - FormattedBreadcrumbs\" = \"FormattedBreadcrumbs\",\n\"Fondue - Button\" = \"Button\",\n\"Fondue - Checkbox\" = \"Checkbox\",\n\"Fondue - Checklist\" = \"Checklist\",\n\"Fondue - CollapsibleWrap\" = \"CollapsibleWrap\",\n\"Fondue - Container\" = \"Container\",\n\"Fondue - DatePicker\" = \"DatePicker\",\n\"Fondue - DatePickerTrigger\" = \"DatePickerTrigger\",\n\"Fondue - Dropdown\" = \"Dropdown\",\n\"Fondue - EditableText\" = \"EditableText\",\n\"Fondue - FilterableMultiSelect\" = \"FilterableMultiSelect\",\n\"Fondue - FormControl\" = \"FormControl\",\n\"Fondue - FormField\" = \"FormField\",\n\"Fondue - FrontifyPattern\" = \"FrontifyPattern\",\n\"Fondue - InputLabel\" = \"InputLabel\",\n\"Fondue - LegacyTextarea\" = \"LegacyTextarea\",\n\"Fondue - BrightHeader\" = \"BrightHeader\",\n\"Fondue - LegacyTooltip\" = \"LegacyTooltip\",\n\"Fondue - LoadingCircle\" = \"LoadingCircle\",\n\"Fondue - Menu\" = \"Menu\",\n\"Fondue - MenuItem\" = \"MenuItem\",\n\"Fondue - MenuItemContent\" = \"MenuItemContent\",\n\"Fondue - MultiSelect\" = \"MultiSelect\",\n\"Fondue - OrderableList\" = \"OrderableList\",\n\"Fondue - OverflowMenu\" = \"OverflowMenu\",\n\"Fondue - Popper\" = \"Popper\",\n\"Fondue - RadioButton\" = \"RadioButton\",\n\"Fondue - RadioList\" = \"RadioList\",\n\"Fondue - SegmentedControls\" = \"SegmentedControls\",\n\"Fondue - Switch\" = \"Switch\",\n\"Fondue - Table\" = \"Table\",\n\"Fondue - TableCell\" = \"TableCell\",\n\"Fondue - TableColumnHeader\" = \"TableColumnHeader\",\n\"Fondue - TableHeaderRow\" = \"TableHeaderRow\",\n\"Fondue - TableRow\" = \"TableRow\",\n\"Fondue - TabItem\" = \"TabItem\",\n\"Fondue - Tabs\" = \"Tabs\",\n\"Fondue - Tag\" = \"Tag\",\n\"Fondue - TextInput\" = \"TextInput\",\n\"Fondue - Toast\" = \"Toast\",\n\"Fondue - Tooltip\" = \"Tooltip\",\n\"Fondue - TooltipIcon\" = \"TooltipIcon\",\n\"Fondue - Tree\" = \"Tree\",\n\"Fondue - Trigger\" = \"Trigger\"\n };\n "],"names":["ComponentEnum"],"mappings":"AACe,IAAKA,sBAAAA,OACRA,EAAA,oBAAA,IAAuB,aACnCA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,8BAAA,IAAiC,uBACjCA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,gBAAA,IAAmB,SACnBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,cAAA,IAAiB,OACjBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,gCAAA,IAAmC,yBACnCA,EAAA,+BAAA,IAAkC,wBAClCA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,gCAAA,IAAmC,yBACnCA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,qBAAA,IAAwB,cACxBA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,eAAA,IAAkB,QAClBA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,0BAAA,IAA6B,mBAC7BA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,wBAAA,IAA2B,iBAC3BA,EAAA,uBAAA,IAA0B,gBAC1BA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,iBAAA,IAAoB,UACpBA,EAAA,gBAAA,IAAmB,SACnBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,4BAAA,IAA+B,qBAC/BA,EAAA,yBAAA,IAA4B,kBAC5BA,EAAA,mBAAA,IAAsB,YACtBA,EAAA,kBAAA,IAAqB,WACrBA,EAAA,eAAA,IAAkB,QAClBA,EAAA,cAAA,IAAiB,OACjBA,EAAA,oBAAA,IAAuB,aACvBA,EAAA,gBAAA,IAAmB,SACnBA,EAAA,kBAAA,IAAqB,WACrBA,EAAA,sBAAA,IAAyB,eACzBA,EAAA,eAAA,IAAkB,QAClBA,EAAA,kBAAA,IAAqB,WAxDDA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/EditableText/EditableText.es.js CHANGED Viewed

@@ -49,7 +49,8 @@ const R = ({
     var t;
     s.current && U(T.copyStyles(s.current)), c === "INPUT" && ((t = f.current) == null || t.select());
   }, [c, f, u]);
-  const s = N(), A = u && C(u, {
+  const s = N(), A = u && // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs
+  C(u, {
     ref: s
   });
   return /* @__PURE__ */ E(

package/dist/components/EditableText/EditableText.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n type ChangeEvent,\n type FocusEvent,\n type FocusEventHandler,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactElement,\n cloneElement,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nexport enum EditableMode {\n INPUT = 'INPUT',\n LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n fontSize: string;\n lineHeight: string;\n letterSpacing: string;\n minWidth: string;\n fontWeight: string;\n}\n\n/\n isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n /\ninterface EditableOptionProps {\n isSlimInputField?: boolean;\n mode?: EditableMode;\n enableDoubleClick?: boolean;\n additionalValues?: string;\n removeBoxPadding?: boolean;\n}\n\n/\n Add Children with badges or icons\n * onEditableSave callback to get updated Value\n * onAdditionalValueSave callback with more information (ex. ID)\n * onModeChange callback when state changes\n * options to specify styling and additional behaviours\n /\nexport interface EditableTextProps {\n children?: ReactElement;\n onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n onEditableSave?: (value: string) => void;\n onModeChange?: (editableState?: EditableMode) => void;\n options?: EditableOptionProps;\n /* @deprecated Temporary solution for text with ellipisis in Tree Component /\n isOverflowing?: boolean;\n 'data-test-id'?: string;\n}\n\n/\n Component to switch between Label and Input state. Wraps the Children\n * with a Button, to allow for accessibility and copies styles to input field\n \n Events:\n * - onEditableSave // When changing from input to label state\n * - onModeChange // Indicates which state is active\n * - onAdditionalValueSave // Similar to editable Save with additional Values provided\n \n Options properties:\n * - mode: enum EditableMode // {INPUT = 'INPUT',LABEL = 'LABEL'}\n * - enableDoubleClick: boolean // should the input be triggered by a double click or single click\n * - isSlimInputField: boolean // removes y padding\n * - additionalValues?: string // additional Values like ID\n \n /\nexport const EditableText = ({\n onEditableSave,\n onModeChange,\n onAdditionalValueSave,\n children,\n options,\n isOverflowing = false,\n 'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n // Read initial text strings from children\n const childrenLabel = EditableTextHelper.getLabel(children);\n\n // use text strings from children in the input field\n const [inputValue, setInputValue] = useState(childrenLabel);\n const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n const handleSwitchToLabel = (event: KeyboardEvent \| FocusEvent) => {\n setEditableState(EditableMode.LABEL);\n\n if (onModeChange) {\n onModeChange(EditableMode.LABEL);\n }\n if (options?.additionalValues && onAdditionalValueSave) {\n onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n }\n if (onEditableSave) {\n onEditableSave((event.target as HTMLTextAreaElement).value);\n }\n };\n\n const handleSwitchToInput = (childrenText: string) => () => {\n setInputValue(childrenText);\n setEditableState(EditableMode.INPUT);\n if (onModeChange) {\n onModeChange(EditableMode.INPUT);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleSwitchToLabel(event);\n }\n };\n const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n // Set initial state of component if provided in the mode\n useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n const clickBehaviour = options?.enableDoubleClick\n ? {\n onDoubleClick: handleSwitchToInput(childrenLabel),\n onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n }\n : {\n onClick: handleSwitchToInput(childrenLabel),\n };\n\n // Update Input Style and select input field if visible\n useEffect(() => {\n if (childRef.current) {\n setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n }\n\n if (editableState === EditableMode.INPUT) {\n inputRef.current?.select();\n }\n }, [editableState, inputRef, children]);\n\n const childRef = useRef();\n\n // Clone Child and add ref to Children\n const ChildrenWithRef =\n children &&\n cloneElement(children, {\n ref: childRef,\n });\n\n return (\n <div\n data-test-id={dataTestId}\n className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n >\n {editableState === EditableMode.INPUT ? (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n options?.isSlimInputField === true\n ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n ])}\n >\n <div\n data-test-id=\"editable-input\"\n className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n >\n <input\n ref={inputRef}\n type=\"text\"\n className={merge([\n options?.isSlimInputField === true\n ? 'focus-visible:tw-outline-none'\n : FOCUS_VISIBLE_STYLE,\n 'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n ])}\n style={inputStyling}\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n isOverflowing && 'tw-w-0',\n ])}\n style={inputStyling}\n >\n {inputValue}\n </span>\n </div>\n </div>\n ) : null}\n <button\n type=\"button\"\n style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n {...clickBehaviour}\n data-test-id={'node-link-name'}\n aria-pressed=\"false\"\n >\n {ChildrenWithRef}\n </button>\n </div>\n );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":"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"}
1	+ {"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n type ChangeEvent,\n type FocusEvent,\n type FocusEventHandler,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type ReactElement,\n cloneElement,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nexport enum EditableMode {\n INPUT = 'INPUT',\n LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n fontSize: string;\n lineHeight: string;\n letterSpacing: string;\n minWidth: string;\n fontWeight: string;\n}\n\n/\n isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n /\ninterface EditableOptionProps {\n isSlimInputField?: boolean;\n mode?: EditableMode;\n enableDoubleClick?: boolean;\n additionalValues?: string;\n removeBoxPadding?: boolean;\n}\n\n/\n Add Children with badges or icons\n * onEditableSave callback to get updated Value\n * onAdditionalValueSave callback with more information (ex. ID)\n * onModeChange callback when state changes\n * options to specify styling and additional behaviours\n /\nexport interface EditableTextProps {\n children?: ReactElement;\n onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n onEditableSave?: (value: string) => void;\n onModeChange?: (editableState?: EditableMode) => void;\n options?: EditableOptionProps;\n /* @deprecated Temporary solution for text with ellipisis in Tree Component /\n isOverflowing?: boolean;\n 'data-test-id'?: string;\n}\n\n/\n Component to switch between Label and Input state. Wraps the Children\n * with a Button, to allow for accessibility and copies styles to input field\n \n Events:\n * - onEditableSave // When changing from input to label state\n * - onModeChange // Indicates which state is active\n * - onAdditionalValueSave // Similar to editable Save with additional Values provided\n \n Options properties:\n * - mode: enum EditableMode // {INPUT = 'INPUT',LABEL = 'LABEL'}\n * - enableDoubleClick: boolean // should the input be triggered by a double click or single click\n * - isSlimInputField: boolean // removes y padding\n * - additionalValues?: string // additional Values like ID\n \n /\nexport const EditableText = ({\n onEditableSave,\n onModeChange,\n onAdditionalValueSave,\n children,\n options,\n isOverflowing = false,\n 'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n // Read initial text strings from children\n const childrenLabel = EditableTextHelper.getLabel(children);\n\n // use text strings from children in the input field\n const [inputValue, setInputValue] = useState(childrenLabel);\n const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n const handleSwitchToLabel = (event: KeyboardEvent \| FocusEvent) => {\n setEditableState(EditableMode.LABEL);\n\n if (onModeChange) {\n onModeChange(EditableMode.LABEL);\n }\n if (options?.additionalValues && onAdditionalValueSave) {\n onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n }\n if (onEditableSave) {\n onEditableSave((event.target as HTMLTextAreaElement).value);\n }\n };\n\n const handleSwitchToInput = (childrenText: string) => () => {\n setInputValue(childrenText);\n setEditableState(EditableMode.INPUT);\n if (onModeChange) {\n onModeChange(EditableMode.INPUT);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleSwitchToLabel(event);\n }\n };\n const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n // Set initial state of component if provided in the mode\n useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n const clickBehaviour = options?.enableDoubleClick\n ? {\n onDoubleClick: handleSwitchToInput(childrenLabel),\n onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n }\n : {\n onClick: handleSwitchToInput(childrenLabel),\n };\n\n // Update Input Style and select input field if visible\n useEffect(() => {\n if (childRef.current) {\n setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n }\n\n if (editableState === EditableMode.INPUT) {\n inputRef.current?.select();\n }\n }, [editableState, inputRef, children]);\n\n const childRef = useRef();\n\n // Clone Child and add ref to Children\n const ChildrenWithRef =\n children &&\n // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs\n cloneElement(children, {\n ref: childRef,\n });\n\n return (\n <div\n data-test-id={dataTestId}\n className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n >\n {editableState === EditableMode.INPUT ? (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n options?.isSlimInputField === true\n ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n ])}\n >\n <div\n data-test-id=\"editable-input\"\n className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n >\n <input\n ref={inputRef}\n type=\"text\"\n className={merge([\n options?.isSlimInputField === true\n ? 'focus-visible:tw-outline-none'\n : FOCUS_VISIBLE_STYLE,\n 'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n ])}\n style={inputStyling}\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n isOverflowing && 'tw-w-0',\n ])}\n style={inputStyling}\n >\n {inputValue}\n </span>\n </div>\n </div>\n ) : null}\n <button\n type=\"button\"\n style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n {...clickBehaviour}\n data-test-id={'node-link-name'}\n aria-pressed=\"false\"\n >\n {ChildrenWithRef}\n </button>\n </div>\n );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":"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"}