@frontify/fondue-components 5.1.2 → 5.1.3

package/dist/fondue-components67.js

@@ -0,0 +1,18 @@
+const o = "_root_8a8rm_5", t = "_button_8a8rm_56", c = "_colorIndicator_8a8rm_69", r = "_actions_8a8rm_75", a = "_clear_8a8rm_85", _ = "_caret_8a8rm_98", n = {
+  root: o,
+  button: t,
+  colorIndicator: c,
+  actions: r,
+  clear: a,
+  caret: _
+};
+export {
+  r as actions,
+  t as button,
+  _ as caret,
+  a as clear,
+  c as colorIndicator,
+  n as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components67.js.map

package/dist/fondue-components67.js.map

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

package/dist/fondue-components68.js

@@ -0,0 +1,42 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components51.js";
+const g = ({
+  children: r,
+  value: o,
+  label: s
+}) => r && typeof r == "string" ? {
+  value: o || r,
+  label: s || r
+} : {
+  value: o || "",
+  label: s || o || ""
+}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(r, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        o,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
+};
+export {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components68.js.map

package/dist/fondue-components68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components68.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}

package/dist/fondue-components7.js

@@ -2,8 +2,8 @@ import { jsx as a, jsxs as T } from "react/jsx-runtime";
 import { IconCross as F } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-dialog";
 import { createContext as M, forwardRef as l, useContext as S } from "react";
-import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components36.js";
-import r from "./fondue-components37.js";
+import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components37.js";
+import r from "./fondue-components38.js";
 const n = M({ isModal: !1 }), g = ({ children: t, ...o }) => /* @__PURE__ */ a(n.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ a(i.Root, { ...o, children: t }) });
 g.displayName = "Dialog.Root";
 const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-trigger", ...d }, s) => /* @__PURE__ */ a(

package/dist/fondue-components8.js

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as s from "@radix-ui/react-separator";
 import { forwardRef as p } from "react";
