@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components140.js

@@ -0,0 +1,92 @@
+import { jsxs as S, jsx as f } from "react/jsx-runtime";
+import { useRef as m, useState as C, useEffect as _ } from "react";
+import { Badge as w } from "./fondue-components4.js";
+import { useTranslation as I } from "./fondue-components42.js";
+import p from "./fondue-components127.js";
+const W = 4, D = 40, E = 24, M = (r, h, u, o) => {
+  const g = r.offsetWidth;
+  let s = o ? E + W : 0, n = 0;
+  for (const d of u) {
+    const a = h.get(d.value);
+    if (!a)
+      continue;
+    const l = a.offsetWidth, i = n > 0 ? l + W : l, c = u.length - n - 1 > 0 ? D + W : 0;
+    if (s + i + c > g)
+      break;
+    s += i, n++;
+  }
+  return Math.max(1, n);
+}, x = ({
+  items: r,
+  placeholder: h,
+  onDismiss: u,
+  children: o,
+  selectedCount: g = 0
+}) => {
+  const { t: s } = I(), n = m(!1), d = m(null), a = m(/* @__PURE__ */ new Map()), [l, i] = C(r.length), b = o !== void 0;
+  if (_(() => {
+    const e = d.current;
+    if (!e)
+      return;
+    const v = () => {
+      if (r.length === 0) {
+        i(0);
+        return;
+      }
+      i(M(e, a.current, r, b));
+    }, t = new ResizeObserver(v);
+    return t.observe(e), () => {
+      t.disconnect();
+    };
+  }, [r, b]), r.length === 0 && !o)
+    return h;
+  const c = r.length - l, y = (e) => e === 1 ? s("Select_singleItemSelected") : e > 1 ? s("Select_multipleItemsSelected", { count: e.toString() }) : "";
+  return /* @__PURE__ */ S("div", { ref: d, className: p.badgesContainer, children: [
+    /* @__PURE__ */ f("span", { className: p.srOnly, "aria-live": "polite", "aria-atomic": "true", children: y(g) }),
+    o,
+    r.map((e, v) => /* @__PURE__ */ f(
+      "div",
+      {
+        ref: (t) => {
+          t ? a.current.set(e.value, t) : a.current.delete(e.value);
+        },
+        role: "presentation",
+        className: p.badgeWrapper,
+        "data-visible": v < l,
+        onKeyDown: (t) => {
+          (t.key === "Enter" || t.key === " ") && t.stopPropagation();
+        },
+        onMouseDown: () => {
+          n.current = !0;
+        },
+        children: /* @__PURE__ */ f(
+          w,
+          {
+            emphasis: "weak",
+            "aria-label": typeof e.displayValue == "string" ? e.displayValue : e.value,
+            onDismiss: (t) => {
+              t.stopPropagation(), u(e.value, n.current), n.current = !1;
+            },
+            children: e.displayValue
+          }
+        )
+      },
+      e.value
+    )),
+    c > 0 && /* @__PURE__ */ f(
+      "div",
+      {
+        className: p.badgeWrapper,
+        "aria-label": s("Select_additionalItemsSelected", { count: c.toString() }),
+        children: /* @__PURE__ */ S(w, { emphasis: "weak", "aria-hidden": "true", children: [
+          "+",
+          c
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  x as CollapsibleBadges
+};
+//# sourceMappingURL=fondue-components140.js.map

package/dist/fondue-components140.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components140.js","sources":["../src/components/Select/components/CollapsibleBadges.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { Badge } from '#/components/Badge/Badge';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nconst BADGE_GAP = 4;\nconst OVERFLOW_BADGE_MIN_WIDTH = 40;\nconst INPUT_MIN_WIDTH = 24;\n\ntype BadgeItem = {\n    value: string;\n    displayValue: ReactNode;\n};\n\ntype CollapsibleBadgesProps = {\n    items: BadgeItem[];\n    placeholder?: string;\n    onDismiss: (value: string, preventFocusRing: boolean) => void;\n    /** Optional children to render at the end (e.g., an input field). Space is reserved in the layout calculation. */\n    children?: ReactNode;\n    /** Total number of selected items (for screen reader announcements). */\n    selectedCount?: number;\n};\n\nconst calculateVisibleCount = (\n    container: HTMLDivElement,\n    badgeElements: Map<string, HTMLDivElement>,\n    items: BadgeItem[],\n    hasInputSlot: boolean,\n): number => {\n    const containerWidth = container.offsetWidth;\n    let usedWidth = hasInputSlot ? INPUT_MIN_WIDTH + BADGE_GAP : 0;\n    let count = 0;\n\n    for (const item of items) {\n        const badgeElement = badgeElements.get(item.value);\n        if (!badgeElement) {\n            continue;\n        }\n\n        const badgeWidth = badgeElement.offsetWidth;\n        const widthWithGap = count > 0 ? badgeWidth + BADGE_GAP : badgeWidth;\n        const hasMoreAfterThis = items.length - count - 1 > 0;\n        const reservedWidth = hasMoreAfterThis ? OVERFLOW_BADGE_MIN_WIDTH + BADGE_GAP : 0;\n\n        if (usedWidth + widthWithGap + reservedWidth > containerWidth) {\n            break;\n        }\n\n        usedWidth += widthWithGap;\n        count++;\n    }\n\n    return Math.max(1, count);\n};\n\nexport const CollapsibleBadges = ({\n    items,\n    placeholder,\n    onDismiss,\n    children,\n    selectedCount = 0,\n}: CollapsibleBadgesProps): ReactNode => {\n    const { t } = useTranslation();\n    const wasClickedRef = useRef(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const badgeElementsRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const [visibleCount, setVisibleCount] = useState(items.length);\n    const hasChildren = children !== undefined;\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return;\n        }\n\n        const recalculate = (): void => {\n            if (items.length === 0) {\n                setVisibleCount(0);\n                return;\n            }\n            setVisibleCount(calculateVisibleCount(container, badgeElementsRef.current, items, hasChildren));\n        };\n\n        const observer = new ResizeObserver(recalculate);\n        observer.observe(container);\n        return (): void => {\n            observer.disconnect();\n        };\n    }, [items, hasChildren]);\n\n    if (items.length === 0 && !children) {\n        return placeholder;\n    }\n\n    const overflowCount = items.length - visibleCount;\n\n    const getSelectedCountText = (count: number): string => {\n        if (count === 1) {\n            return t('Select_singleItemSelected');\n        }\n        if (count > 1) {\n            return t('Select_multipleItemsSelected', { count: count.toString() });\n        }\n        return '';\n    };\n\n    return (\n        <div ref={containerRef} className={styles.badgesContainer}>\n            <span className={styles.srOnly} aria-live=\"polite\" aria-atomic=\"true\">\n                {getSelectedCountText(selectedCount)}\n            </span>\n            {children}\n            {items.map((item, index) => (\n                <div\n                    key={item.value}\n                    ref={(element): void => {\n                        if (element) {\n                            badgeElementsRef.current.set(item.value, element);\n                        } else {\n                            badgeElementsRef.current.delete(item.value);\n                        }\n                    }}\n                    role=\"presentation\"\n                    className={styles.badgeWrapper}\n                    data-visible={index < visibleCount}\n                    onKeyDown={(event: KeyboardEvent<HTMLDivElement>): void => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onMouseDown={(): void => {\n                        wasClickedRef.current = true;\n                    }}\n                >\n                    <Badge\n                        emphasis=\"weak\"\n                        aria-label={typeof item.displayValue === 'string' ? item.displayValue : item.value}\n                        onDismiss={(event) => {\n                            event.stopPropagation();\n                            onDismiss(item.value, wasClickedRef.current);\n                            wasClickedRef.current = false;\n                        }}\n                    >\n                        {item.displayValue}\n                    </Badge>\n                </div>\n            ))}\n            {overflowCount > 0 && (\n                <div\n                    className={styles.badgeWrapper}\n                    aria-label={t('Select_additionalItemsSelected', { count: overflowCount.toString() })}\n                >\n                    <Badge emphasis=\"weak\" aria-hidden=\"true\">\n                        +{overflowCount}\n                    </Badge>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["BADGE_GAP","OVERFLOW_BADGE_MIN_WIDTH","INPUT_MIN_WIDTH","calculateVisibleCount","container","badgeElements","items","hasInputSlot","containerWidth","usedWidth","count","item","badgeElement","badgeWidth","widthWithGap","reservedWidth","CollapsibleBadges","placeholder","onDismiss","children","selectedCount","t","useTranslation","wasClickedRef","useRef","containerRef","badgeElementsRef","visibleCount","setVisibleCount","useState","hasChildren","useEffect","recalculate","observer","overflowCount","getSelectedCountText","styles","jsx","index","element","event","Badge","jsxs"],"mappings":"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"}

package/dist/fondue-components141.js

@@ -0,0 +1,84 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as p from "@radix-ui/react-popover";
+import { Slot as M } from "@radix-ui/react-slot";
+import { isValidElement as T } from "react";
+import { useFondueTheme as E, ThemeProvider as F } from "./fondue-components39.js";
+import a from "./fondue-components127.js";
+import { recursiveMap as R, getSelectOptionValue as _ } from "./fondue-components149.js";
+const j = ({
+  highlightedIndex: l,
+  getMenuProps: u,
+  getItemProps: m,
+  children: f,
+  filterText: d,
+  align: h,
+  side: P,
+  selectedItemValues: o,
+  hasInteractedSinceOpening: S,
+  viewportCollisionPadding: g = "compact",
+  onEscapeKeyDown: v
+}) => {
+  const O = (e) => {
+    e.preventDefault();
+  }, N = {
+    compact: 8,
+    spacious: 24
+  }, { theme: A, dir: n } = E(), C = (e) => n === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
+  return /* @__PURE__ */ r(p.Portal, { children: /* @__PURE__ */ r(F, { theme: A, dir: n, children: /* @__PURE__ */ r(
+    p.Content,
+    {
+      dir: n,
+      align: h,
+      side: C(P),
+      collisionPadding: N[g] + 8,
+      onOpenAutoFocus: O,
+      onEscapeKeyDown: v,
+      className: a.portal,
+      children: /* @__PURE__ */ r(
+        "ul",
+        {
+          className: a.menu,
+          ...u({}, { suppressRefError: !0 }),
+          "data-has-interacted": S ? "true" : "false",
+          "data-test-id": "fondue-select-menu",
+          children: R(
+            f,
+            (e, s) => {
+              if (((t) => (
+                // @ts-expect-error - We are explicitly checking for ref
+                T(t) && t.ref !== void 0
+              ))(e)) {
+                const t = _(e.props), i = m({
+                  item: t,
+                  index: s,
+                  ...e.ref ? { ref: e.ref } : {}
+                }), c = o == null ? void 0 : o.includes(t.value);
+                return /* @__PURE__ */ r(
+                  M,
+                  {
+                    className: a.item,
+                    "data-highlighted": l === s,
+                    "data-selected": c,
+                    onTouchStart: (D) => {
+                      i.onClick && i.onClick(D);
+                    },
+                    ...i,
+                    "aria-selected": c,
+                    children: e
+                  },
+                  e.props.value
+                );
+              }
+            },
+            d
+          ).parsedChildren
+        }
+      )
+    }
+  ) }) });
+};
+j.displayName = "Select.Menu";
+export {
+  j as SelectMenu
+};
+//# sourceMappingURL=fondue-components141.js.map

package/dist/fondue-components141.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components141.js","sources":["../src/components/Select/components/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItemValues?: string[];\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * @internal\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItemValues,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n    onEscapeKeyDown,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    dir={dir}\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItemValues?.includes(optionData.value);\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components142.js

@@ -0,0 +1,34 @@
+import { jsxs as c, Fragment as n, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as i, IconExclamationMarkTriangle as l } from "@frontify/fondue-icons";
+import { useTranslation as m } from "./fondue-components42.js";
+import s from "./fondue-components127.js";
+const f = ({ status: o, hasError: a, dataTestId: e }) => {
+  const { t } = m();
+  return /* @__PURE__ */ c(n, { children: [
+    o === "success" ? /* @__PURE__ */ r(
+      i,
+      {
+        size: 16,
+        className: s.iconSuccess,
+        "data-test-id": `${e}-success-icon`,
+        "aria-hidden": "true"
+      }
+    ) : null,
+    a ? /* @__PURE__ */ c(n, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          size: 16,
+          className: s.iconError,
+          "data-test-id": `${e}-error-icon`,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: s.srOnly, role: "alert", children: t("Select_error") })
+    ] }) : null
+  ] });
+};
+export {
+  f as StatusIcons
+};
+//# sourceMappingURL=fondue-components142.js.map

package/dist/fondue-components142.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components142.js","sources":["../src/components/Select/components/StatusIcons.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\ntype StatusIconsProps = {\n    /** The current status of the component. */\n    status: 'neutral' | 'success' | 'error';\n    /** Whether the component is in an error state (may differ from status when validation is involved). */\n    hasError: boolean;\n    /** The data-test-id prefix for the icons. */\n    dataTestId: string;\n};\n\nexport const StatusIcons = ({ status, hasError, dataTestId }: StatusIconsProps): ReactNode => {\n    const { t } = useTranslation();\n    return (\n        <>\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className={styles.iconSuccess}\n                    data-test-id={`${dataTestId}-success-icon`}\n                    aria-hidden=\"true\"\n                />\n            ) : null}\n            {hasError ? (\n                <>\n                    <IconExclamationMarkTriangle\n                        size={16}\n                        className={styles.iconError}\n                        data-test-id={`${dataTestId}-error-icon`}\n                        aria-hidden=\"true\"\n                    />\n                    <span className={styles.srOnly} role=\"alert\">\n                        {t('Select_error')}\n                    </span>\n                </>\n            ) : null}\n        </>\n    );\n};\n"],"names":["StatusIcons","status","hasError","dataTestId","useTranslation","jsxs","Fragment","jsx","IconCheckMark","styles","IconExclamationMarkTriangle"],"mappings":";;;;AAkBO,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,QAA8C;AAC1F,QAAM,EAAE,EAAA,IAAMC,EAAA;AACd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAL,MAAW,YACR,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWC,EAAO;AAAA,QAClB,gBAAc,GAAGN,CAAU;AAAA,QAC3B,eAAY;AAAA,MAAA;AAAA,IAAA,IAEhB;AAAA,IACHD,IACG,gBAAAG,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAWD,EAAO;AAAA,UAClB,gBAAc,GAAGN,CAAU;AAAA,UAC3B,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAI,EAAC,UAAK,WAAWE,EAAO,QAAQ,MAAK,SAChC,UAAA,EAAE,cAAc,EAAA,CACrB;AAAA,IAAA,EAAA,CACJ,IACA;AAAA,EAAA,GACR;AAER;"}

package/dist/fondue-components143.js

@@ -0,0 +1,22 @@
+import { formatDistance as o } from "./fondue-components150.js";
+import { formatLong as t } from "./fondue-components151.js";
+import { formatRelative as a } from "./fondue-components152.js";
+import { localize as r } from "./fondue-components153.js";
+import { match as e } from "./fondue-components154.js";
+const s = {
+  code: "en-US",
+  formatDistance: o,
+  formatLong: t,
+  formatRelative: a,
+  localize: r,
+  match: e,
+  options: {
+    weekStartsOn: 0,
+    firstWeekContainsDate: 1
+  }
+};
+export {
+  s as default,
+  s as enUS
+};
+//# sourceMappingURL=fondue-components143.js.map

package/dist/fondue-components143.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components143.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US.mjs"],"sourcesContent":["import { formatDistance } from \"./en-US/_lib/formatDistance.mjs\";\nimport { formatLong } from \"./en-US/_lib/formatLong.mjs\";\nimport { formatRelative } from \"./en-US/_lib/formatRelative.mjs\";\nimport { localize } from \"./en-US/_lib/localize.mjs\";\nimport { match } from \"./en-US/_lib/match.mjs\";\n\n/**\n * @category Locales\n * @summary English locale (United States).\n * @language English\n * @iso-639-2 eng\n * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)\n * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)\n */\nexport const enUS = {\n  code: \"en-US\",\n  formatDistance: formatDistance,\n  formatLong: formatLong,\n  formatRelative: formatRelative,\n  localize: localize,\n  match: match,\n  options: {\n    weekStartsOn: 0 /* Sunday */,\n    firstWeekContainsDate: 1,\n  },\n};\n\n// Fallback for modularized imports:\nexport default enUS;\n"],"names":["enUS","formatDistance","formatLong","formatRelative","localize","match"],"mappings":";;;;;AAcY,MAACA,IAAO;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgBC;AAAA,EAChB,YAAYC;AAAA,EACZ,gBAAgBC;AAAA,EAChB,UAAUC;AAAA,EACV,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,cAAc;AAAA,IACd,uBAAuB;AAAA,EAC3B;AACA;","x_google_ignoreList":[0]}

package/dist/fondue-components144.js

@@ -0,0 +1,73 @@
+import { CollisionPriority as a, CollisionType as u } from "@dnd-kit/abstract";
+import { Rectangle as p, Point as s } from "./fondue-components147.js";
+var m = ({
+  dragOperation: t,
+  droppable: n
+}) => {
+  const e = t.position.current;
+  if (!e)
+    return null;
+  const { id: r } = n;
+  if (!n.shape)
+    return null;
+  if (n.shape.containsPoint(e)) {
+    const i = s.distance(n.shape.center, e);
+    return {
+      id: r,
+      value: 1 / i,
+      type: u.PointerIntersection,
+      priority: a.High
+    };
+  }
+  return null;
+}, y = ({
+  dragOperation: t,
+  droppable: n
+}) => {
+  const { shape: e } = t;
+  if (!n.shape || !(e != null && e.current))
+    return null;
+  const r = e.current.intersectionArea(n.shape);
+  if (r) {
+    const { position: i } = t, o = s.distance(n.shape.center, i.current), c = r / (e.current.area + n.shape.area - r) / o;
+    return {
+      id: n.id,
+      value: c,
+      type: u.ShapeIntersection,
+      priority: a.Normal
+    };
+  }
+  return null;
+}, R = (t) => {
+  var n;
+  return (n = m(t)) != null ? n : y(t);
+}, I = (t) => {
+  const { dragOperation: n, droppable: e } = t, { shape: r, position: i } = n;
+  if (!e.shape)
+    return null;
+  const o = r ? p.from(r.current.boundingRectangle).corners : void 0, c = p.from(
+    e.shape.boundingRectangle
+  ).corners.reduce(
+    (d, v, f) => {
+      var l;
+      return d + s.distance(
+        s.from(v),
+        (l = o == null ? void 0 : o[f]) != null ? l : i.current
+      );
+    },
+    0
+  ) / 4;
+  return {
+    id: e.id,
+    value: 1 / c,
+    type: u.Collision,
+    priority: a.Normal
+  };
+};
+export {
+  I as closestCorners,
+  R as defaultCollisionDetection,
+  m as pointerIntersection,
+  y as shapeIntersection
+};
+//# sourceMappingURL=fondue-components144.js.map

package/dist/fondue-components144.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components144.js","sources":["../../../node_modules/.pnpm/@dnd-kit+collision@0.3.2/node_modules/@dnd-kit/collision/dist/index.js"],"sourcesContent":["// src/algorithms/pointerIntersection.ts\nimport { CollisionPriority, CollisionType } from \"@dnd-kit/abstract\";\nimport { Point } from \"@dnd-kit/geometry\";\nvar pointerIntersection = ({\n  dragOperation,\n  droppable\n}) => {\n  const pointerCoordinates = dragOperation.position.current;\n  if (!pointerCoordinates) {\n    return null;\n  }\n  const { id } = droppable;\n  if (!droppable.shape) {\n    return null;\n  }\n  if (droppable.shape.containsPoint(pointerCoordinates)) {\n    const distance = Point.distance(droppable.shape.center, pointerCoordinates);\n    return {\n      id,\n      value: 1 / distance,\n      type: CollisionType.PointerIntersection,\n      priority: CollisionPriority.High\n    };\n  }\n  return null;\n};\n\n// src/algorithms/shapeIntersection.ts\nimport { CollisionPriority as CollisionPriority2, CollisionType as CollisionType2 } from \"@dnd-kit/abstract\";\nimport { Point as Point2 } from \"@dnd-kit/geometry\";\nvar shapeIntersection = ({\n  dragOperation,\n  droppable\n}) => {\n  const { shape } = dragOperation;\n  if (!droppable.shape || !(shape == null ? void 0 : shape.current)) {\n    return null;\n  }\n  const intersectionArea = shape.current.intersectionArea(droppable.shape);\n  if (intersectionArea) {\n    const { position } = dragOperation;\n    const distance = Point2.distance(droppable.shape.center, position.current);\n    const intersectionRatio = intersectionArea / (shape.current.area + droppable.shape.area - intersectionArea);\n    const value = intersectionRatio / distance;\n    return {\n      id: droppable.id,\n      value,\n      type: CollisionType2.ShapeIntersection,\n      priority: CollisionPriority2.Normal\n    };\n  }\n  return null;\n};\n\n// src/algorithms/default.ts\nvar defaultCollisionDetection = (args) => {\n  var _a;\n  return (_a = pointerIntersection(args)) != null ? _a : shapeIntersection(args);\n};\n\n// src/algorithms/closestCorners.ts\nimport { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from \"@dnd-kit/abstract\";\nimport { Point as Point3, Rectangle } from \"@dnd-kit/geometry\";\nvar closestCorners = (input) => {\n  const { dragOperation, droppable } = input;\n  const { shape, position } = dragOperation;\n  if (!droppable.shape) {\n    return null;\n  }\n  const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;\n  const distance = Rectangle.from(\n    droppable.shape.boundingRectangle\n  ).corners.reduce(\n    (acc, corner, index) => {\n      var _a;\n      return acc + Point3.distance(\n        Point3.from(corner),\n        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current\n      );\n    },\n    0\n  );\n  const value = distance / 4;\n  return {\n    id: droppable.id,\n    value: 1 / value,\n    type: CollisionType3.Collision,\n    priority: CollisionPriority3.Normal\n  };\n};\n\n// src/algorithms/closestCenter.ts\nimport { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from \"@dnd-kit/abstract\";\nimport { Point as Point4 } from \"@dnd-kit/geometry\";\nvar closestCenter = (input) => {\n  var _a;\n  const { dragOperation, droppable } = input;\n  const { shape, position } = dragOperation;\n  if (!droppable.shape) {\n    return null;\n  }\n  const collision = defaultCollisionDetection(input);\n  if (collision) {\n    return collision;\n  }\n  const distance = Point4.distance(\n    droppable.shape.center,\n    (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current\n  );\n  const value = 1 / distance;\n  return {\n    id: droppable.id,\n    value,\n    type: CollisionType4.Collision,\n    priority: CollisionPriority4.Normal\n  };\n};\n\n// src/algorithms/directionBiased.ts\nimport { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from \"@dnd-kit/abstract\";\nimport { Point as Point5 } from \"@dnd-kit/geometry\";\nvar directionBiased = ({\n  dragOperation,\n  droppable\n}) => {\n  if (!droppable.shape) {\n    return null;\n  }\n  const { position, shape } = dragOperation;\n  const { direction } = position;\n  if (!shape) {\n    return null;\n  }\n  if (direction === null) {\n    return defaultCollisionDetection({ dragOperation, droppable });\n  }\n  const { center } = shape.current;\n  const rect = droppable.shape.boundingRectangle;\n  const isBelow = rect.bottom >= center.y;\n  const isAbove = rect.top <= center.y;\n  const isLeft = rect.left <= center.x;\n  const isRight = rect.right >= center.x;\n  if (direction === \"down\" && isBelow || direction === \"up\" && isAbove || direction === \"left\" && isLeft || direction === \"right\" && isRight) {\n    const distance = Point5.distance(droppable.shape.center, center);\n    const value = distance === 0 ? 1 : 1 / distance;\n    return {\n      id: droppable.id,\n      value,\n      type: CollisionType5.Collision,\n      priority: CollisionPriority5.Normal\n    };\n  }\n  return null;\n};\n\n// src/algorithms/pointerDistance.ts\nimport { CollisionPriority as CollisionPriority6, CollisionType as CollisionType6 } from \"@dnd-kit/abstract\";\nimport { Point as Point6 } from \"@dnd-kit/geometry\";\nvar pointerDistance = (input) => {\n  const { dragOperation, droppable } = input;\n  const { position } = dragOperation;\n  if (!droppable.shape) {\n    return null;\n  }\n  const distance = Point6.distance(droppable.shape.center, position.current);\n  const value = 1 / distance;\n  return {\n    id: droppable.id,\n    value,\n    type: CollisionType6.Collision,\n    priority: CollisionPriority6.Normal\n  };\n};\nexport {\n  closestCenter,\n  closestCorners,\n  defaultCollisionDetection,\n  directionBiased,\n  pointerDistance,\n  pointerIntersection,\n  shapeIntersection\n};\n"],"names":["pointerIntersection","dragOperation","droppable","pointerCoordinates","id","distance","Point","CollisionType","CollisionPriority","shapeIntersection","shape","intersectionArea","position","Point2","value","CollisionType2","CollisionPriority2","defaultCollisionDetection","args","_a","closestCorners","input","shapeCorners","Rectangle","acc","corner","index","Point3","CollisionType3","CollisionPriority3"],"mappings":";;AAGG,IAACA,IAAsB,CAAC;AAAA,EACzB,eAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAqBF,EAAc,SAAS;AAClD,MAAI,CAACE;AACH,WAAO;AAET,QAAM,EAAE,IAAAC,EAAE,IAAKF;AACf,MAAI,CAACA,EAAU;AACb,WAAO;AAET,MAAIA,EAAU,MAAM,cAAcC,CAAkB,GAAG;AACrD,UAAME,IAAWC,EAAM,SAASJ,EAAU,MAAM,QAAQC,CAAkB;AAC1E,WAAO;AAAA,MACL,IAAAC;AAAA,MACA,OAAO,IAAIC;AAAA,MACX,MAAME,EAAc;AAAA,MACpB,UAAUC,EAAkB;AAAA,IAClC;AAAA,EACE;AACA,SAAO;AACT,GAKIC,IAAoB,CAAC;AAAA,EACvB,eAAAR;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAM,EAAE,OAAAQ,EAAK,IAAKT;AAClB,MAAI,CAACC,EAAU,SAAS,EAAEQ,KAAS,QAAgBA,EAAM;AACvD,WAAO;AAET,QAAMC,IAAmBD,EAAM,QAAQ,iBAAiBR,EAAU,KAAK;AACvE,MAAIS,GAAkB;AACpB,UAAM,EAAE,UAAAC,EAAQ,IAAKX,GACfI,IAAWQ,EAAO,SAASX,EAAU,MAAM,QAAQU,EAAS,OAAO,GAEnEE,IADoBH,KAAoBD,EAAM,QAAQ,OAAOR,EAAU,MAAM,OAAOS,KACxDN;AAClC,WAAO;AAAA,MACL,IAAIH,EAAU;AAAA,MACd,OAAAY;AAAA,MACA,MAAMC,EAAe;AAAA,MACrB,UAAUC,EAAmB;AAAA,IACnC;AAAA,EACE;AACA,SAAO;AACT,GAGIC,IAA4B,CAACC,MAAS;AACxC,MAAIC;AACJ,UAAQA,IAAKnB,EAAoBkB,CAAI,MAAM,OAAOC,IAAKV,EAAkBS,CAAI;AAC/E,GAKIE,IAAiB,CAACC,MAAU;AAC9B,QAAM,EAAE,eAAApB,GAAe,WAAAC,EAAS,IAAKmB,GAC/B,EAAE,OAAAX,GAAO,UAAAE,EAAQ,IAAKX;AAC5B,MAAI,CAACC,EAAU;AACb,WAAO;AAET,QAAMoB,IAAeZ,IAAQa,EAAU,KAAKb,EAAM,QAAQ,iBAAiB,EAAE,UAAU,QAajFI,IAZWS,EAAU;AAAA,IACzBrB,EAAU,MAAM;AAAA,EACpB,EAAI,QAAQ;AAAA,IACR,CAACsB,GAAKC,GAAQC,MAAU;AACtB,UAAIP;AACJ,aAAOK,IAAMG,EAAO;AAAA,QAClBA,EAAO,KAAKF,CAAM;AAAA,SACjBN,IAAKG,KAAgB,OAAO,SAASA,EAAaI,CAAK,MAAM,OAAOP,IAAKP,EAAS;AAAA,MAC3F;AAAA,IACI;AAAA,IACA;AAAA,EACJ,IAC2B;AACzB,SAAO;AAAA,IACL,IAAIV,EAAU;AAAA,IACd,OAAO,IAAIY;AAAA,IACX,MAAMc,EAAe;AAAA,IACrB,UAAUC,EAAmB;AAAA,EACjC;AACA;","x_google_ignoreList":[0]}