@frontify/fondue-components 19.6.0 → 19.6.1

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    type ChangeEventHandler,\n    useEffect,\n    useRef,\n    useState,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type SyntheticEvent,\n    type ReactElement,\n    type CSSProperties,\n} from 'react';\n\nimport styles from './styles/textarea.module.scss';\n\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    'data-test-id'?: string;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const Textarea = ({\n    'data-test-id': dataTestId = 'fondue-textarea',\n    autocomplete,\n    autosize,\n    clearable,\n    decorator,\n    defaultValue,\n    disabled,\n    extraActions,\n    focusOnMount,\n    minRows: rows = 1,\n    maxRows,\n    onEnterPressed,\n    readOnly,\n    resizable,\n    selectable = true,\n    status = 'default',\n    value: inputValue,\n    ...props\n}: TextareaProps) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-replicated-value={value}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <textarea\n                {...props}\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    props.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    props.onBlur?.(blurEvent);\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                className={styles.textarea}\n                disabled={disabled}\n                onKeyDown={handleKeyDown}\n                onInput={(event) => setValue(event.currentTarget.value)}\n                onSelect={(event) => {\n                    if (!selectable) {\n                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                    }\n                }}\n                readOnly={readOnly}\n                ref={ref}\n                rows={rows}\n                value={value}\n            ></textarea>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Textarea","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","ref","useRef","wasClicked","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross"],"mappings":"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"}
+{"version":3,"file":"fondue-components30.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type SyntheticEvent,\n} from 'react';\n\nimport styles from './styles/textarea.module.scss';\n\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const Textarea = ({\n    'data-test-id': dataTestId = 'fondue-textarea',\n    autocomplete,\n    autosize,\n    clearable,\n    decorator,\n    defaultValue,\n    disabled,\n    extraActions,\n    focusOnMount,\n    minRows: rows = 1,\n    maxRows,\n    onEnterPressed,\n    readOnly,\n    resizable,\n    selectable = true,\n    status = 'default',\n    value: inputValue,\n    ...props\n}: TextareaProps) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-replicated-value={value}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <textarea\n                {...props}\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    props.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    props.onBlur?.(blurEvent);\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                className={styles.textarea}\n                disabled={disabled}\n                onKeyDown={handleKeyDown}\n                onInput={(event) => setValue(event.currentTarget.value)}\n                onSelect={(event) => {\n                    if (!selectable) {\n                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                    }\n                }}\n                readOnly={readOnly}\n                ref={ref}\n                rows={rows}\n                value={value}\n            ></textarea>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Textarea","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","ref","useRef","wasClicked","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross"],"mappings":"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"}

package/dist/fondue-components34.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components85.js";
-import { colorToCss as e } from "./fondue-components86.js";
+import s from "./fondue-components86.js";
+import { colorToCss as e } from "./fondue-components87.js";
 const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
   const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
   return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });

package/dist/fondue-components39.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
 import { sv as e } from "./fondue-components38.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${t}`,

package/dist/fondue-components42.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
 import { sv as e } from "./fondue-components38.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong data-[readonly="true"]:tw-pointer-events-none ${t}`,

package/dist/fondue-components85.js

@@ -1,8 +1,5 @@
-const o = "_root_lwb4s_1", t = {
-  root: o
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  t as default,
-  o as root
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components85.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components86.js

@@ -1,8 +1,8 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+const o = "_root_lwb4s_1", t = {
+  root: o
 };
 export {
-  r as colorToCss
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components86.js.map

package/dist/fondue-components86.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components86.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components86.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components87.js

@@ -1,5 +1,8 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+};
 export {
-  t as FOCUS_OUTLINE
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components87.js.map

package/dist/fondue-components87.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components87.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components87.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/index.d.ts

@@ -1943,7 +1943,10 @@ export { Text_2 as Text }
 export declare const Textarea: ({ "data-test-id": dataTestId, autocomplete, autosize, clearable, decorator, defaultValue, disabled, extraActions, focusOnMount, minRows: rows, maxRows, onEnterPressed, readOnly, resizable, selectable, status, value: inputValue, ...props }: TextareaProps) => JSX_2.Element;
 
 declare type TextareaProps = {
-    'data-test-id'?: string;
+    /**
+     * The id of the textarea
+     */
+    id?: string;
     /**
      * If `true`, Textarea will have `autoComplete` functionality
      */
@@ -2010,6 +2013,14 @@ declare type TextareaProps = {
      * Event handler called when the text inside of text input is selected
      */
     onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
+    /**
+     * If `true`, Textarea will be required
+     */
+    required?: boolean;
+    /**
+     * The test id of the textarea
+     */
+    'data-test-id'?: string;
     placeholder?: string;
     readOnly?: boolean;
     resizable?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "19.6.0",
+  "version": "19.6.1",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",