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

package/dist/fondue-components57.js

@@ -1,8 +1,18 @@
-const o = "_root_wpwbd_6", t = {
-  root: o
+const o = "_root_rlb6a_6", r = "_overlay_rlb6a_51", e = "_header_rlb6a_68", _ = "_body_rlb6a_93", t = "_footer_rlb6a_122", a = "_close_rlb6a_147", l = {
+  root: o,
+  overlay: r,
+  header: e,
+  body: _,
+  footer: t,
+  close: a
 };
 export {
-  t as default,
+  _ as body,
+  a as close,
+  l as default,
+  t as footer,
+  e as header,
+  r as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components57.js.map

package/dist/fondue-components57.js.map

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

package/dist/fondue-components58.js

@@ -1,16 +1,8 @@
-const o = "_root_n4kjj_6", e = "_overlay_n4kjj_51", t = "_header_n4kjj_68", _ = "_body_n4kjj_93", r = "_footer_n4kjj_122", n = {
-  root: o,
-  overlay: e,
-  header: t,
-  body: _,
-  footer: r
+const o = "_root_1b3p9_6", t = {
+  root: o
 };
 export {
-  _ as body,
-  n as default,
-  r as footer,
-  t as header,
-  e as overlay,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components58.js.map

package/dist/fondue-components58.js.map

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

package/dist/fondue-components59.js

@@ -1,8 +1,22 @@
-const o = "_root_1b3p9_6", t = {
-  root: o
+const o = "_root_1brlo_2", r = {
+  root: o,
+  "size-medium": "_size-medium_1brlo_6",
+  "size-large": "_size-large_1brlo_11",
+  "size-x-large": "_size-x-large_1brlo_16",
+  "size-xx-large": "_size-xx-large_1brlo_21",
+  "weight-default": "_weight-default_1brlo_26",
+  "weight-strong": "_weight-strong_1brlo_30",
+  "color-default": "_color-default_1brlo_34",
+  "color-weak": "_color-weak_1brlo_38",
+  "color-x-weak": "_color-x-weak_1brlo_42",
+  "color-disabled": "_color-disabled_1brlo_46",
+  "color-negative": "_color-negative_1brlo_50",
+  "color-positive": "_color-positive_1brlo_54",
+  "color-warning": "_color-warning_1brlo_58",
+  "color-interactive": "_color-interactive_1brlo_62"
 };
 export {
-  t as default,
+  r as default,
   o as root
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

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

package/dist/fondue-components6.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { cn as x } from "./fondue-components40.js";
-import { buttonStyles as S } from "./fondue-components41.js";
-import { iconStyles as k } from "./fondue-components42.js";
-import { textStyles as B } from "./fondue-components43.js";
+import { cn as x } from "./fondue-components39.js";
+import { buttonStyles as S } from "./fondue-components40.js";
+import { iconStyles as k } from "./fondue-components41.js";
+import { textStyles as B } from "./fondue-components42.js";
 const C = y(
   ({
     children: f,

package/dist/fondue-components60.js

@@ -1,21 +1,14 @@
-const r = "_root_1ri4z_2", i = {
-  root: r,
-  "size-medium": "_size-medium_1ri4z_6",
-  "size-large": "_size-large_1ri4z_11",
-  "size-x-large": "_size-x-large_1ri4z_16",
-  "size-xx-large": "_size-xx-large_1ri4z_21",
-  "weight-default": "_weight-default_1ri4z_26",
-  "weight-strong": "_weight-strong_1ri4z_30",
-  "color-default": "_color-default_1ri4z_34",
-  "color-weak": "_color-weak_1ri4z_38",
-  "color-disabled": "_color-disabled_1ri4z_42",
-  "color-negative": "_color-negative_1ri4z_46",
-  "color-positive": "_color-positive_1ri4z_50",
-  "color-warning": "_color-warning_1ri4z_54",
-  "color-interactive": "_color-interactive_1ri4z_58"
+const t = "_root_kwmbr_3", e = "_contentArea_kwmbr_66", o = "_hiddenText_kwmbr_71", n = "_visibleText_kwmbr_77", _ = {
+  root: t,
+  contentArea: e,
+  hiddenText: o,
+  visibleText: n
 };
 export {
-  i as default,
-  r as root
+  e as contentArea,
+  _ as default,
+  o as hiddenText,
+  t as root,
+  n as visibleText
 };
 //# sourceMappingURL=fondue-components60.js.map

package/dist/fondue-components60.js.map

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

package/dist/fondue-components61.js

@@ -1,14 +1,38 @@
-const t = "_root_1h7zi_3", e = "_contentArea_1h7zi_71", o = "_hiddenText_1h7zi_76", n = "_visibleText_1h7zi_82", i = {
-  root: t,
-  contentArea: e,
-  hiddenText: o,
-  visibleText: n
-};
+import { sv as t } from "./fondue-components39.js";
+const i = t({
+  base: "tw-relative tw-w-full tw-overflow-hidden",
+  variants: {
+    rounded: {
+      true: "tw-rounded"
+    },
+    size: {
+      small: "tw-h-1",
+      medium: "tw-h-2",
+      large: "tw-h-3",
+      "x-large": "tw-h-4"
+    },
+    variant: {
+      default: "tw-bg-box-selected",
+      positive: "tw-bg-box-positive",
+      negative: "tw-bg-box-negative"
+    }
+  }
+}), a = t({
+  base: "tw-h-full tw-w-full",
+  variants: {
+    variant: {
+      default: "tw-bg-text-interactive",
+      positive: "tw-bg-text-positive",
+      negative: "tw-bg-text-negative"
+    },
+    indeterminateState: {
+      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
+      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
+    }
+  }
+});
 export {
-  e as contentArea,
-  i as default,
-  o as hiddenText,
-  t as root,
-  n as visibleText
+  i as loadingBarContainerStyles,
+  a as loadingBarStyles
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components61.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACd;AAER,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEd,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}

package/dist/fondue-components62.js

@@ -1,40 +1,8 @@
-const o = "_root_18l9z_2", l = "_truncate_18l9z_138", r = "_disabled_18l9z_144", _ = {
-  root: o,
-  "size-xx-small": "_size-xx-small_18l9z_8",
-  "size-x-small": "_size-x-small_18l9z_14",
-  "size-small": "_size-small_18l9z_20",
-  "size-medium": "_size-medium_18l9z_26",
-  "size-large": "_size-large_18l9z_32",
-  "size-x-large": "_size-x-large_18l9z_38",
-  "size-xx-large": "_size-xx-large_18l9z_44",
-  "weight-regular": "_weight-regular_18l9z_50",
-  "weight-medium": "_weight-medium_18l9z_54",
-  "weight-bold": "_weight-bold_18l9z_58",
-  "wrap-wrap": "_wrap-wrap_18l9z_62",
-  "wrap-nowrap": "_wrap-nowrap_18l9z_66",
-  "underline-auto": "_underline-auto_18l9z_70",
-  "underline-always": "_underline-always_18l9z_74",
-  "underline-hover": "_underline-hover_18l9z_78",
-  "underline-none": "_underline-none_18l9z_86",
-  "color-primary": "_color-primary_18l9z_90",
-  "color-secondary": "_color-secondary_18l9z_94",
-  "color-error": "_color-error_18l9z_98",
-  "color-success": "_color-success_18l9z_102",
-  "color-warning": "_color-warning_18l9z_106",
-  "color-highlight": "_color-highlight_18l9z_110",
-  "color-on-container-secondary": "_color-on-container-secondary_18l9z_114",
-  "color-on-container-disabled": "_color-on-container-disabled_18l9z_118",
-  "color-on-container-error": "_color-on-container-error_18l9z_122",
-  "color-on-container-success": "_color-on-container-success_18l9z_126",
-  "color-on-container-warning": "_color-on-container-warning_18l9z_130",
-  "color-on-container-highlight": "_color-on-container-highlight_18l9z_134",
-  truncate: l,
-  disabled: r
+const o = "_root_1hks3_8", t = {
+  root: o
 };
 export {
-  _ as default,
-  r as disabled,
-  o as root,
-  l as truncate
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

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

package/dist/fondue-components63.js

@@ -1,38 +1,16 @@
-import { sv as t } from "./fondue-components40.js";
-const i = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
-  variants: {
-    rounded: {
-      true: "tw-rounded-medium"
-    },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
-    },
-    variant: {
-      default: "tw-bg-container-highlight",
-      positive: "tw-bg-container-success",
-      negative: "tw-bg-container-error"
-    }
-  }
-}), a = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    variant: {
-      default: "tw-bg-highlight",
-      positive: "tw-bg-success",
-      negative: "tw-bg-error"
-    },
-    indeterminateState: {
-      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
-      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
-    }
-  }
-});
+const o = "_root_1bhxy_4", r = "_viewport_1bhxy_12", t = "_scrollbar_1bhxy_43", _ = "_thumb_1bhxy_75", c = "_corner_1bhxy_93", s = {
+  root: o,
+  viewport: r,
+  scrollbar: t,
+  thumb: _,
+  corner: c
+};
 export {
-  i as loadingBarContainerStyles,
-  a as loadingBarStyles
+  c as corner,
+  s as default,
+  o as root,
+  t as scrollbar,
+  _ as thumb,
+  r as viewport
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components63.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded-medium',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-container-highlight',\n            positive: 'tw-bg-container-success',\n            negative: 'tw-bg-container-error',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-highlight',\n            positive: 'tw-bg-success',\n            negative: 'tw-bg-error',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACd;AAER,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEd,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}
+{"version":3,"file":"fondue-components63.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components64.js

@@ -1,4 +1,4 @@
-const o = "_root_jkymp_8", t = {
+const o = "_root_f9dx4_6", t = {
   root: o
 };
 export {

package/dist/fondue-components65.js

@@ -1,16 +1,28 @@
-const r = "_root_71r9v_4", o = "_viewport_71r9v_12", t = "_scrollbar_71r9v_43", _ = "_thumb_71r9v_75", c = "_corner_71r9v_93", s = {
-  root: r,
-  viewport: o,
-  scrollbar: t,
-  thumb: _,
-  corner: c
+import { useMemo as f, useCallback as d, useState as v, useRef as m, useEffect as S } from "react";
+const U = ({
+  prop: s,
+  defaultProp: c,
+  onChange: t = () => {
+  }
+}) => {
+  const [n, o] = b({ defaultProp: c, onChange: t }), e = s !== void 0, i = e ? s : n, r = f(() => t, [t]), a = d(
+    (l) => {
+      if (e) {
+        const u = typeof l == "function" ? l(s) : l;
+        u !== s && r(u);
+      } else
+        o(l);
+    },
+    [e, s, o, r]
+  );
+  return [i, a];
+}, b = ({ defaultProp: s, onChange: c }) => {
+  const [t, n] = v(s), o = m(t), e = f(() => c, [c]);
+  return S(() => {
+    o.current !== t && (e == null || e(t), o.current = t);
+  }, [t, o, e]), [t, n];
 };
 export {
-  c as corner,
-  s as default,
-  r as root,
-  t as scrollbar,
-  _ as thumb,
-  o as viewport
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components65.js.map

package/dist/fondue-components65.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components65.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"fondue-components65.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAc,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBC,KAAA,QAAAA,EAAeD,IACfO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACA,GAAOO,GAAcN,CAAY,CAAC,GAE/B,CAACD,GAAOG,CAAQ;AAC3B;"}

package/dist/fondue-components66.js

@@ -1,8 +1,20 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
+const e = "_root_nerqc_5", t = "_item_nerqc_33", c = "_itemLabel_nerqc_54", a = "_itemLabelActive_nerqc_75", i = "_itemLabelInactive_nerqc_105", n = "_activeIndicator_nerqc_135", o = "_separator_nerqc_262", _ = {
+  root: e,
+  item: t,
+  itemLabel: c,
+  itemLabelActive: a,
+  itemLabelInactive: i,
+  activeIndicator: n,
+  separator: o
 };
 export {
-  t as default,
-  o as root
+  n as activeIndicator,
+  _ as default,
+  t as item,
+  c as itemLabel,
+  a as itemLabelActive,
+  i as itemLabelInactive,
+  e as root,
+  o as separator
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components66.js.map

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

package/dist/fondue-components67.js

@@ -1,28 +1,155 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as m, useEffect as S } from "react";
-const U = ({
-  prop: s,
-  defaultProp: c,
-  onChange: t = () => {
-  }
-}) => {
-  const [n, o] = b({ defaultProp: c, onChange: t }), e = s !== void 0, i = e ? s : n, r = f(() => t, [t]), a = d(
-    (l) => {
-      if (e) {
-        const u = typeof l == "function" ? l(s) : l;
-        u !== s && r(u);
-      } else
-        o(l);
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { IconCaretDown as Q, IconCheckMark as U, IconExclamationMarkTriangle as W } from "@frontify/fondue-icons";
+import * as B from "@radix-ui/react-popover";
+import { Slot as X } from "@radix-ui/react-slot";
+import { useCombobox as Y } from "downshift";
+import { forwardRef as Z, useState as A, useRef as ee, useMemo as te } from "react";
+import { LoadingCircle as oe } from "./fondue-components18.js";
+import { ForwardedRefSelectSlot as re } from "./fondue-components70.js";
+import { useTranslation as ae } from "./fondue-components34.js";
+import { SelectMenu as le } from "./fondue-components69.js";
+import o from "./fondue-components71.js";
+import { useSelectData as ne } from "./fondue-components72.js";
+const L = ({
+  children: M,
+  onSelect: i,
+  value: O,
+  defaultValue: v,
+  placeholder: F = "",
+  status: s = "neutral",
+  disabled: f,
+  "data-test-id": r = "fondue-select-combobox",
+  alignMenu: P = "start",
+  side: k = "bottom",
+  id: y,
+  viewportCollisionPadding: z = "compact",
+  getAsyncItems: c,
+  ...a
+}, D) => {
+  const { t: H } = ae(), { inputSlots: V, menuSlots: $, items: u, filterText: T, clearButton: h, getItemByValue: p, setFilterText: b, asyncItemStatus: C } = ne(M, c), [j, x] = A(!1), {
+    getInputProps: d,
+    getToggleButtonProps: E,
+    getMenuProps: _,
+    getItemProps: q,
+    reset: w,
+    selectedItem: l,
+    isOpen: S,
+    highlightedIndex: G,
+    inputValue: m
+  } = Y({
+    items: u,
+    selectedItem: p(O),
+    defaultSelectedItem: p(v),
+    defaultHighlightedIndex: 0,
+    toggleButtonId: y,
+    labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      i == null || i((e == null ? void 0 : e.value) ?? null);
     },
-    [e, s, o, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: s, onChange: c }) => {
-  const [t, n] = v(s), o = m(t), e = f(() => c, [c]);
-  return S(() => {
-    o.current !== t && (e == null || e(t), o.current = t);
-  }, [t, o, e]), [t, n];
+    onInputValueChange: ({ inputValue: e }) => {
+      b(e);
+    },
+    onIsOpenChange: () => {
+      x(!1), b("");
+    },
+    onHighlightedIndexChange: () => {
+      x(!0);
+    },
+    itemToString: (e) => e ? e.label : ""
+  }), n = ee(!1), J = te(
+    () => !c && !u.find((e) => e.label.toLowerCase().includes(m.toLowerCase())),
+    [m, u, c]
+  ), K = (e) => {
+    var N, R;
+    e.target.dataset.showFocusRing = "false", n.current = !1, (l == null ? void 0 : l.label.toLocaleLowerCase()) !== m.toLocaleLowerCase() && w(), d().onBlur && ((R = (N = d()).onBlur) == null || R.call(N, e));
+  }, I = J || !!C.error || s === "error";
+  return /* @__PURE__ */ g(B.Root, { open: S, children: [
+    /* @__PURE__ */ t(B.Anchor, { asChild: !0, children: /* @__PURE__ */ g("div", { ref: D, className: o.root, "data-status": I ? "error" : s, children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          ...d({
+            "aria-label": "aria-label" in a ? a["aria-label"] : void 0
+          }),
+          "data-test-id": r,
+          placeholder: F,
+          className: o.input,
+          disabled: f,
+          onMouseDown: (e) => {
+            n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          },
+          onFocus: (e) => {
+            n.current || (e.target.dataset.showFocusRing = "true");
+          },
+          onBlur: K
+        }
+      ),
+      V,
+      h ? /* @__PURE__ */ t(
+        X,
+        {
+          onClick: (e) => {
+            e.stopPropagation(), w();
+          },
+          className: o.clear,
+          role: "button",
+          children: h
+        }
+      ) : null,
+      C.isLoading && S ? /* @__PURE__ */ t(re, { name: "right", "data-test-id": `${r}-right-slot`, children: /* @__PURE__ */ t(oe, { size: "x-small", "data-test-id": `${r}-loading-circle` }) }) : null,
+      /* @__PURE__ */ g("div", { className: o.icons, children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            "aria-label": H("Select_toggleMenu"),
+            ...E(),
+            type: "button",
+            disabled: f,
+            onMouseDown: () => {
+              n.current = !0;
+            },
+            children: /* @__PURE__ */ t(Q, { size: 16, className: o.caret })
+          }
+        ),
+        s === "success" ? /* @__PURE__ */ t(
+          U,
+          {
+            size: 16,
+            className: o.iconSuccess,
+            "data-test-id": `${r}-success-icon`
+          }
+        ) : null,
+        I ? /* @__PURE__ */ t(
+          W,
+          {
+            size: 16,
+            className: o.iconError,
+            "data-test-id": `${r}-error-icon`
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t(
+      le,
+      {
+        align: P,
+        side: k,
+        highlightedIndex: G,
+        filterText: T,
+        getMenuProps: _,
+        getItemProps: q,
+        selectedItem: l,
+        hasInteractedSinceOpening: j,
+        viewportCollisionPadding: z,
+        children: $
+      }
+    )
+  ] });
 };
+L.displayName = "Select.Combobox";
+const xe = Z(L);
 export {
-  U as useControllableState
+  xe as ForwardedRefCombobox,
+  L as SelectCombobox
 };
 //# sourceMappingURL=fondue-components67.js.map

package/dist/fondue-components67.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components67.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAc,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBC,KAAA,QAAAA,EAAeD,IACfO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACA,GAAOO,GAAcN,CAAY,CAAC,GAE/B,CAACD,GAAOG,CAAQ;AAC3B;"}
+{"version":3,"file":"fondue-components67.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { LoadingCircle } from '#/components/LoadingCircle/LoadingCircle.tsx';\nimport { ForwardedRefSelectSlot } from '#/components/Select/SelectSlot.tsx';\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { type AsyncItemsFetcher, useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * Function to fetch items asynchronously.\n     */\n    getAsyncItems?: AsyncItemsFetcher;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        getAsyncItems,\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText, asyncItemStatus } =\n        useSelectData(children, getAsyncItems);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n            setFilterText('');\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !getAsyncItems && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items, getAsyncItems],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n    const hasError = valueInvalid || !!asyncItemStatus.error || status === 'error';\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={hasError ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton ? (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    ) : null}\n                    {asyncItemStatus.isLoading && isOpen ? (\n                        <ForwardedRefSelectSlot name=\"right\" data-test-id={`${dataTestId}-right-slot`}>\n                            <LoadingCircle size=\"x-small\" data-test-id={`${dataTestId}-loading-circle`} />\n                        </ForwardedRefSelectSlot>\n                    ) : null}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label={t('Select_toggleMenu')}\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {hasError ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","getAsyncItems","props","forwardedRef","t","useTranslation","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","asyncItemStatus","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","hasError","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","ForwardedRefSelectSlot","LoadingCircle","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}