@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components82.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components82.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent, type MouseEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n\nconst INTERACTIVE_ELEMENTS_LIST = [HTMLButtonElement, HTMLAnchorElement];\nconst INTERACTIVE_ROLES_LIST = ['button', 'link'];\n\nexport function shouldIgnoreRowClick(event?: MouseEvent): boolean {\n    if (!event) {\n        return false;\n    }\n\n    const { target, currentTarget } = event;\n\n    let element = target instanceof Element ? target : null;\n\n    if (!currentTarget.contains(element)) {\n        return true;\n    }\n\n    while (element && !(element instanceof HTMLTableRowElement)) {\n        if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => element instanceof interactiveElement)) {\n            return true;\n        }\n\n        const role = element.getAttribute('role');\n        if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n            return true;\n        }\n\n        element = element.parentElement;\n    }\n\n    return false;\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow","INTERACTIVE_ELEMENTS_LIST","INTERACTIVE_ROLES_LIST","shouldIgnoreRowClick","currentTarget","element","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACD,WAAO;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAA,GACNE,EAAQ,MAAA;AAEhB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAAqBL,GAA6B;AAC9D,MAAI,CAACA;AACD,WAAO;AAGX,QAAM,EAAE,QAAAC,GAAQ,eAAAK,EAAA,IAAkBN;AAElC,MAAIO,IAAUN,aAAkB,UAAUA,IAAS;AAEnD,MAAI,CAACK,EAAc,SAASC,CAAO;AAC/B,WAAO;AAGX,SAAOA,KAAW,EAAEA,aAAmB,wBAAsB;AACzD,QAAIJ,EAA0B,KAAK,CAACK,MAAuBD,aAAmBC,CAAkB;AAC5F,aAAO;AAGX,UAAMC,IAAOF,EAAQ,aAAa,MAAM;AACxC,QAAIE,KAAQL,EAAuB,SAASK,CAAI;AAC5C,aAAO;AAGX,IAAAF,IAAUA,EAAQ;AAAA,EACtB;AAEA,SAAO;AACX;"}
+{"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,14 +1,26 @@
-const n = "_root_bn9za_3", t = "_mainContent_bn9za_15", o = "_actionButton_bn9za_28", a = "_secondaryContent_bn9za_123", e = {
-  root: n,
-  mainContent: t,
-  actionButton: o,
-  secondaryContent: a
+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,
+  item: o,
+  content: n,
+  actions: _,
+  handle: e,
+  decorator: l,
+  title: r,
+  description: c,
+  dragHandle: s,
+  visuallyHidden: d
 };
 export {
-  o as actionButton,
-  e as default,
-  t as mainContent,
-  n as root,
-  a as secondaryContent
+  _ 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,
+  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":";;;;;;;;;;;;"}