forstok-ui-lib 5.0.3 → 5.1.0

package/package.json

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

package/src/assets/javascripts/function.ts

@@ -0,0 +1,28 @@
+import { TMessageQuestion } from '../../components/message/typed';
+
+export const formatNumber = (n?: string | number, flag?: boolean) => {
+  const _flag = flag === undefined ? true : flag
+  let result:string = ''
+  if (n !== '' && n !== null && n !== undefined) {
+    result = n?.toString().replaceAll(".", "")
+    if (result.length === 2 && result.substring(0, 1) === "0") {
+      result = parseInt(result).toString()
+    }
+    if (_flag) {
+      result = result.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+    }
+  }
+  return result
+}
+
+export const generateMessageQuestion = (type: string, title: string, subtitle: string, callback?: () => void, buttonSubmit?: string, cancelCallback?: () => void) => {
+  let result: TMessageQuestion = {
+    $type: type,
+    title: title,
+    subtitle: subtitle,
+    callback: callback,
+    buttonSubmit: buttonSubmit,
+    cancelCallback: cancelCallback
+  } 
+  return result
+}

package/src/components/input/index.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, type InputHTMLAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
-import { InputContainer } from './styles';
+import { formatNumber } from '../../assets/javascripts/function';
+import { InputContainer, InputLabel, InputWrapper  } from './styles';
 import type { TEnterEvent, TKeyboadEvent, TState } from '../../typeds/base.typed';
 
 type TInput = InputHTMLAttributes<HTMLInputElement> & {
-  mode?: string
+  $mode?: string
   $isError?: boolean
   $iconLeft?: boolean
   $iconRight?: boolean
@@ -17,17 +18,20 @@ type TInput = InputHTMLAttributes<HTMLInputElement> & {
   evChangeCustom? : (key: string, value: any) => void
   evEnter?: TEnterEvent
   evKeyUp?: TKeyboadEvent
-};
+  $aliasLabel?: string
+} 
 
-const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, evEnter, evKeyUp, ...props }: TInput) => {
+const InputComponent = ({ $mode, $aliasLabel, $isError, $iconLeft,  $iconRight, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, evEnter, evKeyUp, ...props }: TInput) => {
   const { type, name, defaultValue, defaultChecked } = props;
-  const _value = defaultValue?.toString() ?? '';
+
+  const _value = ($mode === 'currency' ? formatNumber(defaultValue?.toString() ?? '') : (defaultValue?.toString()) ?? '');
+
   const [inputValue, evInputValue] = useState<string>(_value);
   const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
 
   useEffect(() => {
     if (isForceUpdate) {
-      const _value = defaultValue?.toString() ?? '';
+      const _value = ($mode === 'currency' ? formatNumber(defaultValue?.toString() ?? '') : (defaultValue?.toString()) ?? '');
       evInputValue(_value);
       evInputChecked(defaultChecked||false);
       setForceUpdate && setForceUpdate(false);
@@ -37,62 +41,72 @@ const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset
       evInputChecked(false);
       setReset && setReset(false);
     }
-  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue, defaultChecked, evInputChecked, mode]);
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue, defaultChecked, evInputChecked, $mode])
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const _value = e.target.value;
     evInputValue(_value);
-  };
+  }
 
   const _evKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if ($mode === 'currency') {
+      e.currentTarget.value = formatNumber(e.currentTarget.value);
+    }
     if (e.key === 'Enter') {
       e.preventDefault();
-      (isField && evEnter) && evEnter(e);
+      (isField && evEnter) && evEnter(e)
     }
-  };
+  }
 
   const _evKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (type === 'number') {
-      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) {
+    const _target = e.target as HTMLInputElement;
+    if (type === 'number' || $mode === 'currency') {
+      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) e.preventDefault();
+    }
+    if ($mode === 'currency') {
+      if ((_target.value.length === 1 && e.key === '0' && _target.value === "0") || e.key === ' ') {
         e.preventDefault();
+      } else {
+        return true;
       }
+    } else {
+      return true;
     }
-    return true;
-  };
+  }
   
   const _evBlur = (e: FocusEvent<HTMLInputElement>) => {
     evBlur && evBlur(e);
     (isField && evEnter) && evEnter(e);
     if (isField && name) {
-      const value = type === 'number' ? parseInt(e.target.value) : e.target.value.trim();
+      const value = (type === 'number') ? parseInt(e.target.value) : ($mode === 'currency' ? e.target.value ? parseInt(formatNumber(e.target.value, false)) : null : e.target.value.trim())
       evChangeCustom && evChangeCustom(name, value);
     }
-  };
+  }
 
   let parseProps = {...props};
   delete parseProps.defaultValue;
   delete parseProps.defaultChecked;
 
   const inputEl = <InputContainer 
