@campxdev/shared 1.10.39 → 1.10.41

package/src/components/Input/AsyncSearchSelect/AsyncSearchSelect.tsx

@@ -1,216 +1,216 @@
-import { Close } from '@mui/icons-material'
-import { Box, Checkbox, CircularProgress, Typography } from '@mui/material'
-import _ from 'lodash'
-import { ReactNode, useCallback, useEffect, useState } from 'react'
-import { useQuery } from 'react-query'
-import { useImmer } from 'use-immer'
-import FormLabel from '../FormLabel'
-import { BpCheckedIcon, BpIcon } from '../SingleCheckbox'
-import TextField from '../TextField'
-import { IOption } from '../types'
-import {
-  StyledAnchor,
-  StyledListContainer,
-  StyledListItem,
-  StyledPopover,
-  StyledSelectedChip,
-} from './styles'
-
-const Anchor = ({ handleClick, id, label, required }) => {
-  return (
-    <Box>
-      <FormLabel label={label} name={id ?? ''} required={required} />
-      <StyledAnchor id={id} onClick={handleClick}>
-        <Typography variant="subtitle1">Click to search</Typography>
-      </StyledAnchor>
-    </Box>
-  )
-}
-
-const SelectedItems = ({ selectedItems, selectedLabel, onDelete }) => {
-  if (!selectedItems?.length) return null
-  return (
-    <Box marginTop="10px">
-      <FormLabel label={selectedLabel} name="form-label" required={false} />
-      <Box sx={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        {selectedItems?.map((item, index) => (
-          <StyledSelectedChip
-            deleteIcon={<Close />}
-            key={index}
-            label={item?.label}
-            variant={'outlined'}
-            onDelete={() => onDelete(item)}
-          />
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-const OptionsList = ({ loading, menuItems, onSelected, selected }) => {
-  const isIncluded = (id) => {
-    return selected?.options?.find((item) => item.value == id)
-  }
-
-  const handleClick = (selectedOption) => {
-    if (isIncluded(selectedOption.value)) {
-      onSelected(
-        selected?.options?.filter(
-          (item) => item.value !== selectedOption.value,
-        ),
-      )
-    } else {
-      onSelected([...selected.options, selectedOption])
-    }
-  }
-
-  if (loading)
-    return <CircularProgress size={16} sx={{ textAlign: 'center' }} />
-
-  if (!menuItems)
-    return (
-      <Typography
-        sx={{ padding: '10px' }}
-        variant="subtitle1"
-        textAlign={'center'}
-      >
-        Start typing to search
-      </Typography>
-    )
-  if (!menuItems?.length)
-    return (
-      <Typography
-        sx={{ padding: '10px' }}
-        variant="subtitle1"
-        textAlign={'center'}
-      >
-        No results found
-      </Typography>
-    )
-
-  return (
-    <>
-      {menuItems?.map((option, index) => (
-        <StyledListItem key={index} onClick={() => handleClick(option)}>
-          <Checkbox
-            icon={isIncluded(option?.value) ? <BpCheckedIcon /> : <BpIcon />}
-          />
-          {option.label}
-        </StyledListItem>
-      ))}
-    </>
-  )
-}
-
-type SearchInputProps = {
-  onChange: (value: IOption[]) => void
-  initialOptions?: IOption[]
-  searchQueryKey?: string
-  selectedLabel?: ReactNode
-  label: ReactNode
-  fetchFn: (params: { [x: string]: string }) => Promise<IOption[]>
-  required?: boolean
-}
-
-export default function AsyncSearchSelect({
-  label,
-  onChange,
-  initialOptions = [],
-  searchQueryKey = 'search',
-  selectedLabel = 'Selected Items',
-  fetchFn,
-  required,
-}: SearchInputProps) {
-  const [search, setSearch] = useState('')
-  const [width, setWidth] = useState(300)
-
-  const { data: searchResults, isLoading } = useQuery(
-    ['search', search],
-    (params: any) => fetchFn({ ...params, [searchQueryKey]: search }),
-    {
-      enabled: Boolean(search),
-    },
-  )
-
-  const [selected, setSelected] = useImmer({
-    options: [],
-  })
-
-  const [open, setOpen] = useState(false)
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const id = open ? 'simple-popover' : undefined
-
-  const onSearchChange = (e) => {
-    setSearch(e.target.value)
-  }
-
-  const handleClick = (event) => {
-    const anchorWidth = event.target.getBoundingClientRect().width
-    setWidth(anchorWidth)
-    setOpen(true)
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setOpen(false)
-  }
-
-  const onSelected = (newValues) => {
-    setSelected((s) => {
-      s.options = newValues
-    })
-    if (onChange) onChange(newValues)
-  }
-
-  const onDeleteSelectedItem = (option) => {
-    onSelected(selected?.options?.filter((item) => item.value !== option.value))
-  }
-
-  const debouncedChange = useCallback(_.debounce(onSearchChange, 300), [])
-
-  useEffect(() => {
-    setSelected((s) => {
-      s.options = initialOptions
-    })
-  }, [initialOptions?.length])
-
-  return (
-    <Box>
-      <Anchor
-        handleClick={handleClick}
-        id={id}
-        label={label}
-        required={required}
-      />
-      <SelectedItems
-        onDelete={onDeleteSelectedItem}
-        selectedItems={selected?.options}
-        selectedLabel={selectedLabel}
-      />
-      <StyledPopover
-        popoverWidth={width}
-        open={open}
-        id={id}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-      >
-        <Box sx={{ padding: '14px' }}>
-          <TextField
-            size="small"
-            onChange={debouncedChange}
-            placeholder="Search"
-            autoFocus={true}
-          />
-          <StyledListContainer>
-            <OptionsList
-              loading={isLoading}
-              menuItems={searchResults}
-              onSelected={onSelected}
-              selected={selected}
-            />
-          </StyledListContainer>
-        </Box>
-      </StyledPopover>
-    </Box>
-  )
-}
+import { Close } from '@mui/icons-material'
+import { Box, Checkbox, CircularProgress, Typography } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import FormLabel from '../FormLabel'
+import { BpCheckedIcon, BpIcon } from '../SingleCheckbox'
+import TextField from '../TextField'
+import { IOption } from '../types'
+import {
+  StyledAnchor,
+  StyledListContainer,
+  StyledListItem,
+  StyledPopover,
+  StyledSelectedChip,
+} from './styles'
+
+const Anchor = ({ handleClick, id, label, required }) => {
+  return (
+    <Box>
+      <FormLabel label={label} name={id ?? ''} required={required} />
+      <StyledAnchor id={id} onClick={handleClick}>
+        <Typography variant="subtitle1">Click to search</Typography>
+      </StyledAnchor>
+    </Box>
+  )
+}
+
+const SelectedItems = ({ selectedItems, selectedLabel, onDelete }) => {
+  if (!selectedItems?.length) return null
+  return (
+    <Box marginTop="10px">
+      <FormLabel label={selectedLabel} name="form-label" required={false} />
+      <Box sx={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        {selectedItems?.map((item, index) => (
+          <StyledSelectedChip
+            deleteIcon={<Close />}
+            key={index}
+            label={item?.label}
+            variant={'outlined'}
+            onDelete={() => onDelete(item)}
+          />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+const OptionsList = ({ loading, menuItems, onSelected, selected }) => {
+  const isIncluded = (id) => {
+    return selected?.options?.find((item) => item.value == id)
+  }
+
+  const handleClick = (selectedOption) => {
+    if (isIncluded(selectedOption.value)) {
+      onSelected(
+        selected?.options?.filter(
+          (item) => item.value !== selectedOption.value,
+        ),
+      )
+    } else {
+      onSelected([...selected.options, selectedOption])
+    }
+  }
+
+  if (loading)
+    return <CircularProgress size={16} sx={{ textAlign: 'center' }} />
+
+  if (!menuItems)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        Start typing to search
+      </Typography>
+    )
+  if (!menuItems?.length)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        No results found
+      </Typography>
+    )
+
+  return (
+    <>
+      {menuItems?.map((option, index) => (
+        <StyledListItem key={index} onClick={() => handleClick(option)}>
+          <Checkbox
+            icon={isIncluded(option?.value) ? <BpCheckedIcon /> : <BpIcon />}
+          />
+          {option.label}
+        </StyledListItem>
+      ))}
+    </>
+  )
+}
+
+type SearchInputProps = {
+  onChange: (value: IOption[]) => void
+  initialOptions?: IOption[]
+  searchQueryKey?: string
+  selectedLabel?: ReactNode
+  label: ReactNode
+  fetchFn: (params: { [x: string]: string }) => Promise<IOption[]>
+  required?: boolean
+}
+
+export default function AsyncSearchSelect({
+  label,
+  onChange,
+  initialOptions = [],
+  searchQueryKey = 'search',
+  selectedLabel = 'Selected Items',
+  fetchFn,
+  required,
+}: SearchInputProps) {
+  const [search, setSearch] = useState('')
+  const [width, setWidth] = useState(300)
+
+  const { data: searchResults, isLoading } = useQuery(
+    ['search', search],
+    (params: any) => fetchFn({ ...params, [searchQueryKey]: search }),
+    {
+      enabled: Boolean(search),
+    },
+  )
+
+  const [selected, setSelected] = useImmer({
+    options: [],
+  })
+
+  const [open, setOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const id = open ? 'simple-popover' : undefined
+
+  const onSearchChange = (e) => {
+    setSearch(e.target.value)
+  }
+
+  const handleClick = (event) => {
+    const anchorWidth = event.target.getBoundingClientRect().width
+    setWidth(anchorWidth)
+    setOpen(true)
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const onSelected = (newValues) => {
+    setSelected((s) => {
+      s.options = newValues
+    })
+    if (onChange) onChange(newValues)
+  }
+
+  const onDeleteSelectedItem = (option) => {
+    onSelected(selected?.options?.filter((item) => item.value !== option.value))
+  }
+
+  const debouncedChange = useCallback(_.debounce(onSearchChange, 300), [])
+
+  useEffect(() => {
+    setSelected((s) => {
+      s.options = initialOptions
+    })
+  }, [initialOptions?.length])
+
+  return (
+    <Box>
+      <Anchor
+        handleClick={handleClick}
+        id={id}
+        label={label}
+        required={required}
+      />
+      <SelectedItems
+        onDelete={onDeleteSelectedItem}
+        selectedItems={selected?.options}
+        selectedLabel={selectedLabel}
+      />
+      <StyledPopover
+        popoverWidth={width}
+        open={open}
+        id={id}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+      >
+        <Box sx={{ padding: '14px' }}>
+          <TextField
+            size="small"
+            onChange={debouncedChange}
+            placeholder="Search"
+            autoFocus={true}
+          />
+          <StyledListContainer>
+            <OptionsList
+              loading={isLoading}
+              menuItems={searchResults}
+              onSelected={onSelected}
+              selected={selected}
+            />
+          </StyledListContainer>
+        </Box>
+      </StyledPopover>
+    </Box>
+  )
+}

package/src/components/Input/AsyncSearchSelect/index.tsx

@@ -1 +1 @@
-export { default } from './AsyncSearchSelect'
+export { default } from './AsyncSearchSelect'

package/src/components/Input/AsyncSearchSelect/styles.tsx

@@ -1,105 +1,105 @@
-import {
-  alpha,
-  Box,
-  Chip,
-  ListItem,
-  Popover,
-  PopoverProps,
-  styled,
-} from '@mui/material'
-
-export const StyledPopover = styled((props: PopoverProps) => (
-  <Popover
-    elevation={0}
-    anchorPosition={{
-      left: 0,
-      top: 0,
-    }}
-    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-    transitionDuration={150}
-    {...props}
-  />
-))<{ popoverWidth: number }>(({ theme, popoverWidth }) => ({
-  '& .MuiPaper-root': {
-    width: popoverWidth,
-    borderRadius: '10px',
-    boxShadow: '0px 4px 16px #0000000F',
-    marginTop: '1px',
-    '& .MuiList-root': {
-      padding: 0,
-      '& li': {
-        height: '60px',
-        borderBottom: (theme) => theme.borders.grayLight,
-        ':hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.025)',
-        },
-      },
-      '& > :last-child': {
-        borderBottom: 'none',
-      },
-    },
-  },
-}))
-
-export const StyledListContainer = styled(Box)(({ theme }) => ({
-  maxHeight: 'calc(100vh - 400px)',
-  overflowY: 'auto',
-  paddingTop: '10px',
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-  },
-
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: 'rgba(0, 0, 0, 0.15)',
-    borderRadius: '3px',
-
-    '&:hover': {
-      background: 'rgba(0, 0, 0, 0.2)',
-    },
-  },
-}))
-
-export const StyledListItem = styled(ListItem)(({ theme }) => ({
-  height: '40px',
-  cursor: 'pointer',
-  padding: '10px',
-  background: 'none',
-  '&.Mui-focused': {
-    background: 'none',
-  },
-  '& .MuiCheckbox-root': {
-    padding: 0,
-    marginRight: '10px',
-  },
-}))
-
-export const StyledAnchor = styled(Box)(({ theme }) => ({
-  height: '50px',
-  border: theme.borders.grayLight,
-  borderRadius: '10px',
-  padding: '14px',
-  cursor: 'pointer',
-  ':hover': {
-    borderColor: alpha(theme.palette.common.black, 0.3),
-  },
-  transition: 'border-color 200ms ease',
-  '& > .MuiTypography-root': {
-    fontSize: '14px',
-    pointerEvents: 'none',
-  },
-}))
-
-export const StyledSelectedChip = styled(Chip)(({ theme }) => ({
-  height: '40px',
-  background: '#F8F8F8',
-  border: '1px solid #D6D6D6',
-  '& .MuiSvgIcon-root': {
-    color: theme.palette.secondary.main,
-    fontSize: '15px',
-    margin: '0 14px',
-    '&:hover': {
-      color: theme.palette.secondary.main,
-    },
-  },
-}))
+import {
+  alpha,
+  Box,
+  Chip,
+  ListItem,
+  Popover,
+  PopoverProps,
+  styled,
+} from '@mui/material'
+
+export const StyledPopover = styled((props: PopoverProps) => (
+  <Popover
+    elevation={0}
+    anchorPosition={{
+      left: 0,
+      top: 0,
+    }}
+    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+    transitionDuration={150}
+    {...props}
+  />
+))<{ popoverWidth: number }>(({ theme, popoverWidth }) => ({
+  '& .MuiPaper-root': {
+    width: popoverWidth,
+    borderRadius: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+    marginTop: '1px',
+    '& .MuiList-root': {
+      padding: 0,
+      '& li': {
+        height: '60px',
+        borderBottom: (theme) => theme.borders.grayLight,
+        ':hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.025)',
+        },
+      },
+      '& > :last-child': {
+        borderBottom: 'none',
+      },
+    },
+  },
+}))
+
+export const StyledListContainer = styled(Box)(({ theme }) => ({
+  maxHeight: 'calc(100vh - 400px)',
+  overflowY: 'auto',
+  paddingTop: '10px',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}))
+
+export const StyledListItem = styled(ListItem)(({ theme }) => ({
+  height: '40px',
+  cursor: 'pointer',
+  padding: '10px',
+  background: 'none',
+  '&.Mui-focused': {
+    background: 'none',
+  },
+  '& .MuiCheckbox-root': {
+    padding: 0,
+    marginRight: '10px',
+  },
+}))
+
+export const StyledAnchor = styled(Box)(({ theme }) => ({
+  height: '50px',
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '14px',
+  cursor: 'pointer',
+  ':hover': {
+    borderColor: alpha(theme.palette.common.black, 0.3),
+  },
+  transition: 'border-color 200ms ease',
+  '& > .MuiTypography-root': {
+    fontSize: '14px',
+    pointerEvents: 'none',
+  },
+}))
+
+export const StyledSelectedChip = styled(Chip)(({ theme }) => ({
+  height: '40px',
+  background: '#F8F8F8',
+  border: '1px solid #D6D6D6',
+  '& .MuiSvgIcon-root': {
+    color: theme.palette.secondary.main,
+    fontSize: '15px',
+    margin: '0 14px',
+    '&:hover': {
+      color: theme.palette.secondary.main,
+    },
+  },
+}))