pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/SearchSelect/SearchSelect.tsx

@@ -0,0 +1,525 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Box,
+  Input,
+  InputGroup,
+  Spinner,
+  Text,
+  IconButton,
+  Checkbox,
+  useOutsideClick,
+  Portal,
+} from '@chakra-ui/react';
+import { ChevronDown, ChevronUp, CircleX, Plus, X } from 'lucide-react';
+import { SearchSelectProps, Options } from './SearchSelectProps';
+import { TextLabel } from '../Common/FormLabel';
+import Tag from '../Tag/Tag';
+import { useCustomTheme } from '../../Theme/useCustomTheme';
+import ErrorMessage from '../Common/ErrorMessage';
+import HelperText from '../Common/HelperText';
+import ToolTip from '../ToolTip/ToolTip';
+import SelectTruncatedLabel from './SelectTruncatedLabel';
+
+
+const normalizeSingleValue = (val: unknown): Options | undefined => {
+  if (typeof val === 'object' && val !== null && 'id' in val && 'label' in val) {
+    return val as Options;
+  }
+  return undefined;
+};
+
+const normalizeMultiValue = (val: unknown): Options[] => {
+  if (Array.isArray(val)) {
+    return val.filter((v): v is Options => v && typeof v === 'object' && 'id' in v && 'label' in v);
+  }
+  return [];
+};
+
+const SearchSelect = ({
+  id,
+  label,
+  options,
+  onSelect,
+  onSearch,
+  isOptionLoading = false,
+  isLoading = false,
+  loadingText = 'Loading...',
+  placeholder = 'Select',
+  value,
+  searchQuery = '',
+  isMultiple = false,
+  isRequired = false,
+  error = false,
+  errorMessage,
+  helperText,
+  width = '100%',
+  height = "2.75rem",
+  size = 'md',
+  chip,
+  information,
+  rightIcon,
+  addNew,
+  isSelectAll = false,
+  pagination,
+  insideSelect,
+  isRemoveAllIcon
+}: SearchSelectProps) => {
+
+  const [inputValue, setInputValue] = useState<string>(searchQuery);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [hasMore, setHasMore] = useState<boolean>(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [focused, setFocused] = useState(false);
+  const [customSelectOpen, setCustomSelectOpen] = useState(false);
+  const customSelectRef = useRef<HTMLDivElement>(null);
+  const [customSelectPos, setCustomSelectPos] = useState({ top: 0, left: 0, width: 0 });
+
+
+  const theme = useCustomTheme();
+
+  useOutsideClick({
+    ref: containerRef,
+    handler: () => {
+      setIsOpen(false);
+    },
+  });
+
+  const selectedValues: Options[] = isMultiple
+    ? normalizeMultiValue(value)
+    : normalizeSingleValue(value)
+      ? [normalizeSingleValue(value)!]
+      : [];
+
+  const filteredOptions = options.filter((option) =>
+    option?.label?.toLowerCase()?.includes(inputValue?.toLowerCase())
+  );
+
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      onSearch?.(inputValue);
+    }, 1000);
+    return () => clearTimeout(delayDebounce);
+  }, [inputValue, onSearch]);
+
+  useEffect(() => {
+    if (pagination?.limit) {
+      setHasMore(options.length % pagination.limit === 0);
+    }
+  }, [options.length, pagination?.limit]);
+
+  const handleSelect = (option: Options) => {
+    if (isMultiple) {
+      const exists = selectedValues.find((v) => v.id === option.id);
+      const updated = exists
+        ? selectedValues.filter((v) => v.id !== option.id)
+        : [...selectedValues, option];
+      onSelect?.(updated);
+    } else {
+      onSelect?.(option);
+      setIsOpen(false);
+    }
+    setInputValue('');
+  };
+
+  const handleRemove = (id: string | number) => {
+    const updated = selectedValues.filter((v) => v.id !== id);
+    onSelect?.(updated);
+  };
+
+  const handleClearAll = () => {
+    onSelect?.(isMultiple ? [] : undefined);
+    setInputValue('');
+  };
+
+  const handleSelectAll = () => {
+    const allSelected = filteredOptions.every((opt) =>
+      selectedValues.some((sel) => sel.id === opt.id)
+    );
+    if (allSelected) {
+      const updated = selectedValues.filter(
+        (sel) => !filteredOptions.some((opt) => opt.id === sel.id)
+      );
+      onSelect?.(updated);
+    } else {
+      const filteredNotSelected = filteredOptions.filter(
+        (opt) => !selectedValues.some((sel) => sel.id === opt.id)
+      );
+      onSelect?.([...selectedValues, ...filteredNotSelected]);
+    }
+    setInputValue('');
+  };
+
+  const isSelected = (id: string | number) =>
+    selectedValues.some((v) => v.id === id);
+
+  const isValidIcon = (icon: unknown): icon is React.ReactElement =>
+    React.isValidElement(icon);
+
+  const allFilteredSelected =
+    filteredOptions.length > 0 &&
+    filteredOptions.every((opt) =>
+      selectedValues.some((sel) => sel.id === opt.id)
+    );
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      if (!pagination || !pagination.onScroll || pagination.scrollLoading || !hasMore) return;
+      const target = e.currentTarget;
+      const nearBottom =
+        target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
+      if (nearBottom) {
+        if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+        scrollTimeoutRef.current = setTimeout(() => {
+          const startIndex = options.length + 1;
+          pagination.onScroll?.(startIndex, pagination.limit || 10, inputValue);
+        }, 200);
+      }
+    },
+    [pagination, options.length, inputValue, hasMore]
+  );
+
+  useOutsideClick({
+    ref: customSelectRef,
+    handler: (e: Event) => {
+      const dropdown = document.getElementById('custom-select-portal');
+      if (dropdown && dropdown.contains(e.target as Node)) return;
+      setCustomSelectOpen(false);
+    },
+  });
+
+
+  const handleCustomSelect = (item: any) => {
+    if (typeof insideSelect?.onSelect === 'function') {
+      insideSelect.onSelect(item);
+    }
+    setCustomSelectOpen(false);
+  }
+
+  useEffect(() => {
+    if (customSelectOpen && customSelectRef.current) {
+      const rect = customSelectRef.current.getBoundingClientRect();
+      setCustomSelectPos({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width + 30,
+      });
+    }
+  }, [customSelectOpen]);
+
+
+  return (
+    <Box ref={containerRef} width={width} position="relative">
+      {label && (
+        <TextLabel
+          label={label}
+          id={id}
+          isRequired={isRequired}
+          isInformation={information?.isInformation}
+          informationMessage={information?.informationMessage}
+        />
+      )}
+      <InputGroup size={size}>
+        <Box
+          as="div"
+          w="100%"
+          minH="2.85rem"
+          px={3}
+          display="flex"
+          alignItems="center"
+          flexWrap="wrap"
+          gap="0.375rem"
+          border="0.063rem solid"
+          borderColor={error ? theme.colors.semantic.error[500] : theme.colors.primary[500]}
+          borderRadius="0.25rem"
+          bg="white"
+          boxShadow={focused ? error ? `0 0 0 0.125rem ${theme.colors.boxShadow?.error}` : `0 0 0 0.125rem ${theme.colors.boxShadow?.primary}` : 'none'}
+          transition="box-shadow 0.2s, border-color 0.2s"
+        // onClick={() => inputRef.current?.focus()}
+        >
+          {insideSelect && (
+            <Box
+              position="relative"
+              ref={customSelectRef}
+              backgroundColor={theme.colors.gray[200]}
+              ml="-0.75rem"
+              h="-webkit-fill-available"
+              borderRadius="0.25rem 0 0 0.25rem"
+              onClick={() => setCustomSelectOpen((prev) => !prev)}
+            >
+              <Box
+                minW="5rem"
+                cursor="pointer"
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                width={insideSelect.width}
+                height={height}
+                pl="0.5rem"
+                pr="0.5rem"
+              >
+                <SelectTruncatedLabel
+                  label={insideSelect?.value?.label ?? ""}
+                  maxWidth={insideSelect?.width || "6rem"}
+                />
+                {customSelectOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              </Box>
+
+              {customSelectOpen && (
+                <Portal>
+                  <Box
+                    id="custom-select-portal"
+                    position="absolute"
+                    top={`${customSelectPos.top}px`}
+                    left={`${customSelectPos.left}px`}
+                    zIndex={1400}
+                    bg={theme.colors.white}
+                    border="0.063rem solid"
+                    borderColor={theme.colors.gray[300]}
+                    borderRadius="md"
+                    boxShadow="md"
+                    minW="10rem"
+                    maxW="38rem"
+                  >
+                    {insideSelect?.option?.map((item) => (
+                      <Box
+                        key={item.id}
+                        display="flex"
+                        alignItems="center"
+                        height="2.5rem"
+                        px="0.75rem"
+                        fontSize="sm"
+                        _hover={{ bg: theme.colors.gray[100] }}
+                        cursor="pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleCustomSelect(item);
+                        }}
+                      >
+                        {item.label}
+                      </Box>
+                    ))}
+                  </Box>
+                </Portal>
+              )}
+            </Box>
+          )}
+
+          {isMultiple
+            ? selectedValues.slice(0, chip?.maxChips || selectedValues.length).map((item) => (
+              <Tag
+                key={item.id}
+                label={
+                  chip?.maxText && item.label.length > chip.maxText
+                    ? item.label.slice(0, chip.maxText) + '…'
+                    : item.label
+                }
+                onIconClick={chip?.onClick ? () => handleRemove(item?.id) : undefined}
+                icon={chip?.onClick ? CircleX : undefined}
+                colorScheme="gray"
+                size="sm"
+              />
+            ))
+            : selectedValues.length === 1 &&
+            inputValue === '' && (
+              <Box
+                as="button"
+                type="button"
+                onClick={() => setIsOpen(true)}
+                fontSize="sm"
+                color={theme.colors.gray[800]}
+                background="transparent"
+                border="none"
+                cursor="pointer"
+                p={0}
+              >
+                {selectedValues[0].label}
+              </Box>
+            )}
+
+          {chip?.maxChips &&
+            isMultiple &&
+            selectedValues.length > chip.maxChips && (
+              <Tag
+                key="extra-count"
+                label={`+ ${selectedValues.length - chip.maxChips}`}
+                colorScheme="gray"
+                size="sm"
+              />
+            )}
+
+          {(isMultiple || inputValue || !selectedValues.length || !isMultiple) && (
+            <Input
+              ref={inputRef}
+              variant="unstyled"
+              flex="1"
+              minW="5rem"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onFocus={() => {
+                setFocused(true);
+                setIsOpen(true);
+              }}
+              onBlur={() => setFocused(false)}
+              placeholder={placeholder}
+            />
+          )}
+
+          <Box ml="auto" display="flex" alignItems="center" gap={1}>
+            {isRemoveAllIcon && selectedValues.length > 0 && (
+              <ToolTip
+                placement="top"
+                label="Remove All"
+                hasArrow
+                bg={theme.colors.gray[600]}
+                color={theme.colors.white}
+                fontSize="0.75rem"
+              >
+                <IconButton
+                  icon={<X size={12} color={theme.colors.black} />}
+                  aria-label="Clear all"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleClearAll}
+                  sx={{
+                    bg: 'transparent',
+                    _hover: { bg: 'transparent' },
+                    _active: { bg: 'transparent' },
+                    _focus: { boxShadow: 'none', bg: 'transparent' },
+                  }}
+                />
+              </ToolTip>
+            )}
+
+            {isLoading ? (
+              <Spinner size="sm" />
+            ) : isValidIcon(rightIcon?.icon) ? (
+              <IconButton
+                icon={rightIcon?.icon}
+                aria-label="right-icon"
+                variant="ghost"
+                size="sm"
+                onClick={rightIcon?.onClick}
+              />
+            ) : (
+              <Box
+                as="button"
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsOpen((prev) => !prev);
+                }}
+                aria-label="toggle-dropdown"
+                display="flex"
+                alignItems="center"
+              >
+                {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </InputGroup>
+
+      {isOpen && (
+        <Box
+          position="absolute"
+          zIndex={10}
+          width="100%"
+          maxH="20rem"
+          borderWidth={1}
+          borderRadius="sm"
+          bg="white"
+          boxShadow="md"
+          display="flex"
+          flexDirection="column"
+        >
+          {isMultiple && isSelectAll && (
+            <Box
+              p={2}
+              px={3}
+              cursor="pointer"
+              onClick={handleSelectAll}
+              display="flex"
+              alignItems="center"
+              gap={2}
+              borderBottom={`0.063rem solid ${theme.colors.gray[100]}`}
+            >
+              <Checkbox isChecked={allFilteredSelected} pointerEvents="none" />
+              <Text fontSize="sm">
+                {allFilteredSelected ? 'Unselect All' : 'Select All'}
+              </Text>
+            </Box>
+          )}
+
+          <Box
+            flex="1"
+            overflowY="auto"
+            onScroll={handleScroll}
+            maxH="15rem"
+            borderBottom="0.063rem solid"
+            borderColor={theme.colors.gray[200]}
+          >
+            {isOptionLoading ? (
+              <Box p={3} display="flex" alignItems="center" gap={2}>
+                <Spinner size="sm" />
+                <Text fontSize="sm">{loadingText}</Text>
+              </Box>
+            ) : filteredOptions.length === 0 ? (
+              <Text p={3} fontSize="sm" color={theme.colors.gray[500]}>
+                No results found
+              </Text>
+            ) : (
+              filteredOptions.map((option) => (
+                <Box
+                  key={option.id}
+                  p={2}
+                  px={3}
+                  cursor="pointer"
+                  bg={isSelected(option.id) ? theme.colors.gray[100] : 'transparent'}
+                  _hover={{ bg: theme.colors.gray[50] }}
+                  onClick={() => handleSelect(option)}
+                  display="flex"
+                  alignItems="center"
+                  gap={2}
+                  borderBottom={`0.063rem solid ${theme.colors.gray[100]}`}
+                >
+                  {isMultiple && (
+                    <Checkbox
+                      isChecked={isSelected(option.id)}
+                      pointerEvents="none"
+                      colorScheme="blue"
+                    />
+                  )}
+                  {option.view ? <>{option.view}</>  : <Text fontSize="sm">{option.label}</Text>}
+                </Box>
+              ))
+            )}
+          </Box>
+
+          {addNew?.enabled && (
+            <Box
+              p={2}
+              borderTop="0.063rem solid"
+              borderColor={theme.colors.gray[200]}
+              bg="white"
+              display="flex"
+              alignItems="center"
+              gap={2}
+              cursor="pointer"
+              onClick={addNew.onClick}
+              _hover={{ bg: theme.colors.gray[50] }}
+            >
+              {addNew.icon || <Plus size={16} />}
+              <Text fontSize="sm">{addNew.text || 'Add New'}</Text>
+            </Box>
+          )}
+        </Box>
+      )}
+      {helperText && !error && <HelperText helperText={helperText} />}
+      {error && <ErrorMessage errorMessage={errorMessage} />}
+    </Box>
+  );
+};
+
+export default SearchSelect;

