forstok-ui-lib 8.8.0 → 8.8.2

package/package.json

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

package/src/components/radio/styles.ts

@@ -1,31 +1,31 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from "styled-components";
 
-import IconCheckTick from '../../assets/images/icons/checkmark-tick.svg'
+import IconCheckTick from "../../assets/images/icons/checkmark-tick.svg";
 
 export const RadioContainer = styled.div`
   display: grid;
   grid-auto-flow: column;
   justify-self: self-start;
-`
+`;
 
 export const RadioSpan = styled.span<{ $mode?: string }>`
   position: relative;
   cursor: pointer;
   display: inline-block;
   height: 16px;
-  transition: .28s ease;
+  transition: 0.28s ease;
   user-select: none;
   padding-left: 22px;
-  &:before, 
+  &:before,
   &:after {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 10px;
     height: 10px;
     z-index: 0;
-    transition: .28s ease;
+    transition: 0.28s ease;
     border: 2px solid #5a5a5a;
     border-radius: 50%;
   }
@@ -37,25 +37,25 @@ export const RadioSpan = styled.span<{ $mode?: string }>`
     font-size: 90%;
     color: #2d3c48;
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'check') {
-      return css` 
-        &:before, 
+  ${({ $mode }: { $mode?: string }) => {
+    if ($mode === "check") {
+      return css`
+        &:before,
         &:after {
           border: none;
         }
-      `
-    } else if ($mode === 'sort') {
-      return css` 
+      `;
+    } else if ($mode === "sort") {
+      return css`
         padding-left: 0;
-        &:before, 
+        &:before,
         &:after {
           border: none;
         }
-      `
-    } 
-  }}  
-`
+      `;
+    }
+  }}
+`;
 
 export const RadioInput = styled.input<{ $mode?: string }>`
   position: absolute;