-                    mode={mode}
+                    $mode={$mode}
                     $isError={$isError}
                     $iconLeft={$iconLeft} 
                     $iconRight={$iconRight}
                     checked={inputChecked} 
                     value={inputValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => { 
-                      handleChange(e);
-                      evChange && evChange(e);
+                      handleChange(e)
+                      evChange && evChange(e)
                     }} 
                     onBlur={(e: FocusEvent<HTMLInputElement>) => { 
-                      handleChange(e);
-                      _evBlur(e);
+                      handleChange(e)
+                      _evBlur(e)
                     }} 
                     onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => { 
-                      evKeyUp && evKeyUp(e);
-                      _evKeyUp(e);
+                      evKeyUp && evKeyUp(e)
+                      _evKeyUp(e)
                     }}
-                    {...(type ==='number' && { onKeyPress: _evKeyPress } )}
+                    {...((type ==='number' || $mode === 'currency') && { onKeyPress: _evKeyPress } )}
                     {...(type ==='number' && { onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
                       const pasteVal = (e.clipboardData || (window as any).clipboardData).getData('text')
                       const _value = pasteVal.replace(/[^0-9]/g, '')
@@ -101,9 +115,16 @@ const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset
                     } })} 
                     {...(type ==='number' && { onFocus: (e: FocusEvent<HTMLInputElement>) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })} )} 
                     {...(type ==='number' && { min: "0" })}
+                    {...($aliasLabel && { $aliasLabel: $aliasLabel }) }
                     {...parseProps} />
 
-  return inputEl;
+  return (
+    $mode === 'currency' ? (
+      <InputWrapper>
+        {inputEl}
+        <InputLabel>{ $aliasLabel || '' }Rp</InputLabel>
+      </InputWrapper> ) : inputEl
+  )
 }
 
 export default InputComponent

package/src/components/input/ref.tsx

@@ -0,0 +1,59 @@
+import { type KeyboardEvent, type FocusEvent, type InputHTMLAttributes, type ClipboardEvent, forwardRef, useEffect } from 'react';
+import { formatNumber } from '../../assets/javascripts/function';
+import { InputContainer, InputLabel, InputWrapper } from './styles';
+
+const InputWithRefComponent = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement> & { $mode?: string, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean }>(({ $mode, $isError, $iconLeft, $iconRight, ...props }, ref) => {
+  const { type } = props;
+
+  const _evKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if ($mode === 'currency') {
+      e.currentTarget.value = formatNumber(e.currentTarget.value);
+    }
+  }
+
+  const _evKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    const _target = e.target as HTMLInputElement;
+    if (type === 'number' || $mode === 'currency') {
+      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) e.preventDefault();
+    }
+    if ($mode === 'currency') {
+      if ((_target.value.length === 1 && e.key === '0' && _target.value === "0") || e.key === ' ') {
+        e.preventDefault();
+      } else {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  const inputEl = <InputContainer 
+                    ref={ref}
+                    $mode={$mode}
+                    $isError={$isError}
+                    $iconLeft={$iconLeft} 
+                    $iconRight={$iconRight}
+                    onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => { 
+                      _evKeyUp(e)
+                    }}
+                    {...((type ==='number' || $mode === 'currency') && { onKeyPress: _evKeyPress } )}
+                    {...(type ==='number' && { onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
+                      const pasteVal = (e.clipboardData || (window as any).clipboardData).getData('text')
+                      const _value = pasteVal.replace(/[^0-9]/g, '')
+                      e.preventDefault()
+                      document.execCommand('insertText', false, _value)
+                    } })} 
+                    {...(type ==='number' && { onFocus: (e: FocusEvent<HTMLInputElement>) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })} )} 
+                    {...type ==='number' && { min: "0" }} 
+                    {...props} />
+
+  return (
+    $mode === 'currency' ? (
+      <InputWrapper>
+        {inputEl}
+        <InputLabel>Rp</InputLabel>
+      </InputWrapper> ) : inputEl
+  )
+})
+
+export default InputWithRefComponent

package/src/components/input/styles.ts

@@ -7,7 +7,8 @@ const SubmitStyles = css`
   color: var(--sec-clr);
   background-color: var(--act-clr-bg);
 `
