@scality/core-ui 0.182.0 → 0.183.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/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;AAyJ1C,eAAO,MAAM,QAAQ;cAlKT,eAAe;YACjB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;IAChC;;;OAGG;eACQ,OAAO;2CA2J+C,CAAC"}

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

@@ -1,5 +1,5 @@
 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 `
@@ -25,6 +25,11 @@ const TextAreaContainer = styled.textarea `
       height: ${props.height};
     `}
 
+  ${(props) => props.autoGrow &&
+    css `
+      overflow: hidden;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -52,10 +57,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 = 'auto';
+        // 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.183.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/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,6 +28,7 @@ const TextAreaContainer = styled.textarea<{
   variant: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  autoGrow?: boolean;
 }>`
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
@@ -46,6 +56,12 @@ const TextAreaContainer = styled.textarea<{
       height: ${props.height};
     `}
 
+  ${(props) =>
+    props.autoGrow &&
+    css`
+      overflow: hidden;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -77,9 +93,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 = 'auto';
+
+    // 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 +149,12 @@ function TextAreaElement(
         width={width}
         height={height}
         variant={variant}
+        autoGrow={autoGrow}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
         {...rest}
-        ref={ref}
+        ref={internalRef}
       />
     );
   }
@@ -99,8 +165,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,57 @@ export const RowsAndColsSet = {
     placeholder: 'With rows = 20 and cols = 40',
   },
 };
+
+/**
+ * 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',
+  },
+};