@codeleap/web 3.25.4 → 3.25.5

package/package.json

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

package/src/components/Select/index.tsx

@@ -233,7 +233,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const _innerInputRef = useRef<any>(null)
     const innerInputRef = selectRef || _innerInputRef
-    const innerWrapperRef = useRef(null)
+    const innerWrapperRef = useRef<HTMLDivElement>(null)
 
     const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
 
@@ -275,6 +275,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       error: !!hasError,
       focused: isFocused,
       disabled: isDisabled,
+      parentWidth: innerWrapperRef?.current?.clientWidth,
     })
 
     useImperativeHandle(inputRef, () => {
@@ -420,8 +421,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
-          // escapeRemoves={true}
-          // deleteRemoves={true}
+          menuPortalTarget={document.body}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}
@@ -436,7 +436,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           defaultOptions={loadOptionsOnMount}
           ref={innerInputRef}
           closeMenuOnSelect={closeOnSelect}
-          menuPortalTarget={innerWrapperRef.current}
           placeholder={(loadOptionsOnMount && !loadedOptions) ? loadingMessage : placeholder}
           isDisabled={isDisabled}
           isClearable={clearable}

package/src/components/Select/styles.ts

@@ -51,6 +51,7 @@ export type ComponentState = {
   error?: boolean
   focused?: boolean
   disabled?: boolean
+  parentWidth?: number
 }
 
 export type OptionState = { 
@@ -70,6 +71,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T,
     error,
     focused,
     disabled,
+    parentWidth,
   } = state
 
   const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>(
@@ -138,10 +140,18 @@ export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T,
     wrapper: stylesKey('itemsWrapper'),
   }
 
+  const parseMenuPortalStyles = (baseStyles: CSSObjectWithLabel) => {
+    return {
+      ...baseStyles,
+      width: parentWidth,
+      left: `calc(${baseStyles.left}px - ((${parentWidth}px - ${baseStyles.width}px) / 2))`
+    }
+  }
+
   const reactSelectStyles: StylesConfig<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>> = {
     container: (baseStyles) => stylesKey('inputContainer', baseStyles),
     control: () => stylesKey('inputContainer'),
-    menuPortal: (baseStyles) => stylesKey('listPortal', baseStyles),
+    menuPortal: (baseStyles) => stylesKey('listPortal', parseMenuPortalStyles(baseStyles)),
     menu: (baseStyles) => stylesKey('listWrapper', baseStyles),
     menuList: (baseStyles) => stylesKey('list', baseStyles),
     group: () => ({}),