@frontify/fondue 12.0.0-beta.127 → 12.0.0-beta.129

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import DatepickerComponent, { ReactDatePicker } from 'react-datepicker';
 import { Validation } from '../../utilities/validation';
 type SingleDatePickerProps = {
     variant?: 'single';
@@ -25,10 +26,13 @@ export type DatePickerProps = {
     customTrigger?: React.ReactNode;
     children?: React.ReactNode;
     hasPopperArrow?: boolean;
+    preventOpenOnFocus?: boolean;
     filterDate?: (date: Date) => boolean;
     onOpen?: () => void;
     onClose?: () => void;
     onBlur?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 } & (SingleDatePickerProps | RangeDatePickerProps);
-export declare const DatePicker: FC<DatePickerProps>;
+export type ReactDatePickerRef = ReactDatePicker<never, boolean>;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatepickerComponent<never, boolean>>>;
 export {};

package/dist/components/DatePicker/DatePicker.es.js

@@ -1,117 +1,124 @@
 import { IconSize as r } from "../../foundation/Icon/IconSize.es.js";
-import { format as F, getYear as L } from "date-fns";
-import e, { useState as j } from "react";
-import v from "react-datepicker";
+import { format as v, getYear as A } from "date-fns";
+import e, { forwardRef as H, useState as T } from "react";
+import V from "react-datepicker";
 import "./DatePicker.css.es.js";
-import { DatePickerTrigger as A } from "./DatePickerTrigger.es.js";
-import { Validation as H } from "../../utilities/validation.es.js";
-import T from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
-import V from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
-import Y from "../../foundation/Icon/Generated/IconCaretRight.es.js";
-import q from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
+import { DatePickerTrigger as Y } from "./DatePickerTrigger.es.js";
+import { Validation as q } from "../../utilities/validation.es.js";
+import G from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
+import J from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
+import K from "../../foundation/Icon/Generated/IconCaretRight.es.js";
+import O from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
 import { Button as i } from "../Button/Button.es.js";
-import { ButtonStyle as n, ButtonSize as m, ButtonEmphasis as o } from "../Button/ButtonTypes.es.js";
-const G = (s, a) => s === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", J = ({
-  placeHolder: s = "Select a date",
-  isClearable: a,
-  shouldCloseOnSelect: f,
-  onChange: d,
-  onOpen: l,
-  onClose: c,
-  onBlur: w,
-  dateFormat: y = "dd MMM yyyy",
-  value: D,
-  startDate: k,
-  endDate: E,
-  minDate: g,
-  maxDate: z,
-  validation: C = H.Default,
-  customTrigger: M,
-  children: h = /* @__PURE__ */ e.createElement(e.Fragment, null),
-  hasPopperArrow: S = !0,
-  filterDate: I = () => !0,
-  variant: p = "single"
-}) => {
-  const [b, u] = j(!1), N = () => {
-    u(!0), l == null || l();
-  }, W = () => {
-    u(!1), c == null || c();
-  };
-  return /* @__PURE__ */ e.createElement("div", { "data-test-id": "date-picker" }, /* @__PURE__ */ e.createElement(
-    v,
-    {
-      calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
-      selected: D,
-      startDate: k,
-      endDate: E,
-      minDate: g,
-      maxDate: z,
-      calendarStartDay: 1,
-      onChange: d,
-      onBlur: w,
-      selectsRange: p === "range",
-      showPopperArrow: S,
-      filterDate: I,
-      customInput: M ?? /* @__PURE__ */ e.createElement(
-        A,
-        {
-          isCalendarOpen: b,
-          isClearable: a,
-          placeHolder: s,
-          validation: C,
-          onDateChanged: d
-        }
-      ),
-      formatWeekDay: (t) => t.slice(0, 1),
-      isClearable: a,
-      dateFormat: y,
-      onCalendarClose: W,
-      onCalendarOpen: N,
-      shouldCloseOnSelect: f,
-      dayClassName: (t) => G(p, t),
-      renderCustomHeader: ({ date: t, decreaseMonth: x, increaseMonth: B, increaseYear: P, decreaseYear: R }) => /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0" }, /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: R,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(T, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: x,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(V, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, F(t, "MMMM"), " ", L(t)), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: B,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(Y, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: P,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(q, { size: r.Size20 })
-        }
-      ))
-    },
-    h
-  ));
-};
-J.displayName = "FondueDatePicker";
+import { ButtonStyle as n, ButtonSize as o, ButtonEmphasis as s } from "../Button/ButtonTypes.es.js";
+const Q = (m, a) => m === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", U = H(
+  ({
+    placeHolder: m = "Select a date",
+    isClearable: a,
+    shouldCloseOnSelect: u,
+    onChange: d,
+    onOpen: l,
+    onClose: c,
+    onBlur: w,
+    onKeyDown: y,
+    dateFormat: D = "dd MMM yyyy",
+    value: k,
+    startDate: E,
+    endDate: g,
+    minDate: z,
+    maxDate: C,
+    validation: M = q.Default,
+    customTrigger: h,
+    children: S = /* @__PURE__ */ e.createElement(e.Fragment, null),
+    hasPopperArrow: I = !0,
+    preventOpenOnFocus: b = !1,
+    filterDate: N = () => !0,
+    variant: f = "single"
+  }, R) => {
+    const [W, p] = T(!1), x = () => {
+      p(!0), l == null || l();
+    }, B = () => {
+      p(!1), c == null || c();
+    };
+    return /* @__PURE__ */ e.createElement("div", { "data-test-id": "date-picker" }, /* @__PURE__ */ e.createElement(
+      V,
+      {
+        calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
+        selected: k,
+        startDate: E,
+        endDate: g,
+        minDate: z,
+        maxDate: C,
+        calendarStartDay: 1,
+        onChange: d,
+        onKeyDown: y,
+        onBlur: w,
+        selectsRange: f === "range",
+        showPopperArrow: I,
+        preventOpenOnFocus: b,
+        filterDate: N,
+        customInput: h ?? /* @__PURE__ */ e.createElement(
+          Y,
+          {
+            isCalendarOpen: W,
+            isClearable: a,
+            placeHolder: m,
+            validation: M,
+            onDateChanged: d
+          }
+        ),
+        ref: R,
+        formatWeekDay: (t) => t.slice(0, 1),
+        isClearable: a,
+        dateFormat: D,
+        onCalendarClose: B,
+        onCalendarOpen: x,
+        shouldCloseOnSelect: u,
+        dayClassName: (t) => Q(f, t),
+        renderCustomHeader: ({ date: t, decreaseMonth: P, increaseMonth: F, increaseYear: L, decreaseYear: j }) => /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0" }, /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: j,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(G, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: P,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(J, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, v(t, "MMMM"), " ", A(t)), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: F,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(K, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: L,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(O, { size: r.Size20 })
+          }
+        ))
+      },
+      S
+    ));
+  }
+);
+U.displayName = "FondueDatePicker";
 export {
-  J as DatePicker
+  U as DatePicker
 };
 //# sourceMappingURL=DatePicker.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport DatepickerComponent from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport const DatePicker: FC<DatePickerProps> = ({\n    placeHolder = 'Select a date',\n    isClearable,\n    shouldCloseOnSelect,\n    onChange,\n    onOpen,\n    onClose,\n    onBlur,\n    dateFormat = 'dd MMM yyyy',\n    value,\n    startDate,\n    endDate,\n    minDate,\n    maxDate,\n    validation = Validation.Default,\n    customTrigger,\n    children = <></>,\n    hasPopperArrow = true,\n    filterDate = () => true,\n    variant = 'single',\n}) => {\n    const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n    const handleOpen = () => {\n        setIsCalendarOpen(true);\n        onOpen?.();\n    };\n\n    const handleClose = () => {\n        setIsCalendarOpen(false);\n        onClose?.();\n    };\n\n    return (\n        <div data-test-id=\"date-picker\">\n            <DatepickerComponent\n                calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                selected={value}\n                startDate={startDate}\n                endDate={endDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                calendarStartDay={1}\n                onChange={onChange}\n                onBlur={onBlur}\n                selectsRange={variant === 'range' ? true : false}\n                showPopperArrow={hasPopperArrow}\n                filterDate={filterDate}\n                customInput={\n                    customTrigger ?? (\n                        <DatePickerTrigger\n                            isCalendarOpen={isCalendarOpen}\n                            isClearable={isClearable}\n                            placeHolder={placeHolder}\n                            validation={validation}\n                            onDateChanged={onChange}\n                        />\n                    )\n                }\n                formatWeekDay={(day) => day.slice(0, 1)}\n                isClearable={isClearable}\n                dateFormat={dateFormat}\n                onCalendarClose={handleClose}\n                onCalendarOpen={handleOpen}\n                shouldCloseOnSelect={shouldCloseOnSelect}\n                dayClassName={(date) => getDayClasses(variant, date)}\n                renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                    <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={decreaseYear}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                        />\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={decreaseMonth}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretLeft size={IconSize.Size20} />}\n                        />\n                        <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                            {format(date, 'MMMM')} {getYear(date)}\n                        </p>\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={increaseMonth}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretRight size={IconSize.Size20} />}\n                        />\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={increaseYear}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                        />\n                    </div>\n                )}\n            >\n                {children}\n            </DatepickerComponent>\n        </div>\n    );\n};\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["getDayClasses","variant","date","DatePicker","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","React","hasPopperArrow","filterDate","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble"],"mappings":"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"}
