@scality/core-ui 0.182.0 → 0.184.0

package/dist/components/buttonv2/CopyButton.component.d.ts

@@ -3,12 +3,13 @@ export declare const COPY_STATE_IDLE = "idle";
 export declare const COPY_STATE_SUCCESS = "success";
 export declare const COPY_STATE_UNSUPPORTED = "unsupported";
 export declare const useClipboard: () => {
-    copy: (text: any) => void;
+    copy: (text: string, asHtml?: boolean) => void;
     copyStatus: string;
 };
-export declare const CopyButton: ({ label, textToCopy, variant, ...props }: {
+export declare const CopyButton: ({ label, textToCopy, copyAsHtml, variant, ...props }: {
     label?: string;
     textToCopy: string;
+    copyAsHtml?: boolean;
     variant?: "outline" | "ghost";
 } & Props) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CopyButton.component.d.ts.map

package/dist/components/buttonv2/CopyButton.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;;;CAuBxB,CAAC;AAEF,eAAO,MAAM,UAAU,6CAKpB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,KAAK,4CA+CR,CAAC"}
+{"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;iBASQ,MAAM,WAAW,OAAO;;CAoCxD,CAAC;AAEF,eAAO,MAAM,UAAU,yDAMpB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,KAAK,4CA+CR,CAAC"}

package/dist/components/buttonv2/CopyButton.component.js

@@ -13,20 +13,41 @@ export const useClipboard = () => {
         }, 2000);
         return () => clearTimeout(timer);
     }, [copyStatus]);
-    const copyToClipboard = (text) => {
+    const copyToClipboard = (text, asHtml) => {
         if (!navigator || !navigator.clipboard) {
             setCopyStatus(COPY_STATE_UNSUPPORTED);
             return;
         }
-        navigator.clipboard.writeText(text);
-        setCopyStatus(COPY_STATE_SUCCESS);
+        if (asHtml) {
+            // Copy as HTML with plain text fallback
+            const el = document.createElement('div');
+            el.innerHTML = text;
+            const plainText = el.innerText;
+            const clipboardItem = new ClipboardItem({
+                'text/html': new Blob([text], { type: 'text/html' }),
+                'text/plain': new Blob([plainText], { type: 'text/plain' }),
+            });
+            navigator.clipboard
+                .write([clipboardItem])
+                .then(() => {
+                setCopyStatus(COPY_STATE_SUCCESS);
+            })
+                .catch(() => {
+                setCopyStatus(COPY_STATE_UNSUPPORTED);
+            });
+        }
+        else {
+            // Copy as plain text only
+            navigator.clipboard.writeText(text);
+            setCopyStatus(COPY_STATE_SUCCESS);
+        }
     };
     return {
         copy: copyToClipboard,
         copyStatus: copyStatus,
     };
 };
