@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components73.js

@@ -1,23 +1,55 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { SelectBase as u } from "./fondue-components98.js";
-import { useMultiselect as a } from "./fondue-components96.js";
-const n = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
-  const { selectedItemValues: m, toggleSelectedItem: c, clear: i } = a(t, e, l);
-  return /* @__PURE__ */ p(
-    u,
-    {
-      ref: r,
-      multiple: !0,
-      selectedItemValues: m,
-      onItemSelect: c,
-      onClear: i,
-      ...o
-    }
-  );
-}, f = s(n);
-f.displayName = "Select.Multi";
+import { Modifier as f, configurator as _ } from "@dnd-kit/abstract";
+var y = Object.defineProperty, d = Object.defineProperties, x = Object.getOwnPropertyDescriptors, n = Object.getOwnPropertySymbols, O = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable, p = (o, r, e) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, l = (o, r) => {
+  for (var e in r || (r = {}))
+    O.call(r, e) && p(o, e, r[e]);
+  if (n)
+    for (var e of n(r))
+      P.call(r, e) && p(o, e, r[e]);
+  return o;
+}, u = (o, r) => d(o, x(r)), t = class extends f {
+  /**
+   * Applies the axis restriction to the drag operation.
+   *
+   * @param operation - The current drag operation
+   * @returns The modified transform with the axis restriction applied
+   */
+  apply({ transform: r }) {
+    if (!this.options)
+      return r;
+    const { axis: e, value: i } = this.options;
+    return u(l({}, r), {
+      [e]: i
+    });
+  }
+};
+t.configure = _(t);
+var v = t;
+v.configure({
+  axis: "x",
+  value: 0
+});
+v.configure({
+  axis: "y",
+  value: 0
+});
+var c = class extends f {
+  /**
+   * Applies the snap grid to the drag operation.
+   *
+   * @param operation - The current drag operation
+   * @returns The modified transform with coordinates snapped to the grid
+   */
+  apply({ transform: r }) {
+    var e;
+    const { size: i = 20 } = (e = this.options) != null ? e : {}, a = typeof i == "number" ? i : i.x, s = typeof i == "number" ? i : i.y;
+    return u(l({}, r), {
+      x: Math.ceil(r.x / a) * a,
+      y: Math.ceil(r.y / s) * s
+    });
+  }
+};
+c.configure = _(c);
 export {
-  f as SelectMultiple
+  v as AxisModifier
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components73.js","sources":["../src/components/Select/SelectMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type SelectMultipleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst SelectMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectMultiple = forwardRef<HTMLDivElement, SelectMultipleProps>(SelectMultipleInput);\nSelectMultiple.displayName = 'Select.Multi';\n"],"names":["SelectMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","SelectBase","SelectMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}
+{"version":3,"file":"fondue-components73.js","sources":["../../../node_modules/.pnpm/@dnd-kit+abstract@0.3.2/node_modules/@dnd-kit/abstract/modifiers.js"],"sourcesContent":["import { configurator, Modifier } from '@dnd-kit/abstract';\n\nvar __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\nvar _AxisModifier = class _AxisModifier extends Modifier {\n  /**\n   * Applies the axis restriction to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with the axis restriction applied\n   */\n  apply({ transform }) {\n    if (!this.options) {\n      return transform;\n    }\n    const { axis, value } = this.options;\n    return __spreadProps(__spreadValues({}, transform), {\n      [axis]: value\n    });\n  }\n};\n/**\n * Creates a configured instance of the AxisModifier.\n *\n * @param options - The axis restriction options\n * @returns A configured AxisModifier instance\n */\n_AxisModifier.configure = configurator(_AxisModifier);\nvar AxisModifier = _AxisModifier;\nvar RestrictToVerticalAxis = AxisModifier.configure({\n  axis: \"x\",\n  value: 0\n});\nvar RestrictToHorizontalAxis = AxisModifier.configure({\n  axis: \"y\",\n  value: 0\n});\n\n// src/modifiers/boundingRectangle.ts\nfunction restrictShapeToBoundingRectangle(shape, transform, boundingRect) {\n  const value = __spreadValues({}, transform);\n  if (shape.boundingRectangle.top + transform.y <= boundingRect.top) {\n    value.y = boundingRect.top - shape.boundingRectangle.top;\n  } else if (shape.boundingRectangle.bottom + transform.y >= boundingRect.top + boundingRect.height) {\n    value.y = boundingRect.top + boundingRect.height - shape.boundingRectangle.bottom;\n  }\n  if (shape.boundingRectangle.left + transform.x <= boundingRect.left) {\n    value.x = boundingRect.left - shape.boundingRectangle.left;\n  } else if (shape.boundingRectangle.right + transform.x >= boundingRect.left + boundingRect.width) {\n    value.x = boundingRect.left + boundingRect.width - shape.boundingRectangle.right;\n  }\n  return value;\n}\nvar _SnapModifier = class _SnapModifier extends Modifier {\n  /**\n   * Applies the snap grid to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with coordinates snapped to the grid\n   */\n  apply({ transform }) {\n    var _a;\n    const { size = 20 } = (_a = this.options) != null ? _a : {};\n    const x = typeof size === \"number\" ? size : size.x;\n    const y = typeof size === \"number\" ? size : size.y;\n    return __spreadProps(__spreadValues({}, transform), {\n      x: Math.ceil(transform.x / x) * x,\n      y: Math.ceil(transform.y / y) * y\n    });\n  }\n};\n/**\n * Creates a configured instance of the SnapModifier.\n *\n * @param options - The snap grid options\n * @returns A configured SnapModifier instance\n */\n_SnapModifier.configure = configurator(_SnapModifier);\nvar SnapModifier = _SnapModifier;\n\nexport { AxisModifier, RestrictToHorizontalAxis, RestrictToVerticalAxis, SnapModifier, restrictShapeToBoundingRectangle };\n//# sourceMappingURL=modifiers.js.map\n//# sourceMappingURL=modifiers.js.map"],"names":["__defProp","__defProps","__getOwnPropDescs","__getOwnPropSymbols","__hasOwnProp","__propIsEnum","__defNormalProp","obj","key","value","__spreadValues","a","b","prop","__spreadProps","_AxisModifier","Modifier","transform","axis","configurator","AxisModifier","_SnapModifier","_a","size","x","y"],"mappings":";AAEA,IAAIA,IAAY,OAAO,gBACnBC,IAAa,OAAO,kBACpBC,IAAoB,OAAO,2BAC3BC,IAAsB,OAAO,uBAC7BC,IAAe,OAAO,UAAU,gBAChCC,IAAe,OAAO,UAAU,sBAChCC,IAAkB,CAACC,GAAKC,GAAKC,MAAUD,KAAOD,IAAMP,EAAUO,GAAKC,GAAK,EAAE,YAAY,IAAM,cAAc,IAAM,UAAU,IAAM,OAAAC,EAAK,CAAE,IAAIF,EAAIC,CAAG,IAAIC,GACtJC,IAAiB,CAACC,GAAGC,MAAM;AAC7B,WAASC,KAAQD,MAAMA,IAAI,CAAA;AACzB,IAAIR,EAAa,KAAKQ,GAAGC,CAAI,KAC3BP,EAAgBK,GAAGE,GAAMD,EAAEC,CAAI,CAAC;AACpC,MAAIV;AACF,aAASU,KAAQV,EAAoBS,CAAC;AACpC,MAAIP,EAAa,KAAKO,GAAGC,CAAI,KAC3BP,EAAgBK,GAAGE,GAAMD,EAAEC,CAAI,CAAC;AAEtC,SAAOF;AACT,GACIG,IAAgB,CAACH,GAAGC,MAAMX,EAAWU,GAAGT,EAAkBU,CAAC,CAAC,GAC5DG,IAAgB,cAA4BC,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvD,MAAM,EAAE,WAAAC,KAAa;AACnB,QAAI,CAAC,KAAK;AACR,aAAOA;AAET,UAAM,EAAE,MAAAC,GAAM,OAAAT,EAAK,IAAK,KAAK;AAC7B,WAAOK,EAAcJ,EAAe,CAAA,GAAIO,CAAS,GAAG;AAAA,MAClD,CAACC,CAAI,GAAGT;AAAA,IACd,CAAK;AAAA,EACH;AACF;AAOAM,EAAc,YAAYI,EAAaJ,CAAa;AACjD,IAACK,IAAeL;AACUK,EAAa,UAAU;AAAA,EAClD,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAC8BA,EAAa,UAAU;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAiBD,IAAIC,IAAgB,cAA4BL,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvD,MAAM,EAAE,WAAAC,KAAa;AACnB,QAAIK;AACJ,UAAM,EAAE,MAAAC,IAAO,GAAE,KAAMD,IAAK,KAAK,YAAY,OAAOA,IAAK,CAAA,GACnDE,IAAI,OAAOD,KAAS,WAAWA,IAAOA,EAAK,GAC3CE,IAAI,OAAOF,KAAS,WAAWA,IAAOA,EAAK;AACjD,WAAOT,EAAcJ,EAAe,CAAA,GAAIO,CAAS,GAAG;AAAA,MAClD,GAAG,KAAK,KAAKA,EAAU,IAAIO,CAAC,IAAIA;AAAA,MAChC,GAAG,KAAK,KAAKP,EAAU,IAAIQ,CAAC,IAAIA;AAAA,IACtC,CAAK;AAAA,EACH;AACF;AAOAJ,EAAc,YAAYF,EAAaE,CAAa;","x_google_ignoreList":[0]}

