@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -1,8 +1,7 @@
-import { AutocompleteCloseReason, AutocompleteProps } from '@mui/material';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
 import axios, { AxiosInstance } from 'axios';
 import _ from 'lodash';
 import { ReactNode, SyntheticEvent, useEffect, useReducer } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
 import { SingleFilter } from './components/SingleFilter';
 import { SingleInput } from './components/SingleInput';
 import {
@@ -11,13 +10,6 @@ import {
   SingleSelectState,
 } from './singleSelectReducer';
 
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
 function sleep(duration: number): Promise<void> {
   return new Promise<void>((resolve) => {
     setTimeout(() => {
@@ -37,6 +29,7 @@ export type SingleSelectProps = {
   label?: string;
   name?: string;
   getValue?: (option: any) => any;
+  value?: any;
   dbValueProps?: {
     valueKey: string;
     isObjectId?: boolean;
@@ -50,26 +43,14 @@ export type SingleSelectProps = {
     useSubLabelStartCase?: boolean;
   };
   onChange?: (value: any) => void;
+  onOpen?: (event: SyntheticEvent) => void;
+  onClose?: (event: SyntheticEvent, reason: string) => void;
   error?: any;
   helperText?: string;
   type?: 'input' | 'filter';
   disableClear?: boolean;
-} & Omit<
-  AutocompleteProps<
-    { label: string; subLabel?: string; value: any } | any,
-    false,
-    true,
-    false
-  >,
-  | 'options'
-  | 'open'
-  | 'onChange'
-  | 'autoFocus'
-  | 'PaperComponent'
-  | 'renderOption'
-  | 'options'
-  | 'renderInput'
->;
+  fullWidth?: boolean;
+};
 
 export const SingleSelect = ({
   options,
@@ -179,10 +160,7 @@ export const SingleSelect = ({
     }
   };
 
-  const handleClose = (
-    event: SyntheticEvent,
-    reason: AutocompleteCloseReason,
-  ) => {
+  const handleClose = (event: SyntheticEvent, reason: string) => {
     dispatch({
       actionType: SingleSelectActionsTypes.CLOSE,
     });

package/src/components/Input/SingleSelect/components/MenuFooter.tsx

@@ -1,24 +1,11 @@
-import { useTheme } from '@mui/material';
-import { Button } from '../../export';
-import { FooterContainer } from '../../styles';
+import { Button } from '@/shadcn-components/Input/Button/Button';
 
 export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
-  const theme = useTheme();
   return (
-    <FooterContainer direction="row" alignItems="center">
-      <Button
-        variant="text"
-        onClick={onClick}
-        sx={{
-          fontFamily: 'Heebo',
-          minWidth: '0px',
-          margin: '0px 16px',
-        }}
-        disableRipple
-        textColor={theme.palette.text.tertiary}
-      >
+    <div className="flex flex-row items-center justify-left border-t">
+      <Button variant="link" onClick={onClick} className="min-w-0">
         Clear
       </Button>
-    </FooterContainer>
+    </div>
   );
 };

package/src/components/Input/SingleSelect/components/OptionsLoader.tsx

@@ -1,14 +1,13 @@
-import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
 import { Spinner } from '../../../Feedback/Spinner/Spinner';
-import { FooterContainer } from '../../styles';
 
 export const OptionsLoader = ({ isSearch }: { isSearch: boolean }) => {
   return (
-    <FooterContainer direction="row" alignItems="center">
+    <div className="flex flex-row items-center gap-2 border-t p-2">
       <Spinner />
-      <Typography variant="caption">
+      <Typography variant="small">
         {isSearch ? 'Searching' : 'Loading Options'}
       </Typography>
-    </FooterContainer>
+    </div>
   );
 };

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -1,77 +1,51 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Button } from '@/shadcn-components/Input/Button/Button';
 import {
-  AutocompleteCloseReason,
-  FormControlLabel,
-  RadioGroup as MuiRadioGroup,
-  Radio,
-  useTheme,
-} from '@mui/material';
-import { SyntheticEvent, useState } from 'react';
-import { EmptyIllustration } from '../../../DataDisplay/EmptyIllustration/EmptyIllustration';
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/shadcn-components/Input/Command/Command';
 import {
-  Button,
-  DropdownMenu,
-  Icons,
-  SearchBar,
-  SingleSelectProps,
-  Typography,
-} from '../../../export';
-import { FilterOptionContainer } from '../../styles';
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { Check, ChevronDown } from 'lucide-react';
+import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { SingleSelectProps } from '../SingleSelect';
 import { SingleSelectState } from '../singleSelectReducer';
 import { MenuFooter } from './MenuFooter';
 import { OptionsLoader } from './OptionsLoader';
 
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
 export type SingleFilterProps = {
   onChange: (value: any) => void;
   searchDb: (searchValue: string) => Promise<void>;
   handleOpen: (event: SyntheticEvent) => Promise<void>;
-  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  handleClose: (event: SyntheticEvent, reason: string) => void;
   handleScroll: (event: any) => Promise<void>;
   state: SingleSelectState;
 } & SingleSelectProps;
 
 export const SingleFilter = ({
-  options,
   optionsApiEndPoint,
-  optionsApiEndpointParams,
-  externalAxios,
-  required = false,
   label,
   name,
-  getValue,
   value,
   onChange,
-  error,
-  helperText,
-  dbValueProps = {
-    valueKey: 'id',
-    isObjectId: false,
-    isInt: false,
-    isFloat: false,
-  },
-  dbLabelProps = {
-    labelKey: '',
-    useLabelStartCase: false,
-    useSubLabelStartCase: false,
-  },
-  onOpen,
-  onClose,
   searchDb,
   handleOpen,
   handleClose,
   handleScroll,
   state,
   disableClear = false,
-  ...restProps
+  fullWidth,
 }: SingleFilterProps) => {
   const {
+    open,
     loadingInitialInternalOptions,
     internalOptions,
     internalOptionsMap,
@@ -79,157 +53,123 @@ export const SingleFilter = ({
     search,
   } = state;
 
-  const [localSearch, setLocalSearch] = useState(search);
+  const [localSearch, setLocalSearch] = useState(search || '');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
 
-  const searchLocal = (searchValue: string) => {
+  const handleSearchChange = (searchValue: string) => {
     setLocalSearch(searchValue);
+    if (optionsApiEndPoint) {
+      searchDb(searchValue);
+    }
   };
 
-  const theme = useTheme();
-
   const validValue = !!internalOptionsMap[value];
+  const selectedOption = validValue ? internalOptionsMap[value] : null;
+
+  const filteredOptions = optionsApiEndPoint
+    ? internalOptions
+    : internalOptions?.filter(
+        (option) =>
+          !localSearch ||
+          option.label.toLowerCase().includes(localSearch.toLowerCase()),
+      );
 
   return (
-    <>
-      <DropdownMenu
-        menuListProps={{
-          sx: {
-            padding: '0px',
-            width: '250px',
-            minWidth: 'max-content',
-          },
-        }}
-        anchor={({ open }: { open: (e: any) => void }) => (
+    <Popover
+      open={open}
+      onOpenChange={(isOpen) => {
+        const syntheticEvent = {
+          currentTarget: {},
+          target: {},
+        } as SyntheticEvent;
+
+        if (isOpen) {
+          handleOpen(syntheticEvent);
+        } else {
+          handleClose(syntheticEvent, 'blur');
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <span
+          ref={wrapperRef}
+          style={{ display: fullWidth ? 'block' : 'inline-block' }}
+        >
           <Button
-            onClick={(e) => {
-              open(e);
-              handleOpen(e);
-            }}
-            loading={loadingInitialInternalOptions}
-            sx={{
-              gap: '1px',
-              borderRadius: '20px',
-              textWrap: 'nowrap',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              minWidth: 'max-content',
-            }}
-            variant="contained"
-            background={
-              validValue
-                ? theme.palette.highlight.greenBackground
-                : theme.palette.surface.grey
-            }
-            hoverBackground={
-              validValue
-                ? theme.palette.highlight.greenBackground
-                : theme.palette.surface.grey
-            }
-            textColor={theme.palette.text.primary}
-            endIcon={<KeyboardArrowDown />}
+            variant={validValue ? 'default' : 'input'}
+            role="combobox"
+            aria-expanded={open}
+            className={cn('justify-between', fullWidth ? 'w-full' : '')}
+            disabled={loadingInitialInternalOptions}
           >
-            {validValue
-              ? label + ' = ' + internalOptionsMap[value].label
-              : label}
+            {selectedOption ? `${label} = ${selectedOption.label}` : label}
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
-        )}
-        menuProps={{
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
-        }}
-        menuHeader={
-          <SearchBar
-            fullWidth
-            size="small"
-            placeholder="Search"
-            onSearch={optionsApiEndPoint ? searchDb : searchLocal}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search..."
+            value={localSearch}
+            onValueChange={handleSearchChange}
           />
-        }
-        menuListContainerSx={{
-          margin: '10px 5px 0px 5px',
-          height: '310px',
-          overflowY: 'scroll',
-        }}
-        handleMenuScroll={handleScroll}
-        menuSlot={({ close }) => {
-          const filteredOptions = internalOptions?.filter(
-            (option) =>
-              (localSearch && option.label.includes(localSearch)) ||
-              !localSearch,
-          );
-
-          if (filteredOptions.length === 0 && !loadingInitialInternalOptions)
-            return (
-              <EmptyIllustration
-                message="No Options Found"
-                imageSize="100px"
-                containerProps={{
-                  height: '310px',
-                }}
-              />
-            );
-          return (
-            <MuiRadioGroup
-              onChange={(e) => {
-                onChange(e.target.value);
-              }}
-              name={name}
-              value={value}
-            >
+          <CommandList onScroll={handleScroll} className="max-h-[310px]">
+            <CommandEmpty>No options found</CommandEmpty>
+            <CommandGroup>
               {filteredOptions?.map((option, index) => (
-                <FormControlLabel
-                  sx={{
-                    margin: '0px',
-                    width: '100%',
-                    '.MuiFormControlLabel-label': {
-                      width: '100%',
-                    },
-                  }}
-                  key={index}
+                <CommandItem
+                  key={option.value ?? index}
                   value={option.value}
-                  control={
-                    <Radio
-                      checkedIcon={<Icons.CheckedRadioIcon />}
-                      icon={<Icons.UnCheckedRadioIcon />}
-                      checked={value == option.value}
-                    />
-                  }
-                  label={
-                    <FilterOptionContainer>
-                      <Typography variant="subtitle3">
-                        {option.label}
-                      </Typography>
-                      <Typography variant="caption">
-                        {option?.subLabel}
+                  onSelect={() => {
+                    onChange(option.value);
+                    handleClose(
+                      { currentTarget: {}, target: {} } as SyntheticEvent,
+                      'selectOption',
+                    );
+                  }}
+                >
+                  <div className="flex flex-col flex-1">
+                    <Typography variant="small">{option.label}</Typography>
+                    {option.subLabel && (
+                      <Typography variant="muted" className="text-xs">
+                        {option.subLabel}
                       </Typography>
-                    </FilterOptionContainer>
-                  }
-                />
+                    )}
+                  </div>
+                  <Check
+                    className={cn(
+                      'ml-2 h-4 w-4 shrink-0',
+                      value === option.value ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
               ))}
-            </MuiRadioGroup>
-          );
-        }}
-        menuFooter={
-          loadingInternalOptions ? (
+            </CommandGroup>
+          </CommandList>
+          {loadingInternalOptions ? (
             <OptionsLoader isSearch={!!search} />
-          ) : disableClear ? (
-            <></>
           ) : (
-            <MenuFooter
-              onClick={() => {
-                onChange(null);
-              }}
-            />
-          )
-        }
-        useMenuSlot
-      />
-    </>
+            !disableClear && (
+              <MenuFooter
+                onClick={() => {
+                  onChange(null);
+                  handleClose(
+                    { currentTarget: {}, target: {} } as SyntheticEvent,
+                    'clear',
+                  );
+                }}
+              />
+            )
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 };