forstok-ui-lib 8.6.0 → 8.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.6.0",
+  "version": "8.6.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/emoji/index.tsx

@@ -1,28 +1,45 @@
-import { Emoji, EmojiPicker } from 'frimousse';
+import { type CSSProperties } from "react";
 
-import ButtonComponent from '../button';
-import DropDownComponent from '../dropdown';
-import IconComponent from '../icon';
+import { Emoji, EmojiPicker } from "frimousse";
 
-import { evForceCloseDropdown } from '../../assets/javascripts/function';
-import { EmojiContainer } from './styles';
+import ButtonComponent from "../button";
+import DropDownComponent from "../dropdown";
+import IconComponent from "../icon";
 
+import { evForceCloseDropdown } from "../../assets/javascripts/function";
+import { EmojiContainer } from "./styles";
 
-const EmojiComponent = ({ $mode, evChange } : { $mode?: 'textarea', evChange: (emoji: string) => void }) => {
-  const onChange = ({emoji}: Emoji) => {
+const EmojiComponent = ({
+  $mode,
+  evChange,
+  $emojiStyles,
+}: {
+  $mode?: "textarea";
+  evChange: (emoji: string) => void;
+  $emojiStyles?: CSSProperties;
+}) => {
+  const onChange = ({ emoji }: Emoji) => {
     evChange(emoji);
     evForceCloseDropdown();
-  }
+  };
 
   return (
-    <EmojiContainer $mode={$mode}>
-      <DropDownComponent $internalWidth='314px' $bottom='40px' $openPosition='left' $placement='top'>
-        <div aria-label='control'>
-          <ButtonComponent $mode='clearL' title='Choose Emoticon'>
-            <IconComponent $name='emoji' $width='12px' />
+    <EmojiContainer
+      $mode={$mode}
+      {...($emojiStyles && { style: $emojiStyles })}
+    >
+      <DropDownComponent
+        $internalWidth="314px"
+        $bottom="40px"
+        $openPosition="left"
+        $placement="top"
+      >
+        <div aria-label="control">
+          <ButtonComponent $mode="clearL" title="Choose Emoticon">
+            <IconComponent $name="emoji" $width="12px" />
           </ButtonComponent>
         </div>
-        <div aria-label='body'>
+        <div aria-label="body">
           <EmojiPicker.Root onEmojiSelect={onChange}>
             <EmojiPicker.Search />
             <EmojiPicker.Viewport>
@@ -34,7 +51,7 @@ const EmojiComponent = ({ $mode, evChange } : { $mode?: 'textarea', evChange: (e
         </div>
       </DropDownComponent>
     </EmojiContainer>
-  )
+  );
 };
 
-export default EmojiComponent;
+export default EmojiComponent;

package/src/components/textarea/index.tsx

@@ -1,53 +1,77 @@
-import { type ChangeEvent, type FocusEvent, type TextareaHTMLAttributes, useEffect, useRef, useState } from 'react';
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  type TextareaHTMLAttributes,
+  type CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
-import EmojiComponent from '../emoji';
+import EmojiComponent from "../emoji";
 
-import { TextAreaContainer } from './styles';
+import { TextAreaContainer } from "./styles";
 
-import { TState } from '../../typeds';
+import { TState } from "../../typeds";
 
 type TTextArea = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  $isError?: boolean
-  reset?: boolean 
-  setReset?: TState<boolean>
-  isForceUpdate?: boolean 
-  setForceUpdate?: TState<boolean | undefined>
-  evChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
-  evBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void
-  isField?: boolean
-  evChangeCustom?: (name: string, value: any) => void,
-  $isEmoji?: boolean
-}
+  $isError?: boolean;
+  reset?: boolean;
+  setReset?: TState<boolean>;
+  isForceUpdate?: boolean;
+  setForceUpdate?: TState<boolean | undefined>;
+  evChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  evBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+  isField?: boolean;
+  evChangeCustom?: (name: string, value: any) => void;
+  $isEmoji?: boolean;
+  $emojiStyles?: CSSProperties;
+};
 
-const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, $isEmoji,...props }: TTextArea) => {
+const TextAreaComponent = ({
+  $isError,
+  reset,
+  setReset,
+  isForceUpdate,
+  setForceUpdate,
+  evChange,
+  evBlur,
+  isField,
+  evChangeCustom,
+  $isEmoji,
+  $emojiStyles,
+  ...props
+}: TTextArea) => {
   const innerRef = useRef<HTMLTextAreaElement>(null);
 
-  const { name, defaultValue } = props
+  const { name, defaultValue } = props;
 
-  const [valueInput, setValueInput] = useState<string>(defaultValue?.toString() ?? '')
+  const [valueInput, setValueInput] = useState<string>(
+    defaultValue?.toString() ?? "",
+  );
 
   useEffect(() => {
     if (isForceUpdate) {
-      setValueInput(defaultValue?.toString() ?? '')
-      setForceUpdate && setForceUpdate(false)
+      setValueInput(defaultValue?.toString() ?? "");
+      setForceUpdate && setForceUpdate(false);
     }
     if (reset) {
-      setValueInput('')
-      setReset && setReset(false)
+      setValueInput("");
+      setReset && setReset(false);
     }
-  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue])
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue]);
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const _value = e.target.value
-    setValueInput(_value)
-  }
+    const _value = e.target.value;
+    setValueInput(_value);
+  };
 
   const _evBlur = (e: FocusEvent<HTMLTextAreaElement>) => {
     evBlur && evBlur(e);
     if (isField && name) {
-      evChangeCustom && evChangeCustom(name, e.target.value)
+      evChangeCustom && evChangeCustom(name, e.target.value);
     }
-  }
+  };
 
   const evChangeEmoji = (emoji: string) => {
     const uValue = valueInput + emoji;
@@ -58,35 +82,42 @@ const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceU
     if (innerRef.current) {
       const event = {
         target: innerRef.current,
-        currentTarget: innerRef.current
+        currentTarget: innerRef.current,
       } as unknown as ChangeEvent<HTMLTextAreaElement>;
 
       innerRef.current.value = uValue;
       evChange && evChange(event);
     }
-  }
+  };
 
