forstok-ui-lib 5.2.13 → 5.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.13",
+  "version": "5.2.18",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -42,7 +42,6 @@
     "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/index.ts

@@ -14,6 +14,7 @@ export { default as PopupComponent } from './popup';
 export { default as ReactPortalComponent } from './portal';
 export { default as ImageComponent } from './image';
 export { default as SelectComponent } from './select';
+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';
@@ -23,4 +24,4 @@ export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';
 
-export * from './form/styles';
+export * from './form/styles';

package/src/components/select/menulist.tsx

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { components } from 'react-select';
+import type { GroupBase, MenuListProps } from 'react-select';
+
+const MenuList = (props: JSX.IntrinsicAttributes & MenuListProps<unknown, boolean, GroupBase<unknown>>) => {
+  return (
+    <components.MenuList {...props}>{props.children}</components.MenuList>
+  ) 
+}
+
+export default MenuList;

package/src/components/select/typed.ts

@@ -1,5 +1,8 @@
 import type { ActionMeta, OnChangeValue } from 'react-select';
+import type { OptionProps, GroupBase, StylesConfig, CSSObjectWithLabel, ControlProps } from 'react-select';
+import { CSSObject } from '@emotion/serialize'
 import type { TChannel } from '../../typeds/shares.typed';
+import type { TState } from '../../typeds';
 
 export type TOption = {
   readonly value: any
@@ -33,4 +36,35 @@ export type TLoadOption = (search: string, callback: () => void, { endCursor }:
 
 export type TOnChangeValue = OnChangeValue<TOption, boolean>
 
-export type TActionMeta = ActionMeta<TOption>
+export type TActionMeta = ActionMeta<TOption>
+
+export type TSelectAsyncPaginate = {
+  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>
+}
+
+export type TCustomStyles = StylesConfig<TOption, boolean>
+
+export type TCSSObject = CSSObject
+
+export type TCSSObjectWithLabel = CSSObjectWithLabel
+
+export type TControlProps = ControlProps<TOption, boolean>
+
+export type TOptionProps = OptionProps<TOption, boolean>
+
+export type TGroupBase = GroupBase<TOption>

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

@@ -1,126 +0,0 @@
-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