package/src/Components/SearchSelect/SearchSelectProps.tsx

@@ -0,0 +1,60 @@
+export type SearchSelectProps = {
+  id?: string;
+  label?: string;
+  options: Options[];
+  onSelect?: (options: Options | Options[] | undefined) => void;
+  onSearch?: (value: string) => void;
+  isOptionLoading?: boolean;
+  isLoading?: boolean;
+  loadingText?: string;
+  placeholder?: string;
+  value?: Options[] | Options;
+  searchQuery?: string;
+  isMultiple?: boolean;
+  isRequired?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  width?: string | number;
+  height?: string | number;
+  size?: "xs" | "sm" | "md" | "lg";
+  chip?: {
+    maxChips?: number;
+    maxText?: number;
+    onClick?: (options: Options | Options[]) => void;
+  };
+  information?: {
+    isInformation?: boolean;
+    informationMessage?: string;
+  };
+  rightIcon?: {
+    icon?: React.ReactNode;
+    onClick?: () => void;
+  };
+  addNew?: {
+    enabled: boolean;
+    icon?: React.ReactNode;
+    text?: string;
+    onClick?: () => void
+  };
+  isRemoveAllIcon?: boolean;
+  isSelectAll?: boolean;
+  pagination?: {
+    onScroll?: (startIndex: number, limit: number, query: string) => void;
+    limit?: number;
+    scrollLoading?: boolean;
+  }
+  virtualization?: boolean;
+  insideSelect?: {
+    onSelect?: (options: Options) => void;
+    value?: Options;
+    option?: Options[];
+    width?: string;
+  }
+};
+
+export type Options = {
+  id: string | number;
+  label: string;
+  view?:React.ReactNode;
+};

