@frontify/fondue-components 23.0.0 → 24.0.0-rc.1

package/dist/fondue-components92.js

@@ -1,24 +1,43 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconCross as s } from "@frontify/fondue-icons";
-import { useTranslation as t } from "./fondue-components34.js";
-import { Button as a } from "./fondue-components6.js";
-import l from "./fondue-components71.js";
-const f = ({ onClear: r }) => {
-  const { t: o } = t();
-  return /* @__PURE__ */ e(
-    a,
-    {
-      "aria-label": o("Select_clear"),
-      type: "button",
-      size: "small",
-      emphasis: "weak",
-      aspect: "square",
-      onPress: r,
-      children: /* @__PURE__ */ e(s, { className: l.clearIcon, size: 16 })
-    }
-  );
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components71.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        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 {
-  f as SelectClear
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components92.js.map

package/dist/fondue-components92.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components92.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            aria-label={t('Select_clear')}\n            type=\"button\"\n            size=\"small\"\n            emphasis=\"weak\"\n            aspect=\"square\"\n            onPress={onClear}\n        >\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","t","useTranslation","jsx","Button","IconCross","styles"],"mappings":";;;;;AAUO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAAwC;AAClE,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYH,EAAE,cAAc;AAAA,MAC5B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,QAAO;AAAA,MACP,SAASD;AAAA,MAET,4BAACK,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9D;"}
+{"version":3,"file":"fondue-components92.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, children?: ReactNode }} 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    children?: ReactNode;\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        ...(children ? { children } : null),\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,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,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;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components93.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { useTranslation as t } from "./fondue-components36.js";
+import { Button as a } from "./fondue-components6.js";
+import l from "./fondue-components74.js";
+const f = ({ onClear: r }) => {
+  const { t: o } = t();
+  return /* @__PURE__ */ e(
+    a,
+    {
+      "aria-label": o("Select_clear"),
+      type: "button",
+      size: "small",
+      emphasis: "weak",
+      aspect: "square",
+      onPress: r,
+      children: /* @__PURE__ */ e(s, { className: l.clearIcon, size: 16 })
+    }
+  );
+};
+export {
+  f as SelectClear
+};
+//# sourceMappingURL=fondue-components93.js.map

package/dist/fondue-components93.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components93.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            aria-label={t('Select_clear')}\n            type=\"button\"\n            size=\"small\"\n            emphasis=\"weak\"\n            aspect=\"square\"\n            onPress={onClear}\n        >\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","t","useTranslation","jsx","Button","IconCross","styles"],"mappings":";;;;;AAUO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAAwC;AAClE,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYH,EAAE,cAAc;AAAA,MAC5B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,QAAO;AAAA,MACP,SAASD;AAAA,MAET,4BAACK,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/fondue-components94.js

@@ -0,0 +1,5 @@
+const s = "focus-visible:tw-ring-focus has-[[data-show-focus-ring=true]]:tw-ring-focus";
+export {
+  s as FOCUS_OUTLINE
+};
+//# sourceMappingURL=fondue-components94.js.map

package/dist/fondue-components94.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components94.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE = 'focus-visible:tw-ring-focus has-[[data-show-focus-ring=true]]:tw-ring-focus';\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IAAgB;"}

package/dist/fondue-components95.js

@@ -0,0 +1,20 @@
+const o = "_root_1n84t_5", t = "_clearIcon_1n84t_35", c = "_caret_1n84t_52", n = "_colorName_1n84t_70", _ = "_colorIndicator_1n84t_73", r = "_button_1n84t_94", a = "_actions_1n84t_125", s = {
+  root: o,
+  clearIcon: t,
+  caret: c,
+  colorName: n,
+  colorIndicator: _,
+  button: r,
+  actions: a
+};
+export {
+  a as actions,
+  r as button,
+  c as caret,
+  t as clearIcon,
+  _ as colorIndicator,
+  n as colorName,
+  s as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components95.js.map

package/dist/fondue-components95.js.map

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

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 import { CommonAriaAttrs } from '../../utilities/types';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
-import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
+import { default as default_2 } from '@frontify/fondue-tokens/themes';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
@@ -598,7 +598,7 @@ declare type DialogTriggerProps = {
 
 export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
 
-declare type DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';
+declare type DividerColor = 'weak' | 'default' | 'strong';
 
 declare type DividerDirection = 'horizontal' | 'vertical';
 
@@ -1256,6 +1256,105 @@ declare type LayoutComponentProps = {
     left?: Responsive<SpacingValue>;
 };
 
+export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+
+declare type LinkColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'highlight';
+
+declare type LinkOnContainerColor = 'secondary' | 'disabled' | 'error' | 'success' | 'warning' | 'highlight';
+
+declare type LinkProps = {
+    children?: ReactNode;
+    /**
+     * The link to navigate to when clicked
+     */
+    href: string;
+    /**
+     * Id of the element
+     */
+    id?: string;
+    /**
+     * Size of the text
+     *
+     * @default 'medium'
+     */
+    size?: LinkSize;
+    /**
+     * Weight of the font
+     *
+     * @default 'regular'
+     */
+    weight?: LinkWeight;
+    /**
+     * Color of the text
+     *
+     * @default 'primary'
+     */
+    color?: LinkColor;
+    /**
+     * The texts color when used within a container
+     *
+     * @description optional color prop that uses the inverse container color when accessibility contrast is needed
+     **/
+    onContainer?: LinkOnContainerColor;
+    /**
+     * Truncate the text if it overflows
+     */
+    truncate?: boolean;
+    /**
+     * Wrap the text if it overflows
+     * @default 'nowrap'
+     */
+    wrap?: LinkWrap;
+    /**
+     * Underline behavior of the link
+     * @default 'auto'
+     */
+    underline?: LinkUnderline;
+    /**
+     * The target attribute for the link
+     * @default '_self'
+     */
+    target?: string;
+    /**
+     * The rel attribute for the link
+     * @default 'noopener noreferrer'
+     */
+    rel?: string;
+    className?: string;
+    onPress?: (event: MouseEvent_2<HTMLAnchorElement>) => void;
+    'data-test-id'?: string;
+    /**
+     * Aria label for the component.
+     */
+    'aria-label'?: string;
+    /**
+     * Aria labelled by for the component.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Aria described by for the component.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Aria details for extend description of the component.
+     */
+    'aria-details'?: string;
+    /**
+     * Disable the link
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare type LinkSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+
+declare type LinkUnderline = 'auto' | 'always' | 'hover' | 'none';
+
+declare type LinkWeight = 'regular' | 'medium' | 'bold';
+
+declare type LinkWrap = 'wrap' | 'nowrap';
+
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
 
 declare type LoadingBarProps = {
@@ -1340,6 +1439,20 @@ declare type RgbaColor_2 = {
     name?: string;
 };
 
+export declare const RouterProvider: ({ children, navigate, useHref }: RouterProviderProps) => JSX_2.Element;
+
+export declare type RouterProviderProps = {
+    children: ReactNode;
+    /**
+     * Function to navigate to a specific path
+     */
+    navigate: (path: string) => void;
+    /**
+     * Function to resolves a URL against the current location.
+     */
+    useHref: (path: string) => string;
+};
+
 declare const screens: {
     xs: string;
     sm: string;
@@ -1727,7 +1840,7 @@ declare type TableHeaderCellProps = {
      */
     truncate?: boolean;
     /**
-     * Aria label for asceding/descending sort. Variables: {column} - column name
+     * Aria label for ascending/descending sort. Variables: {column} - column name
      * @default "Sort by {column} ascending/descending"
      */
     sortTranslations?: {