package/dist/fondue-components74.js

@@ -1,23 +1,47 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { SelectBase as S } from "./fondue-components98.js";
-import { useSingleSelect as a } from "./fondue-components97.js";
-const p = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
-  const { selectedItemValues: m, selectItem: c, clear: s } = a(t, e, l);
-  return /* @__PURE__ */ n(
-    S,
-    {
-      ref: r,
-      multiple: !1,
-      selectedItemValues: m,
-      onItemSelect: c,
-      onClear: s,
-      ...o
-    }
-  );
-}, f = i(p);
-f.displayName = "Select";
+import { jsx as f } from "react/jsx-runtime";
+import { useSortable as E } from "./fondue-components120.js";
+import { forwardRef as p, useRef as L, useState as v, useCallback as y, useMemo as C, useEffect as H } from "react";
+import { OrderableItemContextProvider as N } from "./fondue-components121.js";
+import h from "./fondue-components83.js";
+const x = p((o, e) => null);
+x.displayName = "OrderableListItem";
+const w = p(
+  ({ children: o, id: e, index: c, disabled: r, padding: u = "small", selected: n, onSelect: s }, a) => {
+    const i = L(null), g = (t) => {
+      i.current = t, typeof a == "function" ? a(t) : a !== null && (a.current = t);
+    }, { isDragging: b, isDropping: I, handleRef: l } = E({ id: e, index: c, element: i, disabled: r }), [m, O] = v(!1), d = y(
+      (t) => {
+        O(t !== null), r || l(t);
+      },
+      [r, l]
+    ), R = C(
+      () => ({ itemId: e, dragHandleRef: d, hasHandle: m, selected: n, onSelect: s }),
+      [e, d, m, n, s]
+    );
+    return H(() => {
+      process.env.NODE_ENV !== "production" && (document.getElementById(`orderable-item-${e}-title`) || console.warn(
+        `[OrderableList] Item "${e}" is missing an <OrderableList.ItemTitle>. This is required for accessible drag-and-drop announcements`
+      ));
+    }, [e]), /* @__PURE__ */ f(N, { value: R, children: /* @__PURE__ */ f(
+      "li",
+      {
+        className: h.item,
+        "aria-roledescription": "sortable item",
+        "data-padding": u,
+        "data-disabled": r || void 0,
+        "data-dragging": b,
+        "data-dropping": I,
+        "data-selected": n || void 0,
+        "data-test-id": "fondue-orderable-list-item",
+        ref: g,
+        children: o
+      }
+    ) });
+  }
+);
+w.displayName = "OrderableListItemComponent";
 export {
-  f as SelectSingle
+  x as OrderableListItem,
+  w as OrderableListItemComponent
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":["../src/components/Select/SelectSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type SelectSingleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst SelectSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectSingle = forwardRef<HTMLDivElement, SelectSingleProps>(SelectSingleInput);\nSelectSingle.displayName = 'Select';\n"],"names":["SelectSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","SelectBase","SelectSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAoB,CACtB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAeC,EAA8Cb,CAAiB;AAC3FY,EAAa,cAAc;"}
+{"version":3,"file":"fondue-components74.js","sources":["../src/components/OrderableList/OrderableListItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode, useMemo } from 'react';\n\nimport { OrderableItemContextProvider } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport type OrderableListItemPadding = 'none' | 'small';\nexport type OrderableListItemProps = {\n    children?: ReactNode;\n    id: string;\n    disabled?: boolean;\n    padding?: OrderableListItemPadding;\n    selected?: boolean;\n    onSelect?: (isSelected: boolean) => void;\n};\nexport const OrderableListItem = forwardRef<HTMLLIElement, OrderableListItemProps>((_props, _ref) => null);\nOrderableListItem.displayName = 'OrderableListItem';\n\nexport const OrderableListItemComponent = forwardRef<HTMLLIElement, OrderableListItemProps & { index: number }>(\n    ({ children, id, index, disabled, padding = 'small', selected, onSelect }, ref) => {\n        const internalRef = useRef<HTMLLIElement | null>(null);\n\n        const mergedRef = (node: HTMLLIElement | null) => {\n            internalRef.current = node;\n            if (typeof ref === 'function') {\n                ref(node);\n            } else if (ref !== null) {\n                ref.current = node;\n            }\n        };\n\n        const { isDragging, isDropping, handleRef } = useSortable({ id, index, element: internalRef, disabled });\n\n        const [hasHandle, setHasHandle] = useState(false);\n        const wrappedHandleRef = useCallback(\n            (element: Element | null) => {\n                setHasHandle(element !== null);\n                if (!disabled) {\n                    handleRef(element);\n                }\n            },\n            [disabled, handleRef],\n        );\n\n        const itemContextValue = useMemo(\n            () => ({ itemId: id, dragHandleRef: wrappedHandleRef, hasHandle, selected, onSelect }),\n            [id, wrappedHandleRef, hasHandle, selected, onSelect],\n        );\n\n        useEffect(() => {\n            if (process.env.NODE_ENV !== 'production') {\n                const titleElement = document.getElementById(`orderable-item-${id}-title`);\n                if (!titleElement) {\n                    console.warn(\n                        `[OrderableList] Item \"${id}\" is missing an <OrderableList.ItemTitle>. ` +\n                            'This is required for accessible drag-and-drop announcements',\n                    );\n                }\n            }\n        }, [id]);\n\n        return (\n            <OrderableItemContextProvider value={itemContextValue}>\n                <li\n                    className={styles.item}\n                    aria-roledescription=\"sortable item\"\n                    data-padding={padding}\n                    data-disabled={disabled || undefined}\n                    data-dragging={isDragging}\n                    data-dropping={isDropping}\n                    data-selected={selected || undefined}\n                    data-test-id=\"fondue-orderable-list-item\"\n                    ref={mergedRef}\n                >\n                    {children}\n                </li>\n            </OrderableItemContextProvider>\n        );\n    },\n);\nOrderableListItemComponent.displayName = 'OrderableListItemComponent';\n"],"names":["OrderableListItem","forwardRef","_props","_ref","OrderableListItemComponent","children","id","index","disabled","padding","selected","onSelect","ref","internalRef","useRef","mergedRef","node","isDragging","isDropping","handleRef","useSortable","hasHandle","setHasHandle","useState","wrappedHandleRef","useCallback","element","itemContextValue","useMemo","useEffect","jsx","OrderableItemContextProvider","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAoBC,EAAkD,CAACC,GAAQC,MAAS,IAAI;AACzGH,EAAkB,cAAc;AAEzB,MAAMI,IAA6BH;AAAA,EACtC,CAAC,EAAE,UAAAI,GAAU,IAAAC,GAAI,OAAAC,GAAO,UAAAC,GAAU,SAAAC,IAAU,SAAS,UAAAC,GAAU,UAAAC,EAAA,GAAYC,MAAQ;AAC/E,UAAMC,IAAcC,EAA6B,IAAI,GAE/CC,IAAY,CAACC,MAA+B;AAC9C,MAAAH,EAAY,UAAUG,GAClB,OAAOJ,KAAQ,aACfA,EAAII,CAAI,IACDJ,MAAQ,SACfA,EAAI,UAAUI;AAAA,IAEtB,GAEM,EAAE,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAY,EAAE,IAAAd,GAAI,OAAAC,GAAO,SAASM,GAAa,UAAAL,EAAA,CAAU,GAEjG,CAACa,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAmBC;AAAA,MACrB,CAACC,MAA4B;AACzB,QAAAJ,EAAaI,MAAY,IAAI,GACxBlB,KACDW,EAAUO,CAAO;AAAA,MAEzB;AAAA,MACA,CAAClB,GAAUW,CAAS;AAAA,IAAA,GAGlBQ,IAAmBC;AAAA,MACrB,OAAO,EAAE,QAAQtB,GAAI,eAAekB,GAAkB,WAAAH,GAAW,UAAAX,GAAU,UAAAC;MAC3E,CAACL,GAAIkB,GAAkBH,GAAWX,GAAUC,CAAQ;AAAA,IAAA;AAGxD,WAAAkB,EAAU,MAAM;AACZ,MAAI,QAAQ,IAAI,aAAa,iBACJ,SAAS,eAAe,kBAAkBvB,CAAE,QAAQ,KAErE,QAAQ;AAAA,QACJ,yBAAyBA,CAAE;AAAA,MAAA;AAAA,IAK3C,GAAG,CAACA,CAAE,CAAC,GAGH,gBAAAwB,EAACC,GAAA,EAA6B,OAAOJ,GACjC,UAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWE,EAAO;AAAA,QAClB,wBAAqB;AAAA,QACrB,gBAAcvB;AAAA,QACd,iBAAeD,KAAY;AAAA,QAC3B,iBAAeS;AAAA,QACf,iBAAeC;AAAA,QACf,iBAAeR,KAAY;AAAA,QAC3B,gBAAa;AAAA,QACb,KAAKK;AAAA,QAEJ,UAAAV;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AACAD,EAA2B,cAAc;"}

package/dist/fondue-components75.js

@@ -1,22 +1,9 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components99.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import i from "./fondue-components83.js";
+const m = o(({ children: r }, t) => /* @__PURE__ */ e("div", { className: i.action, ref: t, children: r }));
+m.displayName = "OrderableListItemAction";
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  m as OrderableListItemAction
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components75.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The groups heading\n     */\n    heading?: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components75.js","sources":["../src/components/OrderableList/OrderableListItemAction.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport styles from './styles/orderable-list.module.scss';\n\nexport type OrderableListItemActionProps = { children: ReactNode };\nexport const OrderableListItemAction = forwardRef<HTMLDivElement, OrderableListItemActionProps>(({ children }, ref) => {\n    return (\n        <div className={styles.action} ref={ref}>\n            {children}\n        </div>\n    );\n});\nOrderableListItemAction.displayName = 'OrderableListItemAction';\n"],"names":["OrderableListItemAction","forwardRef","children","ref","styles"],"mappings":";;;AAOO,MAAMA,IAA0BC,EAAyD,CAAC,EAAE,UAAAC,EAAA,GAAYC,wBAEtG,OAAA,EAAI,WAAWC,EAAO,QAAQ,KAAAD,GAC1B,UAAAD,GACL,CAEP;AACDF,EAAwB,cAAc;"}

package/dist/fondue-components76.js

@@ -1,11 +1,9 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components99.js";
-const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
-t.displayName = "Select.Slot";
-const S = d(t);
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import a from "./fondue-components83.js";
+const m = t(({ children: r }, e) => /* @__PURE__ */ o("span", { className: a.decorator, ref: e, children: r }));
+m.displayName = "OrderableListItemDecorator";
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  m as OrderableListItemDecorator
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components76.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components76.js","sources":["../src/components/OrderableList/OrderableListItemDecorator.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemDecorator = forwardRef<HTMLSpanElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <span className={styles.decorator} ref={ref}>\n            {children}\n        </span>\n    );\n});\nOrderableListItemDecorator.displayName = 'OrderableListItemDecorator';\n"],"names":["OrderableListItemDecorator","forwardRef","children","ref","styles"],"mappings":";;;AAMO,MAAMA,IAA6BC,EAAqD,CAAC,EAAE,UAAAC,EAAA,GAAYC,wBAErG,QAAA,EAAK,WAAWC,EAAO,WAAW,KAAAD,GAC9B,UAAAD,GACL,CAEP;AACDF,EAA2B,cAAc;"}

