forstok-ui-lib 8.8.3 → 8.9.1

package/package.json

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

package/src/components/index.ts

@@ -1,53 +1,54 @@
-export { default as TextComponent } from './text';
-export { default as LinkComponent } from './link';
-export { default as InputComponent } from './input';
-export { default as InputRefComponent } from './input/ref';
-export { default as InputOTPComponent } from './input/otp';
-export { default as CheckboxComponent } from './checkbox';
-export { default as ButtonComponent } from './button';
-export { default as LabelComponent } from './label';
-export { default as IconComponent } from './icon';
-export { default as LoadingComponent } from './loading';
-export { default as MessageComponent } from './message';
-export { default as MessageQuestionComponent } from './message/question'; 
-export { default as PopupComponent } from './popup';
-export { default as ImageComponent } from './image';
-export { default as ImageChannelComponent } from './image/channel';
-export { default as SelectComponent } from './select';
-export { default as SelectAllComponent } from './select/all';
-export { default as SelectAsyncPaginateComponent } from './select/asyncPaginate';
-export { default as MenuList } from './select/menulist';
-export { default as ErrorComponent } from './error';
-export { default as UploadComponent } from './upload';
-export { default as UploadDragDropComponent } from './upload/drag.drop';
-export { default as TextAreaComponent } from './textarea';
-export { default as TextAreaRefComponent } from './textarea/ref'; 
-export { default as DateComponent } from './date';
-export { default as DateRefComponent } from './date/ref';
-export { default as DateTimeComponent } from './datetime';
-export { default as RadioComponent } from './radio';
-export { default as SwitchComponent } from './switch';
-export { default as ListComponent } from './list';
-export { default as DropDownComponent } from './dropdown';
-export { default as ReactPortalComponent } from './portal';
-export { default as EmojiComponent } from './emoji';
-export { default as TableComponent } from './table';
+export { default as TextComponent } from "./text";
+export { default as LinkComponent } from "./link";
+export { default as InputComponent } from "./input";
+export { default as InputRefComponent } from "./input/ref";
+export { default as InputOTPComponent } from "./input/otp";
+export { default as CheckboxComponent } from "./checkbox";
+export { default as ButtonComponent } from "./button";
+export { default as LabelComponent } from "./label";
+export { default as IconComponent } from "./icon";
+export { default as LoadingComponent } from "./loading";
+export { default as MessageComponent } from "./message";
+export { default as MessageQuestionComponent } from "./message/question";
+export { default as PopupComponent } from "./popup";
+export { default as ImageComponent } from "./image";
+export { default as ImageChannelComponent } from "./image/channel";
+export { default as SelectComponent } from "./select";
+export { default as SelectAllComponent } from "./select/all";
+export { default as SelectAsyncPaginateComponent } from "./select/asyncPaginate";
+export { default as SelectAsyncCreateablePaginateComponent } from "./select/asyncCreateablePaginate";
+export { default as MenuList } from "./select/menulist";
+export { default as ErrorComponent } from "./error";
+export { default as UploadComponent } from "./upload";
+export { default as UploadDragDropComponent } from "./upload/drag.drop";
+export { default as TextAreaComponent } from "./textarea";
+export { default as TextAreaRefComponent } from "./textarea/ref";
+export { default as DateComponent } from "./date";
+export { default as DateRefComponent } from "./date/ref";
+export { default as DateTimeComponent } from "./datetime";
+export { default as RadioComponent } from "./radio";
+export { default as SwitchComponent } from "./switch";
+export { default as ListComponent } from "./list";
+export { default as DropDownComponent } from "./dropdown";
+export { default as ReactPortalComponent } from "./portal";
+export { default as EmojiComponent } from "./emoji";
+export { default as TableComponent } from "./table";
 
-export * from './message/typed';
-export * from './popup/typed';
-export * from './select/typed';
-export * from './link/typed';
-export * from './dropdown/typed';
-export * from './date/typed';
-export * from './icon/typed';
+export * from "./message/typed";
+export * from "./popup/typed";
+export * from "./select/typed";
+export * from "./link/typed";
+export * from "./dropdown/typed";
+export * from "./date/typed";
+export * from "./icon/typed";
 
-export * from './form/styles';
-export * from './date/styles';
-export * from './dropdown/styles';
-export * from './select/styles';
+export * from "./form/styles";
+export * from "./date/styles";
+export * from "./dropdown/styles";
+export * from "./select/styles";
 
-export * from './select/components';
-export * from './select/asynCreatableSelect';
-export * from './select/function';
+export * from "./select/components";
+export * from "./select/asynCreatableSelect";
+export * from "./select/function";
 
-export  * from './loader';
+export * from "./loader";

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;