@codeleap/web 3.9.0 → 3.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.9.0",
+  "version": "3.10.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/Select/index.tsx

@@ -168,6 +168,8 @@ const defaultProps: Partial<SelectProps> = {
   itemProps: {} as ButtonProps,
   loadingIndicatorSize: 20,
   options: [],
+  loadInitialValue: false,
+  loadingMessage: 'loading...',
 }
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
@@ -195,6 +197,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       loadOptions,
       multiple,
       limit = null,
+      loadInitialValue,
       focused,
       _error,
       renderItem: OptionComponent = null,
@@ -221,6 +224,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       loadingIndicatorSize,
       selectedOption: _selectedOption,
       setSelectedOption: _setSelectedOption,
+      loadingMessage,
       ...otherProps
     } = selectProps
 
@@ -229,10 +233,14 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
 
-    const [selectedOption, setSelectedOption] = hasSelectedOptionState ? [_selectedOption, _setSelectedOption] : useState(value)
+    const initialValue = (loadInitialValue && !TypeGuards.isNil(options)) 
+      ? options?.find((option) => option?.value === value) 
+      : value 
 
-    const [_isFocused, setIsFocused] = useState(false)
+    const [selectedOption, setSelectedOption] = hasSelectedOptionState ? [_selectedOption, _setSelectedOption] : useState(initialValue ?? value)
 
+    const [_isFocused, setIsFocused] = useState(false)
+    const [loadedOptions, setLoadedOptions] = useState(false)
     const [keyDownActive, setKeyDownActive] = useState(false)
 
     const isFocused = _isFocused || focused
@@ -276,6 +284,13 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
             return options
           })
 
+          if (loadInitialValue && !TypeGuards.isNil(_options) && !loadedOptions) {
+            const _initialValue = _options?.find?.((option) => option?.value === value)
+            if (!!_initialValue) setSelectedOption(_initialValue)
+          }
+
+          setLoadedOptions(true)
+
           return _options
         } catch (err) {
           onLoadOptionsError?.(err)
@@ -401,7 +416,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           ref={innerInputRef}
           closeMenuOnSelect={closeOnSelect}
           menuPortalTarget={innerWrapperRef.current}
-          placeholder={placeholder}
+          placeholder={(loadOptionsOnMount && !loadedOptions) ? loadingMessage : placeholder}
           isDisabled={isDisabled}
           isClearable={clearable}
           isSearchable={searchable}

package/src/components/Select/types.ts

@@ -93,6 +93,8 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     itemProps?: ButtonProps
     loadingIndicatorSize?: number
     limit?: number
+    loadInitialValue?: boolean
+    loadingMessage?: string
     selectedOption?: ReactSelectProps<T>['value']
     setSelectedOption?: ReactSelectProps<T>['onValueChange']
   } & Omit<