package/dist/fondue-components77.js

@@ -1,14 +1,16 @@
-const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
-  root: t,
-  thumb: c,
-  track: o,
-  range: s
-};
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
+import { forwardRef as s } from "react";
+import { useOrderableItemContext as n } from "./fondue-components121.js";
+import p from "./fondue-components83.js";
+const a = s(
+  ({ children: e, asChild: r }, t) => {
+    const { itemId: o } = n();
+    return /* @__PURE__ */ i(r ? m : "span", { className: p.description, id: `orderable-item-${o}-description`, ref: t, children: e });
+  }
+);
+a.displayName = "OrderableListItemDescription";
 export {
-  _ as default,
-  s as range,
-  t as root,
-  c as thumb,
-  o as track
+  a as OrderableListItemDescription
 };
 //# sourceMappingURL=fondue-components77.js.map

package/dist/fondue-components77.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components77.js","sources":["../src/components/OrderableList/OrderableListItemDescription.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemDescription = forwardRef<HTMLSpanElement, { children: ReactNode; asChild?: boolean }>(\n    ({ children, asChild }, ref) => {\n        const { itemId } = useOrderableItemContext();\n        const Component = asChild ? Slot : 'span';\n        return (\n            <Component className={styles.description} id={`orderable-item-${itemId}-description`} ref={ref}>\n                {children}\n            </Component>\n        );\n    },\n);\nOrderableListItemDescription.displayName = 'OrderableListItemDescription';\n"],"names":["OrderableListItemDescription","forwardRef","children","asChild","ref","itemId","useOrderableItemContext","jsx","Slot","styles"],"mappings":";;;;;AAQO,MAAMA,IAA+BC;AAAA,EACxC,CAAC,EAAE,UAAAC,GAAU,SAAAC,EAAA,GAAWC,MAAQ;AAC5B,UAAM,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,WACI,gBAAAC,EAFcJ,IAAUK,IAAO,QAE9B,EAAU,WAAWC,EAAO,aAAa,IAAI,kBAAkBJ,CAAM,gBAAgB,KAAAD,GACjF,UAAAF,EAAA,CACL;AAAA,EAER;AACJ;AACAF,EAA6B,cAAc;"}

