@codeleap/web 3.25.2 → 3.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.25.2",
+  "version": "3.25.4",
   "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

@@ -33,8 +33,8 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         rightIcon={isSelected && selectedIcon}
         debugName={debugName}
         {...itemProps}
-        styles={styles}
         {...props?.data?.itemProps}
+        styles={styles}
       />
     )
   } else {
@@ -176,7 +176,7 @@ const defaultProps: Partial<SelectProps> = {
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
   <T extends string | number = string, Multi extends boolean = false>
-    (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
+  (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
     type Option = FormTypes.Option<T>
 

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