@frontify/fondue 12.0.0-beta.383 → 12.0.0-beta.385

package/dist/components/FormField/FormField.es.js

@@ -1,4 +1,4 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
 import { cloneElement as g } from "react";
 import { merge as x } from "../../utilities/merge.es.js";
 import { HelperText as h } from "../../utilities/input.es.js";
@@ -14,44 +14,43 @@ const F = ({ tooltips: a }) => a.map((t) => /* @__PURE__ */ l(
     children: t.children
   },
   `form-field-tooltip-${v()}`
-)), $ = ({ label: a, disabled: t, readOnly: m, dataTestId: c }) => {
-  const { text: d, required: n, secondaryLabel: i, hugWidth: s, tooltips: e } = a, r = [], p = "tw-w-full tw-flex tw-flex-nowrap tw-justify-between", o = !s && i;
-  let w = d;
-  return n && (w += " *"), e != null && e.length ? r.push(
-    /* @__PURE__ */ f("span", { className: "tw-flex tw-gap-2", children: [
-      w,
+)), $ = ({ label: a, disabled: t, readOnly: f, dataTestId: m }) => {
+  const { text: c, required: n, secondaryLabel: i, hugWidth: s, tooltips: e } = a, r = [], d = "tw-w-full tw-flex tw-flex-nowrap tw-justify-between", o = !s && i;
+  let p = c;
+  return n && (p += " *"), e != null && e.length ? r.push(
+    /* @__PURE__ */ w("span", { className: "tw-flex tw-gap-2", children: [
+      p,
       /* @__PURE__ */ l(F, { tooltips: e })
     ] })
-  ) : r.push(/* @__PURE__ */ l("span", { children: w })), o && r.push(/* @__PURE__ */ l("span", { children: i })), /* @__PURE__ */ f(
+  ) : r.push(/* @__PURE__ */ l("span", { children: p })), o && r.push(/* @__PURE__ */ l("span", { children: i })), /* @__PURE__ */ w(
     "span",
     {
       className: x([
         "tw-whitespace-nowrap",
         s && "tw-pt-2",
-        o && p,
-        t || m ? "tw-text-black-60" : "tw-text-black-80"
+        o && d,
+        t || f ? "tw-text-black-60" : "tw-text-black-80"
       ]),
-      "data-test-id": `${c}-label-text`,
-      "aria-label": w,
+      "data-test-id": `${m}-label-text`,
       children: [
         ...r
       ]
     }
   );
-}, b = ({
+}, L = ({
   children: a,
   disabled: t = !1,
-  error: m = !1,
-  errorText: c,
-  errorTextColor: d = u.Error,
+  error: f = !1,
+  errorText: m,
+  errorTextColor: c = u.Error,
   helperText: n,
   helperTextColor: i = u.Default,
   hiddenLabel: s = !1,
   label: e,
   readOnly: r = !1,
-  status: p = u.Default,
+  status: d = u.Default,
   "data-test-id": o = "fondue-form-field"
-}) => /* @__PURE__ */ f(
+}) => /* @__PURE__ */ w(
   "label",
   {
     className: x([
@@ -60,22 +59,21 @@ const F = ({ tooltips: a }) => a.map((t) => /* @__PURE__ */ l(
       t || r ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text"
     ]),
     "data-test-id": `${o}-label`,
-    "aria-label": e.text,
     children: [
       s ? null : /* @__PURE__ */ l($, { label: e, dataTestId: o, disabled: t, readOnly: r }),
-      /* @__PURE__ */ f("div", { className: "tw-w-full tw-flex tw-flex-col tw-gap-2", "data-test-id": `${o}-input`, children: [
+      /* @__PURE__ */ w("div", { className: "tw-w-full tw-flex tw-flex-col tw-gap-2", "data-test-id": `${o}-input`, children: [
         g(a, {
           hugWidth: e.hugWidth,
           required: e.required,
-          status: p,
+          status: d,
           disabled: t,
           readOnly: r
         }),
-        m && /* @__PURE__ */ l(
+        f && /* @__PURE__ */ l(
           h,
           {
-            text: c ?? "Something went wrong",
-            validationStyle: d,
+            text: m ?? "Something went wrong",
+            validationStyle: c,
             disabled: t,
             "data-test-id": `${o}-error-text`
           }
@@ -93,8 +91,8 @@ const F = ({ tooltips: a }) => a.map((t) => /* @__PURE__ */ l(
     ]
   }
 );
-b.displayname = "FondueFormField";
+L.displayname = "FondueFormField";
 export {
-  b as FormField
+  L as FormField
 };
 //# sourceMappingURL=FormField.es.js.map

package/dist/components/FormField/FormField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.es.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { ReactElement } from 'react';\nimport { cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconSize } from '@foundation/Icon';\nimport { HelperText } from '@utilities/input';\nimport { Validation } from '@utilities/validation';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\n\nexport type LabelProps = {\n    text: string;\n    hugWidth?: boolean;\n    required?: boolean;\n    secondaryLabel?: string;\n    tooltips?: TooltipProps[];\n    toolTipSize?: IconSize;\n};\n\nexport type FormFieldProps = {\n    children: ReactElement;\n    label: LabelProps;\n    disabled?: boolean;\n    error?: boolean;\n    errorText?: string;\n    errorTextColor?: Validation;\n    helperText?: string;\n    helperTextColor?: Validation;\n    hiddenLabel?: boolean;\n    readOnly?: boolean;\n    status?: Validation;\n    'data-test-id'?: string;\n};\n\ntype FormatTooltipsProps = { tooltips: TooltipProps[] };\n\nconst FormatTooltips = ({ tooltips }: FormatTooltipsProps): ReactElement[] => {\n    return tooltips.map((tip: TooltipProps) => (\n        <Tooltip\n            key={`form-field-tooltip-${generateRandomId()}`}\n            content={tip.content}\n            size={tip.size}\n            data-test-id={tip['data-test-id']}\n        >\n            {tip.children}\n        </Tooltip>\n    ));\n};\n\ntype FormattedLabelProps = {\n    label: FormFieldProps['label'];\n    disabled: FormFieldProps['disabled'];\n    readOnly: FormFieldProps['readOnly'];\n    dataTestId: FormFieldProps['data-test-id'];\n};\n\nconst FormattedLabel = ({ label, disabled, readOnly, dataTestId }: FormattedLabelProps): ReactElement => {\n    const { text, required, secondaryLabel, hugWidth, tooltips } = label;\n    const elements: ReactElement[] = [];\n    const secondaryLabelStyle = 'tw-w-full tw-flex tw-flex-nowrap tw-justify-between';\n    const applySecondaryLabel = !hugWidth && secondaryLabel;\n    let formattedLabel = text;\n\n    if (required) {\n        formattedLabel += ' *';\n    }\n\n    if (tooltips?.length) {\n        elements.push(\n            <span className={'tw-flex tw-gap-2'}>\n                {formattedLabel}\n                <FormatTooltips tooltips={tooltips} />\n            </span>,\n        );\n    } else {\n        elements.push(<span>{formattedLabel}</span>);\n    }\n\n    if (applySecondaryLabel) {\n        elements.push(<span>{secondaryLabel}</span>);\n    }\n\n    return (\n        <span\n            className={merge([\n                'tw-whitespace-nowrap',\n                hugWidth && 'tw-pt-2',\n                applySecondaryLabel && secondaryLabelStyle,\n                disabled || readOnly ? 'tw-text-black-60' : 'tw-text-black-80',\n            ])}\n            data-test-id={`${dataTestId}-label-text`}\n            aria-label={formattedLabel}\n        >\n            {...elements}\n        </span>\n    );\n};\n\nexport const FormField = ({\n    children,\n    disabled = false,\n    error = false,\n    errorText,\n    errorTextColor = Validation.Error,\n    helperText,\n    helperTextColor = Validation.Default,\n    hiddenLabel = false,\n    label,\n    readOnly = false,\n    status = Validation.Default,\n    'data-test-id': dataTestId = 'fondue-form-field',\n}: FormFieldProps): ReactElement => {\n    return (\n        <label\n            className={merge([\n                'tw-flex tw-text-text-weak tw-gap-2 tw-select-none tw-max-w-full',\n                label.hugWidth ? 'tw-w-fit tw-items-start tw-justify-start' : 'tw-w-full tw-flex-col',\n                disabled || readOnly\n                    ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                    : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n            ])}\n            data-test-id={`${dataTestId}-label`}\n            aria-label={label.text}\n        >\n            {hiddenLabel ? null : (\n                <FormattedLabel label={label} dataTestId={dataTestId} disabled={disabled} readOnly={readOnly} />\n            )}\n            <div className={'tw-w-full tw-flex tw-flex-col tw-gap-2'} data-test-id={`${dataTestId}-input`}>\n                {cloneElement(children, {\n                    hugWidth: label.hugWidth,\n                    required: label.required,\n                    status,\n                    disabled,\n                    readOnly,\n                })}\n                {error && (\n                    <HelperText\n                        text={errorText ?? 'Something went wrong'}\n                        validationStyle={errorTextColor}\n                        disabled={disabled}\n                        data-test-id={`${dataTestId}-error-text`}\n                    />\n                )}\n                {helperText && (\n                    <HelperText\n                        text={helperText}\n                        validationStyle={helperTextColor}\n                        disabled={disabled}\n                        data-test-id={`${dataTestId}-helper-text`}\n                    />\n                )}\n            </div>\n        </label>\n    );\n};\nFormField.displayname = 'FondueFormField';\n"],"names":["FormatTooltips","tooltips","tip","jsx","Tooltip","generateRandomId","FormattedLabel","label","disabled","readOnly","dataTestId","text","required","secondaryLabel","hugWidth","elements","secondaryLabelStyle","applySecondaryLabel","formattedLabel","jsxs","merge","FormField","children","error","errorText","errorTextColor","Validation","helperText","helperTextColor","hiddenLabel","status","cloneElement","HelperText"],"mappings":";;;;;;;AAqCA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,QACfA,EAAS,IAAI,CAACC,MACjB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IAEG,SAASF,EAAI;AAAA,IACb,MAAMA,EAAI;AAAA,IACV,gBAAcA,EAAI,cAAc;AAAA,IAE/B,UAAIA,EAAA;AAAA,EAAA;AAAA,EALA,sBAAsBG,GAAkB;AAAA,CAOpD,GAUCC,IAAiB,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,YAAAC,QAAoD;AACrG,QAAM,EAAE,MAAAC,GAAM,UAAAC,GAAU,gBAAAC,GAAgB,UAAAC,GAAU,UAAAb,EAAa,IAAAM,GACzDQ,IAA2B,CAAA,GAC3BC,IAAsB,uDACtBC,IAAsB,CAACH,KAAYD;AACzC,MAAIK,IAAiBP;AAErB,SAAIC,MACkBM,KAAA,OAGlBjB,KAAA,QAAAA,EAAU,SACDc,EAAA;AAAA,IACL,gBAAAI,EAAC,QAAK,EAAA,WAAW,oBACZ,UAAA;AAAA,MAAAD;AAAA,MACD,gBAAAf,EAACH,KAAe,UAAAC,GAAoB;AAAA,IAAA,GACxC;AAAA,EAAA,IAGJc,EAAS,KAAK,gBAAAZ,EAAC,QAAM,EAAA,UAAAe,EAAe,CAAA,CAAO,GAG3CD,KACAF,EAAS,KAAK,gBAAAZ,EAAC,QAAM,EAAA,UAAAU,EAAe,CAAA,CAAO,GAI3C,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAN,KAAY;AAAA,QACZG,KAAuBD;AAAA,QACvBR,KAAYC,IAAW,qBAAqB;AAAA,MAAA,CAC/C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAC3B,cAAYQ;AAAA,MAEX,UAAA;AAAA,QAAG,GAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaM,IAAY,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,UAAAd,IAAW;AAAA,EACX,OAAAe,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,gBAAAC,IAAiBC,EAAW;AAAA,EAC5B,YAAAC;AAAA,EACA,iBAAAC,IAAkBF,EAAW;AAAA,EAC7B,aAAAG,IAAc;AAAA,EACd,OAAAtB;AAAA,EACA,UAAAE,IAAW;AAAA,EACX,QAAAqB,IAASJ,EAAW;AAAA,EACpB,gBAAgBhB,IAAa;AACjC,MAEQ,gBAAAS;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM;AAAA,MACb;AAAA,MACAb,EAAM,WAAW,6CAA6C;AAAA,MAC9DC,KAAYC,IACN,uDACA;AAAA,IAAA,CACT;AAAA,IACD,gBAAc,GAAGC,CAAU;AAAA,IAC3B,cAAYH,EAAM;AAAA,IAEjB,UAAA;AAAA,MAAAsB,IAAc,OACV,gBAAA1B,EAAAG,GAAA,EAAe,OAAAC,GAAc,YAAAG,GAAwB,UAAAF,GAAoB,UAAAC,GAAoB;AAAA,wBAEjG,OAAI,EAAA,WAAW,0CAA0C,gBAAc,GAAGC,CAAU,UAChF,UAAA;AAAA,QAAAqB,EAAaT,GAAU;AAAA,UACpB,UAAUf,EAAM;AAAA,UAChB,UAAUA,EAAM;AAAA,UAChB,QAAAuB;AAAA,UACA,UAAAtB;AAAA,UACA,UAAAC;AAAA,QAAA,CACH;AAAA,QACAc,KACG,gBAAApB;AAAA,UAAC6B;AAAA,UAAA;AAAA,YACG,MAAMR,KAAa;AAAA,YACnB,iBAAiBC;AAAA,YACjB,UAAAjB;AAAA,YACA,gBAAc,GAAGE,CAAU;AAAA,UAAA;AAAA,QAC/B;AAAA,QAEHiB,KACG,gBAAAxB;AAAA,UAAC6B;AAAA,UAAA;AAAA,YACG,MAAML;AAAA,YACN,iBAAiBC;AAAA,YACjB,UAAApB;AAAA,YACA,gBAAc,GAAGE,CAAU;AAAA,UAAA;AAAA,QAC/B;AAAA,MAAA,GAER;AAAA,IAAA;AAAA,EAAA;AAAA;AAIZW,EAAU,cAAc;"}
+{"version":3,"file":"FormField.es.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { ReactElement } from 'react';\nimport { cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconSize } from '@foundation/Icon';\nimport { HelperText } from '@utilities/input';\nimport { Validation } from '@utilities/validation';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\n\nexport type LabelProps = {\n    text: string;\n    hugWidth?: boolean;\n    required?: boolean;\n    secondaryLabel?: string;\n    tooltips?: TooltipProps[];\n    toolTipSize?: IconSize;\n};\n\nexport type FormFieldProps = {\n    children: ReactElement;\n    label: LabelProps;\n    disabled?: boolean;\n    error?: boolean;\n    errorText?: string;\n    errorTextColor?: Validation;\n    helperText?: string;\n    helperTextColor?: Validation;\n    hiddenLabel?: boolean;\n    readOnly?: boolean;\n    status?: Validation;\n    'data-test-id'?: string;\n};\n\ntype FormatTooltipsProps = { tooltips: TooltipProps[] };\n\nconst FormatTooltips = ({ tooltips }: FormatTooltipsProps): ReactElement[] => {\n    return tooltips.map((tip: TooltipProps) => (\n        <Tooltip\n            key={`form-field-tooltip-${generateRandomId()}`}\n            content={tip.content}\n            size={tip.size}\n            data-test-id={tip['data-test-id']}\n        >\n            {tip.children}\n        </Tooltip>\n    ));\n};\n\ntype FormattedLabelProps = {\n    label: FormFieldProps['label'];\n    disabled: FormFieldProps['disabled'];\n    readOnly: FormFieldProps['readOnly'];\n    dataTestId: FormFieldProps['data-test-id'];\n};\n\nconst FormattedLabel = ({ label, disabled, readOnly, dataTestId }: FormattedLabelProps): ReactElement => {\n    const { text, required, secondaryLabel, hugWidth, tooltips } = label;\n    const elements: ReactElement[] = [];\n    const secondaryLabelStyle = 'tw-w-full tw-flex tw-flex-nowrap tw-justify-between';\n    const applySecondaryLabel = !hugWidth && secondaryLabel;\n    let formattedLabel = text;\n\n    if (required) {\n        formattedLabel += ' *';\n    }\n\n    if (tooltips?.length) {\n        elements.push(\n            <span className={'tw-flex tw-gap-2'}>\n                {formattedLabel}\n                <FormatTooltips tooltips={tooltips} />\n            </span>,\n        );\n    } else {\n        elements.push(<span>{formattedLabel}</span>);\n    }\n\n    if (applySecondaryLabel) {\n        elements.push(<span>{secondaryLabel}</span>);\n    }\n\n    return (\n        <span\n            className={merge([\n                'tw-whitespace-nowrap',\n                hugWidth && 'tw-pt-2',\n                applySecondaryLabel && secondaryLabelStyle,\n                disabled || readOnly ? 'tw-text-black-60' : 'tw-text-black-80',\n            ])}\n            data-test-id={`${dataTestId}-label-text`}\n        >\n            {...elements}\n        </span>\n    );\n};\n\nexport const FormField = ({\n    children,\n    disabled = false,\n    error = false,\n    errorText,\n    errorTextColor = Validation.Error,\n    helperText,\n    helperTextColor = Validation.Default,\n    hiddenLabel = false,\n    label,\n    readOnly = false,\n    status = Validation.Default,\n    'data-test-id': dataTestId = 'fondue-form-field',\n}: FormFieldProps): ReactElement => {\n    return (\n        <label\n            className={merge([\n                'tw-flex tw-text-text-weak tw-gap-2 tw-select-none tw-max-w-full',\n                label.hugWidth ? 'tw-w-fit tw-items-start tw-justify-start' : 'tw-w-full tw-flex-col',\n                disabled || readOnly\n                    ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                    : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n            ])}\n            data-test-id={`${dataTestId}-label`}\n        >\n            {hiddenLabel ? null : (\n                <FormattedLabel label={label} dataTestId={dataTestId} disabled={disabled} readOnly={readOnly} />\n            )}\n            <div className={'tw-w-full tw-flex tw-flex-col tw-gap-2'} data-test-id={`${dataTestId}-input`}>\n                {cloneElement(children, {\n                    hugWidth: label.hugWidth,\n                    required: label.required,\n                    status,\n                    disabled,\n                    readOnly,\n                })}\n                {error && (\n                    <HelperText\n                        text={errorText ?? 'Something went wrong'}\n                        validationStyle={errorTextColor}\n                        disabled={disabled}\n                        data-test-id={`${dataTestId}-error-text`}\n                    />\n                )}\n                {helperText && (\n                    <HelperText\n                        text={helperText}\n                        validationStyle={helperTextColor}\n                        disabled={disabled}\n                        data-test-id={`${dataTestId}-helper-text`}\n                    />\n                )}\n            </div>\n        </label>\n    );\n};\nFormField.displayname = 'FondueFormField';\n"],"names":["FormatTooltips","tooltips","tip","jsx","Tooltip","generateRandomId","FormattedLabel","label","disabled","readOnly","dataTestId","text","required","secondaryLabel","hugWidth","elements","secondaryLabelStyle","applySecondaryLabel","formattedLabel","jsxs","merge","FormField","children","error","errorText","errorTextColor","Validation","helperText","helperTextColor","hiddenLabel","status","cloneElement","HelperText"],"mappings":"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"}

package/dist/components/NumberInput/NumberInput.es.js

@@ -29,7 +29,7 @@ const at = ["ArrowUp", "ArrowRight"], it = ["ArrowDown", "ArrowLeft"], st = ["Ba
   onKeyDown: T,
   onBlur: $,
   onFocus: V,
-  "aria-label": z,
+  "aria-label": z = "Number Input",
   "data-test-id": c = "fondue-number-input",
   ...G
 }) => {
@@ -63,17 +63,17 @@ const at = ["ArrowUp", "ArrowRight"], it = ["ArrowDown", "ArrowLeft"], st = ["Ba
   }, J = (t) => {
     const { key: e, shiftKey: a } = t;
     if (st.includes(e)) {
-      const o = s(), I = o.length === 2 && o.includes("-");
-      ((o == null ? void 0 : o.length) === 0 || I) && U();
+      const o = s(), y = o.length === 2 && o.includes("-");
+      ((o == null ? void 0 : o.length) === 0 || y) && U();
       return;
     } else if (!isNaN(Number(e)))
       return;
     t.preventDefault(), k.current = a, it.includes(e) ? w(l.DECREMENT) : at.includes(e) && w(l.INCREMENT), T && T(t);
   }, Q = (t) => {
-    t.preventDefault(), k.current = t.shiftKey, n.current && y();
+    t.preventDefault(), k.current = t.shiftKey, n.current && I();
   }, w = (t, e = 1) => {
     const o = (() => {
-      const I = s(), R = Number(I) || 0;
+      const y = s(), R = Number(y) || 0;
       switch (e = k.current ? g : e, t) {
         case l.DECREMENT:
           return R - e;
@@ -89,7 +89,7 @@ const at = ["ArrowUp", "ArrowRight"], it = ["ArrowDown", "ArrowLeft"], st = ["Ba
       const e = t.toString();
       if (n.current.value = r ? `${e} ${r}` : e, C.current)
         return;
-      y();
+      I();
     }
   }, P = N(() => {
     if (i && n.current) {
@@ -101,11 +101,11 @@ const at = ["ArrowUp", "ArrowRight"], it = ["ArrowDown", "ArrowLeft"], st = ["Ba
       const t = n.current.value.length - r.length - 1;
       n.current.setSelectionRange(t, t);
     }
-  }, [r, n]), y = N(() => {
+  }, [r, n]), I = N(() => {
     const t = s();
     h == null || h(t ? Number(t) : void 0), r && M(), i && P();
   }, [r, i, h, s, M, P]), U = () => {
-    n.current && (n.current.value = x ? x.toString() : ""), y();
+    n.current && (n.current.value = x ? x.toString() : ""), I();
   }, X = (t) => {
     V && V(t);
   }, Z = (t) => {

package/dist/components/NumberInput/NumberInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.es.js","sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useRef } from 'react';\nimport { NumberInputIncrement, NumberInputProps } from './types';\nimport { merge } from '@utilities/merge';\nimport { IconCross16, IconMinus16, IconPlus16 } from '@foundation/Icon';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { KeyboardEvent } from '@react-types/shared';\nimport { GetStatusIcon } from '@utilities/input';\n\nconst INCREMENT_KEYS = ['ArrowUp', 'ArrowRight'];\nconst DECREMENT_KEYS = ['ArrowDown', 'ArrowLeft'];\nconst SPECIAL_KEYS = ['Backspace', 'Tab'];\n\nexport const NumberInput = ({\n    id: propId,\n    size,\n    disabled = false,\n    required,\n    readOnly,\n    status = Validation.Default,\n    decorator,\n    suffix = '',\n    controls,\n    clearable,\n    placeholder,\n    stepInterval = 10,\n    title,\n    defaultValue,\n    value,\n    valueSelect,\n    onChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'fondue-number-input',\n    ...props\n}: NumberInputProps) => {\n    const timer = useRef<number>(0);\n    const isShift = useRef<boolean>(false);\n    const isMouseHold = useRef<boolean>(false);\n    const inputElement = useRef<HTMLInputElement | null>(null);\n\n    const getCurrentValueWithoutSuffix = useCallback((): string => {\n        if (inputElement.current) {\n            const { value } = inputElement.current;\n            if (suffix) {\n                return value.replace(`${suffix}`, '').trim();\n            }\n            return value;\n        }\n        return '';\n    }, [inputElement, suffix]);\n\n    const stopIncrement = () => {\n        clearInterval(timer.current);\n        isMouseHold.current = false;\n    };\n\n    const startIncrement = (type: NumberInputIncrement) => {\n        if (inputElement.current && !disabled) {\n            isMouseHold.current = true;\n            onHoldCount(type);\n        }\n    };\n\n    const onHoldCount = (type: NumberInputIncrement) => {\n        const getNewInputValue = () => {\n            let elapsedSeconds = 0;\n            let changeValue = 0;\n            timer.current = window.setInterval(() => {\n                switch (true) {\n                    case elapsedSeconds > 2000:\n                        changeValue += 5;\n                        break;\n                    case elapsedSeconds > 5000:\n                        changeValue += 10;\n                        break;\n                    default:\n                        changeValue = 1;\n                }\n                handleCount(type, changeValue);\n                elapsedSeconds += 250;\n            }, 250);\n        };\n        getNewInputValue();\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n        const { key, shiftKey } = event;\n        if (SPECIAL_KEYS.includes(key)) {\n            const currentValue = getCurrentValueWithoutSuffix();\n            const isNegativeSymbol: boolean = currentValue.length === 2 && currentValue.includes('-');\n            if (currentValue?.length === 0 || isNegativeSymbol) {\n                handleClear();\n            }\n            return;\n        } else if (!isNaN(Number(key))) {\n            return;\n        }\n\n        event.preventDefault();\n        isShift.current = shiftKey;\n        if (DECREMENT_KEYS.includes(key)) {\n            handleCount(NumberInputIncrement.DECREMENT);\n        } else if (INCREMENT_KEYS.includes(key)) {\n            handleCount(NumberInputIncrement.INCREMENT);\n        }\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n        event.preventDefault();\n        isShift.current = event.shiftKey;\n        if (inputElement.current) {\n            handleOnChange();\n        }\n    };\n\n    const handleCount = (type: NumberInputIncrement, changeValue = 1) => {\n        const getNewInputValue = () => {\n            const value = getCurrentValueWithoutSuffix();\n            const currentValue = Number(value) || 0;\n            changeValue = isShift.current ? stepInterval : changeValue;\n            switch (type) {\n                case NumberInputIncrement.DECREMENT:\n                    return currentValue - changeValue;\n                case NumberInputIncrement.INCREMENT:\n                    return currentValue + changeValue;\n                default:\n                    return currentValue;\n            }\n        };\n\n        const newValue = getNewInputValue();\n        setValue(newValue);\n    };\n\n    const setValue = (value: number) => {\n        if (inputElement.current) {\n            const newValue = value.toString();\n            inputElement.current.value = suffix ? `${newValue}${' '}${suffix}` : newValue;\n            if (isMouseHold.current) {\n                return;\n            }\n            handleOnChange();\n        }\n    };\n\n    const handleValueSelect = useCallback(() => {\n        if (valueSelect && inputElement.current) {\n            const inputLength: number = inputElement.current.value.length;\n            const caretPos: number = suffix ? inputLength - suffix.length - 1 : inputLength;\n            inputElement.current.setSelectionRange(0, caretPos);\n        }\n    }, [suffix, valueSelect]);\n\n    const handleCaretPosition = useCallback(() => {\n        if (suffix && inputElement.current) {\n            const caretPos: number = inputElement.current.value.length - suffix.length - 1;\n            inputElement.current.setSelectionRange(caretPos, caretPos);\n        }\n    }, [suffix, inputElement]);\n\n    const handleOnChange = useCallback(() => {\n        const valueWithoutSuffix = getCurrentValueWithoutSuffix();\n        onChange?.(valueWithoutSuffix ? Number(valueWithoutSuffix) : undefined);\n        if (suffix) {\n            handleCaretPosition();\n        }\n        if (valueSelect) {\n            handleValueSelect();\n        }\n    }, [suffix, valueSelect, onChange, getCurrentValueWithoutSuffix, handleCaretPosition, handleValueSelect]);\n\n    const handleClear = () => {\n        if (inputElement.current) {\n            inputElement.current.value = defaultValue ? defaultValue.toString() : '';\n        }\n        handleOnChange();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement, Element>) => {\n        if (onFocus) {\n            onFocus(event);\n        }\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement, Element>) => {\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    useEffect(() => {\n        clearInterval(timer.current);\n    }, []);\n\n    return (\n        <div\n            className={merge([\n                'tw-w-full tw-flex tw-items-center tw-justify-between tw-h-9 tw-gap-2 tw-px-3 tw-transition tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent tw-border tw-rounded tw-line-strong hover:tw-border-line-x-strong focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong',\n                status ? validationClassMap[status] : '',\n            ])}\n            data-test-id={dataTestId}\n        >\n            {decorator ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled || readOnly ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id={`${dataTestId}-decorator`}\n                >\n                    {decorator}\n                </div>\n            ) : null}\n            <input\n                {...props}\n                defaultValue={defaultValue}\n                value={value}\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                name={dataTestId}\n                type={suffix || valueSelect ? 'text' : 'number'}\n                placeholder={placeholder}\n                className={merge([\n                    'tw-w-full tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readOnly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={suffix ? handleCaretPosition : undefined}\n                onChange={() => setValue(Number(getCurrentValueWithoutSuffix()))}\n                onKeyDown={handleKeyDown}\n                onKeyUp={handleKeyUp}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                size={size}\n                title={title}\n                aria-label={ariaLabel}\n                required={required}\n                readOnly={readOnly}\n                disabled={disabled}\n                data-test-id={`${dataTestId}-input`}\n            />\n            <span className={'tw-flex tw-items-center'}>\n                {controls ? (\n                    <>\n                        <button\n                            className={\n                                'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                            }\n                            type=\"button\"\n                            onClick={(event) => {\n                                if (event.button === 0) {\n                                    const changeValue = event.shiftKey ? stepInterval : 1;\n                                    handleCount(NumberInputIncrement.DECREMENT, changeValue);\n                                }\n                            }}\n                            onMouseDown={(event) =>\n                                event.shiftKey || event.button > 0\n                                    ? null\n                                    : startIncrement(NumberInputIncrement.DECREMENT)\n                            }\n                            onMouseUp={stopIncrement}\n                            onTouchStart={(event) =>\n                                event.shiftKey ? null : startIncrement(NumberInputIncrement.DECREMENT)\n                            }\n                            onTouchEnd={stopIncrement}\n                            aria-label=\"Decrement value\"\n                            title=\"Decrement value\"\n                            data-test-id={`${dataTestId}-decrement`}\n                        >\n                            <IconMinus16 />\n                        </button>\n                        <button\n                            className={\n                                'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                            }\n                            type=\"button\"\n                            onClick={(event) => {\n                                if (event.button === 0) {\n                                    const changeValue = event.shiftKey ? stepInterval : 1;\n                                    handleCount(NumberInputIncrement.INCREMENT, changeValue);\n                                }\n                            }}\n                            onMouseDown={(event) =>\n                                event.shiftKey || event.button > 0\n                                    ? null\n                                    : startIncrement(NumberInputIncrement.INCREMENT)\n                            }\n                            onMouseUp={stopIncrement}\n                            onTouchStart={(event) =>\n                                event.shiftKey ? null : startIncrement(NumberInputIncrement.INCREMENT)\n                            }\n                            onTouchEnd={stopIncrement}\n                            aria-label=\"Increment value\"\n                            title=\"Increment value\"\n                            data-test-id={`${dataTestId}-increment`}\n                        >\n                            <IconPlus16 />\n                        </button>\n                    </>\n                ) : null}\n                {clearable ? (\n                    <button\n                        type=\"button\"\n                        onClick={handleClear}\n                        className={\n                            'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                        }\n                        aria-label=\"Clear value\"\n                        data-test-id={`${dataTestId}-clear`}\n                    >\n                        <IconCross16 />\n                    </button>\n                ) : null}\n                {status ? GetStatusIcon(status, dataTestId) : null}\n            </span>\n        </div>\n    );\n};\n\nNumberInput.displayName = 'FondueNumberInput';\n"],"names":["INCREMENT_KEYS","DECREMENT_KEYS","SPECIAL_KEYS","NumberInput","propId","size","disabled","required","readOnly","status","Validation","decorator","suffix","controls","clearable","placeholder","stepInterval","title","defaultValue","value","valueSelect","onChange","onKeyDown","onBlur","onFocus","ariaLabel","dataTestId","props","timer","useRef","isShift","isMouseHold","inputElement","getCurrentValueWithoutSuffix","useCallback","stopIncrement","startIncrement","type","onHoldCount","elapsedSeconds","changeValue","handleCount","handleKeyDown","event","key","shiftKey","currentValue","isNegativeSymbol","handleClear","NumberInputIncrement","handleKeyUp","handleOnChange","newValue","setValue","handleValueSelect","inputLength","caretPos","handleCaretPosition","valueWithoutSuffix","handleFocus","handleBlur","useEffect","jsxs","merge","validationClassMap","jsx","useMemoizedId","Fragment","IconMinus16","IconPlus16","IconCross16","GetStatusIcon"],"mappings":"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"}
+{"version":3,"file":"NumberInput.es.js","sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useRef } from 'react';\nimport { NumberInputIncrement, NumberInputProps } from './types';\nimport { merge } from '@utilities/merge';\nimport { IconCross16, IconMinus16, IconPlus16 } from '@foundation/Icon';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { KeyboardEvent } from '@react-types/shared';\nimport { GetStatusIcon } from '@utilities/input';\n\nconst INCREMENT_KEYS = ['ArrowUp', 'ArrowRight'];\nconst DECREMENT_KEYS = ['ArrowDown', 'ArrowLeft'];\nconst SPECIAL_KEYS = ['Backspace', 'Tab'];\n\nexport const NumberInput = ({\n    id: propId,\n    size,\n    disabled = false,\n    required,\n    readOnly,\n    status = Validation.Default,\n    decorator,\n    suffix = '',\n    controls,\n    clearable,\n    placeholder,\n    stepInterval = 10,\n    title,\n    defaultValue,\n    value,\n    valueSelect,\n    onChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    'aria-label': ariaLabel = 'Number Input',\n    'data-test-id': dataTestId = 'fondue-number-input',\n    ...props\n}: NumberInputProps) => {\n    const timer = useRef<number>(0);\n    const isShift = useRef<boolean>(false);\n    const isMouseHold = useRef<boolean>(false);\n    const inputElement = useRef<HTMLInputElement | null>(null);\n\n    const getCurrentValueWithoutSuffix = useCallback((): string => {\n        if (inputElement.current) {\n            const { value } = inputElement.current;\n            if (suffix) {\n                return value.replace(`${suffix}`, '').trim();\n            }\n            return value;\n        }\n        return '';\n    }, [inputElement, suffix]);\n\n    const stopIncrement = () => {\n        clearInterval(timer.current);\n        isMouseHold.current = false;\n    };\n\n    const startIncrement = (type: NumberInputIncrement) => {\n        if (inputElement.current && !disabled) {\n            isMouseHold.current = true;\n            onHoldCount(type);\n        }\n    };\n\n    const onHoldCount = (type: NumberInputIncrement) => {\n        const getNewInputValue = () => {\n            let elapsedSeconds = 0;\n            let changeValue = 0;\n            timer.current = window.setInterval(() => {\n                switch (true) {\n                    case elapsedSeconds > 2000:\n                        changeValue += 5;\n                        break;\n                    case elapsedSeconds > 5000:\n                        changeValue += 10;\n                        break;\n                    default:\n                        changeValue = 1;\n                }\n                handleCount(type, changeValue);\n                elapsedSeconds += 250;\n            }, 250);\n        };\n        getNewInputValue();\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n        const { key, shiftKey } = event;\n        if (SPECIAL_KEYS.includes(key)) {\n            const currentValue = getCurrentValueWithoutSuffix();\n            const isNegativeSymbol: boolean = currentValue.length === 2 && currentValue.includes('-');\n            if (currentValue?.length === 0 || isNegativeSymbol) {\n                handleClear();\n            }\n            return;\n        } else if (!isNaN(Number(key))) {\n            return;\n        }\n\n        event.preventDefault();\n        isShift.current = shiftKey;\n        if (DECREMENT_KEYS.includes(key)) {\n            handleCount(NumberInputIncrement.DECREMENT);\n        } else if (INCREMENT_KEYS.includes(key)) {\n            handleCount(NumberInputIncrement.INCREMENT);\n        }\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n        event.preventDefault();\n        isShift.current = event.shiftKey;\n        if (inputElement.current) {\n            handleOnChange();\n        }\n    };\n\n    const handleCount = (type: NumberInputIncrement, changeValue = 1) => {\n        const getNewInputValue = () => {\n            const value = getCurrentValueWithoutSuffix();\n            const currentValue = Number(value) || 0;\n            changeValue = isShift.current ? stepInterval : changeValue;\n            switch (type) {\n                case NumberInputIncrement.DECREMENT:\n                    return currentValue - changeValue;\n                case NumberInputIncrement.INCREMENT:\n                    return currentValue + changeValue;\n                default:\n                    return currentValue;\n            }\n        };\n\n        const newValue = getNewInputValue();\n        setValue(newValue);\n    };\n\n    const setValue = (value: number) => {\n        if (inputElement.current) {\n            const newValue = value.toString();\n            inputElement.current.value = suffix ? `${newValue}${' '}${suffix}` : newValue;\n            if (isMouseHold.current) {\n                return;\n            }\n            handleOnChange();\n        }\n    };\n\n    const handleValueSelect = useCallback(() => {\n        if (valueSelect && inputElement.current) {\n            const inputLength: number = inputElement.current.value.length;\n            const caretPos: number = suffix ? inputLength - suffix.length - 1 : inputLength;\n            inputElement.current.setSelectionRange(0, caretPos);\n        }\n    }, [suffix, valueSelect]);\n\n    const handleCaretPosition = useCallback(() => {\n        if (suffix && inputElement.current) {\n            const caretPos: number = inputElement.current.value.length - suffix.length - 1;\n            inputElement.current.setSelectionRange(caretPos, caretPos);\n        }\n    }, [suffix, inputElement]);\n\n    const handleOnChange = useCallback(() => {\n        const valueWithoutSuffix = getCurrentValueWithoutSuffix();\n        onChange?.(valueWithoutSuffix ? Number(valueWithoutSuffix) : undefined);\n        if (suffix) {\n            handleCaretPosition();\n        }\n        if (valueSelect) {\n            handleValueSelect();\n        }\n    }, [suffix, valueSelect, onChange, getCurrentValueWithoutSuffix, handleCaretPosition, handleValueSelect]);\n\n    const handleClear = () => {\n        if (inputElement.current) {\n            inputElement.current.value = defaultValue ? defaultValue.toString() : '';\n        }\n        handleOnChange();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement, Element>) => {\n        if (onFocus) {\n            onFocus(event);\n        }\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement, Element>) => {\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    useEffect(() => {\n        clearInterval(timer.current);\n    }, []);\n\n    return (\n        <div\n            className={merge([\n                'tw-w-full tw-flex tw-items-center tw-justify-between tw-h-9 tw-gap-2 tw-px-3 tw-transition tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent tw-border tw-rounded tw-line-strong hover:tw-border-line-x-strong focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong',\n                status ? validationClassMap[status] : '',\n            ])}\n            data-test-id={dataTestId}\n        >\n            {decorator ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled || readOnly ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id={`${dataTestId}-decorator`}\n                >\n                    {decorator}\n                </div>\n            ) : null}\n            <input\n                {...props}\n                defaultValue={defaultValue}\n                value={value}\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                name={dataTestId}\n                type={suffix || valueSelect ? 'text' : 'number'}\n                placeholder={placeholder}\n                className={merge([\n                    'tw-w-full tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readOnly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={suffix ? handleCaretPosition : undefined}\n                onChange={() => setValue(Number(getCurrentValueWithoutSuffix()))}\n                onKeyDown={handleKeyDown}\n                onKeyUp={handleKeyUp}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                size={size}\n                title={title}\n                aria-label={ariaLabel}\n                required={required}\n                readOnly={readOnly}\n                disabled={disabled}\n                data-test-id={`${dataTestId}-input`}\n            />\n            <span className={'tw-flex tw-items-center'}>\n                {controls ? (\n                    <>\n                        <button\n                            className={\n                                'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                            }\n                            type=\"button\"\n                            onClick={(event) => {\n                                if (event.button === 0) {\n                                    const changeValue = event.shiftKey ? stepInterval : 1;\n                                    handleCount(NumberInputIncrement.DECREMENT, changeValue);\n                                }\n                            }}\n                            onMouseDown={(event) =>\n                                event.shiftKey || event.button > 0\n                                    ? null\n                                    : startIncrement(NumberInputIncrement.DECREMENT)\n                            }\n                            onMouseUp={stopIncrement}\n                            onTouchStart={(event) =>\n                                event.shiftKey ? null : startIncrement(NumberInputIncrement.DECREMENT)\n                            }\n                            onTouchEnd={stopIncrement}\n                            aria-label=\"Decrement value\"\n                            title=\"Decrement value\"\n                            data-test-id={`${dataTestId}-decrement`}\n                        >\n                            <IconMinus16 />\n                        </button>\n                        <button\n                            className={\n                                'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                            }\n                            type=\"button\"\n                            onClick={(event) => {\n                                if (event.button === 0) {\n                                    const changeValue = event.shiftKey ? stepInterval : 1;\n                                    handleCount(NumberInputIncrement.INCREMENT, changeValue);\n                                }\n                            }}\n                            onMouseDown={(event) =>\n                                event.shiftKey || event.button > 0\n                                    ? null\n                                    : startIncrement(NumberInputIncrement.INCREMENT)\n                            }\n                            onMouseUp={stopIncrement}\n                            onTouchStart={(event) =>\n                                event.shiftKey ? null : startIncrement(NumberInputIncrement.INCREMENT)\n                            }\n                            onTouchEnd={stopIncrement}\n                            aria-label=\"Increment value\"\n                            title=\"Increment value\"\n                            data-test-id={`${dataTestId}-increment`}\n                        >\n                            <IconPlus16 />\n                        </button>\n                    </>\n                ) : null}\n                {clearable ? (\n                    <button\n                        type=\"button\"\n                        onClick={handleClear}\n                        className={\n                            'tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral'\n                        }\n                        aria-label=\"Clear value\"\n                        data-test-id={`${dataTestId}-clear`}\n                    >\n                        <IconCross16 />\n                    </button>\n                ) : null}\n                {status ? GetStatusIcon(status, dataTestId) : null}\n            </span>\n        </div>\n    );\n};\n\nNumberInput.displayName = 'FondueNumberInput';\n"],"names":["INCREMENT_KEYS","DECREMENT_KEYS","SPECIAL_KEYS","NumberInput","propId","size","disabled","required","readOnly","status","Validation","decorator","suffix","controls","clearable","placeholder","stepInterval","title","defaultValue","value","valueSelect","onChange","onKeyDown","onBlur","onFocus","ariaLabel","dataTestId","props","timer","useRef","isShift","isMouseHold","inputElement","getCurrentValueWithoutSuffix","useCallback","stopIncrement","startIncrement","type","onHoldCount","elapsedSeconds","changeValue","handleCount","handleKeyDown","event","key","shiftKey","currentValue","isNegativeSymbol","handleClear","NumberInputIncrement","handleKeyUp","handleOnChange","newValue","setValue","handleValueSelect","inputLength","caretPos","handleCaretPosition","valueWithoutSuffix","handleFocus","handleBlur","useEffect","jsxs","merge","validationClassMap","jsx","useMemoizedId","Fragment","IconMinus16","IconPlus16","IconCross16","GetStatusIcon"],"mappings":"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"}

package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js

@@ -3,7 +3,7 @@ import { Children as b } from "react";
 import { merge as i } from "../../../utilities/merge.es.js";
 import f from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
 import { INDENTATION_WIDTH as x } from "../helpers/constants.es.js";
-const g = ({
+const h = ({
   id: d,
   label: e,
   level: r = 0,
@@ -13,7 +13,7 @@ const g = ({
   dragHandlerPosition: o = "left",
   showContentWhileDragging: l = !1
 }) => {
-  const m = b.count(s) > 0, c = { marginLeft: r * x }, a = /* @__PURE__ */ t("button", { tabIndex: -1, className: "tw-p-1", children: /* @__PURE__ */ t(f, {}) });
+  const m = b.count(s) > 0, c = { marginLeft: r * x }, a = /* @__PURE__ */ t("button", { tabIndex: -1, className: "tw-p-1 tw-touch-none", children: /* @__PURE__ */ t(f, {}) });
   return /* @__PURE__ */ p(
     "li",
     {
@@ -46,8 +46,8 @@ const g = ({
     }
   );
 };
-g.displayName = "FondueTreeItemOverlay";
+h.displayName = "FondueTreeItemOverlay";
 export {
-  g as TreeItemOverlay
+  h as TreeItemOverlay
 };
 //# sourceMappingURL=TreeItemOverlay.es.js.map

package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { INDENTATION_WIDTH } from '../helpers';\nimport { DragHandlerPosition } from '../types';\n\nexport type Overlay = {\n    id: string;\n    label?: string;\n    level?: number;\n    children: ReactNode;\n    contentComponent?: ReactNode;\n    isSelected?: boolean;\n    dragHandlerPosition?: DragHandlerPosition;\n    showContentWhileDragging: boolean;\n};\n\nexport const TreeItemOverlay = ({\n    id,\n    label,\n    level = 0,\n    children,\n    contentComponent,\n    isSelected,\n    dragHandlerPosition = 'left',\n    showContentWhileDragging = false,\n}: Overlay) => {\n    const hasChildren = Children.count(children) > 0;\n\n    const indentation = level * INDENTATION_WIDTH;\n\n    const liStyle = { marginLeft: indentation };\n\n    const dragHandler = (\n        <button tabIndex={-1} className=\"tw-p-1\">\n            <IconGrabHandle12 />\n        </button>\n    );\n\n    return (\n        <li\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level + 1}\n            aria-selected={isSelected}\n            data-test-id=\"fondue-tree-item-overlay\"\n            className={merge([\n                'tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-p-2 tw-no-underline tw-leading-5 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded',\n                showContentWhileDragging ? 'tw-opacity-90' : '',\n            ])}\n        >\n            {dragHandlerPosition === 'left' && dragHandler}\n\n            {hasChildren && (\n                <button tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isSelected && 'tw-text-box-selected-strong-inverse',\n                        ])}\n                    />\n                </button>\n            )}\n\n            {label !== undefined && <span>{label}</span>}\n\n            {contentComponent}\n\n            {dragHandlerPosition === 'right' && dragHandler}\n        </li>\n    );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","dragHandlerPosition","showContentWhileDragging","hasChildren","Children","liStyle","INDENTATION_WIDTH","dragHandler","jsx","IconGrabHandle12","jsxs","merge"],"mappings":";;;;;AAqBO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,0BAAAC,IAA2B;AAC/B,MAAe;AACX,QAAMC,IAAcC,EAAS,MAAMN,CAAQ,IAAI,GAIzCO,IAAU,EAAE,YAFER,IAAQS,KAItBC,sBACD,UAAO,EAAA,UAAU,IAAI,WAAU,UAC5B,UAAC,gBAAAC,EAAAC,GAAA,CAAiB,CAAA,EACtB,CAAA;AAIA,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOL;AAAA,MACP,IAAIV,EAAG,SAAS;AAAA,MAChB,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,IAA2B,kBAAkB;AAAA,MAAA,CAChD;AAAA,MAEA,UAAA;AAAA,QAAAD,MAAwB,UAAUM;AAAA,QAElCJ,uBACI,UAAO,EAAA,UAAU,IAAI,gBAAa,oBAAmB,WAAU,UAC5D,UAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWG,EAAM;AAAA,cACb;AAAA,cACAX,KAAc;AAAA,YAAA,CACjB;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QAGHJ,MAAU,UAAc,gBAAAY,EAAA,QAAA,EAAM,UAAMZ,GAAA;AAAA,QAEpCG;AAAA,QAEAE,MAAwB,WAAWM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhD;AAEAb,EAAgB,cAAc;"}
+{"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { INDENTATION_WIDTH } from '../helpers';\nimport { DragHandlerPosition } from '../types';\n\nexport type Overlay = {\n    id: string;\n    label?: string;\n    level?: number;\n    children: ReactNode;\n    contentComponent?: ReactNode;\n    isSelected?: boolean;\n    dragHandlerPosition?: DragHandlerPosition;\n    showContentWhileDragging: boolean;\n};\n\nexport const TreeItemOverlay = ({\n    id,\n    label,\n    level = 0,\n    children,\n    contentComponent,\n    isSelected,\n    dragHandlerPosition = 'left',\n    showContentWhileDragging = false,\n}: Overlay) => {\n    const hasChildren = Children.count(children) > 0;\n\n    const indentation = level * INDENTATION_WIDTH;\n\n    const liStyle = { marginLeft: indentation };\n\n    const dragHandler = (\n        <button tabIndex={-1} className=\"tw-p-1 tw-touch-none\">\n            <IconGrabHandle12 />\n        </button>\n    );\n\n    return (\n        <li\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level + 1}\n            aria-selected={isSelected}\n            data-test-id=\"fondue-tree-item-overlay\"\n            className={merge([\n                'tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-p-2 tw-no-underline tw-leading-5 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded',\n                showContentWhileDragging ? 'tw-opacity-90' : '',\n            ])}\n        >\n            {dragHandlerPosition === 'left' && dragHandler}\n\n            {hasChildren && (\n                <button tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isSelected && 'tw-text-box-selected-strong-inverse',\n                        ])}\n                    />\n                </button>\n            )}\n\n            {label !== undefined && <span>{label}</span>}\n\n            {contentComponent}\n\n            {dragHandlerPosition === 'right' && dragHandler}\n        </li>\n    );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","dragHandlerPosition","showContentWhileDragging","hasChildren","Children","liStyle","INDENTATION_WIDTH","dragHandler","jsx","IconGrabHandle12","jsxs","merge"],"mappings":";;;;;AAqBO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,0BAAAC,IAA2B;AAC/B,MAAe;AACX,QAAMC,IAAcC,EAAS,MAAMN,CAAQ,IAAI,GAIzCO,IAAU,EAAE,YAFER,IAAQS,KAItBC,sBACD,UAAO,EAAA,UAAU,IAAI,WAAU,wBAC5B,UAAC,gBAAAC,EAAAC,GAAA,CAAiB,CAAA,EACtB,CAAA;AAIA,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOL;AAAA,MACP,IAAIV,EAAG,SAAS;AAAA,MAChB,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,IAA2B,kBAAkB;AAAA,MAAA,CAChD;AAAA,MAEA,UAAA;AAAA,QAAAD,MAAwB,UAAUM;AAAA,QAElCJ,uBACI,UAAO,EAAA,UAAU,IAAI,gBAAa,oBAAmB,WAAU,UAC5D,UAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWG,EAAM;AAAA,cACb;AAAA,cACAX,KAAc;AAAA,YAAA,CACjB;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QAGHJ,MAAU,UAAc,gBAAAY,EAAA,QAAA,EAAM,UAAMZ,GAAA;AAAA,QAEpCG;AAAA,QAEAE,MAAwB,WAAWM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhD;AAEAb,EAAgB,cAAc;"}

package/dist/components/Tree/helpers/sensorsActivationConstraint.es.js

@@ -1,7 +1,7 @@
 const o = ({
   dragHandlerPosition: e,
   enableDragDelay: n
-}) => e === "none" ? { delay: n ? 150 : 0, tolerance: 2 } : { delay: 0, tolerance: 0 };
+}) => e === "none" ? { delay: n ? 150 : 0, tolerance: 5 } : { delay: 0, tolerance: 5 };
 export {
   o as sensorsActivationConstraint
 };

package/dist/components/Tree/helpers/sensorsActivationConstraint.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"sensorsActivationConstraint.es.js","sources":["../../../../src/components/Tree/helpers/sensorsActivationConstraint.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TreeProps } from '../types';\n\ntype SensorsActivationConstraintProps = {\n    dragHandlerPosition: TreeProps['dragHandlerPosition'];\n    enableDragDelay: TreeProps['enableDragDelay'];\n};\n\ntype SensorsActivationConstraint = {\n    delay: number;\n    tolerance: number;\n};\n\nexport const sensorsActivationConstraint = ({\n    dragHandlerPosition,\n    enableDragDelay,\n}: SensorsActivationConstraintProps): SensorsActivationConstraint => {\n    const delay = enableDragDelay ? 150 : 0;\n    return dragHandlerPosition === 'none' ? { delay, tolerance: 2 } : { delay: 0, tolerance: 0 };\n};\n"],"names":["sensorsActivationConstraint","dragHandlerPosition","enableDragDelay"],"mappings":"AAcO,MAAMA,IAA8B,CAAC;AAAA,EACxC,qBAAAC;AAAA,EACA,iBAAAC;AACJ,MAEWD,MAAwB,SAAS,EAAE,OAD5BC,IAAkB,MAAM,GACW,WAAW,MAAM,EAAE,OAAO,GAAG,WAAW,EAAE;"}
+{"version":3,"file":"sensorsActivationConstraint.es.js","sources":["../../../../src/components/Tree/helpers/sensorsActivationConstraint.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TreeProps } from '../types';\n\ntype SensorsActivationConstraintProps = {\n    dragHandlerPosition: TreeProps['dragHandlerPosition'];\n    enableDragDelay: TreeProps['enableDragDelay'];\n};\n\ntype SensorsActivationConstraint = {\n    delay: number;\n    tolerance: number;\n};\n\nexport const sensorsActivationConstraint = ({\n    dragHandlerPosition,\n    enableDragDelay,\n}: SensorsActivationConstraintProps): SensorsActivationConstraint => {\n    const delay = enableDragDelay ? 150 : 0;\n    return dragHandlerPosition === 'none' ? { delay, tolerance: 5 } : { delay: 0, tolerance: 5 };\n};\n"],"names":["sensorsActivationConstraint","dragHandlerPosition","enableDragDelay"],"mappings":"AAcO,MAAMA,IAA8B,CAAC;AAAA,EACxC,qBAAAC;AAAA,EACA,iBAAAC;AACJ,MAEWD,MAAwB,SAAS,EAAE,OAD5BC,IAAkB,MAAM,GACW,WAAW,MAAM,EAAE,OAAO,GAAG,WAAW,EAAE;"}