package/dist/fondue-components78.js

@@ -1,14 +1,31 @@
-const t = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
-  root: t,
-  content: o,
-  action: n,
-  actionButton: c
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { IconGrabHandle as o } from "@frontify/fondue-icons";
+import { Slot as m } from "@radix-ui/react-slot";
+import { useOrderableItemContext as t } from "./fondue-components121.js";
+import r from "./fondue-components83.js";
+const s = () => {
+  const { itemId: e, dragHandleRef: a } = t();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      "aria-labelledby": `orderable-handle-label-${e} orderable-item-${e}-title`,
+      className: `${r.handle} ${r.dragHandle}`,
+      ref: a,
+      children: [
+        /* @__PURE__ */ l("span", { id: `orderable-handle-label-${e}`, className: r.visuallyHidden, children: "Reorder" }),
+        /* @__PURE__ */ l(o, { size: 16 })
+      ]
+    }
+  );
+}, i = ({ children: e, asChild: a }) => {
+  const { dragHandleRef: d } = t();
+  return /* @__PURE__ */ l(a ? m : "div", { className: r.handle, ref: d, children: e });
 };
+s.displayName = "OrderableItemDragHandle";
+i.displayName = "OrderableItemCustomHandle";
 export {
-  n as action,
-  c as actionButton,
-  o as content,
-  _ as default,
-  t as root
+  i as OrderableItemCustomHandle,
+  s as OrderableItemDragHandle
 };
 //# sourceMappingURL=fondue-components78.js.map

