forstok-ui-lib 8.8.2 → 8.9.0

package/package.json

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

package/src/components/select/asyncCreateablePaginate.tsx

@@ -0,0 +1,544 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  ReactNode,
+  ReactElement,
+} from "react";
+import type { KeyboardEvent } from "react";
+import { AsyncPaginate } from "react-select-async-paginate";
+import Creatable from "react-select/creatable";
+import type { CreatableProps } from "react-select/creatable";
+import {
+  withAsyncPaginate,
+  type UseAsyncPaginateParams,
+  type ComponentProps,
+} from "react-select-async-paginate";
+
+import type { LoadOptions } from "react-select-async-paginate";
+import {
+  SingleValueProps,
+  ActionMeta,
+  ControlProps,
+  CSSObjectWithLabel,
+  GroupBase,
+  OnChangeValue,
+  OptionProps,
+  StylesConfig,
+} from "react-select";
+
+import type { CSSObject } from "@emotion/serialize";
+import type { TState } from "../../typeds/base.typed";
+import type { TLoadOption, TOption } from "./typed";
+
+type AsyncPaginateCreatableProps<
+  OptionType,
+  Group extends GroupBase<OptionType>,
+  Additional,
+  IsMulti extends boolean,
+> = CreatableProps<OptionType, IsMulti, Group> &
+  UseAsyncPaginateParams<OptionType, Group, Additional> &
+  ComponentProps<OptionType, Group, IsMulti>;
+
+type AsyncPaginateCreatableType = <
+  OptionType,
+  Group extends GroupBase<OptionType>,
+  Additional,
+  IsMulti extends boolean = false,
+>(
+  props: AsyncPaginateCreatableProps<OptionType, Group, Additional, IsMulti>,
+) => ReactElement;
+
+const AsyncPaginateCreatable = withAsyncPaginate(
+  Creatable,
+) as AsyncPaginateCreatableType;
+
+type TSelect = {
+  type?: string;
+  mode?: string;
+  isError?: boolean;
+  customLabel?: (arg0: SingleValueProps) => void;
+  customOption?: (arg0: OptionProps) => void;
+  MenuList?: any;
+  reset?: boolean;
+  setReset?: TState<boolean>;
+  evChange?: (
+    newValue: OnChangeValue<TOption, boolean>,
+    actionMeta?: ActionMeta<TOption>,
+  ) => void;
+  defaultValue?: OnChangeValue<TOption, boolean>;
+  loadOptions: LoadOptions<unknown, GroupBase<unknown>, unknown> | TLoadOption;
+  loadOptionsOnMenuOpen?: boolean;
+  noOptionsMessage?: (obj: { inputValue: string }) => ReactNode;
+  isSearchable?: boolean;
+  isClearable?: boolean;
+  placeholder?: string;
+  isMenuOpen?: boolean;
+  setMenuIsOpen?: TState<boolean | undefined>;
+  isForceUpdate?: boolean;
+  setForceUpdate?: TState<boolean>;
+  isMulti?: boolean;
+  iconLeft?: boolean | string;
+  loadedOptions?: TOption[];
+  "data-qa-id"?: string;
+  evChangeOnMenuClose?: (
+    value: OnChangeValue<TOption, boolean> | undefined,
+  ) => void;
+  id?: string;
+  isDisabled?: boolean;
+  isCreateable?: boolean;
+  evCreate?: (value: string) => void;
+};
+
+const SelectAsyncCreateablePaginateComponent = ({
+  loadOptions,
+  ...props
+}: TSelect) => {
+  const {
+    isError = false,
+    mode,
+    type,
+    customLabel,
+    customOption,
+    MenuList,
+    defaultValue,
+    // reset,
+    setReset,
+    evChange,
+    isForceUpdate,
+    setForceUpdate,
+    loadOptionsOnMenuOpen,
+    noOptionsMessage,
+    iconLeft,
+    isSearchable,
+    placeholder,
+    isMulti,
+    loadedOptions,
+    isMenuOpen,
+    setMenuIsOpen,
+    id,
+    evChangeOnMenuClose,
+    isCreateable = false,
+    evCreate,
+    ...rest
+  } = props;
+
+  const [valueSelect, setValueSelect] = useState<typeof defaultValue>(
+    defaultValue || null,
+  );
+  const [inputValue, setInputValue] = useState<string>("");
+  const [_time, setTime] = useState<Date>(new Date());
+
+  const selectRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      setValueSelect(defaultValue || null);
+      setForceUpdate?.(false);
+    }
+  }, [defaultValue, isForceUpdate, setForceUpdate, setValueSelect]);
+
+  const handleChange = (
+    value: OnChangeValue<TOption, boolean>,
+    actionMeta?: ActionMeta<TOption>,
+  ) => {
+    const newValue = value as OnChangeValue<TOption, false>;
+
+    if (actionMeta) {
+      const { action, option } = actionMeta;
+
+      if (action === "select-option" && option?.value === "*") {
+        const newValueSelect = valueSelect as OnChangeValue<TOption, true>;
+
+        if (newValueSelect?.length) {
+          let _newValue = loadedOptions
+            ? [...newValueSelect, ...loadedOptions]
+            : [...newValueSelect];
+
+          _newValue = _newValue.filter(
+            (_value, idx, self) =>
+              idx === self.findIndex((t) => t.sku === _value.sku),
+          );
+
+          setValueSelect(_newValue);
+          evChange && evChange(_newValue, actionMeta);
+        } else if (loadedOptions) {
+          setValueSelect(loadedOptions);
+          evChange && evChange(loadedOptions, actionMeta);
+        }
+
+        selectRef.current?.blur();
+        return false;
+      }
+    }
+
+    setValueSelect(newValue);
+    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);
+    setInputValue("");
+  };
+
+  const customStyles: StylesConfig<TOption, boolean> = {
+    container: (provided: CSSObject) =>
+      ({
+        ...provided,
+        display: "block",
+        width: "100%",
+        maxWidth: "100%",
+        minWidth: 0,
+        minHeight: "1px",
+        textAlign: "left",
+        border: "none",
+      }) as CSSObjectWithLabel,
+    control: (provided: CSSObject, state: ControlProps<TOption, boolean>) =>
+      ({
+        ...provided,
+        width: "100%",
+        minWidth: 0,
+        borderRadius: ".5rem",
+        minHeight: "1px",
+        height: isMulti ? "100%" : mode === "small" ? "30px" : "32px",
+        maxHeight: "300px",
+        cursor: "pointer",
+        borderWidth: isError ? "1px" : "0",
+        boxShadow: state.isFocused
+          ? "-.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset"
+          : "0rem -.0625rem 0rem 0rem #b5b5b5 inset,0rem 0rem 0rem .0625rem rgba(0, 0, 0, .1) inset,0rem .03125rem 0rem .09375rem #FFF inset",
+        borderColor:
+          state.isFocused && mode !== "filter" && !isError
+            ? "var(--pri-clr-ln__fc)"
+            : isError
+              ? "var(--err-clr-ln)"
+              : mode === "filter"
+                ? "#ffffff"
+                : " var(--ck-clr-ln)",
+        background: state.isFocused ? "rgba(247, 247, 247, 1)" : "#ffffff",
+        overflow: mode === "picklist" ? "hidden" : "initial",
+        "&:hover": {
+          borderColor:
+            state.isFocused && mode !== "filter" && !isError
+              ? "var(--pri-clr-ln__fc)"
+              : isError
+                ? "var(--err-clr-ln)"
+                : mode === "filter"
+                  ? "#ffffff"
+                  : " var(--ck-clr-ln)",
+          background: "rgba(250, 250, 250, 1)",
+          color: "rgba(48, 48, 48, 1)",
+        },
+      }) as CSSObjectWithLabel,
+    placeholder: (provided: CSSObject) =>
+      ({
+        ...provided,
+        fontStyle: "italic",
+      }) as CSSObjectWithLabel,
+    input: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minHeight: "1px",
+        margin: "0 2px",
+        padding: "0",
+        input: {
+          boxShadow: "none !important",
+        },
+      }) as CSSObjectWithLabel,
+    singleValue: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minHeight: "1px",
+        minWidth: 0,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        paddingBottom: "2px",
+        color: "initial",
+      }) as CSSObjectWithLabel,
+    dropdownIndicator: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minHeight: "1px",
+        paddingTop: "0",
+        paddingBottom: "0",
+        paddingLeft: "2px",
+        paddingRight: "2px",
+        color: "#757575",
+      }) as CSSObjectWithLabel,
+    indicatorSeparator: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minHeight: "1px",
+        height: "24px",
+        display: type === "tag" ? "block" : "none",
+      }) as CSSObjectWithLabel,
+    clearIndicator: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minHeight: "1px",
+        marginRight: "-6px",
+        padding: "0",
+      }) as CSSObjectWithLabel,
+    valueContainer: (provided: CSSObject) =>
+      ({
+        ...provided,
+        flex: 1,
+        minWidth: 0,
+        minHeight: "1px",
+        height: isMulti
+          ? "100%"
+          : mode === "multi-select"
+            ? "70px"
+            : mode === "small"
+              ? "30px"
+              : "32px",
+        paddingTop: isMulti ? "4px" : "0",
+        paddingBottom: isMulti ? "4px" : "0",
+        paddingLeft: iconLeft ? "28px" : "8px",
+        paddingRight: "2px",
+        maxHeight: isMulti ? "300px" : "unset",
+        overflowX: isMulti ? "hidden" : "initial",
+        overflowY: isMulti ? "auto" : "initial",
+        flexWrap: isMulti ? "wrap" : "nowrap",
+        alignContent: isMulti ? "flex-start" : "initial",
+      }) as CSSObjectWithLabel,
+    option: (provided: CSSObject, state: OptionProps<TOption, boolean>) =>
+      ({
+        ...provided,
+        width: "100%",
+        margin: "0 0 4px",
+        borderRadius: "var(--nav-rd)",
+        cursor: "pointer",
+        overflowWrap: "break-word",
+        wordBreak: "break-all",
+        position: "relative",
+        padding: "0.375rem 0.5rem",
+        backgroundColor:
+          state.isSelected || state.isFocused
+            ? "var(--nav-clr-bg__hvr)"
+            : "transparent",
+        "&:last-child": {
+          marginBottom: 0,
+        },
+        ...(!state.isDisabled && {
+          color: "var(--pri-clr)",
+          fontWeight: state.isSelected ? 500 : "normal",
+          "&:hover": {
+            backgroundColor: "var(--nav-clr-bg__hvr)",
+          },
+        }),
+        ...(state.isSelected && {
+          paddingRight: "1.5em",
+          "&:after": {
+            content: '"✔"',
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%)",
+            marginTop: "2px",
+            right: "6px",
+            bottom: "0",
+            width: "12px",
+            height: "20px",
+          },
+        }),
+      }) as CSSObjectWithLabel,
+    menu: (provided: CSSObject) =>
+      ({
+        ...provided,
+        padding: "6px 8px",
+        borderRadius: ".75rem",
+        boxShadow:
+          "0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)",
+        border: "none",
+      }) as CSSObjectWithLabel,
+    menuPortal: (provided: CSSObject) =>
+      ({
+        ...provided,
+        zIndex: 9999,
+        letterSpacing: "normal",
+        lineHeight: "normal",
+      }) as CSSObjectWithLabel,
+    multiValue: (provided: CSSObject) =>
+      ({
+        ...provided,
+        maxWidth: "100%",
+      }) as CSSObjectWithLabel,
+    multiValueLabel: (provided: CSSObject) =>
+      ({
+        ...provided,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }) as CSSObjectWithLabel,
+  };
+
+  const onMenuOpen = useCallback(() => {
+    setMenuIsOpen && setMenuIsOpen(true);
+  }, [setMenuIsOpen]);
+
+  const onMenuClose = useCallback(() => {
+    setInputValue("");
+    setMenuIsOpen && setMenuIsOpen(false);
+  }, [setMenuIsOpen]);
+
+  const evToogleSelect = () => {
+    const containerRef = document.getElementsByClassName(
+      "_refSelectContainer is-shown",
+    ) as HTMLCollectionOf<HTMLElement>;
+    if (containerRef.length) {
+      for (let i = 0; i < containerRef.length; i++) {
+        containerRef[i].classList.remove("is-shown");
+      }
+    }
+  };
+
+  const evReToogleSelect = () => {
+    setTime(new Date());
+    evToogleSelect();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Enter") return;
+
+    const target = event.target as HTMLElement;
+    const menuId =
+      target.getAttribute("aria-controls") ||
+      target.closest("[aria-controls]")?.getAttribute("aria-controls");
+    const menuEl = menuId ? document.getElementById(menuId) : null;
+    const hasSelectableOption = Boolean(
+      menuEl?.querySelector('[role="option"]'),
+    );
+
+    if (!hasSelectableOption) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  const SelectEl = isCreateable ? (
+    <AsyncPaginateCreatable
+      isSearchable={isSearchable}
+      placeholder={placeholder}
+      styles={customStyles}
+      loadOptions={loadOptions}
+      menuPortalTarget={document.body}
+      menuPosition="fixed"
+      menuPlacement="auto"
+      value={valueSelect}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      debounceTimeout={300}
+      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;
+          }
+
+          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 },
+        })}
+      {...(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}
+      onKeyDown={handleKeyDown}
+      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 },
+        })}
+      {...(MenuList && { components: { MenuList } })}
+      {...(isMulti && { isMulti: true })}
+      {...rest}
+    />
+  );
+
+  return (
+    <div className="_refContainer" style={{ width: "100%", minWidth: 0 }}>
+      {SelectEl}
+    </div>
+  );
+};
+
+export default SelectAsyncCreateablePaginateComponent;

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,
@@ -370,7 +372,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
   };
 
   let SelectEl = isCreateable ? (
-    <AsyncPaginate
+    <AsyncCreatableSelect
       isSearchable={isSearchable}
       placeholder={placeholder}
       debounceTimeout={500}

package/src/components/select/index.tsx

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