@@ -72,11 +72,11 @@ export const RadioInput = styled.input<{ $mode?: string }>`
       border: 2px solid transparent;
     }
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'check') {
-      return css` 
+  ${({ $mode }: { $mode?: string }) => {
+    if ($mode === "check") {
+      return css`
         &:checked + ${RadioSpan} {
-          &:before, 
+          &:before,
           &:after {
             border: none;
             transform: none;
@@ -87,11 +87,11 @@ export const RadioInput = styled.input<{ $mode?: string }>`
             width: 14px;
           }
         }
-      `
-    } else if ($mode === 'sort') {
-      return css`  
+      `;
+    } else if ($mode === "sort") {
+      return css`
         &:checked + ${RadioSpan} {
-          &:before, 
+          &:before,
           &:after {
             border: none;
             transform: none;
@@ -101,7 +101,20 @@ export const RadioInput = styled.input<{ $mode?: string }>`
             width: 14px;
           }
         }
-      `
+      `;
+    } else if ($mode === "blue") {
+      return css`
+        &:checked + ${RadioSpan} {
+          &:before {
+            border: 2px solid var(--pri-clr-ln__fc);
+          }
+          &:after {
+            transform: scale(0.6);
+            background-color: var(--pri-clr-ln__fc);
+            border: 2px solid transparent;
+          }
+        }
+      `;
     }
   }}
-`
+`;

package/src/components/select/asyncPaginate.tsx

@@ -49,6 +49,8 @@ type TSelect = {
   ) => void;
   id?: string;
   isDisabled?: boolean;
+  isCreateable?: boolean;
+  evCreate?: (value: string) => void;
 };
 
 const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
@@ -61,7 +63,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     MenuList,
     defaultValue,
     // reset,
-    // setReset,
+    setReset,
     evChange,
     isForceUpdate,
     setForceUpdate,
@@ -76,6 +78,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     setMenuIsOpen,
     id,
     evChangeOnMenuClose,
+    isCreateable = false,
+    evCreate,
     ...rest
   } = props;
 
@@ -132,6 +136,21 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     evChange && evChange(newValue, actionMeta);
   };
 
+  const handleCreate = (inputValue: string) => {
+    setReset?.(false);
+    if (isMulti) {
+      !Array.isArray(valueSelect)
+        ? setValueSelect([{ value: inputValue, label: inputValue }])
+        : setValueSelect([
+            ...valueSelect,
+            { value: inputValue, label: inputValue },
+          ]);
+    } else {
+      setValueSelect({ value: inputValue, label: inputValue });
+    }
+    evCreate?.(inputValue);
+  };
+
   const customStyles: StylesConfig<TOption, boolean> = {
     container: (provided: CSSObject) =>
       ({
@@ -350,57 +369,112 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     evToogleSelect();
   };
 
-  return (
-    <div className="_refContainer" style={{ width: "100%", minWidth: 0 }}>
-      <AsyncPaginate
-        isSearchable={isSearchable}
-        placeholder={placeholder}
-        debounceTimeout={500}
-        styles={customStyles}
-        loadOptions={loadOptions}
-        menuPortalTarget={document.body}
-        menuPosition="fixed"
-        menuPlacement="auto"
-        value={valueSelect}
-        onChange={handleChange}
-        loadOptionsOnMenuOpen={loadOptionsOnMenuOpen}
-        noOptionsMessage={noOptionsMessage}
-        menuIsOpen={isMenuOpen}
-        {...(id && { id: id })}
-        {...(mode === "multi-select" && {
-          closeMenuOnSelect: false,
-          inputValue: inputValue,
-          onInputChange: (value, action) => {
-            if (action.action === "input-change") {
-              setInputValue(value);
-              setTime(new Date());
-              return value;
-            }
-
+  let SelectEl = isCreateable ? (
+    <AsyncPaginate
+      isSearchable={isSearchable}
+      placeholder={placeholder}
+      debounceTimeout={500}
+      styles={customStyles}
+      loadOptions={loadOptions}
+      menuPortalTarget={document.body}
+      menuPosition="fixed"
+      menuPlacement="auto"
+      value={valueSelect}
+      onChange={handleChange}
+      onCreateOption={handleCreate}
+      loadOptionsOnMenuOpen={loadOptionsOnMenuOpen}
+      noOptionsMessage={noOptionsMessage}
+      menuIsOpen={isMenuOpen}
+      {...(id && { id: id })}
+      {...(mode === "multi-select" && {
+        closeMenuOnSelect: false,
+        inputValue: inputValue,
+        onInputChange: (value, action) => {
+          if (action.action === "input-change") {
+            setInputValue(value);
+            setTime(new Date());
             return value;
-          },
-          onMenuClose: () => {
-            setInputValue("");
-            evChangeOnMenuClose?.(valueSelect);
-          },
-          onMenuOpen: () => evReToogleSelect(),
-          cacheUniqs: [_time],
-          selectRef: selectRef,
+          }
+
+          return value;
+        },
+        onMenuClose: () => {
+          setInputValue("");
+          evChangeOnMenuClose?.(valueSelect);
+        },
+        onMenuOpen: () => evReToogleSelect(),
+        cacheUniqs: [_time],
+        selectRef: selectRef,
+      })}
+      {...(mode !== "multi-select" && {
+        onMenuOpen: onMenuOpen,
+        onMenuClose: onMenuClose,
+      })}
+      {...(customLabel && { components: { SingleValue: customLabel } })}
+      {...(customOption && { components: { Option: customOption } })}
+      {...(customLabel &&
+        customOption && {
+          components: { SingleValue: customLabel, Option: customOption },
         })}
-        {...(mode !== "multi-select" && {
-          onMenuOpen: onMenuOpen,
-          onMenuClose: onMenuClose,
+      {...(MenuList && { components: { MenuList } })}
+      {...(isMulti && { isMulti: true })}
+      {...rest}
+    />
+  ) : (
+    <AsyncPaginate
+      isSearchable={isSearchable}
+      placeholder={placeholder}
+      debounceTimeout={500}
+      styles={customStyles}
+      loadOptions={loadOptions}
+      menuPortalTarget={document.body}
+      menuPosition="fixed"
+      menuPlacement="auto"
+      value={valueSelect}
+      onChange={handleChange}
+      loadOptionsOnMenuOpen={loadOptionsOnMenuOpen}
+      noOptionsMessage={noOptionsMessage}
+      menuIsOpen={isMenuOpen}
+      {...(id && { id: id })}
+      {...(mode === "multi-select" && {
+        closeMenuOnSelect: false,
+        inputValue: inputValue,
+        onInputChange: (value, action) => {
+          if (action.action === "input-change") {
+            setInputValue(value);
+            setTime(new Date());
+            return value;
+          }
+
+          return value;
+        },
+        onMenuClose: () => {
+          setInputValue("");
+          evChangeOnMenuClose?.(valueSelect);
+        },
+        onMenuOpen: () => evReToogleSelect(),
+        cacheUniqs: [_time],
+        selectRef: selectRef,
+      })}
+      {...(mode !== "multi-select" && {
+        onMenuOpen: onMenuOpen,
+        onMenuClose: onMenuClose,
+      })}
+      {...(customLabel && { components: { SingleValue: customLabel } })}
+      {...(customOption && { components: { Option: customOption } })}
+      {...(customLabel &&
+        customOption && {
+          components: { SingleValue: customLabel, Option: customOption },
         })}
-        {...(customLabel && { components: { SingleValue: customLabel } })}
-        {...(customOption && { components: { Option: customOption } })}
-        {...(customLabel &&
-          customOption && {
-            components: { SingleValue: customLabel, Option: customOption },
-          })}
-        {...(MenuList && { components: { MenuList } })}
-        {...(isMulti && { isMulti: true })}
-        {...rest}
-      />
+      {...(MenuList && { components: { MenuList } })}
+      {...(isMulti && { isMulti: true })}
+      {...rest}
+    />
+  );
+
+  return (
+    <div className="_refContainer" style={{ width: "100%", minWidth: 0 }}>
+      {SelectEl}
     </div>
   );
 };

package/src/components/select/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import ReactSelect from "react-select";
+import AsyncCreatableSelect from "react-select/async-creatable";
 import type {
   SingleValueProps,
   OptionProps,
@@ -545,7 +546,7 @@ const SelectComponent = ({
   };
 
   let SelectEl = isCreateable ? (
-    <CreatableSelect
+    <AsyncCreatableSelect
       options={options}
       styles={customStyles}
       onMenuOpen={evToogleSelect}