package/dist/fondue-components78.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components78.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components78.js","sources":["../src/components/OrderableList/OrderableListItemDragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconGrabHandle } from '@frontify/fondue-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport { type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableItemDragHandle = () => {\n    const { itemId, dragHandleRef } = useOrderableItemContext();\n    return (\n        <button\n            type=\"button\"\n            aria-labelledby={`orderable-handle-label-${itemId} orderable-item-${itemId}-title`}\n            className={`${styles.handle} ${styles.dragHandle}`}\n            ref={dragHandleRef}\n        >\n            <span id={`orderable-handle-label-${itemId}`} className={styles.visuallyHidden}>\n                Reorder\n            </span>\n            <IconGrabHandle size={16} />\n        </button>\n    );\n};\n\nexport const OrderableItemCustomHandle = ({ children, asChild }: { children: ReactNode; asChild?: boolean }) => {\n    const { dragHandleRef } = useOrderableItemContext();\n    const Component = asChild ? Slot : 'div';\n    return (\n        <Component className={styles.handle} ref={dragHandleRef}>\n            {children}\n        </Component>\n    );\n};\nOrderableItemDragHandle.displayName = 'OrderableItemDragHandle';\nOrderableItemCustomHandle.displayName = 'OrderableItemCustomHandle';\n"],"names":["OrderableItemDragHandle","itemId","dragHandleRef","useOrderableItemContext","jsxs","styles","jsx","IconGrabHandle","OrderableItemCustomHandle","children","asChild","Slot"],"mappings":";;;;;AASO,MAAMA,IAA0B,MAAM;AACzC,QAAM,EAAE,QAAAC,GAAQ,eAAAC,EAAA,IAAkBC,EAAA;AAClC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,mBAAiB,0BAA0BH,CAAM,mBAAmBA,CAAM;AAAA,MAC1E,WAAW,GAAGI,EAAO,MAAM,IAAIA,EAAO,UAAU;AAAA,MAChD,KAAKH;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAI,EAAC,QAAA,EAAK,IAAI,0BAA0BL,CAAM,IAAI,WAAWI,EAAO,gBAAgB,UAAA,UAAA,CAEhF;AAAA,QACA,gBAAAC,EAACC,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtC,GAEaC,IAA4B,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAA0D;AAC5G,QAAM,EAAE,eAAAR,EAAA,IAAkBC,EAAA;AAE1B,2BADkBO,IAAUC,IAAO,OAE9B,EAAU,WAAWN,EAAO,QAAQ,KAAKH,GACrC,UAAAO,GACL;AAER;AACAT,EAAwB,cAAc;AACtCQ,EAA0B,cAAc;"}

