npm - @frontify/fondue - Versions diffs - 11.0.0 → 11.1.0 - Mend

@frontify/fondue 11.0.0 → 11.1.0

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

package/dist/components/RichTextEditor/serializer/utils/serializeLeafToHtml.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"serializeLeafToHtml.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeLeafToHtml.ts"],"sourcesContent":["import {\n BOLD_CLASSES,\n CODE_CLASSES,\n ITALIC_CLASSES,\n STRIKETHROUGH_CLASSES,\n UNDERLINE_CLASSES,\n} from '@components/RichTextEditor/components';\nimport { TDescendant } from '@udecode/plate';\nimport escapeHtml from 'escape-html';\n\nexport const serializeLeafToHtml = (node: TDescendant): string => {\n let string = escapeHtml(node.text);\n if (node.bold) {\n string = `<span class=\"${BOLD_CLASSES}\">${string}</span>`;\n }\n if (node.italic) {\n string = `<span class=\"${ITALIC_CLASSES}\">${string}</span>`;\n }\n if (node.underline) {\n string = `<span class=\"${UNDERLINE_CLASSES}\">${string}</span>`;\n }\n if (node.strikethrough) {\n string = `<span class=\"${STRIKETHROUGH_CLASSES}\">${string}</span>`;\n }\n if (node.code) {\n string = `<span class=\"${CODE_CLASSES}\">${string}</span>`;\n }\n return string;\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,MAAA,KAAsB,CAAC,MAA8B;AAC1D,MAAA,IAASA,EAAW,EAAK,IAAI;AACjC,SAAI,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAE1C,EAAK,UACL,KAAS,gBAAgB,MAAmB,aAE5C,EAAK,aACL,KAAS,gBAAgB,MAAsB,aAE/C,EAAK,iBACL,KAAS,gBAAgB,MAA0B,aAEnD,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAEvC;AACX;"}

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { DesignTokens } from '../../../RichTextEditor/types';
2	+ export declare const serializeNodeToHtmlRecursive: (node: any, designTokens: DesignTokens) => string;

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js ADDED Viewed

