forstok-ui-lib 7.6.1 → 7.6.3

package/package.json

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

package/src/components/emoji/styles.ts

@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 
 const ButtonStyles = css`
   background-color: var(--mt-clr-bg__fc); 
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   padding: .5em .675em;
   &:hover {
     background-color: var(--mt-clr-bg);

package/src/components/radio/index.tsx

@@ -1,15 +1,37 @@
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { useEffect, useState, type ChangeEvent, type InputHTMLAttributes, type ReactNode } from 'react';
 import { RadioContainer, RadioInput, RadioSpan } from './styles';
+import { TState } from '../../typeds/base.typed';
 
 type TRadio = InputHTMLAttributes<HTMLInputElement> & {
   children?: ReactNode
   $mode?: string
   evChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  reset?: boolean 
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean 
+  setForceUpdate?: TState<boolean>
   'data-qa-id'?: string
 };
 
-const RadioComponent = ({ children, $mode, evChange,...props }: TRadio) => {
-  const { id } = props;
+const RadioComponent = ({ children, $mode, evChange, reset, setReset, isForceUpdate, setForceUpdate, ...props }: TRadio) => {
+  const { id, defaultChecked } = props;
+
+  const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      evInputChecked(defaultChecked||false);
+      setForceUpdate && setForceUpdate(false);
+    }
+    if (reset) {
+      evInputChecked(false);
+      setReset && setReset(false);
+    }
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultChecked, evInputChecked])
+
+  let parseProps = {...props};
+  delete parseProps.defaultChecked;
+
   return (
     <RadioContainer>
       <label htmlFor={id}>
@@ -17,10 +39,11 @@ const RadioComponent = ({ children, $mode, evChange,...props }: TRadio) => {
           type='radio' 
           id={id} 
           $mode={$mode} 
+          checked={inputChecked} 
           onChange={(e: ChangeEvent<HTMLInputElement>) => { 
             evChange && evChange(e)
           }} 
-          {...props} />
+          {...parseProps} />
         <RadioSpan $mode={$mode} {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }}>{children}</RadioSpan>
       </label>
     </RadioContainer>