@frontify/fondue 13.0.0-rc.14 → 13.0.0-rc.16

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 './styles.css';\n\nimport { offset, shift } from '@floating-ui/dom';\nimport { format, getYear } from 'date-fns';\nimport { forwardRef, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport ReactDatePicker from 'react-datepicker';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport IconCaretLeft from '@foundation/Icon/Generated/IconCaretLeft';\nimport IconCaretLeftDouble from '@foundation/Icon/Generated/IconCaretLeftDouble';\nimport IconCaretRight from '@foundation/Icon/Generated/IconCaretRight';\nimport IconCaretRightDouble from '@foundation/Icon/Generated/IconCaretRightDouble';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { DatePickerTrigger } from './DatePickerTrigger';\n\n// Needed because of https://github.com/Hacker0x01/react-datepicker/issues/3834\nconst ReactDatePickerComponent =\n    (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;\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?: ReactNode;\n    customHeader?: ReactNode;\n    children?: ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    inline?: boolean;\n    filterDate?: (date: Date) => boolean;\n    fixedHeight?: boolean;\n    /**\n     * @description When false, stretches to 100% of container width.\n     * @default true\n     */\n    hugWidth?: boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n    triggerAriaLabel?: string;\n    'data-test-id'?: string;\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<boolean, undefined>;\n\nexport const DatePicker = forwardRef<ReactDatePickerRef, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'MMM dd, yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            customHeader,\n            children,\n            fixedHeight = true,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            inline = false,\n            filterDate = () => true,\n            variant = 'single',\n            hugWidth = true,\n            'data-test-id': dataTestId = 'date-picker',\n            triggerAriaLabel = 'Open or close the date picker',\n        },\n        ref,\n    ) => {\n        const calendarCustomHeaderRef = useRef<HTMLDivElement>(null);\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n\n            queueMicrotask(handleFocus);\n        };\n\n        const handleFocus = () => {\n            calendarCustomHeaderRef.current?.querySelector<HTMLElement>('button')?.focus();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id={dataTestId} className={hugWidth ? 'tw-w-auto' : 'tw-w-full'}>\n                <ReactDatePickerComponent\n                    wrapperClassName={hugWidth ? 'tw-w-auto' : 'tw-w-full'}\n                    calendarClassName={merge([\n                        'react-datepicker-wrap tw-pointer-events-auto',\n                        inline && 'react-datepicker-inline',\n                    ])}\n                    inline={inline}\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={isCalendarOpen ? undefined : onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range'}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    fixedHeight={fixedHeight}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                                hugWidth={hugWidth}\n                                aria-haspopup=\"dialog\"\n                                aria-expanded={isCalendarOpen}\n                                aria-label={triggerAriaLabel}\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                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    popperContainer={({ children }) => createPortal(children, document.body)}\n                    popperModifiers={[shift({ padding: 8 }), offset(8)]}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div\n                            className=\"tw-flex tw-flex-col tw-gap-3\"\n                            ref={calendarCustomHeaderRef}\n                            data-test-id=\"date-picker-header\"\n                        >\n                            {customHeader}\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                        </div>\n                    )}\n                >\n                    {children}\n                </ReactDatePickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ReactDatePickerComponent","ReactDatePicker","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","customHeader","children","fixedHeight","hasPopperArrow","preventOpenOnFocus","inline","filterDate","hugWidth","dataTestId","triggerAriaLabel","ref","calendarCustomHeaderRef","useRef","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleFocus","_b","_a","handleClose","jsx","merge","DatePickerTrigger","day","createPortal","shift","offset","decreaseMonth","increaseMonth","increaseYear","decreaseYear","jsxs","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 './styles.css';\n\nimport { offset, shift } from '@floating-ui/dom';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@frontify/fondue-icons';\nimport { format, getYear } from 'date-fns';\nimport { forwardRef, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport ReactDatePicker from 'react-datepicker';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { DatePickerTrigger } from './DatePickerTrigger';\n\n// Needed because of https://github.com/Hacker0x01/react-datepicker/issues/3834\nconst ReactDatePickerComponent =\n    (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;\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?: ReactNode;\n    customHeader?: ReactNode;\n    children?: ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    inline?: boolean;\n    filterDate?: (date: Date) => boolean;\n    fixedHeight?: boolean;\n    /**\n     * @description When false, stretches to 100% of container width.\n     * @default true\n     */\n    hugWidth?: boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n    triggerAriaLabel?: string;\n    'data-test-id'?: string;\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<boolean, undefined>;\n\nexport const DatePicker = forwardRef<ReactDatePickerRef, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'MMM dd, yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            customHeader,\n            children,\n            fixedHeight = true,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            inline = false,\n            filterDate = () => true,\n            variant = 'single',\n            hugWidth = true,\n            'data-test-id': dataTestId = 'date-picker',\n            triggerAriaLabel = 'Open or close the date picker',\n        },\n        ref,\n    ) => {\n        const calendarCustomHeaderRef = useRef<HTMLDivElement>(null);\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n\n            queueMicrotask(handleFocus);\n        };\n\n        const handleFocus = () => {\n            calendarCustomHeaderRef.current?.querySelector<HTMLElement>('button')?.focus();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id={dataTestId} className={hugWidth ? 'tw-w-auto' : 'tw-w-full'}>\n                <ReactDatePickerComponent\n                    wrapperClassName={hugWidth ? 'tw-w-auto' : 'tw-w-full'}\n                    calendarClassName={merge([\n                        'react-datepicker-wrap tw-pointer-events-auto',\n                        inline && 'react-datepicker-inline',\n                    ])}\n                    inline={inline}\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={isCalendarOpen ? undefined : onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range'}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    fixedHeight={fixedHeight}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                                hugWidth={hugWidth}\n                                aria-haspopup=\"dialog\"\n                                aria-expanded={isCalendarOpen}\n                                aria-label={triggerAriaLabel}\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                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    popperContainer={({ children }) => createPortal(children, document.body)}\n                    popperModifiers={[shift({ padding: 8 }), offset(8)]}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div\n                            className=\"tw-flex tw-flex-col tw-gap-3\"\n                            ref={calendarCustomHeaderRef}\n                            data-test-id=\"date-picker-header\"\n                        >\n                            {customHeader}\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={20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={decreaseMonth}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretLeft size={20} />}\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={20} />}\n                                />\n                                <Button\n                                    style={ButtonStyle.Default}\n                                    size={ButtonSize.Medium}\n                                    onClick={increaseYear}\n                                    emphasis={ButtonEmphasis.Weak}\n                                    icon={<IconCaretRightDouble size={20} />}\n                                />\n                            </div>\n                        </div>\n                    )}\n                >\n                    {children}\n                </ReactDatePickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ReactDatePickerComponent","ReactDatePicker","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","customHeader","children","fixedHeight","hasPopperArrow","preventOpenOnFocus","inline","filterDate","hugWidth","dataTestId","triggerAriaLabel","ref","calendarCustomHeaderRef","useRef","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleFocus","_b","_a","handleClose","jsx","merge","DatePickerTrigger","day","createPortal","shift","offset","decreaseMonth","increaseMonth","increaseYear","decreaseYear","jsxs","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble"],"mappings":"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"}

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

@@ -1,52 +1,49 @@
-import { jsxs as z, jsx as t } from "react/jsx-runtime";
-import { forwardRef as E } from "react";
-import { TextInput as b } from "../TextInput/TextInput.es.js";
-import F from "../../foundation/Icon/Generated/IconCalendar.es.js";
-import I from "../../foundation/Icon/Generated/IconCaretDown.es.js";
-import O from "../../foundation/Icon/Generated/IconCaretUp.es.js";
-import { IconSize as l } from "../../foundation/Icon/IconSize.es.js";
-import { merge as f } from "../../utilities/merge.es.js";
+import { jsxs as E, jsx as t } from "react/jsx-runtime";
+import { IconCaretUp as b, IconCaretDown as F, IconCalendar as I } from "@frontify/fondue-icons";
+import { forwardRef as O } from "react";
+import { TextInput as R } from "../TextInput/TextInput.es.js";
+import { merge as l } from "../../utilities/merge.es.js";
 import { Validation as a } from "../../utilities/validation.es.js";
-const R = E(
+const S = O(
   ({
-    value: i,
+    value: s,
     onClick: r,
-    isClearable: s,
-    placeHolder: m,
+    isClearable: i,
+    placeHolder: f,
     isCalendarOpen: w,
     validation: e = a.Default,
     onDateChanged: n,
     hugWidth: d = !0,
-    "aria-label": g
-  }, p) => {
-    const u = e === a.Error || e === a.Warning, h = "tw-right-14", S = "tw-right-8", y = "tw-right-4", c = ((o) => {
+    "aria-label": m
+  }, g) => {
+    const u = e === a.Error || e === a.Warning, p = "tw-right-14", h = "tw-right-8", y = "tw-right-4", c = ((o) => {
       switch (o) {
         case 0:
           return y;
         case 1:
-          return S;
-        case 2:
           return h;
+        case 2:
+          return p;
       }
       return "";
     })(
-      (i && s ? 1 : 0) + (u ? 1 : 0)
+      (s && i ? 1 : 0) + (u ? 1 : 0)
     );
-    return /* @__PURE__ */ z("div", { ref: p, className: d ? "tw-w-auto" : "tw-w-full", children: [
+    return /* @__PURE__ */ E("div", { ref: g, className: d ? "tw-w-auto" : "tw-w-full", children: [
       /* @__PURE__ */ t(
         "div",
         {
-          className: f([
+          className: l([
             "tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]",
             c
           ]),
-          children: w ? /* @__PURE__ */ t(O, { size: l.Size20 }) : /* @__PURE__ */ t(I, { size: l.Size20 })
+          children: w ? /* @__PURE__ */ t(b, { size: 20 }) : /* @__PURE__ */ t(F, { size: 20 })
         }
       ),
       /* @__PURE__ */ t(
         "div",
         {
-          className: f([
+          className: l([
             "tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10",
             c
           ]),
@@ -56,17 +53,17 @@ const R = E(
           onKeyDown: (o) => {
             (o.key === "Enter" || o.key === " ") && (r == null || r());
           },
-          "aria-label": g,
+          "aria-label": m,
           "data-test-id": "open-close-click-zone"
         }
       ),
       /* @__PURE__ */ t(
-        b,
+        R,
         {
-          decorator: /* @__PURE__ */ t(F, {}),
-          placeholder: m,
-          value: i,
-          clearable: s,
+          decorator: /* @__PURE__ */ t(I, {}),
+          placeholder: f,
+          value: s,
+          clearable: i,
           onEnterPressed: r,
           onClear: () => {
             n && n(null);
@@ -77,8 +74,8 @@ const R = E(
     ] });
   }
 );
-R.displayName = "FondueDatePickerTrigger";
+S.displayName = "FondueDatePickerTrigger";
 export {
-  R as DatePickerTrigger
+  S as DatePickerTrigger
 };
 //# sourceMappingURL=DatePickerTrigger.es.js.map

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 { forwardRef } from 'react';\n\nimport { TextInput } from '@components/TextInput/TextInput';\nimport IconCalendar from '@foundation/Icon/Generated/IconCalendar';\nimport IconCaretDown from '@foundation/Icon/Generated/IconCaretDown';\nimport IconCaretUp from '@foundation/Icon/Generated/IconCaretUp';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\ntype DatePickerTriggerProps = {\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    hugWidth?: boolean;\n    'aria-label': string;\n};\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        {\n            value,\n            onClick,\n            isClearable,\n            placeHolder,\n            isCalendarOpen,\n            validation = Validation.Default,\n            onDateChanged,\n            hugWidth = true,\n            'aria-label': ariaLabel,\n        },\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        return (\n            <div ref={ref} className={hugWidth ? 'tw-w-auto' : 'tw-w-full'}>\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                    role=\"button\"\n                    tabIndex={0}\n                    onKeyDown={(event) => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            onClick?.();\n                        }\n                    }}\n                    aria-label={ariaLabel}\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                        if (onDateChanged) {\n                            onDateChanged(null);\n                        }\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","hugWidth","ariaLabel","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","jsx","merge","IconCaretUp","IconSize","IconCaretDown","event","TextInput","IconCalendar"],"mappings":";;;;;;;;;AAwBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI;AAAA,IACI,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC,IAAaC,EAAW;AAAA,IACxB,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,cAAcC;AAAA,EAAA,GAElBC,MACC;AACD,UAAMC,IAAkCN,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FM,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAA;AAAA,QACJ,KAAK;AACD,iBAAOF;AAAA,QACX,KAAK;AACD,iBAAOD;AAAA,QACX,KAAK;AACD,iBAAOD;AAAA,MAAA;AAEf,aAAO;AAAA,IACX;AAAA,OAEmCZ,KAASE,IAAc,IAAI,MACnBS,IAAkC,IAAI;AAAA,IAGhD;AAGjC,6BACK,OAAA,EAAI,KAAAD,GAAU,WAAWF,IAAW,cAAc,aAC/C,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAM;AAAA,YACb;AAAA,YACAH;AAAA,UAAA,CACH;AAAA,UAEA,UAAAX,IAAiB,gBAAAa,EAACE,GAAA,EAAY,MAAMC,EAAS,OAAA,CAAQ,IAAK,gBAAAH,EAACI,GAAA,EAAc,MAAMD,EAAS,OAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAErG,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAM;AAAA,YACb;AAAA,YACAH;AAAA,UAAA,CACH;AAAA,UACD,SAAAd;AAAA,UACA,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW,CAACqB,MAAU;AAClB,aAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCrB,KAAA,QAAAA;AAAA,UAER;AAAA,UACA,cAAYQ;AAAA,UACZ,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAQ;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,6BAAYC,GAAA,EAAa;AAAA,UACzB,aAAarB;AAAA,UACb,OAAAH;AAAA,UACA,WAAWE;AAAA,UACX,gBAAgBD;AAAA,UAChB,SAAS,MAAM;AACX,YAAIM,KACAA,EAAc,IAAI;AAAA,UAE1B;AAAA,UACA,YAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,EAER;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 { IconCalendar, IconCaretDown, IconCaretUp } from '@frontify/fondue-icons';\nimport { forwardRef } from 'react';\n\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\ntype DatePickerTriggerProps = {\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    hugWidth?: boolean;\n    'aria-label': string;\n};\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        {\n            value,\n            onClick,\n            isClearable,\n            placeHolder,\n            isCalendarOpen,\n            validation = Validation.Default,\n            onDateChanged,\n            hugWidth = true,\n            'aria-label': ariaLabel,\n        },\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        return (\n            <div ref={ref} className={hugWidth ? 'tw-w-auto' : 'tw-w-full'}>\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={20} /> : <IconCaretDown size={20} />}\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                    role=\"button\"\n                    tabIndex={0}\n                    onKeyDown={(event) => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            onClick?.();\n                        }\n                    }}\n                    aria-label={ariaLabel}\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                        if (onDateChanged) {\n                            onDateChanged(null);\n                        }\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","hugWidth","ariaLabel","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","jsx","merge","IconCaretUp","IconCaretDown","event","TextInput","IconCalendar"],"mappings":";;;;;;AAqBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI;AAAA,IACI,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC,IAAaC,EAAW;AAAA,IACxB,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,cAAcC;AAAA,EAAA,GAElBC,MACC;AACD,UAAMC,IAAkCN,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FM,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAA;AAAA,QACJ,KAAK;AACD,iBAAOF;AAAA,QACX,KAAK;AACD,iBAAOD;AAAA,QACX,KAAK;AACD,iBAAOD;AAAA,MAAA;AAEf,aAAO;AAAA,IACX;AAAA,OAEmCZ,KAASE,IAAc,IAAI,MACnBS,IAAkC,IAAI;AAAA,IAGhD;AAGjC,6BACK,OAAA,EAAI,KAAAD,GAAU,WAAWF,IAAW,cAAc,aAC/C,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAM;AAAA,YACb;AAAA,YACAH;AAAA,UAAA,CACH;AAAA,UAEA,UAAAX,sBAAkBe,GAAA,EAAY,MAAM,IAAI,IAAK,gBAAAF,EAACG,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAE3E,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAM;AAAA,YACb;AAAA,YACAH;AAAA,UAAA,CACH;AAAA,UACD,SAAAd;AAAA,UACA,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW,CAACoB,MAAU;AAClB,aAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCpB,KAAA,QAAAA;AAAA,UAER;AAAA,UACA,cAAYQ;AAAA,UACZ,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAQ;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,6BAAYC,GAAA,EAAa;AAAA,UACzB,aAAapB;AAAA,UACb,OAAAH;AAAA,UACA,WAAWE;AAAA,UACX,gBAAgBD;AAAA,UAChB,SAAS,MAAM;AACX,YAAIM,KACAA,EAAc,IAAI;AAAA,UAE1B;AAAA,UACA,YAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,EAER;AACJ;AAEAP,EAAkB,cAAc;"}

package/dist/components/LegacyTextarea/LegacyTextarea.es.js

@@ -1,9 +1,9 @@
 import { jsxs as S, jsx as o } from "react/jsx-runtime";
-import { useFocusRing as j } from "@react-aria/focus";
-import { useRef as v, useEffect as D } from "react";
-import H from "react-textarea-autosize";
-import { LoadingCircle as M, LoadingCircleSize as V } from "../LoadingCircle/LoadingCircle.es.js";
-import W from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
+import { IconExclamationMarkTriangle as j } from "@frontify/fondue-icons";
+import { useFocusRing as v } from "@react-aria/focus";
+import { useRef as D, useEffect as H } from "react";
+import M from "react-textarea-autosize";
+import { LoadingCircle as V, LoadingCircleSize as W } from "../LoadingCircle/LoadingCircle.es.js";
 import { useMemoizedId as A } from "../../hooks/useMemoizedId.es.js";
 import { FOCUS_STYLE as B } from "../../utilities/focusStyle.es.js";
 import { merge as x } from "../../utilities/merge.es.js";
@@ -28,8 +28,8 @@ const R = ({
   onEnterPressed: i,
   ...C
 }) => {
-  const L = m ? H : "textarea", l = v(null);
-  D(() => {
+  const L = m ? M : "textarea", l = D(null);
+  H(() => {
     if (f) {
       const t = setTimeout(() => {
         var p;
@@ -44,7 +44,7 @@ const R = ({
     c && c(t.target.value);
   }, E = (t) => {
     n && n(t.target.value);
-  }, { isFocusVisible: I, focusProps: F } = j({ isTextInput: !0, within: !0 });
+  }, { isFocusVisible: I, focusProps: F } = v({ isTextInput: !0, within: !0 });
   return /* @__PURE__ */ S("div", { className: "tw-relative", ...F, children: [
     a ? /* @__PURE__ */ o(
       "div",
@@ -87,7 +87,7 @@ const R = ({
         ...C
       }
     ),
-    e === r.Loading && /* @__PURE__ */ o("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", children: /* @__PURE__ */ o(M, { size: V.ExtraSmall }) }),
+    e === r.Loading && /* @__PURE__ */ o("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", children: /* @__PURE__ */ o(V, { size: W.ExtraSmall }) }),
     (e === r.Error || e === r.Warning) && /* @__PURE__ */ o(
       "span",
       {
@@ -97,7 +97,7 @@ const R = ({
           e === r.Warning && "tw-text-text-warning"
         ]),
         "data-test-id": "error-state-exclamation-mark-icon",
-        children: /* @__PURE__ */ o(W, {})
+        children: /* @__PURE__ */ o(j, {})
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"LegacyTextarea.es.js","sources":["../../../src/components/LegacyTextarea/LegacyTextarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport {\n    type AriaAttributes,\n    type FocusEvent,\n    type FormEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useRef,\n} from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle/LoadingCircle';\nimport IconExclamationMarkTriangle from '@foundation/Icon/Generated/IconExclamationMarkTriangle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\n\n/**\n * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead.\n */\nexport type LegacyTextareaProps = {\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    focusOnMount?: boolean;\n    onEnterPressed?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n} & AriaAttributes;\n\n/**\n * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead.\n */\nexport const LegacyTextarea = ({\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    focusOnMount,\n    onEnterPressed,\n    ...props\n}: LegacyTextareaProps): ReactElement => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const textareaElement = useRef<HTMLTextAreaElement | null>(null);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            const timeoutId = setTimeout(() => {\n                textareaElement.current?.focus();\n            }, 0);\n            return () => clearTimeout(timeoutId);\n        }\n    }, [focusOnMount]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n    };\n\n    const onBlurHandler = (event: FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n            onBlur(event.target.value);\n        }\n    };\n\n    const onInputHandler = (event: FormEvent<HTMLTextAreaElement>) => {\n        if (onInput) {\n            onInput((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true, within: true });\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\" {...focusProps}>\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            ) : null}\n            <Component\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                onClick={() => textareaElement.current?.focus()}\n                id={useMemoizedId(propId)}\n                ref={textareaElement}\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-line-x-strong focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                onInput={onInputHandler}\n                onKeyDown={onKeyDown}\n                data-test-id=\"textarea\"\n                {...props}\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};\nLegacyTextarea.displayName = 'FondueLegacyTextarea';\n"],"names":["LegacyTextarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","focusOnMount","onEnterPressed","props","Component","TextareaAutosize","textareaElement","useRef","useEffect","timeoutId","_a","onKeyDown","event","onBlurHandler","onInputHandler","isFocusVisible","focusProps","useFocusRing","jsxs","jsx","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":"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"}
+{"version":3,"file":"LegacyTextarea.es.js","sources":["../../../src/components/LegacyTextarea/LegacyTextarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport {\n    type AriaAttributes,\n    type FocusEvent,\n    type FormEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useRef,\n} from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle/LoadingCircle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\n\n/**\n * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead.\n */\nexport type LegacyTextareaProps = {\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    focusOnMount?: boolean;\n    onEnterPressed?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n} & AriaAttributes;\n\n/**\n * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead.\n */\nexport const LegacyTextarea = ({\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    focusOnMount,\n    onEnterPressed,\n    ...props\n}: LegacyTextareaProps): ReactElement => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const textareaElement = useRef<HTMLTextAreaElement | null>(null);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            const timeoutId = setTimeout(() => {\n                textareaElement.current?.focus();\n            }, 0);\n            return () => clearTimeout(timeoutId);\n        }\n    }, [focusOnMount]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n    };\n\n    const onBlurHandler = (event: FocusEvent<HTMLTextAreaElement>) => {\n        if (onBlur) {\n            onBlur(event.target.value);\n        }\n    };\n\n    const onInputHandler = (event: FormEvent<HTMLTextAreaElement>) => {\n        if (onInput) {\n            onInput((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true, within: true });\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\" {...focusProps}>\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            ) : null}\n            <Component\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                onClick={() => textareaElement.current?.focus()}\n                id={useMemoizedId(propId)}\n                ref={textareaElement}\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-line-x-strong focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                onInput={onInputHandler}\n                onKeyDown={onKeyDown}\n                data-test-id=\"textarea\"\n                {...props}\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};\nLegacyTextarea.displayName = 'FondueLegacyTextarea';\n"],"names":["LegacyTextarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","focusOnMount","onEnterPressed","props","Component","TextareaAutosize","textareaElement","useRef","useEffect","timeoutId","_a","onKeyDown","event","onBlurHandler","onInputHandler","isFocusVisible","focusProps","useFocusRing","jsxs","jsx","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":"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"}

package/dist/components/LegacyTooltip/BrightHeader.es.js

@@ -1,40 +1,36 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cloneElement as o } from "react";
-import e from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-import n from "../../foundation/Icon/Generated/IconDocument.es.js";
-import i from "../../foundation/Icon/Generated/IconExclamationMarkCircle.es.js";
-import s from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import { IconSize as a } from "../../foundation/Icon/IconSize.es.js";
-import { merge as g } from "../../utilities/merge.es.js";
-const m = {
+import { IconDocument as r, IconCheckMark as o, IconExclamationMarkTriangle as n, IconExclamationMarkCircle as i } from "@frontify/fondue-icons";
+import { cloneElement as s } from "react";
+import { merge as a } from "../../utilities/merge.es.js";
+const g = {
   Information: "tw-bg-box-selected-strong",
   Warning: "tw-bg-box-negative-strong-pressed",
   Tip: "tw-bg-box-positive-strong-pressed",
   Note: "tw-bg-box-warning-strong"
-}, k = {
+}, x = {
   Information: "before:tw-bg-box-selected-strong",
   Warning: "before:tw-bg-box-negative-strong-pressed",
   Tip: "before:tw-bg-box-positive-strong-pressed",
   Note: "before:tw-bg-box-warning-strong"
 }, b = {
   Information: /* @__PURE__ */ t(i, {}),
-  Warning: /* @__PURE__ */ t(s, {}),
-  Tip: /* @__PURE__ */ t(e, {}),
-  Note: /* @__PURE__ */ t(n, {})
-}, c = ({ headerStyle: r }) => /* @__PURE__ */ t(
+  Warning: /* @__PURE__ */ t(n, {}),
+  Tip: /* @__PURE__ */ t(o, {}),
+  Note: /* @__PURE__ */ t(r, {})
+}, c = ({ headerStyle: e }) => /* @__PURE__ */ t(
   "div",
   {
     "data-test-id": "bright-header",
-    className: g([
+    className: a([
       "tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text",
-      m[r]
+      g[e]
     ]),
-    children: o(b[r], { size: a.Size20 })
+    children: s(b[e], { size: 20 })
   }
 );
 c.displayName = "FondueBrightHeader";
 export {
   c as BrightHeader,
-  k as brightHeaderArrowBackgroundColors
+  x as brightHeaderArrowBackgroundColors
 };
 //# sourceMappingURL=BrightHeader.es.js.map

package/dist/components/LegacyTooltip/BrightHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/LegacyTooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, cloneElement } from 'react';\n\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconDocument from '@foundation/Icon/Generated/IconDocument';\nimport IconExclamationMarkCircle from '@foundation/Icon/Generated/IconExclamationMarkCircle';\nimport IconExclamationMarkTriangle from '@foundation/Icon/Generated/IconExclamationMarkTriangle';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum BrightHeaderStyle {\n    Information = 'Information',\n    Warning = 'Warning',\n    Tip = 'Tip',\n    Note = 'Note',\n}\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nconst brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n    [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n    [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n    [BrightHeaderStyle.Tip]: <IconCheckMark />,\n    [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n    headerStyle: BrightHeaderStyle;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const BrightHeader = ({ headerStyle }: BrightHeaderProps): ReactElement => {\n    return (\n        <div\n            data-test-id=\"bright-header\"\n            className={merge([\n                'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n                brightHeaderBackgroundColors[headerStyle],\n            ])}\n        >\n            {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n        </div>\n    );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","jsx","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAkE;AAAA,EACnE,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAKaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAACC,GAAA,EAA0B;AAAA,EAC3D,SAA4B,gBAAAD,EAACE,GAAA,EAA4B;AAAA,EACzD,KAAwB,gBAAAF,EAACG,GAAA,EAAc;AAAA,EACvC,MAAyB,gBAAAH,EAACI,GAAA,CAAA,CAAa;AAC5C,GASaC,IAAe,CAAC,EAAE,aAAAC,QAEvB,gBAAAN;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,IAEA,UAAAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA,EAAA;AAAA;AAIlFJ,EAAa,cAAc;"}
+{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/LegacyTooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    IconCheckMark,\n    IconDocument,\n    IconExclamationMarkCircle,\n    IconExclamationMarkTriangle,\n} from '@frontify/fondue-icons';\nimport { type ReactElement, cloneElement } from 'react';\n\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum BrightHeaderStyle {\n    Information = 'Information',\n    Warning = 'Warning',\n    Tip = 'Tip',\n    Note = 'Note',\n}\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nconst brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n    [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n    [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n    [BrightHeaderStyle.Tip]: <IconCheckMark />,\n    [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n    headerStyle: BrightHeaderStyle;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const BrightHeader = ({ headerStyle }: BrightHeaderProps): ReactElement => {\n    return (\n        <div\n            data-test-id=\"bright-header\"\n            className={merge([\n                'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n                brightHeaderBackgroundColors[headerStyle],\n            ])}\n        >\n            {cloneElement(brightHeaderIcon[headerStyle], { size: 20 })}\n        </div>\n    );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","jsx","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge"],"mappings":";;;;AAyBA,MAAMA,IAAkE;AAAA,EACnE,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAKaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAACC,GAAA,EAA0B;AAAA,EAC3D,SAA4B,gBAAAD,EAACE,GAAA,EAA4B;AAAA,EACzD,KAAwB,gBAAAF,EAACG,GAAA,EAAc;AAAA,EACvC,MAAyB,gBAAAH,EAACI,GAAA,CAAA,CAAa;AAC5C,GASaC,IAAe,CAAC,EAAE,aAAAC,QAEvB,gBAAAN;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,IAEA,YAAaP,EAAiBO,CAAW,GAAG,EAAE,MAAM,IAAI;AAAA,EAAA;AAAA;AAIrED,EAAa,cAAc;"}