forstok-ui-lib 8.8.1 → 8.8.3

package/package.json

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

package/src/components/select/asyncPaginate.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AsyncPaginate } from "react-select-async-paginate";
+import AsyncCreatableSelect from "react-select/async-creatable";
+
 import type { LoadOptions } from "react-select-async-paginate";
 import {
   SingleValueProps,
@@ -49,6 +51,8 @@ type TSelect = {
   ) => void;
   id?: string;
   isDisabled?: boolean;
+  isCreateable?: boolean;
+  evCreate?: (value: string) => void;
 };
 
 const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
@@ -61,7 +65,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     MenuList,
     defaultValue,
     // reset,
-    // setReset,
+    setReset,
     evChange,
     isForceUpdate,
     setForceUpdate,
@@ -76,6 +80,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     setMenuIsOpen,
     id,
     evChangeOnMenuClose,
+    isCreateable = false,
+    evCreate,
     ...rest
   } = props;
 
@@ -132,6 +138,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 +371,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 ? (
+    <AsyncCreatableSelect
+      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>
   );
 };