package/dist/fondue-components79.js

@@ -1,10 +1,16 @@
-const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
-  root: t,
-  thumb: o
-};
+import { jsx as m } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { forwardRef as s } from "react";
+import { useOrderableItemContext as l } from "./fondue-components121.js";
+import a from "./fondue-components83.js";
+const n = s(
+  ({ children: t, asChild: e }, r) => {
+    const { itemId: o } = l();
+    return /* @__PURE__ */ m(e ? i : "span", { className: a.title, id: `orderable-item-${o}-title`, ref: r, children: t });
+  }
+);
+n.displayName = "OrderableListItemTitle";
 export {
-  s as default,
-  t as root,
-  o as thumb
+  n as OrderableListItemTitle
 };
 //# sourceMappingURL=fondue-components79.js.map

package/dist/fondue-components79.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components79.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components79.js","sources":["../src/components/OrderableList/OrderableListItemTitle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemTitle = forwardRef<HTMLSpanElement, { children: ReactNode; asChild?: boolean }>(\n    ({ children, asChild }, ref) => {\n        const { itemId } = useOrderableItemContext();\n        const Component = asChild ? Slot : 'span';\n        return (\n            <Component className={styles.title} id={`orderable-item-${itemId}-title`} ref={ref}>\n                {children}\n            </Component>\n        );\n    },\n);\nOrderableListItemTitle.displayName = 'OrderableListItemTitle';\n"],"names":["OrderableListItemTitle","forwardRef","children","asChild","ref","itemId","useOrderableItemContext","jsx","Slot","styles"],"mappings":";;;;;AAQO,MAAMA,IAAyBC;AAAA,EAClC,CAAC,EAAE,UAAAC,GAAU,SAAAC,EAAA,GAAWC,MAAQ;AAC5B,UAAM,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,WACI,gBAAAC,EAFcJ,IAAUK,IAAO,QAE9B,EAAU,WAAWC,EAAO,OAAO,IAAI,kBAAkBJ,CAAM,UAAU,KAAAD,GACrE,UAAAF,EAAA,CACL;AAAA,EAER;AACJ;AACAF,EAAuB,cAAc;"}