@@ -0,0 +1,51 @@
+import "react";
+import { ELEMENT_LINK as i, ELEMENT_LI as m, ELEMENT_OL as p, ELEMENT_UL as $, ELEMENT_PARAGRAPH as L } from "@udecode/plate";
+import "slate-react";
+import "../../context/DesignTokensContext.es.js";
+import { LINK_CLASSES as l } from "../../components/link.es.js";
+import { OL_CLASSES as o } from "../../components/ordered-list.es.js";
+import { UL_CLASSES as u } from "../../components/unordered-list.es.js";
+import { ELEMENT_CHECK_ITEM as h } from "../../plugins/checkboxListPlugin/createCheckboxListPlugin.es.js";
+import { TextStyles as E } from "../../utils/textStyles.es.js";
+import s from "../../../../node_modules/escape-html/index.es.js";
+import { reactCssPropsToCss as a } from "./reactCssPropsToCss.es.js";
+import { serializeLeafToHtml as N } from "./serializeLeafToHtml.es.js";
+const _ = (t, e) => {
+  if (!t.children)
+    return N(t);
+  const r = t.children.map((c) => _(c, e)).join("");
+  switch (t.type) {
+    case E.ELEMENT_HEADING1:
+      return `<h1 style="${a(e.heading1)}">${r}</h1>`;
+    case E.ELEMENT_HEADING2:
+      return `<h2 style="${a(e.heading2)}">${r}</h2>`;
+    case E.ELEMENT_HEADING3:
+      return `<h3 style="${a(e.heading3)}">${r}</h3>`;
+    case E.ELEMENT_HEADING4:
+      return `<h4 style="${a(e.heading4)}">${r}</h4>`;
+    case E.ELEMENT_CUSTOM1:
+      return `<p style="${a(e.custom1)}">${r}</p>`;
+    case E.ELEMENT_CUSTOM2:
+      return `<p style="${a(e.custom2)}">${r}</p>`;
+    case E.ELEMENT_CUSTOM3:
+      return `<p style="${a(e.custom3)}">${r}</p>`;
+    case L:
+      return `<p>${r}</p>`;
+    case $:
+      return `<ul class="${u}">${r}</ul>`;
+    case p:
+      return `<ol class="${o}">${r}</ol>`;
+    case m:
+      return `<li>${r}</li>`;
+    case i:
+      return t.chosenLink ? `<a class="${l}" target=${t.chosenLink.openInNewTab ? "_blank" : "_self"} href="${s(t.chosenLink.searchResult.link)}">${r}</a>` : `<a class="${l}" href="${s(t.url)}">${r}</a>`;
+    case h:
+      return `<input type="checkbox"/><label>${r}</label>`;
+    default:
+      return r;
+  }
+};
+export {
+  _ as serializeNodeToHtmlRecursive
+};
+//# sourceMappingURL=serializeNodeToHtmlRecursive.es.js.map

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["import { LINK_CLASSES, OL_CLASSES, UL_CLASSES } from '@components/RichTextEditor/components';\nimport { ELEMENT_CHECK_ITEM } from '@components/RichTextEditor/plugins/checkboxListPlugin/createCheckboxListPlugin';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport { TextStyles } from '@components/RichTextEditor/utils/textStyles';\nimport { ELEMENT_LI, ELEMENT_LINK, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_UL, TDescendant } from '@udecode/plate';\nimport escapeHtml from 'escape-html';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\n\nexport const serializeNodeToHtmlRecursive = (node: TDescendant, designTokens: DesignTokens): string => {\n if (!node.children) {\n return serializeLeafToHtml(node);\n }\n\n const children = node.children.map((n: TDescendant) => serializeNodeToHtmlRecursive(n, designTokens)).join('');\n\n switch (node.type) {\n case TextStyles.ELEMENT_HEADING1:\n return `<h1 style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n case TextStyles.ELEMENT_HEADING2:\n return `<h2 style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n case TextStyles.ELEMENT_HEADING3:\n return `<h3 style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n case TextStyles.ELEMENT_HEADING4:\n return `<h4 style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n case TextStyles.ELEMENT_CUSTOM1:\n return `<p style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n case TextStyles.ELEMENT_CUSTOM2:\n return `<p style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n case TextStyles.ELEMENT_CUSTOM3:\n return `<p style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n case ELEMENT_PARAGRAPH:\n return `<p>${children}</p>`;\n case ELEMENT_UL:\n return `<ul class=\"${UL_CLASSES}\">${children}</ul>`;\n case ELEMENT_OL:\n return `<ol class=\"${OL_CLASSES}\">${children}</ol>`;\n case ELEMENT_LI:\n return `<li>${children}</li>`;\n case ELEMENT_LINK:\n if (node.chosenLink) {\n return `<a class=\"${LINK_CLASSES}\" target=${\n node.chosenLink.openInNewTab ? '_blank' : '_self'\n } href=\"${escapeHtml(node.chosenLink.searchResult.link)}\">${children}</a>`;\n }\n return `<a class=\"${LINK_CLASSES}\" href=\"${escapeHtml(node.url)}\">${children}</a>`;\n case ELEMENT_CHECK_ITEM:\n return `<input type=\"checkbox\"/><label>${children}</label>`;\n\n default:\n return children;\n }\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;;;;;;AASa,MAAA,IAA+B,CAAC,GAAmB,MAAuC;AAC/F,MAAA,CAAC,EAAK;AACN,WAAO,EAAoB,CAAI;AAGnC,QAAM,IAAW,EAAK,SAAS,IAAI,CAAC,MAAmB,EAA6B,GAAG,CAAY,CAAC,EAAE,KAAK,EAAE;AAE7G,UAAQ,EAAK;AAAA,SACJ,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE;AACD,aAAO,MAAM;AAAA,SACZ;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,OAAO;AAAA,SACb;AACD,aAAI,EAAK,aACE,aAAa,aAChB,EAAK,WAAW,eAAe,WAAW,iBACpCA,EAAW,EAAK,WAAW,aAAa,IAAI,MAAM,UAEzD,aAAa,YAAuBA,EAAW,EAAK,GAAG,MAAM;AAAA,SACnE;AACD,aAAO,kCAAkC;AAAA;AAGlC,aAAA;AAAA;AAEnB;"}

package/dist/components/RichTextEditor/serializer/utils/setDefaultDesignTokensIfNull.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { DesignTokens } from '../../../RichTextEditor/types';
2	+ export declare const setDefaultDesignTokensIfNull: (designTokens: DesignTokens) => DesignTokens;

package/dist/components/RichTextEditor/serializer/utils/setDefaultDesignTokensIfNull.es.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { defaultDesignTokens as r } from "../../utils/defaultDesignTokens.es.js";
+import { TextStyles as f } from "../../utils/textStyles.es.js";
+const s = (t) => {
+  for (const e of Object.values(f).filter((o) => o !== f.ELEMENT_PARAGRAPH))
+    t[e] || (t[e] = r[e]);
+  return t;
+};
+export {
+  s as setDefaultDesignTokensIfNull
+};
+//# sourceMappingURL=setDefaultDesignTokensIfNull.es.js.map

