forstok-ui-lib 5.2.12 → 5.2.13

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, MouseEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ChangeEvent, DragEvent, InputHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, RefObject, ImgHTMLAttributes } from 'react';
-import { OnChangeValue, OptionProps, SingleValueProps, ActionMeta } from 'react-select';
+import { OnChangeValue, ActionMeta, OptionProps, SingleValueProps } from 'react-select';
 import * as styled_components from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 
@@ -306,7 +306,21 @@ type TOption = {
         localId?: string;
     }[];
 };
+type TLoadOption = (search: string, callback: () => void, { endCursor }: {
+    endCursor: string;
+}) => Promise<{
+    options: any;
+    hasMore: any;
+    additional?: {
+        endCursor: any;
+    };
+} | {
+    options: never[];
+    hasMore: boolean;
+    additional?: undefined;
+} | undefined>;
 type TOnChangeValue = OnChangeValue<TOption, boolean>;
+type TActionMeta = ActionMeta<TOption>;
 
 type TSelect = {
     type?: string;
@@ -412,4 +426,4 @@ declare const generateMessage: (type: string, value: string | ReactNode, callbac
 declare const generateMessageQuestion: (type: string, title: string, subtitle: string, callback?: () => void, buttonSubmit?: string, cancelCallback?: () => void) => TMessageQuestion;
 declare const currencyNumber: (value: number) => string;
 
-export { ButtonComponent, CheckboxComponent, DropDownComponent as DropdownComponent, ErrorComponent, FoContainer, FormContainer, HeaderContainer, IconComponent, ImageComponent, InfoGroup, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, type KeysToSnakeCase, LabelComponent, LinkComponent, ListContainer, LoadingComponent, MessageComponent, MessageQuestionComponent, MuteLabel, PanelContainer, PanelWrapper, type PartialBy, PopupComponent, ReactPortalComponent, SelectComponent, SingleFormContainer, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type THierarchy, type TIdNum, type TIdStr, type TKeyboadEvent, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TObject, type TOnChangeValue, type TOption, type TPage, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TState, type TUser, TabsContainer, TabsContent, TextComponent, Title, UploadComponent, UploadDragDropComponent, type WithRequired, boxBase, capitalize, clearList, currencyNumber, debounce, dropBase, elipsis, formLabel, formatNumber, generateMessage, generateMessageQuestion, getStorage, headTable, multiElipsis, removeStorage, responseWidth, setStorage, thirdElipsis };
+export { ButtonComponent, CheckboxComponent, DropDownComponent as DropdownComponent, ErrorComponent, FoContainer, FormContainer, HeaderContainer, IconComponent, ImageComponent, InfoGroup, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, type KeysToSnakeCase, LabelComponent, LinkComponent, ListContainer, LoadingComponent, MessageComponent, MessageQuestionComponent, MuteLabel, PanelContainer, PanelWrapper, type PartialBy, PopupComponent, ReactPortalComponent, SelectComponent, SingleFormContainer, type TActionMeta, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type THierarchy, type TIdNum, type TIdStr, type TKeyboadEvent, type TLoadOption, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TObject, type TOnChangeValue, type TOption, type TPage, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TState, type TUser, TabsContainer, TabsContent, TextComponent, Title, UploadComponent, UploadDragDropComponent, type WithRequired, boxBase, capitalize, clearList, currencyNumber, debounce, dropBase, elipsis, formLabel, formatNumber, generateMessage, generateMessageQuestion, getStorage, headTable, multiElipsis, removeStorage, responseWidth, setStorage, thirdElipsis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.12",
+  "version": "5.2.13",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -42,6 +42,7 @@
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
+    "react-select-async-paginate": "^0.7.9",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

package/src/components/select/async.paginate.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { OnChangeValue, OptionProps, GroupBase, ActionMeta, StylesConfig, CSSObjectWithLabel, ControlProps } from 'react-select'
+import { AsyncPaginate } from 'react-select-async-paginate'
+import type { LoadOptions } from 'react-select-async-paginate'
+import { CSSObject } from '@emotion/serialize'
+import type { TLoadOption, TOption } from './typed'
+import { TState } from '../../typeds'
+
+type TSelect = {
+  customOption?: (arg0: OptionProps) => void
+  MenuList?: any
+  evChange?: (newValue: OnChangeValue<TOption, false>, actionMeta?: ActionMeta<TOption>) => void
+  defaultValue?: OnChangeValue<TOption, boolean>
+  loadOptions: TLoadOption | LoadOptions<unknown, GroupBase<unknown>, unknown>
+  loadOptionsOnMenuOpen?: boolean
+  noOptionsMessage?: ((obj: {
+    inputValue: string;
+  }) => React.ReactNode)
+  isSearchable?: boolean
+  isClearable?: boolean
+  placeholder?: string
+  isMenuOpen?: boolean
+  setMenuIsOpen: TState<boolean|undefined>
+  isForceUpdate: boolean
+  setForceUpdate: TState<boolean>
+}
+
+const SelectAsyncPaginate = ({ loadOptions, isForceUpdate, setForceUpdate, ...props }:TSelect) => {
+  const { customOption, MenuList, defaultValue, evChange, loadOptionsOnMenuOpen, noOptionsMessage, isSearchable, placeholder, isMenuOpen, setMenuIsOpen } = props;
+  const [valueSelect, setValueSelect] = useState<typeof defaultValue>(defaultValue || 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>;
+    setValueSelect(newValue ? { value: newValue.value, label : newValue.label } : newValue);
+    evChange && evChange(newValue, actionMeta);
+  }
+
+  const customStyles: StylesConfig<TOption, boolean> = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      width: '100%',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObject, state:ControlProps<TOption, boolean>) => ({
+      ...provided,
+      borderRadius: '4px',
+      minHeight: '1px',
+      cursor: 'pointer',
+      borderWidth:  '1px' ,
+      boxShadow: 'none',
+    } 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',
+      paddingBottom: '2px',
+      color: 'initial',
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: OptionProps<TOption, boolean>) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel), 
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel)
+  }
+
+  const onMenuOpen = useCallback(() => {
+    setMenuIsOpen(true);
+  }, [setMenuIsOpen]);
+
+  const onMenuClose = useCallback(() => {
+    setMenuIsOpen(false);
+  }, [setMenuIsOpen]);
+
+  return  <div className='_refContainer'>
+            <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}
+              onMenuOpen={onMenuOpen}
+              onMenuClose={onMenuClose}
+              {...customOption && { components: { Option: customOption } }}
+              {...MenuList && { components: { MenuList } }}
+              {...props} />
+          </div>
+}
+
+export default SelectAsyncPaginate

package/src/components/select/typed.ts

@@ -1,4 +1,4 @@
-import type { OnChangeValue } from 'react-select';
+import type { ActionMeta, OnChangeValue } from 'react-select';
 import type { TChannel } from '../../typeds/shares.typed';
 
 export type TOption = {
@@ -17,4 +17,20 @@ export type TOption = {
   }[]
 }
 
-export type TOnChangeValue = OnChangeValue<TOption, boolean>
+export type TLoadOption = (search: string, callback: () => void, { endCursor }: {
+  endCursor: string;
+}) => Promise<{
+  options: any;
+  hasMore: any;
+  additional?: {
+      endCursor: any;
+  };
+} | {
+  options: never[];
+  hasMore: boolean;
+  additional?: undefined;
+} | undefined>
+
+export type TOnChangeValue = OnChangeValue<TOption, boolean>
+
+export type TActionMeta = ActionMeta<TOption>