@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components99.js

@@ -1,48 +1,16 @@
-const c = "_root_13ciu_7", e = "_selectedValue_13ciu_63", _ = "_input_13ciu_80", o = "_slot_13ciu_106", t = "_clear_13ciu_156", n = "_clearIcon_13ciu_163", u = "_icons_13ciu_167", i = "_caret_13ciu_173", r = "_iconSuccess_13ciu_201", s = "_iconError_13ciu_207", a = "_menu_13ciu_213", l = "_portal_13ciu_236", p = "_item_13ciu_252", g = "_checkmarkIcon_13ciu_281", m = "_itemValue_13ciu_287", d = "_group_13ciu_301", I = "_groupHeading_13ciu_312", b = "_badgesContainer_13ciu_324", k = "_badgeWrapper_13ciu_336", S = "_srOnly_13ciu_345", V = "_multiSelectInput_13ciu_357", y = {
-  root: c,
-  selectedValue: e,
-  input: _,
-  slot: o,
-  clear: t,
-  clearIcon: n,
-  icons: u,
-  caret: i,
-  iconSuccess: r,
-  iconError: s,
-  menu: a,
-  portal: l,
-  item: p,
-  checkmarkIcon: g,
-  itemValue: m,
-  group: d,
-  groupHeading: I,
-  badgesContainer: b,
-  badgeWrapper: k,
-  srOnly: S,
-  multiSelectInput: V
+import { useEffect as c } from "react";
+const s = (t) => {
+  c(() => {
+    if (!t.current)
+      return;
+    const e = t.current, n = new ResizeObserver(() => {
+      const r = e.scrollWidth > e.clientWidth;
+      e.title = r && e.textContent || "";
+    });
+    return n.observe(e), () => n.disconnect();
+  }, [t]);
 };
 export {
-  k as badgeWrapper,
-  b as badgesContainer,
-  i as caret,
-  g as checkmarkIcon,
-  t as clear,
-  n as clearIcon,
-  y as default,
-  d as group,
-  I as groupHeading,
-  s as iconError,
-  r as iconSuccess,
-  u as icons,
-  _ as input,
-  p as item,
-  m as itemValue,
-  a as menu,
-  V as multiSelectInput,
-  l as portal,
-  c as root,
-  e as selectedValue,
-  o as slot,
-  S as srOnly
+  s as useTextTruncation
 };
 //# sourceMappingURL=fondue-components99.js.map

package/dist/fondue-components99.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components99.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components99.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBO,MAAMA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AACtC,YAAMC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IACzD,CAAC;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACH,CAAG,CAAC;AACZ;"}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { HTMLAttributeAnchorTarget } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { KeyboardEventHandler } from 'react';
+import { Locale } from 'date-fns';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import * as RadioGroupPrimitve from '@radix-ui/react-radio-group';
@@ -513,6 +514,57 @@ declare type CommonAriaProps = {
     'aria-haspopup'?: boolean;
 };
 
+export declare const DatePicker: typeof ForwardedRefSingleDatePicker & {
+    Range: typeof ForwardedRefRangeDatePicker;
+    Input: typeof ForwardedRefDatePickerInput;
+};
+
+declare type DatePickerBaseProps = {
+    /** The days to be disabled. */
+    disabledDates?: DisabledDates | DisabledDates[];
+    /** The test id applied to the wrapper and forwarded to DayPicker. */
+    'data-test-id'?: string;
+};
+
+declare type DatePickerDate = {
+    year: number;
+    month: number;
+    day: number;
+} | undefined;
+
+declare type DatePickerDateRange = {
+    from: DatePickerDate;
+    to: DatePickerDate;
+} | undefined;
+
+declare type DatePickerInputProps = {
+    id?: string;
+    /**
+     * The active date or date range in the date picker
+     */
+    selected?: DatePickerDateRange | DatePickerDate;
+    /**
+     * The open state of the date picker used to determine arrow state
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the date picker input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * callback for clearing the date
+     */
+    onClear?: () => void;
+    /**
+     * Event handler called when the date picker input is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The test id of the date picker input
+     */
+    'data-test-id'?: string;
+} & CommonAriaAttrs;
+
 export declare const Dialog: {
     Root: {
         ({ children, modal, onOpenChange, open }: DialogRootProps): JSX_2.Element;
@@ -672,6 +724,12 @@ declare type DialogTriggerProps = {
     'data-test-id'?: string;
 };
 
+declare type DisabledDates = {
+    before: Date;
+} | {
+    after: Date;
+};
+
 export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
 
 declare type DividerColor = 'weak' | 'default' | 'strong';
@@ -860,30 +918,60 @@ declare type DropdownTriggerProps = {
 
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
+export declare const EditableText: ForwardRefExoticComponent<EditableTextProps & RefAttributes<HTMLElement>>;
+
+declare type EditableTextProps = {
+    /**
+     * Callback fired with the plain text value when editing is confirmed (on blur or Enter).
+     * Only fires if the value has actually changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * When true, renders the child element instead of a default span,
+     * merging all editable props onto it.
+     */
+    asChild?: boolean;
+    /**
+     * When true, the EditableText only takes the width of the content.
+     * @default true
+     */
+    hugWidth?: boolean;
+    /**
+     * Accessible label for the editable text field.
+     */
+    'aria-label'?: string;
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
+
 declare const enUS: {
-    ColorPicker_selectColor: string;
-    ColorPicker_selectFormat: string;
-    ColorPicker_hexValue: string;
-    ColorPicker_redChannel: string;
-    ColorPicker_greenChannel: string;
-    ColorPicker_blueChannel: string;
-    ColorPicker_opacity: string;
-    Dialog_close: string;
-    Flyout_close: string;
-    Select_clear: string;
-    Select_toggleMenu: string;
-    Select_error: string;
-    Select_selectedCount: string;
-    Select_singleItemSelected: string;
-    Select_multipleItemsSelected: string;
-    Select_additionalItemsSelected: string;
-    Switch_defaultLabel: string;
-    Table_sortByDescending: string;
-    Table_sortByAscending: string;
-    Table_sortDescending: string;
-    Table_sortAscending: string;
-    Badge_dismiss: string;
-    Notice_dismiss: string;
+    translationStrings: {
+        ColorPicker_selectColor: string;
+        ColorPicker_selectFormat: string;
+        ColorPicker_hexValue: string;
+        ColorPicker_redChannel: string;
+        ColorPicker_greenChannel: string;
+        ColorPicker_blueChannel: string;
+        ColorPicker_opacity: string;
+        DatePicker_selectDate: string;
+        Dialog_close: string;
+        Flyout_close: string;
+        Select_clear: string;
+        Select_toggleMenu: string;
+        Select_error: string;
+        Select_selectedCount: string;
+        Select_singleItemSelected: string;
+        Select_multipleItemsSelected: string;
+        Select_additionalItemsSelected: string;
+        Switch_defaultLabel: string;
+        Table_sortByDescending: string;
+        Table_sortByAscending: string;
+        Table_sortDescending: string;
+        Table_sortAscending: string;
+        Badge_dismiss: string;
+        Notice_dismiss: string;
+    };
+    dateLocale: Locale;
 };
 
 /**
@@ -1067,12 +1155,26 @@ declare type FlyoutTriggerProps = {
 
 declare type FlyoutViewportCollisionPadding = 'compact' | 'spacious';
 
+declare const ForwardedRefDatePickerInput: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLDivElement>>;
+
+declare const ForwardedRefOrderableListRoot: ForwardRefExoticComponent<OrderableListProps & RefAttributes<HTMLUListElement>>;
+
+declare const ForwardedRefRangeDatePicker: ForwardRefExoticComponent<    {
+selected?: DatePickerDateRange;
+onChange?: (dateRange: DatePickerDateRange) => void;
+} & DatePickerBaseProps & RefAttributes<HTMLDivElement>>;
+
 declare const ForwardedRefSelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLLIElement>>;
 
 declare const ForwardedRefSelectItemGroup: ForwardRefExoticComponent<SelectItemGroupProps & RefAttributes<HTMLDivElement>>;
 
 declare const ForwardedRefSelectSlot: ForwardRefExoticComponent<SelectSlotProps & RefAttributes<HTMLDivElement>>;
 
+declare const ForwardedRefSingleDatePicker: ForwardRefExoticComponent<    {
+selected?: DatePickerDate;
+onChange?: (date?: DatePickerDate) => void;
+} & DatePickerBaseProps & RefAttributes<HTMLDivElement>>;
+
 declare const ForwardedRefTextareaRoot: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
 
 declare const ForwardedRefTextareaSlot: ForwardRefExoticComponent<TextareaSlotProps & RefAttributes<HTMLDivElement>>;
@@ -1503,6 +1605,76 @@ declare type NoticeSize = 'medium' | 'large';
 
 declare type NoticeVariant = 'default' | 'highlight' | 'positive' | 'danger' | 'warning';
 
+declare const OrderableItemCustomHandle: {
+    ({ children, asChild }: {
+        children: ReactNode;
+        asChild?: boolean;
+    }): JSX_2.Element;
+    displayName: string;
+};
+
+declare const OrderableItemDragHandle: {
+    (): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const OrderableList: {
+    Root: typeof ForwardedRefOrderableListRoot;
+    Item: typeof OrderableListItem;
+    ItemAction: typeof OrderableListItemAction;
+    CustomHandle: typeof OrderableItemCustomHandle;
+    DragHandle: typeof OrderableItemDragHandle;
+    ItemTitle: typeof OrderableListItemTitle;
+    ItemDescription: typeof OrderableListItemDescription;
+    ItemDecorator: typeof OrderableListItemDecorator;
+};
+
+declare type OrderableListDirection = 'vertical' | 'horizontal';
+
+declare const OrderableListItem: ForwardRefExoticComponent<OrderableListItemProps & RefAttributes<HTMLLIElement>>;
+
+declare const OrderableListItemAction: ForwardRefExoticComponent<OrderableListItemActionProps & RefAttributes<HTMLDivElement>>;
+
+declare type OrderableListItemActionProps = {
+    children: ReactNode;
+};
+
+declare const OrderableListItemDecorator: ForwardRefExoticComponent<    {
+children: ReactNode;
+} & RefAttributes<HTMLSpanElement>>;
+
+declare const OrderableListItemDescription: ForwardRefExoticComponent<    {
+children: ReactNode;
+asChild?: boolean;
+} & RefAttributes<HTMLSpanElement>>;
+
+declare type OrderableListItemPadding = 'none' | 'small';
+
+declare type OrderableListItemProps = {
+    children?: ReactNode;
+    id: string;
+    disabled?: boolean;
+    padding?: OrderableListItemPadding;
+    selected?: boolean;
+    onSelect?: (isSelected: boolean) => void;
+};
+
+declare type OrderableListItemSpacing = 'tight' | 'compact' | 'comfortable';
+
+declare const OrderableListItemTitle: ForwardRefExoticComponent<    {
+children: ReactNode;
+asChild?: boolean;
+} & RefAttributes<HTMLSpanElement>>;
+
+declare type OrderableListProps = {
+    children: ReactNode;
+    spacing?: OrderableListItemSpacing;
+    direction?: OrderableListDirection;
+    order: string[];
+    onOrderChange?: (order: string[]) => void;
+    'aria-label'?: string;
+};
+
 declare type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 
 declare type PositionValue = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
@@ -2491,7 +2663,7 @@ declare type TextareaSlotProps = {
     className?: string;
 };
 
-declare type TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';
+declare type TextColor = 'default' | 'weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';
 
 declare type TextElementMap = {
     a: HTMLAnchorElement;
@@ -2544,7 +2716,7 @@ declare type TextInputProps = {
      * Type of the text input
      * @default "text"
      */
-    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+    type?: 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
     /**
      * The placeholder in the text input
      */
@@ -2750,7 +2922,10 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-declare type Translations = typeof enUS;
+declare type Translations = {
+    translationStrings: typeof enUS.translationStrings;
+    dateLocale: Locale;
+};
 
 export declare const useFondueTheme: () => {
     dir: "ltr" | "rtl";