@codeleap/web 3.24.3 → 3.25.2

package/package.json

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

package/src/components/CropPicker/types.ts

@@ -7,6 +7,8 @@ import { ModalProps } from '../Modal'
 import { useCropPicker } from './useCropPicker'
 import { ButtonProps } from '../Button'
 
+export type CropImageType = 'png' | 'jpeg' | 'webp'
+
 export type BaseCropProps = Partial<ReactCropProps>
 
 export type CropPickerProps = Partial<FileInputProps> &

package/src/components/CropPicker/useCropPicker.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from '@codeleap/common'
-import { ImageReading, UseCropPickerProps } from './types'
+import { CropImageType, ImageReading, UseCropPickerProps } from './types'
 import { Crop } from 'react-image-crop'
 import { cropImage, readImage } from './utils'
 import { FileInputRef } from '../FileInput'
@@ -40,9 +40,9 @@ export function useCropPicker({
     setTimeout(() => setImage(null), 500)
   }
 
-  const onConfirmCrop = async () => {
+  const onConfirmCrop = async (imageType: CropImageType = 'jpeg') => {
     setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop)
+    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
     onResolved([
       {
         file: new File([croppedFile], 'cropped.jpg'),

package/src/components/CropPicker/utils.ts

@@ -1,5 +1,5 @@
 import { Crop } from 'react-image-crop'
-import { ImageReading } from './types'
+import { CropImageType, ImageReading } from './types'
 
 export function readImage(file: File | Blob): Promise<ImageReading> {
   const reader = new FileReader()
@@ -13,7 +13,7 @@ export function readImage(file: File | Blob): Promise<ImageReading> {
   })
 }
 
-export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
+export function cropImage(image: ImageReading, crop: Crop, type: CropImageType): Promise<[string, Blob]> {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d', { alpha: true })
 
@@ -46,6 +46,6 @@ export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blo
       readImage(blob).then(cropped => {
         resolve([cropped.src, blob])
       }).catch(reject)
-    }, 'image/png')
+    }, `image/${type}`)
   })
 }

package/src/components/Select/index.tsx

@@ -20,7 +20,8 @@ export * from './types'
 const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
   const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused, debugName } = props
 
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.styles ?? {}) })
+  // @ts-ignore
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (props?.data?.itemProps?.style ?? itemProps?.style ?? {}) })
 
   let _Component = null
 
@@ -33,6 +34,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         debugName={debugName}
         {...itemProps}
         styles={styles}
+        {...props?.data?.itemProps}
       />
     )
   } else {

package/src/components/Select/types.ts

@@ -1,11 +1,11 @@
-import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
+import { ComponentVariants, FormTypes, PropsOf, StylesOf, yup } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
 import { CSSObject } from '@emotion/react'
 import { MutableRefObject } from 'react'
 import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
 import { AsyncProps } from 'react-select/async'
 import { ComponentCommonProps } from '../../types'
-import { ButtonProps } from '../Button'
+import { Button, ButtonProps } from '../Button'
 import { InputBaseProps } from '../InputBase'
 import { SelectPresets, SelectComposition, OptionState } from './styles'
 
@@ -27,7 +27,7 @@ type DynamicSelectProps<T, Multi extends boolean> =
   >)
 
 export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'styles' | 'variants'> &{
-  options: FormTypes.Options<T>
+  options: FormTypes.Options<T> & { itemProps?: PropsOf<typeof Button> }
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
@@ -47,6 +47,7 @@ export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonPr
   selectedIcon?: string
   itemProps?: ButtonProps
   styles?: OptionState['baseStyles']
+  data: OptionProps['data'] & { itemProps?: PropsOf<typeof Button>}
 }
 
 type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | JSX.Element