-export const CopyButton = ({ label, textToCopy, variant, ...props }) => {
+export const CopyButton = ({ label, textToCopy, copyAsHtml, variant, ...props }) => {
     const { copy, copyStatus } = useClipboard();
     return (_jsx(Button, { ...props, variant: variant === 'outline' ? 'outline' : undefined, style: {
             minWidth: 
@@ -38,7 +59,7 @@ export const CopyButton = ({ label, textToCopy, variant, ...props }) => {
             ? copyStatus === COPY_STATE_SUCCESS
                 ? `Copied${label ? ' ' + label + '' : ''}!`
                 : `Copy${label ? ' ' + label : ''}`
-            : undefined, icon: _jsx(Icon, { name: copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy', color: copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined }), disabled: copyStatus === COPY_STATE_SUCCESS || props.disabled, onClick: () => copy(textToCopy), type: "button", tooltip: variant !== 'outline'
+            : undefined, icon: _jsx(Icon, { name: copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy', color: copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined }), disabled: copyStatus === COPY_STATE_SUCCESS || props.disabled, onClick: () => copy(textToCopy, copyAsHtml), type: "button", tooltip: variant !== 'outline'
             ? {
                 overlay: copyStatus === COPY_STATE_SUCCESS
                     ? 'Copied !'

package/dist/components/infomessage/InfoMessage.component.d.ts

@@ -2,7 +2,8 @@ type Props = {
     title: string | React.ReactNode;
     content: React.ReactNode;
     link?: string;
+    linkText?: string;
 };
-export declare const InfoMessage: ({ title, content, link }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoMessage: ({ title, content, link, linkText }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=InfoMessage.component.d.ts.map

package/dist/components/infomessage/InfoMessage.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,WAAW,6BAA8B,KAAK,4CAuB1D,CAAC"}
+{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAYF,eAAO,MAAM,WAAW,uCAAwC,KAAK,4CAuBpE,CAAC"}

package/dist/components/infomessage/InfoMessage.component.js

@@ -13,8 +13,8 @@ const InfoMessageContainer = styled.div `
   gap: 0.5rem;
   color: white;
 `;
-export const InfoMessage = ({ title, content, link }) => {
+export const InfoMessage = ({ title, content, link, linkText }) => {
     const { containerRef, backgroundColor } = useComputeBackgroundColor();
     const theme = useTheme();
-    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: ["More info ", _jsx(Icon, { name: "External-link" })] }))] }));
+    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: [linkText || 'More info', " ", _jsx(Icon, { name: "External-link" })] }))] }));
 };

package/dist/components/textarea/TextArea.component.d.ts

@@ -5,6 +5,11 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<Textare
     variant?: TextAreaVariant;
     width?: CSSProperties["width"];
     height?: CSSProperties["height"];
+    /**
+     * Automatically adjust height to fit content
+     * When enabled, the textarea will grow/shrink to show all content
+     */
+    autoGrow?: boolean;
 } & import("react").RefAttributes<RefType>>;
 export {};
 //# sourceMappingURL=TextArea.component.d.ts.map

package/dist/components/textarea/TextArea.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textarea/TextArea.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,sBAAsB,EAEvB,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAMvC,KAAK,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAAC;AA4F1C,eAAO,MAAM,QAAQ;cAhGT,eAAe;YACjB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;2CA8FiC,CAAC"}
+{"version":3,"file":"TextArea.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textarea/TextArea.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAWvC,KAAK,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAAC;AA0J1C,eAAO,MAAM,QAAQ;cAnKT,eAAe;YACjB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;IAChC;;;OAGG;eACQ,OAAO;2CA4J+C,CAAC"}

package/dist/components/textarea/TextArea.component.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { forwardRef, useEffect, useRef, useImperativeHandle, useCallback, } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 const TextAreaContainer = styled.textarea `
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
-  resize: vertical;
+  resize: ${(props) => (props.autoGrow ? 'none' : 'vertical')};
   font-family: ${(props) => props.variant === 'code' ? 'Courier New' : 'Lato'};
   font-size: ${spacing.f14};
 
@@ -19,12 +19,18 @@ const TextAreaContainer = styled.textarea `
     css `
       width: ${props.width};
     `}
-
+    
   ${(props) => props.height &&
     css `
       height: ${props.height};
     `}
 
