@codeleap/web 3.25.3 → 3.25.5

package/package.json

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

package/src/components/List/ListLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StylesOf, TypeGuards } from '@codeleap/common'
+import { StylesOf, TypeGuards, PropsOf } from '@codeleap/common'
 import { ListComposition, ListParts } from './styles'
 import { ListProps } from './types'
 import { View } from '../View'
@@ -11,6 +11,7 @@ export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollR
   variantStyles: StylesOf<ListComposition>
   children?: React.ReactNode
   showFooter?: boolean
+  wrapperProps?: Partial<PropsOf<typeof View>>
 }
 
 type ListRefreshControlComponent = Partial<ListLayoutProps> & {
@@ -67,6 +68,7 @@ export const ListLayout = (props: ListLayoutProps) => {
     ListLoadingIndicatorComponent,
     scrollableRef,
     showFooter = true,
+    wrapperProps = {},
   } = props
 
   const getKeyStyle = React.useCallback((key: ListParts) => ([
@@ -77,7 +79,7 @@ export const ListLayout = (props: ListLayoutProps) => {
 
   return (
     // @ts-ignore
-    <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
+    <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef} {...wrapperProps}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
       {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}

package/src/components/List/index.tsx

@@ -56,6 +56,7 @@ export function List<T = any>(props: ListProps<T>) {
     masonryProps = {},
     reloadTimeout,
     showFooter,
+    layoutWrapperProps = {},
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
@@ -102,6 +103,7 @@ export function List<T = any>(props: ListProps<T>) {
     <ListLayout
       {...allProps}
       {...layoutProps}
+      wrapperProps={layoutWrapperProps}
       variantStyles={variantStyles}
       showFooter={reloadingLayout ? false : showFooter}
     >

package/src/components/List/types.ts

@@ -54,4 +54,5 @@ Data = T extends Array<infer D> ? D : never
     masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
     showFooter?: boolean
+    layoutWrapperProps?: Partial<PropsOf<typeof View>>
 } & ComponentCommonProps & UseInfiniteScrollArgs

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: () => ({}),

package/src/types/utility.ts

@@ -22,6 +22,11 @@ export type ElementMap = {
   'section': WithChildren<JSX.IntrinsicElements['section']>
   'header': WithChildren<JSX.IntrinsicElements['header']>
   'footer': WithChildren<JSX.IntrinsicElements['footer']>
+  'nav': WithChildren<JSX.IntrinsicElements['nav']>
+  'article': WithChildren<JSX.IntrinsicElements['article']>
+  'ul': WithChildren<JSX.IntrinsicElements['ul']>
+  'ol': WithChildren<JSX.IntrinsicElements['ol']>
+  'aside': WithChildren<JSX.IntrinsicElements['aside']>
 }
 
 export type NativeHTMLElement = keyof ElementMap