-import { cn as f } from "./fondue-components26.js";
-import { dividerStyles as n } from "./fondue-components38.js";
+import { cn as f } from "./fondue-components27.js";
+import { dividerStyles as n } from "./fondue-components39.js";
 const r = ({
   "data-test-id": o = "fondue-divider",
   direction: t = "horizontal",

package/dist/fondue-components9.js

@@ -2,9 +2,9 @@ import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import { IconCaretRight as h } from "@frontify/fondue-icons";
 import * as n from "@radix-ui/react-dropdown-menu";
 import { forwardRef as s, useRef as l } from "react";
-import { usePreventDropdownOverflow as v } from "./fondue-components39.js";
-import { syncRefs as f } from "./fondue-components36.js";
-import a from "./fondue-components40.js";
+import { usePreventDropdownOverflow as v } from "./fondue-components40.js";
+import { syncRefs as f } from "./fondue-components37.js";
+import a from "./fondue-components41.js";
 const g = ({
   children: o,
   open: t,

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes } from 'react';
 import { ChangeEvent } from 'react';
+import { CSSProperties } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FormEvent } from 'react';
 import { ForwardedRef } from 'react';
@@ -20,6 +21,28 @@ declare type AtLeastOneAttr<T> = Partial<T> & {
     [K in keyof T]-?: Required<Pick<T, K>>;
 }[keyof T];
 
+declare type BaseTableRowProps = {
+    /**
+     * Whether the row is in a selected state
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether to disable interactions for this row
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Content to be rendered within the row
+     */
+    children: ReactNode;
+    /**
+     * Accessible label for the row
+     */
+    'aria-label'?: string;
+    'data-test-id'?: string;
+};
+
 export declare const Box: {
     ({ as: Component, "data-test-id": dataTestId, children, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, ...props }: BoxProps): JSX_2.Element;
     displayName: string;
@@ -161,6 +184,16 @@ declare type CheckboxProps = {
     'aria-describedby'?: string;
 };
 
+declare type ClickableTableRowProps = BaseTableRowProps & {
+    /**
+     * Handler called when the row is clicked or activated via keyboard
+     * If provided, the row will be hoverable and interactive
+     */
+    onClick: (selected: boolean) => void;
+    onNavigate?: never;
+    href?: never;
+};
+
 declare type ColorFormat = 'HEX' | 'RGBA';
 
 export declare const ColorPicker: {
@@ -790,6 +823,8 @@ declare type GridProps = LayoutComponentProps & {
     'data-test-id'?: string;
 } & CommonAriaProps;
 
+declare type HorizontalAlignment = 'left' | 'center' | 'right';
+
 export declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>;
 
 declare type LabelProps = {
@@ -965,6 +1000,26 @@ declare type LoadingBarProps = {
     'aria-labelledby': string;
 });
 
+declare type NavigableTableRowProps = BaseTableRowProps & {
+    onClick?: never;
+    /**
+     * Handler called when the row is clicked or activated via keyboard for navigation
+     * Must be provided together with href
+     */
+    onNavigate: (href: string) => void;
+    /**
+     * URL associated with this row for navigation
+     * Must be provided together with onNavigate
+     */
+    href: string;
+};
+
+declare type NonInteractiveTableRowProps = BaseTableRowProps & {
+    onClick?: never;
+    onNavigate?: never;
+    href?: never;
+};
+
 declare type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 
 declare type PositionValue = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
@@ -1227,6 +1282,8 @@ declare type SliderProps = {
     'data-test-id'?: string;
 } & CommonAriaAttrs;
 
+declare type SortDirection = 'ascending' | 'descending' | undefined;
+
 declare type SpacingValue = (string & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
 export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;
@@ -1277,6 +1334,112 @@ declare type SwitchProps = {
     'data-test-id'?: string;
 } & CommonAriaAttrs;
 
+export declare const Table: {
+    Root: ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLTableElement>>;
+    Caption: ForwardRefExoticComponent<    {
+    children: ReactNode;
+    } & RefAttributes<HTMLTableCaptionElement>>;
+    Header: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
+    HeaderCell: ForwardRefExoticComponent<TableHeaderCellProps & RefAttributes<HTMLTableCellElement>>;
+    Body: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+    Row: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+    RowCell: ForwardRefExoticComponent<TableRowCellProps & RefAttributes<HTMLTableCellElement>>;
+};
+
+declare type TableBodyProps = {
+    children: ReactNode;
+    'aria-busy'?: boolean;
+};
+
+declare type TableHeaderCellProps = {
+    /**
+     * Scope of the column
+     * @default 'col'
+     */
+    scope?: HTMLTableCellElement['scope'];
+    /**
+     * Number of columns the cell should span
+     */
+    colSpan?: HTMLTableCellElement['colSpan'];
+    /**
+     * Width of the column
+     */
+    width?: CSSProperties['width'];
+    /**
+     * Current sort direction of the column
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Horizontal alignment of the content
+     * @default 'left'
+     */
+    align?: HorizontalAlignment;
+    /**
+     * Whether to truncate content with ellipsis when it overflows
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Aria label for asceding/descending sort. Variables: {column} - column name
+     * @default "Sort by {column} ascending/descending"
+     */
+    sortTranslations?: {
+        sortAscending?: string;
+        sortDescending?: string;
+    };
+    /**
+     * Whether the column should have a minimum width
+     * @default false
+     */
+    noShrink?: boolean;
+    /**
+     * Handler called when the sort direction changes
+     * @param direction - The new sort direction
+     */
+    onSortChange?: (direction: SortDirection) => void;
+    children: ReactNode;
+};
+
+declare type TableHeaderProps = {
+    children: ReactNode;
+    'aria-label'?: string;
+    'aria-busy'?: boolean;
+};
+
+declare type TableRootProps = {
+    /**
+     * Whether the table should have a fixed or auto layout
+     * @default 'auto'
+     */
+    layout?: 'auto' | 'fixed';
+    /**
+     * Whether header should stick to the top when scrolling
+     */
+    sticky?: 'head' | 'col' | 'both';
+    children: ReactNode;
+} & CommonAriaAttrs;
+
+declare type TableRowCellProps = {
+    /**
+     * Number of columns the cell should span
+     */
+    colSpan?: HTMLTableCellElement['colSpan'];
+    /**
+     * Whether to truncate content with ellipsis when it overflows
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Horizontal alignment of the content
+     * @default 'left'
+     */
+    align?: HorizontalAlignment;
+    children: ReactNode;
+    'aria-label'?: string;
+};
+
+declare type TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;
+
 export declare const Tabs: {
     Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
     Tab: ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;