pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/SearchSelect/SearchSelect.tsx

@@ -1,525 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,59 +0,0 @@
-// 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 {};