package/dist/components/RichTextEditor/serializer/utils/setDefaultDesignTokensIfNull.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"setDefaultDesignTokensIfNull.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/setDefaultDesignTokensIfNull.ts"],"sourcesContent":["import { DesignTokens } from '@components/RichTextEditor/types';\nimport { defaultDesignTokens } from '@components/RichTextEditor/utils/defaultDesignTokens';\nimport { TextStyles } from '@components/RichTextEditor/utils/textStyles';\n\nexport const setDefaultDesignTokensIfNull = (designTokens: DesignTokens): DesignTokens => {\n for (const element of Object.values(TextStyles).filter((textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH)) {\n if (!designTokens[element]) {\n designTokens[element] = defaultDesignTokens[element];\n }\n }\n return designTokens;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,IAA+B,CAAC,MAA6C;AAC3E,aAAA,KAAW,OAAO,OAAO,CAAU,EAAE,OAAO,CAAC,MAAc,MAAc,EAAW,iBAAiB;AACxG,IAAC,EAAa,MACd,GAAa,KAAW,EAAoB;AAG7C,SAAA;AACX;"}

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

@@ -1687,15 +1687,13 @@ import "slate-react";
 import "../RichTextEditor/plugins/linkChooserPlugin/createLinkChooserPlugin.es.js";
 import { useScrollWrapper as g } from "./hooks/useScrollWrapper.es.js";
 import { ScrollWrapperDirection as i, scrollWrapperDirections as h } from "./types.es.js";
-import "@react-aria/table";
 import "@react-stately/table";
-import "@react-stately/toggle";
 import "react-textarea-autosize";
 import "../Tree/utils/mocks.es.js";
 const e = {
   bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
   top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
-}, YD = ({ direction: o = i.Vertical, children: l }) => {
+}, OD = ({ direction: o = i.Vertical, children: l }) => {
   const t = b(null), [{ showTopShadow: a, showBottomShadow: n }, c] = g(t), { isFocusVisible: s, focusProps: w } = d(), m = o === i.Vertical || o === i.Both, p = t.current ? t.current.clientWidth + 8 : "100%";
   return /* @__PURE__ */ r.createElement("div", {
     "data-test-id": "scroll-wrapper",
@@ -1727,6 +1725,6 @@ const e = {
   }));
 };
 export {
-  YD as ScrollWrapper
+  OD as ScrollWrapper
 };
 //# sourceMappingURL=ScrollWrapper.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { FC, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper: FC<ScrollWrapperProps> = ({ direction = ScrollWrapperDirection.Vertical, children }) => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div\n data-test-id=\"scroll-wrapper\"\n className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n >\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEa,KAAwC,CAAC,EAAE,eAAY,EAAuB,UAAU,kBAAe;AAC1G,QAAA,IAAqB,EAAuB,IAAI,GAEhD,CAAC,EAAE,kBAAe,uBAAoB,KAAkB,EAAiB,CAAkB,GAE3F,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IACF,MAAc,EAAuB,YAAY,MAAc,EAAuB,MAEpF,IAAgB,EAAmB,UAAU,EAAmB,QAAQ,cAAc,IAAI;AAEhG,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAET,GAAA,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IAEL,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAW,EAAM;AAAA,MACb,EAAwB;AAAA,MACxB;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,CACL,GACC,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EACJ,CAAA,CAER;AAER;"}