-  let parseProps = {...props}
-  delete parseProps.defaultValue
+  let parseProps = { ...props };
+  delete parseProps.defaultValue;
 
   return (
-    <div style={{ position: 'relative' }}>
-      <TextAreaContainer 
+    <div style={{ position: "relative" }}>
+      <TextAreaContainer
         ref={innerRef}
-        $isError={$isError} 
+        $isError={$isError}
         value={valueInput}
-        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => { 
-          handleChange(e)
-          evChange && evChange(e)
-        }} 
-        onBlur={(e: FocusEvent<HTMLTextAreaElement>) => { 
-          handleChange(e)
-          _evBlur(e)
-        }} 
-        {...parseProps} />
-      {$isEmoji ? ( <EmojiComponent $mode='textarea' evChange={evChangeEmoji} /> ) : null}  
-    </div>  
-  )
-}
+        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+          handleChange(e);
+          evChange && evChange(e);
+        }}
+        onBlur={(e: FocusEvent<HTMLTextAreaElement>) => {
+          handleChange(e);
+          _evBlur(e);
+        }}
+        {...parseProps}
+      />
+      {$isEmoji ? (
+        <EmojiComponent
+          $mode="textarea"
+          evChange={evChangeEmoji}
+          {...($emojiStyles && { style: $emojiStyles })}
+        />
+      ) : null}
+    </div>
+  );
+};
 
-export default TextAreaComponent
+export default TextAreaComponent;

package/src/components/textarea/ref.tsx

@@ -1,5 +1,6 @@
 import {
   type TextareaHTMLAttributes,
+  type CSSProperties,
   forwardRef,
   useImperativeHandle,
   useRef,
@@ -14,8 +15,9 @@ const TextAreaRefComponent = forwardRef<
   TextareaHTMLAttributes<HTMLTextAreaElement> & {
     $isError?: boolean;
     $isEmoji?: boolean;
+    $emojiStyles?: CSSProperties;
   }
->(({ $isError, $isEmoji, ...props }, ref) => {
+>(({ $isError, $isEmoji, $emojiStyles, ...props }, ref) => {
   const innerRef = useRef<HTMLTextAreaElement>(null);
 
   useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement);
@@ -44,7 +46,11 @@ const TextAreaRefComponent = forwardRef<
     <div style={{ position: "relative" }}>
       <TextAreaContainer ref={innerRef} $isError={$isError} {...props} />
       {$isEmoji ? (
-        <EmojiComponent $mode="textarea" evChange={evChangeEmoji} />
+        <EmojiComponent
+          $mode="textarea"
+          evChange={evChangeEmoji}
+          {...($emojiStyles && { $emojiStyles: $emojiStyles })}
+        />
       ) : null}
     </div>
   );