package/dist/fondue-components8.js

@@ -1,11 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
 import { Slot as P } from "@radix-ui/react-slot";
 import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
-import { ForwardedRefColorGradientInput as w } from "./fondue-components46.js";
-import { ForwardedRefColorPickerInput as h } from "./fondue-components47.js";
-import { ForwardedRefColorValueInput as G } from "./fondue-components48.js";
-import V from "./fondue-components49.js";
-import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components50.js";
+import { ForwardedRefColorGradientInput as w } from "./fondue-components49.js";
+import { ForwardedRefColorPickerInput as h } from "./fondue-components50.js";
+import { ForwardedRefColorValueInput as G } from "./fondue-components51.js";
+import V from "./fondue-components52.js";
+import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components53.js";
 const p = ({
   children: t,
   currentColor: r = A,

package/dist/fondue-components80.js

@@ -1,16 +1,8 @@
-import { useEffect as c } from "react";
-const s = (t) => {
-  c(() => {
-    if (!t.current)
-      return;
-    const e = t.current, n = new ResizeObserver(() => {
-      const r = e.scrollWidth > e.clientWidth;
-      e.title = r && e.textContent || "";
-    });
-    return n.observe(e), () => n.disconnect();
-  }, [t]);
+const n = (t) => {
+  var e;
+  return ((e = document.getElementById(`orderable-item-${t}-title`)) == null ? void 0 : e.textContent) ?? t;
 };
 export {
-  s as useTextTruncation
+  n as getItemTitle
 };
 //# sourceMappingURL=fondue-components80.js.map

package/dist/fondue-components80.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components80.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBO,MAAMA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AACtC,YAAMC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IACzD,CAAC;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACH,CAAG,CAAC;AACZ;"}
+{"version":3,"file":"fondue-components80.js","sources":["../src/components/OrderableList/helpers/getItemTitle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const getItemTitle = (itemId: string) =>\n    document.getElementById(`orderable-item-${itemId}-title`)?.textContent ?? itemId;\n"],"names":["getItemTitle","itemId","_a"],"mappings":"AAEO,MAAMA,IAAe,CAACC,MAAA;AAAtB,MAAAC;AACH,WAAAA,IAAA,SAAS,eAAe,kBAAkBD,CAAM,QAAQ,MAAxD,gBAAAC,EAA2D,gBAAeD;AAAA;"}

package/dist/fondue-components81.js

@@ -1,26 +1,16 @@
-const t = "_table_1v3sd_4", o = "_headerCell_1v3sd_18", e = "_rowCell_1v3sd_19", _ = "_row_1v3sd_19", s = "_caption_1v3sd_76", n = "_header_1v3sd_18", d = "_cellContent_1v3sd_124", l = "_sortIndicator_1v3sd_152", c = "_body_1v3sd_162", r = "_buttonText_1v3sd_235", a = {
-  table: t,
-  headerCell: o,
-  rowCell: e,
-  row: _,
-  caption: s,
-  header: n,
-  cellContent: d,
-  sortIndicator: l,
-  body: c,
-  buttonText: r
+import { createContext as r, useContext as a, useState as c, useCallback as u } from "react";
+const e = r(() => {
+});
+e.displayName = "OrderableListAnnounceContext";
+const d = e.Provider, l = () => a(e), m = () => {
+  const [t, n] = c(""), o = u((s) => {
+    n(""), requestAnimationFrame(() => n(s));
+  }, []);
+  return { message: t, announce: o };
 };
 export {
-  c as body,
-  r as buttonText,
-  s as caption,
-  d as cellContent,
-  a as default,
-  n as header,
-  o as headerCell,
-  _ as row,
-  e as rowCell,
-  l as sortIndicator,
-  t as table
+  d as OrderableListAnnounceProvider,
+  m as useAnnounceState,
+  l as useOrderableListAnnounce
 };
 //# sourceMappingURL=fondue-components81.js.map

package/dist/fondue-components81.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components81.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components81.js","sources":["../src/components/OrderableList/hooks/useOrderableListAnnounce.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype AnnounceFunction = (message: string) => void;\n\nconst OrderableListAnnounceContext = createContext<AnnounceFunction>(() => {});\nOrderableListAnnounceContext.displayName = 'OrderableListAnnounceContext';\n\nexport const OrderableListAnnounceProvider = OrderableListAnnounceContext.Provider;\n\nexport const useOrderableListAnnounce = (): AnnounceFunction => useContext(OrderableListAnnounceContext);\n\nexport const useAnnounceState = () => {\n    const [message, setMessage] = useState('');\n\n    const announce = useCallback((text: string) => {\n        // Clear first to ensure repeated identical messages are announced\n        setMessage('');\n        requestAnimationFrame(() => setMessage(text));\n    }, []);\n\n    return { message, announce };\n};\n"],"names":["OrderableListAnnounceContext","createContext","OrderableListAnnounceProvider","useOrderableListAnnounce","useContext","useAnnounceState","message","setMessage","useState","announce","useCallback","text"],"mappings":";AAMA,MAAMA,IAA+BC,EAAgC,MAAM;AAAC,CAAC;AAC7ED,EAA6B,cAAc;AAEpC,MAAME,IAAgCF,EAA6B,UAE7DG,IAA2B,MAAwBC,EAAWJ,CAA4B,GAE1FK,IAAmB,MAAM;AAClC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAE,GAEnCC,IAAWC,EAAY,CAACC,MAAiB;AAE3C,IAAAJ,EAAW,EAAE,GACb,sBAAsB,MAAMA,EAAWI,CAAI,CAAC;AAAA,EAChD,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,SAAAL,GAAS,UAAAG,EAAA;AACtB;"}

package/dist/fondue-components82.js

@@ -1,37 +1,51 @@
-function s(e, n) {
-  const r = 'tr[tabindex="0"]', t = e.closest("table");
-  if (!t)
-    return null;
-  const o = Array.from(t.querySelectorAll(r)), l = o.indexOf(e) + (n === "ArrowUp" ? -1 : 1);
-  return l >= 0 && l < o.length ? o[l] : null;
-}
-function a(e) {
-  const n = e.target, r = n.closest("tr");
-  if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
-    return;
-  const t = s(r, e.key);
-  t && (e.preventDefault(), t.focus());
-}
-const u = [HTMLButtonElement, HTMLAnchorElement], i = ["button", "link"];
-function f(e) {
-  if (!e)
-    return !1;
-  const { target: n, currentTarget: r } = e;
-  let t = n instanceof Element ? n : null;
-  if (!r.contains(t))
-    return !0;
-  for (; t && !(t instanceof HTMLTableRowElement); ) {
-    if (u.some((c) => t instanceof c))
-      return !0;
-    const o = t.getAttribute("role");
-    if (o && i.includes(o))
-      return !0;
-    t = t.parentElement;
-  }
-  return !1;
-}
+import { jsxs as I, jsx as l } from "react/jsx-runtime";
+import { useMemo as f, Children as d, isValidElement as i } from "react";
+import { OrderableListItemComponent as y, OrderableListItem as b } from "./fondue-components74.js";
+import { OrderableListItemAction as g } from "./fondue-components75.js";
+import { OrderableListItemContent as C } from "./fondue-components122.js";
+import { OrderableItemDragHandle as c, OrderableItemCustomHandle as O } from "./fondue-components78.js";
+import H from "./fondue-components83.js";
+const L = (n) => {
+  let s = !1, r = !1;
+  const o = [], e = [];
+  return d.forEach(n, (t) => {
+    i(t) && t.type === g ? o.push(t) : i(t) && t.type === c ? s = !0 : (i(t) && t.type === O && (r = !0), e.push(t));
+  }), { hasDragHandle: s, hasCustomHandle: r, actions: o, content: e };
+}, E = (n) => {
+  const s = {};
+  return d.forEach(n, (r) => {
+    if (i(r) && r.type === b) {
+      const o = r, { actions: e, content: t, hasDragHandle: m, hasCustomHandle: p } = L(
+        o.props.children
+      ), a = o.props.id;
+      s[a] = {
+        ...o.props,
+        id: a,
+        ref: o.ref,
+        actions: e,
+        children: t,
+        hasDragHandle: m,
+        hasCustomHandle: p
+      };
+    }
+  }), s;
+}, A = (n, s) => {
+  const r = f(() => {
+    const e = E(n);
+    if (Object.keys(e).length !== s.length)
+      throw new Error("The number of items in the list does not match the order array");
+    return e;
+  }, [n, s]);
+  return f(
+    () => s.map((e) => r[e]).filter((e) => e !== void 0),
+    [s, r]
+  ).map(({ id: e, children: t, actions: m, hasDragHandle: p, hasCustomHandle: a, ...h }, u) => /* @__PURE__ */ I(y, { index: u, id: e, ...h, children: [
+    /* @__PURE__ */ l(C, { children: t }),
+    m.length > 0 && /* @__PURE__ */ l("div", { className: H.actions, children: m }),
+    p && !a && /* @__PURE__ */ l(c, {})
+  ] }, e));
+};
 export {
-  a as handleKeyDown,
-  f as shouldIgnoreRowClick
+  A as useOrderedListItems
 };
 //# sourceMappingURL=fondue-components82.js.map