1	+ {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { FC, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper: FC<ScrollWrapperProps> = ({ direction = ScrollWrapperDirection.Vertical, children }) => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div\n data-test-id=\"scroll-wrapper\"\n className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n >\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEa,KAAwC,CAAC,EAAE,eAAY,EAAuB,UAAU,kBAAe;AAC1G,QAAA,IAAqB,EAAuB,IAAI,GAEhD,CAAC,EAAE,kBAAe,uBAAoB,KAAkB,EAAiB,CAAkB,GAE3F,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IACF,MAAc,EAAuB,YAAY,MAAc,EAAuB,MAEpF,IAAgB,EAAmB,UAAU,EAAmB,QAAQ,cAAc,IAAI;AAEhG,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAET,GAAA,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IAEL,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAW,EAAM;AAAA,MACb,EAAwB;AAAA,MACxB;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,CACL,GACC,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EACJ,CAAA,CAER;AAER;"}

package/dist/components/Table/Table.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { Key, PropsWithChildren, ReactNode } from 'react';
 export declare enum SelectionMode {
     NoSelect = "none",
     SingleSelect = "single",
@@ -14,16 +14,20 @@ export declare type Column = {
     key: string;
 };
 export declare type Row = {
-    key: string | number;
+    key: Key;
     cells: Record<string, Cell>;
     actionElements?: ReactNode;
 };
 export declare type TableProps = PropsWithChildren<{
     columns: Column[];
     rows: Row[];
-    onSelectionChange?: (ids?: (string | number)[]) => void;
+    onSelectionChange?: (ids?: Key[]) => void;
     selectionMode?: SelectionMode;
-    selectedRowIds?: (string | number)[];
+    selectedRowIds?: Key[];
     ariaLabel?: string;
 }>;
+export declare enum SortDirection {
+    Ascending = "ascending",
+    Descending = "descending"
+}
 export declare const Table: ({ columns, rows, onSelectionChange, selectionMode, selectedRowIds, ariaLabel, }: TableProps) => JSX.Element;

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

@@ -1,105 +1,103 @@
-import { useTable as C } from "@react-aria/table";
-import { useTableState as g, TableHeader as S, Column as v, TableBody as x, Row as N, Cell as R } from "@react-stately/table";
-import e, { useState as A, useRef as O } from "react";
-import { TableCell as u, TableCellType as H } from "./TableCell.es.js";
-import { TableColumnHeader as w, TableColumnHeaderType as I } from "./TableColumnHeader.es.js";
-import { TableHeaderRow as D } from "./TableHeaderRow.es.js";
-import { TableRow as B } from "./TableRow.es.js";
-var F = /* @__PURE__ */ ((t) => (t.NoSelect = "none", t.SingleSelect = "single", t.MultiSelect = "multiple", t))(F || {});
-const f = "descending", L = (t, l) => ({
+import { useTableState as S, TableHeader as v, Column as x, TableBody as N, Row as R, Cell as A } from "@react-stately/table";
+import t, { useState as D, useRef as O } from "react";
+import { TableCellType as u, TableCell as H } from "./TableCell.es.js";
+import { TableColumnHeaderType as y, TableColumnHeader as I } from "./TableColumnHeader.es.js";
+import { TableHeaderRow as B } from "./TableHeaderRow.es.js";
+import { TableRow as F } from "./TableRow.es.js";
+var L = /* @__PURE__ */ ((e) => (e.NoSelect = "none", e.SingleSelect = "single", e.MultiSelect = "multiple", e))(L || {}), _ = /* @__PURE__ */ ((e) => (e.Ascending = "ascending", e.Descending = "descending", e))(_ || {});
+const k = "descending", $ = (e, l) => ({
   children: [
-    /* @__PURE__ */ e.createElement(S, {
+    /* @__PURE__ */ t.createElement(v, {
       key: "table-header",
-      columns: t
-    }, (a) => /* @__PURE__ */ e.createElement(v, {
+      columns: e
+    }, (r) => /* @__PURE__ */ t.createElement(x, {
       allowsSorting: !0
-    }, a.name)),
-    /* @__PURE__ */ e.createElement(x, {
+    }, r.name)),
+    /* @__PURE__ */ t.createElement(N, {
       key: "table-body",
       items: l
-    }, (a) => /* @__PURE__ */ e.createElement(N, null, (s) => /* @__PURE__ */ e.createElement(R, {
-      key: `${a.key}-${s}`,
-      "aria-label": a.cells[s].ariaLabel
-    }, a.cells[s].value)))
+    }, (r) => /* @__PURE__ */ t.createElement(R, null, (a) => /* @__PURE__ */ t.createElement(A, {
+      key: `${r.key}-${a}`,
+      "aria-label": r.cells[a].ariaLabel
+    }, r.cells[a].value)))
   ]
-}), P = (t, l) => t.find(({ key: a }) => a === l) || null, _ = (t) => t.map(({ key: l }) => l), $ = (t, l, a) => {
-  const s = (d, b) => {
-    const c = d.cells[l].sortId, n = b.cells[l].sortId;
-    return !c || !n || c === n ? 0 : a ? c < n ? -1 : 1 : c < n ? 1 : -1;
+}), P = (e, l) => e.find(({ key: r }) => r === l) || null, U = (e) => e.map(({ key: l }) => l), j = (e, l, r) => {
+  const a = (d, i) => {
+    const c = d.cells[l].sortId, o = i.cells[l].sortId;
+    return !c || !o || c === o ? 0 : r ? c < o ? -1 : 1 : c < o ? 1 : -1;
   };
-  return [...t].sort(s);
-}, Q = ({
-  columns: t,
+  return [...e].sort(a);
+}, V = ({
+  columns: e,
   rows: l,
-  onSelectionChange: a,
-  selectionMode: s = "none",
+  onSelectionChange: r,
+  selectionMode: a = "none",
   selectedRowIds: d = [],
-  ariaLabel: b = "Table"
+  ariaLabel: i = "Table"
 }) => {
-  const c = s === "single" || s === "multiple", [{ sortedColumnKey: n, sortOrder: p }, E] = A({
+  const c = a === "single" || a === "multiple", [{ sortedColumnKey: o, sortOrder: b }, w] = D({
     sortedColumnKey: void 0,
     sortOrder: void 0
   });
-  n && p && (l = $(l, n, p === f));
-  const y = O(null), T = L(t, l), m = g({
+  o && b && (l = j(l, o, b === k));
+  const h = (n, s) => {
+    w({
+      sortedColumnKey: n,
+      sortOrder: o !== n ? k : s
+    });
+  }, f = U(l), E = O(null), T = $(e, l), g = S({
     ...T,
-    selectionMode: s,
-    sortDescriptor: {
-      column: n,
-      direction: p
-    },
-    onSortChange: ({ column: r, direction: o }) => E({
-      sortedColumnKey: r,
-      sortOrder: n !== r ? f : o
-    }),
-    onSelectionChange: (r) => c && a && a(r === "all" ? _(l) : Array.from(r)),
-    defaultSelectedKeys: c ? d : void 0,
+    selectionMode: a,
     showSelectionCheckboxes: c
-  }), { collection: k } = m, { gridProps: h } = C({ "aria-label": b }, m, y);
-  return /* @__PURE__ */ e.createElement("div", {
+  }), { collection: p } = g;
+  return /* @__PURE__ */ t.createElement("div", {
     className: "tw-w-full tw-max-h-96 sm:tw-max-h-full"
-  }, /* @__PURE__ */ e.createElement("table", {
-    ...h,
-    ref: y,
+  }, /* @__PURE__ */ t.createElement("table", {
+    "aria-label": i,
+    ref: E,
     className: "tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20"
-  }, /* @__PURE__ */ e.createElement("thead", null, k.headerRows.map((r) => /* @__PURE__ */ e.createElement(D, {
-    key: r.key,
-    item: r,
-    state: m
-  }, [...r.childNodes].map((o) => o.props.isSelectionCell ? /* @__PURE__ */ e.createElement(w, {
-    key: o.key,
-    column: o,
-    state: m,
-    type: I.SelectAll
-  }) : /* @__PURE__ */ e.createElement(w, {
-    key: o.key,
-    column: o,
-    state: m
-  }))))), /* @__PURE__ */ e.createElement("tbody", null, [...k.body.childNodes].map((r) => {
-    const o = P(l, r.key);
-    return /* @__PURE__ */ e.createElement(B, {
-      key: r.key,
-      item: r,
-      state: m
-    }, [...r.childNodes].map((i) => i.props.isSelectionCell ? /* @__PURE__ */ e.createElement(u, {
-      key: i.key,
-      cell: i,
-      state: m,
-      type: H.Checkbox
-    }) : /* @__PURE__ */ e.createElement(u, {
-      key: i.key,
-      cell: i,
-      state: m
-    })), (o == null ? void 0 : o.actionElements) && /* @__PURE__ */ e.createElement("td", {
+  }, /* @__PURE__ */ t.createElement("thead", null, p.headerRows.map((n) => /* @__PURE__ */ t.createElement(B, {
+    key: n.key
+  }, [...n.childNodes].map((s) => {
+    const m = s.props.isSelectionCell ? y.SelectAll : y.Default;
+    return /* @__PURE__ */ t.createElement(I, {
+      key: s.key,
+      column: s,
+      type: m,
+      rowIds: f,
+      sortDirection: b,
+      selectionMode: a,
+      isColumnSorted: o === s.key,
+      handleSortChange: h,
+      setSelectedRows: r
+    });
+  }), /* @__PURE__ */ t.createElement("td", null)))), /* @__PURE__ */ t.createElement("tbody", null, [...p.body.childNodes].map((n) => {
+    const s = P(l, n.key);
+    return /* @__PURE__ */ t.createElement(F, {
+      key: n.key,
+      isSelected: d.includes(n.key)
+    }, [...n.childNodes].map((m) => {
+      const C = m.props.isSelectionCell ? u.Checkbox : u.Default;
+      return /* @__PURE__ */ t.createElement(H, {
+        key: m.key,
+        cell: m,
+        selectionMode: a,
+        type: C,
+        isChecked: d.includes(n.key),
+        selectedRows: d,
+        setSelectedRows: r
+      });
+    }), (s == null ? void 0 : s.actionElements) && /* @__PURE__ */ t.createElement("td", {
       className: "tw-sticky tw-right-0",
       "data-test-id": "table-actions"
-    }, /* @__PURE__ */ e.createElement("div", {
+    }, /* @__PURE__ */ t.createElement("div", {
       className: "tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4"
-    }, o.actionElements)));
+    }, s.actionElements)));
   }))));
 };
 export {
-  F as SelectionMode,
-  Q as Table
+  L as SelectionMode,
+  _ as SortDirection,
+  V as Table
 };
 //# sourceMappingURL=Table.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useTable } from '@react-aria/table';\nimport {\n Cell as AriaCell,\n Column as AriaColumn,\n Row as AriaRow,\n TableBody,\n TableHeader,\n TableStateProps,\n useTableState,\n} from '@react-stately/table';\nimport React, { PropsWithChildren, ReactNode, useRef, useState } from 'react';\nimport { TableCell, TableCellType } from './TableCell';\nimport { TableColumnHeader, TableColumnHeaderType } from './TableColumnHeader';\nimport { TableHeaderRow } from './TableHeaderRow';\nimport { TableRow } from './TableRow';\n\nexport enum SelectionMode {\n NoSelect = 'none',\n SingleSelect = 'single',\n MultiSelect = 'multiple',\n}\n\nexport type Cell = {\n sortId: string \| number;\n value: ReactNode;\n ariaLabel?: string;\n};\n\nexport type Column = {\n name: string;\n key: string;\n};\n\nexport type Row = {\n key: string \| number;\n // cell keys have to correspond to column key values\n // e.g. Column { name: 'User', key: 'user' } ==> Row Cell { user: { id: 'anna', value: 'Anna' } }\n cells: Record<string, Cell>;\n actionElements?: ReactNode;\n};\n\nexport type TableProps = PropsWithChildren<{\n columns: Column[];\n rows: Row[];\n onSelectionChange?: (ids?: (string \| number)[]) => void;\n selectionMode?: SelectionMode;\n selectedRowIds?: (string \| number)[];\n ariaLabel?: string;\n}>;\n\nconst DEFAULT_SORT_ORDER = 'descending';\n\ntype SortType = {\n sortedColumnKey?: string \| number;\n sortOrder?: 'ascending' \| 'descending';\n};\n\n/ react-aria hook props types are inexplicitly typed */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst mapToTableAriaProps = (columns: Column[], rows: Row[]): TableStateProps<any> => ({\n children: [\n <TableHeader key=\"table-header\" columns={columns}>\n {(column) => <AriaColumn allowsSorting>{column.name}</AriaColumn>}\n </TableHeader>,\n <TableBody key=\"table-body\" items={rows}>\n {(item) => (\n <AriaRow>\n {(columnKey) => (\n <AriaCell key={`${item.key}-${columnKey}`} aria-label={item.cells[columnKey].ariaLabel}>\n {item.cells[columnKey].value}\n </AriaCell>\n )}\n </AriaRow>\n )}\n </TableBody>,\n ],\n});\n\nconst getRowFromId = (rows: Row[], id: string \| number) => rows.find(({ key }) => key === id) \|\| null;\n\nconst getAllRowIds = (rows: Row[]): (string \| number)[] => rows.map(({ key: id }) => id);\n\nconst sortRows = (rows: Row[], columnKey: string \| number, isDescending: boolean) => {\n const sort = (a: Row, b: Row) => {\n const keyA = a.cells[columnKey].sortId;\n const keyB = b.cells[columnKey].sortId;\n\n if (!keyA \|\| !keyB \|\| keyA === keyB) {\n return 0;\n }\n if (isDescending) {\n return keyA < keyB ? -1 : 1;\n } else {\n return keyA < keyB ? 1 : -1;\n }\n };\n\n return [...rows].sort(sort);\n};\n\nexport const Table = ({\n columns,\n rows,\n onSelectionChange,\n selectionMode = SelectionMode.NoSelect,\n selectedRowIds = [],\n ariaLabel = 'Table',\n}: TableProps) => {\n const isSelectTable = selectionMode === SelectionMode.SingleSelect \|\| selectionMode === SelectionMode.MultiSelect;\n const [{ sortedColumnKey, sortOrder }, setSortedColumn] = useState<SortType>({\n sortedColumnKey: undefined,\n sortOrder: undefined,\n });\n\n if (sortedColumnKey && sortOrder) {\n rows = sortRows(rows, sortedColumnKey, sortOrder === DEFAULT_SORT_ORDER);\n }\n\n const ref = useRef<HTMLTableElement \| null>(null);\n const props = mapToTableAriaProps(columns, rows);\n const state = useTableState({\n ...props,\n selectionMode,\n sortDescriptor: {\n column: sortedColumnKey,\n direction: sortOrder,\n },\n onSortChange: ({ column, direction }) =>\n setSortedColumn({\n sortedColumnKey: column,\n sortOrder: sortedColumnKey !== column ? DEFAULT_SORT_ORDER : direction,\n }),\n onSelectionChange: (keys) =>\n isSelectTable &&\n onSelectionChange &&\n onSelectionChange(keys === 'all' ? getAllRowIds(rows) : Array.from(keys)),\n defaultSelectedKeys: isSelectTable ? selectedRowIds : undefined,\n showSelectionCheckboxes: isSelectTable,\n });\n const { collection } = state;\n const { gridProps } = useTable({ 'aria-label': ariaLabel }, state, ref);\n\n return (\n <div className=\"tw-w-full tw-max-h-96 sm:tw-max-h-full\">\n <table\n {...gridProps}\n ref={ref}\n className=\"tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20\"\n >\n <thead>\n {collection.headerRows.map((headerRow) => (\n <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>\n {[...headerRow.childNodes].map((column) =>\n column.props.isSelectionCell ? (\n <TableColumnHeader\n key={column.key}\n column={column}\n state={state}\n type={TableColumnHeaderType.SelectAll}\n />\n ) : (\n <TableColumnHeader key={column.key} column={column} state={state} />\n ),\n )}\n </TableHeaderRow>\n ))}\n </thead>\n <tbody>\n {[...collection.body.childNodes].map((ariaRow) => {\n const row = getRowFromId(rows, ariaRow.key);\n\n return (\n <TableRow key={ariaRow.key} item={ariaRow} state={state}>\n {[...ariaRow.childNodes].map((cell) =>\n cell.props.isSelectionCell ? (\n <TableCell\n key={cell.key}\n cell={cell}\n state={state}\n type={TableCellType.Checkbox}\n />\n ) : (\n <TableCell key={cell.key} cell={cell} state={state} />\n ),\n )}\n {row?.actionElements && (\n <td className=\"tw-sticky tw-right-0\" data-test-id=\"table-actions\">\n <div className=\"tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4\">\n {row.actionElements}\n </div>\n </td>\n )}\n </TableRow>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n};\n"],"names":["AriaColumn","AriaRow","AriaCell"],"mappings":"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"}
1	+ {"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n Cell as AriaCell,\n Column as AriaColumn,\n Row as AriaRow,\n TableBody,\n TableHeader,\n TableStateProps,\n useTableState,\n} from '@react-stately/table';\nimport React, { Key, PropsWithChildren, ReactNode, useRef, useState } from 'react';\nimport { TableCell, TableCellType } from './TableCell';\nimport { TableColumnHeader, TableColumnHeaderType } from './TableColumnHeader';\nimport { TableHeaderRow } from './TableHeaderRow';\nimport { TableRow } from './TableRow';\n\nexport enum SelectionMode {\n NoSelect = 'none',\n SingleSelect = 'single',\n MultiSelect = 'multiple',\n}\n\nexport type Cell = {\n sortId: string \| number;\n value: ReactNode;\n ariaLabel?: string;\n};\n\nexport type Column = {\n name: string;\n key: string;\n};\n\nexport type Row = {\n key: Key;\n // cell keys have to correspond to column key values\n // e.g. Column { name: 'User', key: 'user' } ==> Row Cell { user: { id: 'anna', value: 'Anna' } }\n cells: Record<string, Cell>;\n actionElements?: ReactNode;\n};\n\nexport type TableProps = PropsWithChildren<{\n columns: Column[];\n rows: Row[];\n onSelectionChange?: (ids?: Key[]) => void;\n selectionMode?: SelectionMode;\n selectedRowIds?: Key[];\n ariaLabel?: string;\n}>;\n\nexport enum SortDirection {\n Ascending = 'ascending',\n Descending = 'descending',\n}\n\nconst DEFAULT_SORT_ORDER = SortDirection.Descending;\n\ntype SortType = {\n sortedColumnKey?: Key;\n sortOrder?: SortDirection;\n};\n\n/ react-aria hook props types are inexplicitly typed */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst mapToTableAriaProps = (columns: Column[], rows: Row[]): TableStateProps<any> => ({\n children: [\n <TableHeader key=\"table-header\" columns={columns}>\n {(column) => <AriaColumn allowsSorting>{column.name}</AriaColumn>}\n </TableHeader>,\n <TableBody key=\"table-body\" items={rows}>\n {(item) => (\n <AriaRow>\n {(columnKey) => (\n <AriaCell key={`${item.key}-${columnKey}`} aria-label={item.cells[columnKey].ariaLabel}>\n {item.cells[columnKey].value}\n </AriaCell>\n )}\n </AriaRow>\n )}\n </TableBody>,\n ],\n});\n\nconst getRowFromId = (rows: Row[], id: Key) => rows.find(({ key }) => key === id) \|\| null;\n\nconst getAllRowIds = (rows: Row[]): Key[] => rows.map(({ key: id }) => id);\n\nconst sortRows = (rows: Row[], columnKey: Key, isDescending: boolean) => {\n const sort = (a: Row, b: Row) => {\n const keyA = a.cells[columnKey].sortId;\n const keyB = b.cells[columnKey].sortId;\n\n if (!keyA \|\| !keyB \|\| keyA === keyB) {\n return 0;\n }\n if (isDescending) {\n return keyA < keyB ? -1 : 1;\n } else {\n return keyA < keyB ? 1 : -1;\n }\n };\n\n return [...rows].sort(sort);\n};\n\nexport const Table = ({\n columns,\n rows,\n onSelectionChange,\n selectionMode = SelectionMode.NoSelect,\n selectedRowIds = [],\n ariaLabel = 'Table',\n}: TableProps) => {\n const isSelectTable = selectionMode === SelectionMode.SingleSelect \|\| selectionMode === SelectionMode.MultiSelect;\n const [{ sortedColumnKey, sortOrder }, setSortedColumn] = useState<SortType>({\n sortedColumnKey: undefined,\n sortOrder: undefined,\n });\n\n if (sortedColumnKey && sortOrder) {\n rows = sortRows(rows, sortedColumnKey, sortOrder === DEFAULT_SORT_ORDER);\n }\n\n const onSortChange = (column: Key, direction: SortDirection) => {\n setSortedColumn({\n sortedColumnKey: column,\n sortOrder: sortedColumnKey !== column ? DEFAULT_SORT_ORDER : direction,\n });\n };\n\n const rowIds = getAllRowIds(rows);\n const ref = useRef<HTMLTableElement \| null>(null);\n const props = mapToTableAriaProps(columns, rows);\n const state = useTableState({\n ...props,\n selectionMode,\n showSelectionCheckboxes: isSelectTable,\n });\n const { collection } = state;\n\n return (\n <div className=\"tw-w-full tw-max-h-96 sm:tw-max-h-full\">\n <table\n aria-label={ariaLabel}\n ref={ref}\n className=\"tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20\"\n >\n <thead>\n {collection.headerRows.map((headerRow) => (\n <TableHeaderRow key={headerRow.key}>\n {[...headerRow.childNodes].map((column) => {\n const headerType = column.props.isSelectionCell\n ? TableColumnHeaderType.SelectAll\n : TableColumnHeaderType.Default;\n\n return (\n <TableColumnHeader\n key={column.key}\n column={column}\n type={headerType}\n rowIds={rowIds}\n sortDirection={sortOrder}\n selectionMode={selectionMode}\n isColumnSorted={sortedColumnKey === column.key}\n handleSortChange={onSortChange}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n <td />\n </TableHeaderRow>\n ))}\n </thead>\n <tbody>\n {[...collection.body.childNodes].map((ariaRow) => {\n const row = getRowFromId(rows, ariaRow.key);\n\n return (\n <TableRow key={ariaRow.key} isSelected={selectedRowIds.includes(ariaRow.key)}>\n {[...ariaRow.childNodes].map((cell) => {\n const cellType = cell.props.isSelectionCell\n ? TableCellType.Checkbox\n : TableCellType.Default;\n return (\n <TableCell\n key={cell.key}\n cell={cell}\n selectionMode={selectionMode}\n type={cellType}\n isChecked={selectedRowIds.includes(ariaRow.key)}\n selectedRows={selectedRowIds}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n {row?.actionElements && (\n <td className=\"tw-sticky tw-right-0\" data-test-id=\"table-actions\">\n <div className=\"tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4\">\n {row.actionElements}\n </div>\n </td>\n )}\n </TableRow>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n};\n"],"names":["AriaColumn","AriaRow","AriaCell"],"mappings":"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"}

package/dist/components/Table/TableCell.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
-import { TableState } from '@react-stately/table';
-import { FC } from 'react';
+import { Key } from 'react';
 export declare enum TableCellType {
     Default = "Default",
     Checkbox = "Checkbox"
 }
 export declare type TableCellProps = {
     cell: any;
-    state: TableState<any>;
+    selectionMode: string;
     type?: TableCellType;
+    isChecked?: boolean;
+    selectedRows: Key[];
+    setSelectedRows?: (ids?: Key[]) => void;
 };
-export declare const TableCell: FC<TableCellProps>;
+export declare const TableCell: ({ cell, selectionMode, type, isChecked, selectedRows, setSelectedRows, }: TableCellProps) => JSX.Element;