@cyber-harbour/ui 1.0.44 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -27,8 +27,8 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@types/d3-force": "^3.0.10",
-    "d3-force": "^3.0.0",
+    "d3": "^7.9.0",
+    "lodash.clonedeep": "^4.5.0",
     "react-content-loader": "^7.0.2",
     "react-force-graph-2d": "^1.27.1",
     "react-tiny-popover": "^8.1.6",
@@ -47,6 +47,8 @@
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.14",
+    "@types/d3": "^7.4.3",
+    "@types/lodash.clonedeep": "^4.5.9",
     "@types/styled-components": "^5.1.34",
     "@vitest/browser": "^3.1.3",
     "@vitest/coverage-v8": "^3.1.3",

package/src/Core/Input/Input.tsx

@@ -1,9 +1,9 @@
-import { InputSize, InputSizeStyle, InputVariant, getInputStyles } from '../../Theme';
-import { forwardRef, InputHTMLAttributes, Ref } from 'react';
-import { styled } from 'styled-components';
+import { InputSize, InputVariant, remToPx } from '../../Theme';
+import { forwardRef, InputHTMLAttributes, Ref, TextareaHTMLAttributes, useEffect, useRef, useState } from 'react';
+import { styled, useTheme } from 'styled-components';
 import { InfoCircleFilledIcon } from '../IconComponents';
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type BaseInputProps = {
   error?: boolean;
   append?: any;
   prepend?: any;
@@ -11,15 +11,49 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   variant?: InputVariant;
 };
 
-export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { error, append, prepend, size = 'small', variant = 'outlined', disabled, className, ...props },
+export type InputElementProps = BaseInputProps &
+  InputHTMLAttributes<HTMLInputElement> & {
+    multiline?: false;
+  };
+export type TextAreaElementProps = BaseInputProps &
+  TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    multiline: true;
+    autoResize?: boolean;
+  };
+export type InputProps = InputElementProps | TextAreaElementProps;
+
+type TextAreaInputProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  size?: InputSize;
+  autoResize?: boolean;
+};
+
+type InputRefElement<T> = T extends true ? HTMLTextAreaElement : HTMLInputElement | null;
+
+export const Input: any = forwardRef<InputRefElement<InputProps['multiline']>, InputProps>(function Input(
+  { error, append, prepend, size = 'small', variant = 'outlined', multiline, disabled, className, ...props },
   ref
 ) {
   return (
-    <Group className={className} $error={error} $size={size} $variant={variant} $disabled={!!disabled}>
+    <Group
+      $align={multiline ? 'flex-start' : 'center'}
+      className={className}
+      $error={error}
+      $size={size}
+      $variant={variant}
+      $disabled={!!disabled}
+    >
       {!!prepend && prepend}
       <InputGroup $size={size} $variant={variant}>
-        <input ref={ref} disabled={disabled} {...props} />
+        {multiline ? (
+          <TextAreaInput
+            size={size}
+            disabled={disabled}
+            {...(props as TextAreaElementProps)}
+            ref={ref as Ref<InputRefElement<true>>}
+          />
+        ) : (
+          <input disabled={disabled} {...(props as InputElementProps)} ref={ref as Ref<InputRefElement<false>>} />
+        )}
         {!!error && (
           <IconWrapper $variant={variant}>
             <InfoCircleFilledIcon />
@@ -31,6 +65,52 @@ export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Inpu
   );
 });
 
+const TextAreaInput = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(function Input(
+  { size = 'small', disabled, className, rows = '1', autoResize = false, ...props },
+  ref
+) {
+  const [areaSize, setAreaSize] = useState(Number(rows));
+  const rowsRef = useRef(Number(rows));
+  const divRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const rowHeight = useRef(remToPx(theme.input.sizes[size].lineHeight, theme.baseSize) || theme.baseSize);
+
+  useEffect(() => {
+    if (divRef.current && autoResize) {
+      const height = divRef.current.getBoundingClientRect().height;
+      const areaSize = Math.round(height / rowHeight.current);
+      if (rowsRef.current !== areaSize) {
+        rowsRef.current = areaSize;
+        setAreaSize(areaSize);
+      }
+    }
+  }, [props.value]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <textarea disabled={disabled} {...props} rows={areaSize} ref={ref} />
+      <div
+        ref={divRef}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 'auto',
+          opacity: 0,
+          zIndex: -1,
+          pointerEvents: 'none',
+          minHeight: rowHeight.current * Number(rows),
+          wordBreak: 'break-word',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {props.value}
+      </div>
+    </div>
+  );
+});
+
 const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
   ({ theme, $size, $variant = 'outlined' }) => `
   display: inline-flex;
@@ -43,7 +123,7 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
     height: ${theme.input.sizes[$size].iconSize};
   }
 
-  &  input {
+  &  input, & textarea, & ${EditableContainer} {
     font-size: ${theme.input.sizes[$size].fontSize};
     color: inherit;
     background: transparent;
@@ -63,6 +143,16 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
       cursor: not-allowed;
       color: inherit;
     }
+
+    &:focus, &:focus-visible, &:focus:focus-visible {
+      outline: none;
+    }
+  }
+
+  & textarea {
+    resize: none;
+    margin: 0;
+    display: block;
   }
 `
 );
@@ -74,14 +164,20 @@ const IconWrapper = styled.span<{ $variant: InputVariant }>(
   align-items: center;
   color: ${theme.input[$variant].error.icon};
   margin-right: 10px;
- 
+
 `
 );
 
-const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize; $variant: InputVariant }>(
-  ({ theme, $disabled, $error, $size, $variant }) => `
+const Group = styled.div<{
+  $align: 'flex-start' | 'center';
+  $disabled: boolean;
+  $error?: boolean;
+  $size: InputSize;
+  $variant: InputVariant;
+}>(
+  ({ theme, $align = 'center', $disabled, $error, $size, $variant }) => `
   display: inline-flex;
-  align-items: center;
+  align-items: ${$align};
   width: 100%;
   border: 1px solid;
   border-radius: ${theme.input.sizes[$size].borderRadius};
@@ -110,7 +206,7 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
     &:hover {
       border-color: ${theme.input[$variant].focus.border};
     }
-    
+
     &:focus-within {
       border-color: ${theme.input[$variant].focus.border};
       color: ${theme.input[$variant].focus.text};
@@ -130,3 +226,27 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   }
 `
 );
+
+const EditableContainer = styled.div<{ $placeholder?: string }>(
+  ({ $placeholder, theme }) => `
+  outline-style: none;
+  outline-width: 0px;
+  position: relative;
+
+  ${
+    $placeholder
+      ? `
+        &:after {
+          content: '${$placeholder}';
+          position: absolute;
+          top: 0;
+          left: 0;
+          color: ${theme.input.outlined.default.placeholder};
+        }
+      `
+      : ''
+  }
+
+  
+`
+);