package/src/Components/SearchSelect/SelectTruncatedLabel.tsx

@@ -0,0 +1,31 @@
+import { Text } from '@chakra-ui/react';
+import React, { useEffect, useRef, useState } from 'react'
+import ToolTip from '../ToolTip/ToolTip';
+
+const SelectTruncatedLabel = ({
+    label,
+    maxWidth = "6rem",
+}: {
+    label: string;
+    maxWidth?: string;
+}) => {
+    const textRef = useRef<HTMLDivElement>(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+
+    useEffect(() => {
+        const el = textRef.current;
+        if (el) {
+            setIsOverflowing(el.scrollWidth > el.clientWidth);
+        }
+    }, [label, maxWidth]);
+
+    const textElement = (
+        <Text ref={textRef} maxW={maxWidth} isTruncated whiteSpace="nowrap" fontWeight={500} fontSize={"0.875rem"} letterSpacing={"0.044rem"}>
+            {label}
+        </Text>
+    );
+
+    return isOverflowing ? <ToolTip label={label} placement="top">{textElement}</ToolTip> : textElement;
+}
+
+export default SelectTruncatedLabel;

package/src/Components/Select/Select.stories.tsx

@@ -0,0 +1,59 @@
+// import React from "react";
+// import { Meta, StoryFn } from "@storybook/react";
+// import { ChakraProvider } from "@chakra-ui/react";
+// import { useState } from "react";
+// import Select from "./Select";
+// import { chakraSelectProps } from "./SelectProps";
+
+// const meta: Meta<typeof Select> = {
+//   title: "Components/Input/Select",
+//   component: Select,
+//   parameters: {
+//     layout: "centered",
+//   },
+//   tags: ["autodocs"],
+// };
+
+// export default meta;
+
+// const SelectTemplate: StoryFn<chakraSelectProps> = (args) => {
+//   const [value, setValue] = useState("");
+
+//   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+//     setValue(e.target.value);
+//     if (args.onChange) {
+//       args.onChange(e);
+//     }
+//   };
+
+//   return (
+//     <ChakraProvider>
+//       <Select {...args} onChange={handleChange} value={value} />
+//     </ChakraProvider>
+//   );
+// };
+
+// export const Primary = SelectTemplate.bind({});
+// Primary.args = {
+//   placeholder: "Select an option",
+//   size: "md",
+//   variant: "outline",
+//   icon: undefined,
+//   bg: undefined,
+//   borderColor: undefined,
+//   color: undefined,
+//   error: false,
+//   isRequired: false,
+//   label: "Select Input",
+//   errorMessage: "",
+//   helperText: "",
+//   options: [
+//     { id: "1", label: "Option 1" },
+//     { id: "2", label: "Option 2" },
+//     { id: "3", label: "Option 3" },
+//   ],
+//   value: "",
+//   width: 500,
+// };
+
+export {};