+{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'dd MMM yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            children = <></>,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id=\"date-picker\">\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range' ? true : false}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeft size={IconSize.Size20} />}\n                            />\n                            <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                {format(date, 'MMMM')} {getYear(date)}\n                            </p>\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRight size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                            />\n                        </div>\n                    )}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","React","hasPopperArrow","preventOpenOnFocus","filterDate","ref","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble"],"mappings":"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"}

package/dist/components/DatePicker/DatePickerTrigger.es.js

@@ -1,5 +1,5 @@
-import { merge as c } from "../../utilities/merge.es.js";
-import { Validation as s } from "../../utilities/validation.es.js";
+import { merge as s } from "../../utilities/merge.es.js";
+import { Validation as e } from "../../utilities/validation.es.js";
 import t, { forwardRef as h } from "react";
 import S from "../../foundation/Icon/Generated/IconCaretUp.es.js";
 import { IconSize as l } from "../../foundation/Icon/IconSize.es.js";
@@ -7,8 +7,8 @@ import z from "../../foundation/Icon/Generated/IconCaretDown.es.js";
 import { TextInput as F } from "../TextInput/TextInput.es.js";
 import R from "../../foundation/Icon/Generated/IconCalendar.es.js";
 const I = h(
-  ({ value: r, onClick: e, isClearable: o, placeHolder: m, isCalendarOpen: f, validation: a = s.Default, onDateChanged: i }, d) => {
-    const w = a === s.Error, g = "tw-right-14", p = "tw-right-8", E = "tw-right-4", n = ((u) => {
+  ({ value: o, onClick: a, isClearable: i, placeHolder: m, isCalendarOpen: f, validation: r = e.Default, onDateChanged: n }, d) => {
+    const w = r === e.Error || r === e.Warning, g = "tw-right-14", p = "tw-right-8", E = "tw-right-4", c = ((u) => {
       switch (u) {
         case 0:
           return E;
@@ -19,25 +19,25 @@ const I = h(
       }
       return "";
     })(
-      (r && o ? 1 : 0) + (w ? 1 : 0)
+      (o && i ? 1 : 0) + (w ? 1 : 0)
     );
     return /* @__PURE__ */ t.createElement("div", { ref: d, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: c([
+        className: s([
           "tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]",
-          n
+          c
         ])
       },
       f ? /* @__PURE__ */ t.createElement(S, { size: l.Size20 }) : /* @__PURE__ */ t.createElement(z, { size: l.Size20 })
     ), /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: c([
+        className: s([
           "tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10",
-          n
+          c
         ]),
-        onClick: e,
+        onClick: a,
         "data-test-id": "open-close-click-zone"
       }
     ), /* @__PURE__ */ t.createElement(
@@ -45,13 +45,13 @@ const I = h(
       {
         decorator: /* @__PURE__ */ t.createElement(R, null),
         placeholder: m,
-        value: r,
-        clearable: o,
-        onEnterPressed: e,
+        value: o,
+        clearable: i,
+        onEnterPressed: a,
         onClear: () => {
-          i && i(null);
+          n && n(null);
         },
-        validation: a
+        validation: r
       }
     ));
   }

package/dist/components/DatePicker/DatePickerTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isErrorValidationState = validation === Validation.Error;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACK,UAAAC,IAAyBJ,MAAeC,EAAW,OAEnDI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAyB,IAAI;AAAA,IAGvC;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}
+{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isWarningOrErrorValidationState = validation === Validation.Error || validation === Validation.Warning;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isWarningOrErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACD,UAAMC,IAAkCJ,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAkC,IAAI;AAAA,IAGhD;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}

package/dist/components/Textarea/Textarea.es.js

@@ -1,76 +1,80 @@
-import { useMemoizedId as T } from "../../hooks/useMemoizedId.es.js";
-import { useFocusRing as h } from "@react-aria/focus";
-import { mergeProps as z } from "@react-aria/utils";
-import { FOCUS_STYLE as C } from "../../utilities/focusStyle.es.js";
-import { merge as v } from "../../utilities/merge.es.js";
-import { validationClassMap as F, Validation as a } from "../../utilities/validation.es.js";
-import t from "react";
-import L from "react-textarea-autosize";
-import S from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import { LoadingCircle as I, LoadingCircleSize as M } from "../LoadingCircle/LoadingCircle.es.js";
-const P = ({
-  id: c,
-  value: p,
+import { useMemoizedId as h } from "../../hooks/useMemoizedId.es.js";
+import { useFocusRing as z } from "@react-aria/focus";
+import { mergeProps as C } from "@react-aria/utils";
+import { FOCUS_STYLE as F } from "../../utilities/focusStyle.es.js";
+import { merge as c } from "../../utilities/merge.es.js";
+import { validationClassMap as L, Validation as e } from "../../utilities/validation.es.js";
+import r from "react";
+import S from "react-textarea-autosize";
+import I from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
+import { LoadingCircle as M, LoadingCircleSize as P } from "../LoadingCircle/LoadingCircle.es.js";
+const v = ({
+  id: p,
+  value: u,
   required: d = !1,
   decorator: o,
-  placeholder: u,
+  placeholder: f,
   disabled: l = !1,
   onInput: s,
-  onBlur: i,
-  validation: r = a.Default,
-  minRows: m,
-  maxRows: f,
+  onBlur: m,
+  validation: t = e.Default,
+  minRows: i,
+  maxRows: b,
   autosize: n = !1,
-  resizeable: b = !0,
+  resizeable: x = !0,
   onFocus: w,
-  selectable: x = !1
+  selectable: g = !1
 }) => {
-  const g = n ? L : "textarea", { isFocusVisible: E, focusProps: k } = h({ isTextInput: !0 }), N = { maxRows: f, minRows: m };
-  return /* @__PURE__ */ t.createElement("div", { className: "tw-relative" }, o && /* @__PURE__ */ t.createElement(
+  const E = n ? S : "textarea", { isFocusVisible: k, focusProps: N } = z({ isTextInput: !0 }), T = { maxRows: b, minRows: i };
+  return /* @__PURE__ */ r.createElement("div", { className: "tw-relative" }, o && /* @__PURE__ */ r.createElement(
     "div",
     {
       className: "tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80",
       "data-test-id": "decorator"
     },
     o
-  ), /* @__PURE__ */ t.createElement(
-    g,
+  ), /* @__PURE__ */ r.createElement(
+    E,
     {
-      ...z(k, {
-        onBlur: (e) => i && i(e.target.value),
-        onInput: (e) => s && s(e.target.value)
+      ...C(N, {
+        onBlur: (a) => m && m(a.target.value),
+        onInput: (a) => s && s(a.target.value)
       }),
-      ...n ? N : { rows: m },
-      id: T(c),
-      value: p,
-      placeholder: u,
+      ...n ? T : { rows: i },
+      id: h(p),
+      value: u,
+      placeholder: f,
       required: d,
-      className: v([
+      className: c([
         "tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60",
         !!o && "tw-pl-7 ",
         l ? "tw-border-black-5 tw-bg-black-5 tw-text-black-40" : "tw-text-black tw-border-black-20 hover:tw-border-black-90",
-        E && C,
-        F[r],
-        !b && "tw-resize-none",
-        r === a.Error && "tw-pr-8"
+        k && F,
+        L[t],
+        !x && "tw-resize-none",
+        t === e.Error && "tw-pr-8"
       ]),
       disabled: l,
-      onFocus: (e) => {
-        x && e.target.select(), w && w(e);
+      onFocus: (a) => {
+        g && a.target.select(), w && w(a);
       },
       "data-test-id": "textarea"
     }
-  ), r === a.Loading && /* @__PURE__ */ t.createElement("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10" }, /* @__PURE__ */ t.createElement(I, { size: M.ExtraSmall })), r === a.Error && /* @__PURE__ */ t.createElement(
+  ), t === e.Loading && /* @__PURE__ */ r.createElement("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10" }, /* @__PURE__ */ r.createElement(M, { size: P.ExtraSmall })), (t === e.Error || t === e.Warning) && /* @__PURE__ */ r.createElement(
     "span",
     {
-      className: "tw-absolute tw-top-[0.6rem] tw-right-[0.6rem] tw-text-red-60",
+      className: c([
+        "tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]",
+        t === e.Error && "tw-text-text-negative",
+        t === e.Warning && "tw-text-text-warning"
+      ]),
       "data-test-id": "error-state-exclamation-mark-icon"
     },
-    /* @__PURE__ */ t.createElement(S, null)
+    /* @__PURE__ */ r.createElement(I, null)
   ));
 };
-P.displayName = "FondueTextarea";
+v.displayName = "FondueTextarea";
 export {
-  P as Textarea
+  v as Textarea
 };
 //# sourceMappingURL=Textarea.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { FC, FocusEvent, FormEvent, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n};\n\nexport const Textarea: FC<TextareaProps> = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n}) => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                data-test-id=\"textarea\"\n            />\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {validation === Validation.Error && (\n                <span\n                    className=\"tw-absolute tw-top-[0.6rem] tw-right-[0.6rem] tw-text-red-60\"\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,IAA8B,CAAC;AAAA,EACxC,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAM;AACI,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAAC,MAAM;AACZ,QAAIU,KACA,EAAE,OAAO,UAETD,KACAA,EAAQ,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EAAA,GAEhBN,MAAeC,EAAW,WACvB,gBAAAa,EAAA,cAAC,UAAK,WAAU,wHAAA,GACX,gBAAAA,EAAA,cAAAO,GAAA,EAAc,MAAMC,EAAkB,WAAY,CAAA,CACvD,GAEHtB,MAAeC,EAAW,SACvB,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,oCAEZS,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAhC,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { FC, FocusEvent, FormEvent, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n};\n\nexport const Textarea: FC<TextareaProps> = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n}) => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                data-test-id=\"textarea\"\n            />\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,IAA8B,CAAC;AAAA,EACxC,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAM;AACI,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAACwB,MAAM;AACZ,QAAId,KACAc,EAAE,OAAO,UAETf,KACAA,EAAQe,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EACjB,GACCrB,MAAeC,EAAW,2CACtB,QAAK,EAAA,WAAU,2HACX,gBAAAa,EAAA,cAAAQ,GAAA,EAAc,MAAMC,EAAkB,YAAY,CACvD,IAEFvB,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,EAAM;AAAA,QACb;AAAA,QACAlB,MAAeC,EAAW,SAAS;AAAA,QACnCD,MAAeC,EAAW,WAAW;AAAA,MAAA,CACxC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZuB,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAjC,EAAS,cAAc;"}