@frontify/fondue-components 28.0.0 → 29.0.0

package/dist/fondue-components82.js

@@ -1,14 +1,51 @@
-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 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 {
-  n as action,
-  c as actionButton,
-  o as content,
-  _ as default,
-  t as root
+  A as useOrderedListItems
 };
 //# sourceMappingURL=fondue-components82.js.map

package/dist/fondue-components82.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components82.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components82.js","sources":["../src/components/OrderableList/hooks/useOrderedListItems.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, isValidElement, useMemo, type ReactElement, type ReactNode, type RefObject } from 'react';\n\nimport { OrderableListItem, OrderableListItemComponent, type OrderableListItemProps } from '../OrderableListItem';\nimport { OrderableListItemAction, type OrderableListItemActionProps } from '../OrderableListItemAction';\nimport { OrderableListItemContent } from '../OrderableListItemContent';\nimport { OrderableItemCustomHandle, OrderableItemDragHandle } from '../OrderableListItemDragHandle';\nimport styles from '../styles/orderable-list.module.scss';\n\nconst getItemContentByType = (\n    children: ReactNode,\n): {\n    actions: ReactNode[];\n    content: ReactNode[];\n    hasDragHandle: boolean;\n    hasCustomHandle: boolean;\n} => {\n    let hasDragHandle = false;\n    let hasCustomHandle = false;\n    const actions: ReactNode[] = [];\n    const content: ReactNode[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<OrderableListItemActionProps>(child) && child.type === OrderableListItemAction) {\n            actions.push(child);\n        } else if (isValidElement(child) && child.type === OrderableItemDragHandle) {\n            hasDragHandle = true;\n        } else if (isValidElement(child) && child.type === OrderableItemCustomHandle) {\n            hasCustomHandle = true;\n            content.push(child);\n        } else {\n            content.push(child);\n        }\n    });\n    return { hasDragHandle, hasCustomHandle, actions, content };\n};\n\ntype OrderableListItemElement = ReactElement<OrderableListItemProps> & {\n    ref: RefObject<HTMLLIElement> | null;\n};\ntype ListItems = Record<string, ListItem>;\ntype ListItem = {\n    id: string;\n    ref: RefObject<HTMLLIElement> | null;\n    children: ReactNode;\n    actions: ReactNode[];\n    hasDragHandle: boolean;\n    hasCustomHandle: boolean;\n};\n\nconst getListItems = (children: ReactNode): ListItems => {\n    const items: ListItems = {};\n    Children.forEach(children, (child) => {\n        if (isValidElement<OrderableListItemProps>(child) && child.type === OrderableListItem) {\n            const typedChild = child as OrderableListItemElement;\n            const { actions, content, hasDragHandle, hasCustomHandle } = getItemContentByType(\n                typedChild.props.children,\n            );\n            const itemId = typedChild.props.id;\n            items[itemId] = {\n                ...typedChild.props,\n                id: itemId,\n                ref: typedChild.ref,\n                actions,\n                children: content,\n                hasDragHandle,\n                hasCustomHandle,\n            };\n        }\n    });\n    return items;\n};\n\nexport const useOrderedListItems = (children: ReactNode, order: string[]): ReactNode => {\n    const itemsWithIds = useMemo(() => {\n        const items = getListItems(children);\n        if (Object.keys(items).length !== order.length) {\n            throw new Error('The number of items in the list does not match the order array');\n        }\n        return items;\n    }, [children, order]);\n\n    const sortedItems = useMemo(\n        () => order.map((id) => itemsWithIds[id]).filter((item) => item !== undefined),\n        [order, itemsWithIds],\n    );\n\n    return sortedItems.map(({ id, children, actions, hasDragHandle, hasCustomHandle, ...props }, index) => (\n        <OrderableListItemComponent key={id} index={index} id={id} {...props}>\n            <OrderableListItemContent>{children}</OrderableListItemContent>\n            {actions.length > 0 && <div className={styles.actions}>{actions}</div>}\n            {hasDragHandle && !hasCustomHandle && <OrderableItemDragHandle />}\n        </OrderableListItemComponent>\n    ));\n};\n"],"names":["getItemContentByType","children","hasDragHandle","hasCustomHandle","actions","content","Children","child","isValidElement","OrderableListItemAction","OrderableItemDragHandle","OrderableItemCustomHandle","getListItems","items","OrderableListItem","typedChild","itemId","useOrderedListItems","order","itemsWithIds","useMemo","id","item","props","index","jsxs","OrderableListItemComponent","jsx","OrderableListItemContent","styles"],"mappings":";;;;;;;AAUA,MAAMA,IAAuB,CACzBC,MAMC;AACD,MAAIC,IAAgB,IAChBC,IAAkB;AACtB,QAAMC,IAAuB,CAAA,GACvBC,IAAuB,CAAA;AAC7B,SAAAC,EAAS,QAAQL,GAAU,CAACM,MAAU;AAClC,IAAIC,EAA6CD,CAAK,KAAKA,EAAM,SAASE,IACtEL,EAAQ,KAAKG,CAAK,IACXC,EAAeD,CAAK,KAAKA,EAAM,SAASG,IAC/CR,IAAgB,MACTM,EAAeD,CAAK,KAAKA,EAAM,SAASI,MAC/CR,IAAkB,KAClBE,EAAQ,KAAKE,CAAK;AAAA,EAI1B,CAAC,GACM,EAAE,eAAAL,GAAe,iBAAAC,GAAiB,SAAAC,GAAS,SAAAC,EAAA;AACtD,GAeMO,IAAe,CAACX,MAAmC;AACrD,QAAMY,IAAmB,CAAA;AACzB,SAAAP,EAAS,QAAQL,GAAU,CAACM,MAAU;AAClC,QAAIC,EAAuCD,CAAK,KAAKA,EAAM,SAASO,GAAmB;AACnF,YAAMC,IAAaR,GACb,EAAE,SAAAH,GAAS,SAAAC,GAAS,eAAAH,GAAe,iBAAAC,MAAoBH;AAAA,QACzDe,EAAW,MAAM;AAAA,MAAA,GAEfC,IAASD,EAAW,MAAM;AAChC,MAAAF,EAAMG,CAAM,IAAI;AAAA,QACZ,GAAGD,EAAW;AAAA,QACd,IAAIC;AAAA,QACJ,KAAKD,EAAW;AAAA,QAChB,SAAAX;AAAA,QACA,UAAUC;AAAA,QACV,eAAAH;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,IAER;AAAA,EACJ,CAAC,GACMU;AACX,GAEaI,IAAsB,CAAChB,GAAqBiB,MAA+B;AACpF,QAAMC,IAAeC,EAAQ,MAAM;AAC/B,UAAMP,IAAQD,EAAaX,CAAQ;AACnC,QAAI,OAAO,KAAKY,CAAK,EAAE,WAAWK,EAAM;AACpC,YAAM,IAAI,MAAM,gEAAgE;AAEpF,WAAOL;AAAA,EACX,GAAG,CAACZ,GAAUiB,CAAK,CAAC;AAOpB,SALoBE;AAAA,IAChB,MAAMF,EAAM,IAAI,CAACG,MAAOF,EAAaE,CAAE,CAAC,EAAE,OAAO,CAACC,MAASA,MAAS,MAAS;AAAA,IAC7E,CAACJ,GAAOC,CAAY;AAAA,EAAA,EAGL,IAAI,CAAC,EAAE,IAAAE,GAAI,UAAApB,GAAU,SAAAG,GAAS,eAAAF,GAAe,iBAAAC,GAAiB,GAAGoB,KAASC,MACzF,gBAAAC,EAACC,KAAoC,OAAAF,GAAc,IAAAH,GAAS,GAAGE,GAC3D,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAA0B,UAAA3B,EAAAA,CAAS;AAAA,IACnCG,EAAQ,SAAS,KAAK,gBAAAuB,EAAC,SAAI,WAAWE,EAAO,SAAU,UAAAzB,EAAA,CAAQ;AAAA,IAC/DF,KAAiB,CAACC,KAAmB,gBAAAwB,EAACjB,GAAA,CAAA,CAAwB;AAAA,EAAA,EAAA,GAHlCW,CAIjC,CACH;AACL;"}

package/dist/fondue-components83.js

@@ -1,10 +1,26 @@
-const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
+const t = "_root_1lkrw_5", o = "_item_1lkrw_22", n = "_content_1lkrw_44", _ = "_actions_1lkrw_45", e = "_handle_1lkrw_52", l = "_decorator_1lkrw_88", r = "_title_1lkrw_88", c = "_description_1lkrw_88", s = "_dragHandle_1lkrw_137", d = "_visuallyHidden_1lkrw_162", i = {
   root: t,
-  thumb: o
+  item: o,
+  content: n,
+  actions: _,
+  handle: e,
+  decorator: l,
+  title: r,
+  description: c,
+  dragHandle: s,
+  visuallyHidden: d
 };
 export {
-  s as default,
+  _ as actions,
+  n as content,
+  l as decorator,
+  i as default,
+  c as description,
+  s as dragHandle,
+  e as handle,
+  o as item,
   t as root,
-  o as thumb
+  r as title,
+  d as visuallyHidden
 };
 //# sourceMappingURL=fondue-components83.js.map

package/dist/fondue-components83.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}