-const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError, mode, type }:{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, mode?: string, type?: string }) => {
+
+const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError, $mode, type, $aliasLabel }:{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, $mode?: string, type?: string, $aliasLabel?:string }) => {
   let style = ""
   if ($iconLeft) {
     style += ` 
@@ -30,7 +31,7 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
       max-height: ${height}px
     `
   }
-  if (mode === 'search') {
+  if ($mode === 'search') {
     style += ` 
       background-color: transparent;
       &, &:not([type="submit"]):focus, &:active, &:active:focus {
@@ -45,11 +46,16 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
       `
     }      
   }
-  if (mode === 'transaction') {
+  if ($mode === 'transaction') {
     style += `
       padding-left: 45px;
     ` 
   }
+  if ($mode === 'currency') {
+    style += `
+      padding-left: ${$aliasLabel ? '38px' : '30px'} !important;
+    ` 
+  }
   if (width) {
     style += ` 
       width: ${width}px 
@@ -61,10 +67,26 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
   return style;
 }
 
-export const InputContainer = styled.input<{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, mode?: string, type?: string }>`
+export const InputContainer = styled.input<{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, $mode?: string, type?: string }>`
   &._refQuantitiyInput {
     width: 55px;
     text-align: center;
   }
   ${getInputModifiedStyled}
+`
+export const InputWrapper = styled.div`
+  position: relative;
+  & ._refLoadingInput {
+    position: absolute;
+    top: 50%;
+    margin-top: -5px;
+    right: 10px; 
+  }
+`
+export const InputLabel = styled.label`
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--mt-clr);
 `

package/src/components/select/index.tsx

@@ -0,0 +1,331 @@
+import { useEffect, useState } from 'react';
+import ReactSelect from 'react-select';
+import type { SingleValueProps, OptionProps, StylesConfig, ActionMeta, ControlProps, MultiValueProps, OnChangeValue, CSSObjectWithLabel } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import type { CSSObject } from '@emotion/serialize';
+import { generateMessageQuestion } from '../../assets/javascripts/function';
+import type { TState, TObject } from '../../typeds/base.typed';
+import type { TMessageQuestionFunction } from '../message/typed';
+import type { TOption } from './typed';
+
+type TSelect = {
+  type?: string
+  mode?: string
+  isError?: boolean
+  name?: string
+  customOption?: (arg0: OptionProps) => void
+  customLabel?: (arg0: SingleValueProps) => void
+  MenuList?: any
+  isCreateable?: boolean
+  isClearable?: boolean
+  selectKey?: string
+  disabled?: boolean
+  width?: string | number
+  reset?: boolean
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+  isCheckAutoCopy?: boolean
+  isField?: boolean
+  isMulti?: boolean
+  evCreate?: (value: string) => void
+  evChange?: (newValue: OnChangeValue<TOption, boolean>, actionMeta?: ActionMeta<TOption>) => void
+  evChangeCustom? : (key: string, value: any) => void
+  defaultValue?: OnChangeValue<TOption, boolean>
+  options: TOption[] | null
+  isMinOption?: boolean
+  placeholder?: string
+  'data-qa-id'?: string
+  removeMessage?: TObject
+  evCreateMessageQuestion?: TMessageQuestionFunction
+}
+
+const SelectComponent = ({ type, isError=false, mode, customOption, customLabel, MenuList, isCreateable=false, isClearable=false, selectKey, disabled, defaultValue, width, reset, setReset, isForceUpdate, setForceUpdate, isCheckAutoCopy, evChangeCustom, isField, evCreate, evChange, isMinOption, isMulti=false, options, name, placeholder, removeMessage, evCreateMessageQuestion, ...props }: TSelect) => {
+  const [valueState, setValue] = useState<typeof defaultValue>(defaultValue || null)
+
+  useEffect(()=> {
+    if (reset) {
+      setValue(null);
+      setReset && setReset(false);
+    }
+    if (isForceUpdate) {
+      let changeValue = defaultValue;
+      if (isCheckAutoCopy) {
+        if (changeValue) {
+          let isChanging = false;
+          if (isMulti) {
+            let _changeValue = changeValue as OnChangeValue<TOption, true>;
+            if (Array.isArray(_changeValue) && _changeValue.length) {
+              let newValue = [] as OnChangeValue<TOption, true>;
+              for (const _value of _changeValue) {
+                const optionFilter = options?.filter(opt => (opt.label === _value.label && opt.value === _value.value) );
+                if (optionFilter?.length && Array.isArray(newValue)) {
+                  newValue.push(_value);
+                }
+                else { 
+                  !isChanging && (isChanging = true);
+                }
+              }
+              newValue.length && (_changeValue = newValue);
+            }
+          } else {
+            let _changeValue = changeValue as OnChangeValue<TOption, false>;
+            if (_changeValue) {
+              const optionFilter = options?.filter(opt => _changeValue && (opt.label === _changeValue.label && opt.value === _changeValue.value) );
+              if (optionFilter?.length) {
+                changeValue = null;
+                isChanging = true;
+              }
+            }
+          }
+          (isChanging && name) && evChangeCustom && evChangeCustom(name, changeValue);
+        }
+      }
+      setValue(changeValue);
+      setForceUpdate && setForceUpdate(false);
+    }
+  }, [defaultValue, evChangeCustom, isCheckAutoCopy, isForceUpdate, isMulti, name, options, reset, setForceUpdate, setReset])
+  
+  const evToogleSelect = () => {
+    const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+    if (containerRef.length) {
+      for (let i = 0; i < containerRef.length; i++) {
+        containerRef[i].classList.remove('is-shown');
+      }
+    } 
+  }
+
+  const handleChange = (value: OnChangeValue<TOption, typeof isMulti>, { action, removedValue, option }: any) => {
+    if (isMulti) {
+      const newValue = value as OnChangeValue<TOption, true>;
+      const removeCallback = () => {
+        setValue(newValue);
+        evChange && evChange(newValue, { action, removedValue, option });
+      }
+      switch (action) {
+        case 'remove-value':
+          if (isMinOption) {
+            if (action === 'remove-value' && (Array.isArray(valueState) && valueState.length === 1)) {
+              return false;
+            }
+          }
+          if (removedValue.isFixed) {
+            return;
+          }
+          break;
+        case 'pop-value':
+          if (removedValue.isFixed) {
+            return;
+          }
+          break;
+        case 'clear':
+          value = options?.filter((v) => v.isFixed) || [];
+          break;
+        default:
+          break;
+      }
+      if (removeMessage && action === 'remove-value') {
+        const _confirm_props = generateMessageQuestion('confirm', removeMessage?.title || '', removeMessage?.subtitle || '', removeCallback);
+        evCreateMessageQuestion && evCreateMessageQuestion(_confirm_props);
+        return false;
+      } else {
+        setValue(newValue);
+        evChange && evChange(newValue, { action, removedValue, option });
+      }
+    } else {
+      const newValue = value as OnChangeValue<TOption, false>;
+      mode === 'paymentReceiveStore' ? setValue(newValue ? { value: newValue.value, label : newValue.label, channel: newValue.channel } : newValue) : setValue(newValue ? { value: newValue.value, label : newValue.label } : newValue);
+      evChange && evChange(newValue, { action, removedValue, option });
+    }
+    (!isMulti && isField && evChangeCustom && name) && evChangeCustom(name, value);
+  }
+  
+  const handleBlur = () => {
+    (isField && evChangeCustom && name && valueState) && evChangeCustom(name, valueState);
+  }
+
+  const handleCreate = (inputValue: string) => {
+    setReset && setReset(false);
+    if (isMulti) {
+      !Array.isArray(valueState) ? setValue([{ value: inputValue, label : inputValue }]) : setValue([...valueState, { value: inputValue, label : inputValue }]);
+    }
+    else {
+      setValue({ value: inputValue, label : inputValue });
+    }
+    evCreate && evCreate(inputValue);
+  }
+
+  const isValidNewOption = (inputValue: string, selectOptions: TOption[]) => {
+    return !(inputValue.trim().length === 0 || selectOptions.find(option => option.name === inputValue)); 
+  }
+
+  const customStyles: StylesConfig<TOption, typeof isMulti> = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      width: width ? width+'px' : '100%',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObject, state:ControlProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      borderRadius: mode === 'filter' ? 'var(--sec-rd)' : 'var(--ter-rd)',
+      minHeight:  mode === 'picklist' ? '30px': '1px',
+      height: mode === 'orders' ? '90px' : '30px',
+      maxHeight: mode === 'picklist' ? '46px': 'none',
+      cursor: 'pointer',
+      borderWidth:  '1px' ,
+      boxShadow: (state.isFocused && mode === 'filter') ? 'var(--act-shd-bx)' : 'none',
+      borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? 'var(--ter-clr-ln)' : ' var(--ck-clr-ln)' )),
+      background: mode ==='filter' ? 'var(--ter-clr-ln)' : '',
+      overflow: mode === 'picklist' ? 'hidden': (mode === 'orders' ? 'auto' : 'initial'),
+      alignItems:  mode === 'orders' ? 'start' : 'center',
+      padding:  mode === 'orders' ? '6px 0' : 'unset',
+      '&:hover': {
+        borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? 'var(--ter-clr-ln)' : ' var(--ck-clr-ln)' )),
+      }
+    } 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),
+    dropdownIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      color: '#757575',
+      alignSelf:  mode === 'orders' ? 'start' : 'unset',
+    } 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,
+      height: '30px',
+      maxHeight: mode === 'picklist' ? '46px': 'none',
+      minHeight:  mode === 'picklist' ? '30px': '1px',
+      overflow: mode === 'picklist' ? 'auto': 'initial',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingRight: '2px',
+    } as CSSObjectWithLabel),
+    singleValue: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingBottom: '2px',
+      color: (disabled? '#ADADAD' : (mode === 'form' ? '#2d3c48' : 'initial')),
+      opacity: disabled ? '.7' : 1,
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: OptionProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel),
+    menu: (provided: CSSObject) => ({
+      ...provided,
+      borderRadius: mode === 'filter' ? 'var(--sec-rd)' : 'var(--ter-rd)',
+    } as CSSObjectWithLabel), 
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel),
+    multiValue: (base: any, state: MultiValueProps<TOption, typeof isMulti>) => {
+      return state.data.isFixed ? { ...base, backgroundColor: 'gray' } : base
+    },
+    multiValueLabel: (base: any, state: MultiValueProps<TOption, typeof isMulti>) => {
+      return state.data.isFixed ? { ...base, fontWeight: 'bold', color: 'white', paddingRight: 6 } : base
+    },
+    multiValueRemove: (provided: CSSObject, state: MultiValueProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      display: state.data.isFixed ? 'none' : 'block',
+      'svg': {
+        position: 'relative',
+        top: '2px'
+      }
+    } as CSSObjectWithLabel),
+  }
+
+  let SelectEl = isCreateable  ?   
+    <CreatableSelect
+      options={options}
+      styles={customStyles} 
+      onMenuOpen={evToogleSelect}
+      menuPortalTarget={document.body}
+      menuPosition='fixed'
+      menuPlacement='auto'
+      value={valueState}
+      onChange={handleChange}
+      // onInputChange={handleInputChange}
+      onCreateOption= {handleCreate}
+      isValidNewOption={isValidNewOption}
+      noOptionsMessage={() => null} 
+      isClearable={isClearable ? ((Array.isArray(valueState) && valueState.length) ? valueState.some((v) => !v.isFixed) : true) : isClearable}
+      {...isMulti && { isMulti: true }}
+      {...customOption && { components: { Option: customOption } }}
+      {...MenuList && { components: { MenuList, Option: customOption } }}
+      {...selectKey && { key: selectKey }}
+      {...disabled && { isDisabled: disabled }}
+      {...isMulti && { closeMenuOnSelect: false }}
+      {...isMulti && { onBlur: handleBlur }}
+      {...placeholder && { placeholder }}
+      {...props} />
+      : 
+    <ReactSelect 
+      options={options}
+      styles={customStyles} 
+      onMenuOpen={evToogleSelect}
+      menuPortalTarget={document.body}
+      menuPosition='fixed'
+      menuPlacement='auto'
+      value={valueState}
+      onChange={handleChange}
+      noOptionsMessage={() => null} 
+      isClearable={isClearable ? ((Array.isArray(valueState) && valueState.length) ? valueState.some((v) => !v.isFixed) : true) : isClearable}
+      {...isMulti && { isMulti: true }}
+      {...customOption && { components: { Option: customOption } }}
+      {...mode === 'paymentReceiveStore' && { components: { Option: customOption, SingleValue: customLabel } }}
+      {...MenuList && { components: { MenuList, Option: customOption } }}
+      {...selectKey && { key: selectKey }}
+      {...disabled && { isDisabled: disabled }}
+      {...isMulti && { closeMenuOnSelect: false }}
+      {...isMulti && { onBlur: handleBlur }}
+      {...placeholder && { placeholder }}
+      {...props} />
+  
+  return (
+    <section className='_refContainer' {...props}>
+      {SelectEl}
+    </section>
+  )
+}
+
+export default SelectComponent

package/src/components/select/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const SelectCheckboxContainer = styled.section`
+  max-width: 530px;
+`

package/src/components/select/typed.ts

@@ -0,0 +1,16 @@
+import type { TChannel } from '../../typeds/shares.typed';
+
+export type TOption = {
+  readonly value: any
+  readonly label: string
+  readonly name?: string
+  readonly isFixed?: boolean
+  readonly channel?: Omit<TChannel, 'stores'>
+  postalCode?: string
+  localId?: string
+  option?: {
+    readonly value: any
+    readonly label: string
+    localId?: string
+  }[]
+}