+  ${(props) => props.autoGrow &&
+    css `
+      overflow: hidden;
+      box-sizing: border-box;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -52,10 +58,36 @@ const TextAreaContainer = styled.textarea `
     `;
 }}
 `;
-function TextAreaElement({ rows = 3, cols = 20, width, height, variant = 'code', ...rest }, ref) {
+function TextAreaElement({ rows = 3, cols = 20, width, height, variant = 'code', autoGrow = false, value, defaultValue, onChange, ...rest }, ref) {
+    const internalRef = useRef(null);
+    // Expose the textarea element to parent components via forwarded ref
+    useImperativeHandle(ref, () => internalRef.current);
+    // Adjust height on mount and when value changes (for controlled components)
+    const adjustHeight = useCallback(() => {
+        const textarea = internalRef.current;
+        if (!textarea || !autoGrow)
+            return;
+        // Reset height to auto to get the correct scrollHeight
+        textarea.style.height = '0px';
+        // Set the height to match the content
+        const newHeight = textarea.scrollHeight;
+        textarea.style.height = `${newHeight}px`;
+    }, [autoGrow]);
+    useEffect(() => {
+        adjustHeight();
+    }, [adjustHeight, value]);
+    // Handle onChange to support both controlled and uncontrolled components
+    const handleChange = useCallback((event) => {
+        if (autoGrow) {
+            adjustHeight();
+        }
+        if (onChange) {
+            onChange(event);
+        }
+    }, [autoGrow, adjustHeight, onChange]);
     if (width || height) {
-        return (_jsx(TextAreaContainer, { className: "sc-textarea", width: width, height: height, variant: variant, ...rest, ref: ref }));
+        return (_jsx(TextAreaContainer, { className: "sc-textarea", width: width, height: height, variant: variant, autoGrow: autoGrow, value: value, defaultValue: defaultValue, onChange: handleChange, ...rest, ref: internalRef }));
     }
-    return (_jsx(TextAreaContainer, { className: "sc-textarea", rows: rows, cols: cols, variant: variant, ...rest, ref: ref }));
+    return (_jsx(TextAreaContainer, { className: "sc-textarea", rows: rows, cols: cols, variant: variant, autoGrow: autoGrow, value: value, defaultValue: defaultValue, onChange: handleChange, ...rest, ref: internalRef }));
 }
 export const TextArea = forwardRef(TextAreaElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.182.0",
+  "version": "0.184.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/buttonv2/CopyButton.component.tsx

@@ -14,14 +14,36 @@ export const useClipboard = () => {
     return () => clearTimeout(timer);
   }, [copyStatus]);
 
-  const copyToClipboard = (text) => {
+  const copyToClipboard = (text: string, asHtml?: boolean) => {
     if (!navigator || !navigator.clipboard) {
       setCopyStatus(COPY_STATE_UNSUPPORTED);
       return;
     }
 
-    navigator.clipboard.writeText(text);
-    setCopyStatus(COPY_STATE_SUCCESS);
+    if (asHtml) {
+      // Copy as HTML with plain text fallback
+      const el = document.createElement('div');
+      el.innerHTML = text;
+      const plainText = el.innerText;
+
+      const clipboardItem = new ClipboardItem({
+        'text/html': new Blob([text], { type: 'text/html' }),
+        'text/plain': new Blob([plainText], { type: 'text/plain' }),
+      });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => {
+          setCopyStatus(COPY_STATE_SUCCESS);
+        })
+        .catch(() => {
+          setCopyStatus(COPY_STATE_UNSUPPORTED);
+        });
+    } else {
+      // Copy as plain text only
+      navigator.clipboard.writeText(text);
+      setCopyStatus(COPY_STATE_SUCCESS);
+    }
   };
 
   return {
@@ -33,11 +55,13 @@ export const useClipboard = () => {
 export const CopyButton = ({
   label,
   textToCopy,
+  copyAsHtml,
   variant,
   ...props
 }: {
   label?: string;
   textToCopy: string;
+  copyAsHtml?: boolean;
   variant?: 'outline' | 'ghost';
 } & Props) => {
   const { copy, copyStatus } = useClipboard();
@@ -68,7 +92,7 @@ export const CopyButton = ({
         />
       }
       disabled={copyStatus === COPY_STATE_SUCCESS || props.disabled}
-      onClick={() => copy(textToCopy)}
+      onClick={() => copy(textToCopy, copyAsHtml)}
       type="button"
       tooltip={
         variant !== 'outline'

package/src/lib/components/infomessage/InfoMessage.component.tsx

@@ -8,6 +8,7 @@ type Props = {
   title: string | React.ReactNode;
   content: React.ReactNode;
   link?: string;
+  linkText?: string;
 };
 
 const InfoMessageContainer = styled.div`
@@ -20,7 +21,7 @@ const InfoMessageContainer = styled.div`
   color: white;
 `;
 
-export const InfoMessage = ({ title, content, link }: Props) => {
+export const InfoMessage = ({ title, content, link, linkText }: Props) => {
   const { containerRef, backgroundColor } = useComputeBackgroundColor();
   const theme = useTheme();
 
@@ -38,7 +39,7 @@ export const InfoMessage = ({ title, content, link }: Props) => {
       </Text>
       {link && (
         <Link href={link} target="_blank" style={{ alignSelf: 'flex-end' }}>
-          More info <Icon name="External-link"></Icon>
+          {linkText || 'More info'} <Icon name="External-link"></Icon>
         </Link>
       )}
     </InfoMessageContainer>

package/src/lib/components/infomessage/InfoMessageUtils.test.tsx

@@ -1,8 +1,66 @@
+import React from 'react';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { coreUIAvailableThemes } from '../../style/theme';
 import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
 import { useComputeBackgroundColor } from './InfoMessageUtils';
+import { InfoMessage } from './InfoMessage.component';
+import { getWrapper } from '../../testUtils';
+
+describe('InfoMessage', () => {
+  const selectors = {
+    title: () => screen.getByText('Title'),
+    content: () => screen.getByText('Content'),
+    defaultLinkText: () => screen.getByText('More info'),
+    link: () => screen.getByRole('link'),
+    linkText: () => screen.getByText('Link text'),
+  };
+  it('should render', () => {
+    const { Wrapper } = getWrapper();
+    render(<InfoMessage title="Title" content="Content" />, {
+      wrapper: Wrapper,
+    });
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+  });
+  it('should render with link and default link text', () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <InfoMessage
+        title="Title"
+        content="Content"
+        link="https://www.google.com"
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+    expect(selectors.link()).toBeInTheDocument();
+    expect(selectors.defaultLinkText()).toBeInTheDocument();
+    expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com');
+  });
+  it('should render with correct link text', () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <InfoMessage
+        title="Title"
+        content="Content"
+        link="https://www.google.com"
+        linkText="Link text"
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+    expect(selectors.link()).toBeInTheDocument();
+    expect(selectors.linkText()).toBeInTheDocument();
+    expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com');
+  });
+});
 
 describe('useComputeBackgroundColor', () => {
   const SUT = jest.fn();

package/src/lib/components/textarea/TextArea.component.tsx

@@ -3,6 +3,10 @@ import {
   forwardRef,
   TextareaHTMLAttributes,
   ForwardedRef,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  useCallback,
 } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
@@ -12,6 +16,11 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   variant?: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  /**
+   * Automatically adjust height to fit content
+   * When enabled, the textarea will grow/shrink to show all content
+   */
+  autoGrow?: boolean;
 };
 type RefType = HTMLTextAreaElement | null;
 
@@ -19,10 +28,11 @@ const TextAreaContainer = styled.textarea<{
   variant: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  autoGrow?: boolean;
 }>`
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
-  resize: vertical;
+  resize: ${(props) => (props.autoGrow ? 'none' : 'vertical')};
   font-family: ${(props) =>
     props.variant === 'code' ? 'Courier New' : 'Lato'};
   font-size: ${spacing.f14};
@@ -39,13 +49,20 @@ const TextAreaContainer = styled.textarea<{
     css`
       width: ${props.width};
     `}
-
+    
   ${(props) =>
     props.height &&
     css`
       height: ${props.height};
     `}
 
+  ${(props) =>
+    props.autoGrow &&
+    css`
+      overflow: hidden;
+      box-sizing: border-box;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -77,9 +94,55 @@ const TextAreaContainer = styled.textarea<{
 `;
 
 function TextAreaElement(
-  { rows = 3, cols = 20, width, height, variant = 'code', ...rest }: Props,
+  {
+    rows = 3,
+    cols = 20,
+    width,
+    height,
+    variant = 'code',
+    autoGrow = false,
+    value,
+    defaultValue,
+    onChange,
+    ...rest
+  }: Props,
   ref: ForwardedRef<RefType>,
 ) {
+  const internalRef = useRef<HTMLTextAreaElement>(null);
+
+  // Expose the textarea element to parent components via forwarded ref
+  useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
+
+  // Adjust height on mount and when value changes (for controlled components)
+  const adjustHeight = useCallback(() => {
+    const textarea = internalRef.current;
+    if (!textarea || !autoGrow) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = '0px';
+
+    // Set the height to match the content
+    const newHeight = textarea.scrollHeight;
+    textarea.style.height = `${newHeight}px`;
+  }, [autoGrow]);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight, value]);
+
+  // Handle onChange to support both controlled and uncontrolled components
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (autoGrow) {
+        adjustHeight();
+      }
+      if (onChange) {
+        onChange(event);
+      }
+    },
+    [autoGrow, adjustHeight, onChange],
+  );
+
   if (width || height) {
     return (
       <TextAreaContainer
@@ -87,8 +150,12 @@ function TextAreaElement(
         width={width}
         height={height}
         variant={variant}
+        autoGrow={autoGrow}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
         {...rest}
-        ref={ref}
+        ref={internalRef}
       />
     );
   }
@@ -99,8 +166,12 @@ function TextAreaElement(
       rows={rows}
       cols={cols}
       variant={variant}
+      autoGrow={autoGrow}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={handleChange}
       {...rest}
-      ref={ref}
+      ref={internalRef}
     />
   );
 }

package/stories/textarea.stories.tsx

@@ -32,14 +32,14 @@ export const Playground = {};
 
 export const DefaultTextArea = {
   args: {
-    value: 'Some text',
+    defaultValue: 'Some text',
   },
 };
 
 export const TextVariantTextArea = {
   args: {
     variant: 'text',
-    value: 'Text area with "text" variant',
+    defaultValue: 'Text area with "text" variant',
   },
 };
 
@@ -67,3 +67,65 @@ export const RowsAndColsSet = {
     placeholder: 'With rows = 20 and cols = 40',
   },
 };
+
+export const AutoGrowShortText = {
+  args: {
+    autoGrow: true,
+    defaultValue: 'Hello World!',
+    width: '400px',
+  },
+};
+
+/**
+ * Auto-growing textarea adjusts its height based on content
+ * Perfect for displaying commands or long text where you want the entire content visible
+ * Simply set autoGrow={true} and the textarea will grow to show all content
+ */
+export const AutoGrowTextArea = {
+  args: {
+    autoGrow: true,
+    placeholder:
+      'Type or paste content here...\nThe textarea will automatically grow to fit all the content.',
+    defaultValue: `docker run -d \\
+  --name my-container \\
+  -p 8080:80 \\
+  -v /host/path:/container/path \\
+  -e ENV_VAR=value \\
+  my-image:latest`,
+    width: '500px',
+  },
+};
+
+/**
+ * Auto-growing textarea with long command example
+ * The entire command is visible without scrolling
+ */
+export const AutoGrowWithLongCommand = {
+  args: {
+    autoGrow: true,
+    variant: 'code',
+    defaultValue: `kubectl apply -f - <<EOF
+apiVersion: v1
+kind: Pod
+metadata:
+  name: my-pod
+  labels:
+    app: myapp
+spec:
+  containers:
+  - name: nginx
+    image: nginx:1.14.2
+    ports:
+    - containerPort: 80
+    env:
+    - name: DATABASE_URL
+      value: "postgresql://user:password@localhost:5432/db"
+    - name: API_KEY
+      valueFrom:
+        secretKeyRef:
+          name: api-secret
+          key: api-key
+EOF`,
+    width: '600px',
+  },
+};