pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/Select/Select.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
+import { getTextInputIconSizePx } from "../Input/textInputIconSize";
+import { TextLabel } from "../Common/FormLabel";
+import ErrorMessage from "../Common/ErrorMessage";
+import HelperText from "../Common/HelperText";
+export default function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
+    const sizeKey = typeof size === "string" ? size : "md";
+    const iconSizePx = getTextInputIconSizePx(sizeKey);
+    const getOptionsList = useCallback(() => {
+        if (!options.length)
+            return _jsx("option", { value: "", children: "No Options" });
+        return options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)));
+    }, [options]);
+    const handleOnChange = (event) => {
+        const selectedValue = event.target.value;
+        const selectedOption = options.find((option) => option.id.toString() === selectedValue.toString());
+        if (selectedOption && onChange) {
+            onChange(selectedOption);
+        }
+    };
+    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+}

package/dist/esm/Components/Select/Select.stories.js

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

package/dist/esm/Components/Select/Select.styles.js

@@ -0,0 +1,108 @@
+export const Select = {
+    baseStyle: ({ theme }) => {
+        var _a, _b;
+        return ({
+            field: {
+                // Chakra's stock Select sets `--select-bg: colors.white` and swaps it to gray.700 behind
+                // `.chakra-ui-dark`/`[data-theme="dark"]` — selectors that NEVER match here, because dark
+                // mode swaps the palette instead of flipping Chakra's colour mode. The variable therefore
+                // stayed `#fff`, painting the native `<option>` list white-on-white in dark. `background[50]`
+                // is the canvas-following equivalent: byte-identical `#ffffff` in light, dark in dark.
+                "--select-bg": (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50],
+                fontWeight: 500,
+                fontSize: "0.875rem",
+                letterSpacing: "0.044rem",
+                borderRadius: "0.5rem",
+                transition: "border-color 0.2s, box-shadow 0.2s",
+                minWidth: "0", // allow shrinking inside flex
+                width: "100%", // full container width
+                maxWidth: "100%",
+                _placeholder: {
+                    fontStyle: "italic",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                },
+            },
+            icon: {
+                width: "1.25rem",
+                height: "1.25rem",
+            },
+        });
+    },
+    sizes: {
+        sm: {
+            field: {
+                h: "2.125rem",
+                fontSize: "0.8125rem",
+                px: "0.5rem",
+                py: "0.5rem",
+            },
+        },
+        md: {
+            field: {
+                h: "2.375rem",
+                fontSize: "0.875rem",
+                px: "0.75rem",
+                py: "0.5rem",
+            },
+        },
+        lg: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.9375rem",
+                px: "1rem",
+                py: "0.5rem",
+            },
+        },
+    },
+    variants: {
+        outline: (props) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            const { theme } = props;
+            const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
+            // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
+            // [800] clears all named surfaces with margin (3.44-3.90).
+            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
+            const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                field: {
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    border: "0.063rem solid",
+                    borderColor,
+                    _hover: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                    },
+                    _disabled: {
+                        opacity: 0.4,
+                        cursor: "not-allowed",
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        _hover: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/Select/SelectProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, Avatar, FormControl, } from "@chakra-ui/react";
+import { TextLabel } from "../Common/FormLabel";
+import { FIELD_RADIUS, fieldFocusRing } from "../Common/fieldStyles";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { PlusIcon } from "lucide-react";
+import ErrorMessage from "../Common/ErrorMessage";
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
+    const theme = useCustomTheme();
+    if (isOptionLoading) {
+        return (_jsxs(VStack, { py: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.primary[500] }), _jsx(Text, { color: theme.colors.primary[500], children: loadingText })] }));
+    }
+    if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
+        return (_jsx(_Fragment, { children: filteredOptions.map((option, index) => (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
+                    optionRefs.current[index] = el;
+                }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleOptionClick(option);
+                    }
+                }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), _jsxs(Box, { children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: 12, color: "gray.500", children: option.email }))] })] }, option.id))) }));
+    }
+    return (_jsx(Text, { px: 4, py: 2, color: "gray.500", children: "No options found" }));
+};
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
+// BottomIconStyle,
+BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
+    const theme = useCustomTheme();
+    const errorBorder = `2px solid ${theme.colors.semantic.error[500]}`;
+    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
+    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
+    const defaultBorderThin = `1px solid ${theme.colors.boxborder[800]}`;
+    const [selectedOptions, setSelectedOptions] = useState(initialSelectedOption ? [initialSelectedOption] : []);
+    const [inputValue, setInputValue] = useState(searchQuery);
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState("below");
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const listboxId = useId();
+    // Roving-tabindex keyboard nav for the options list (same shape as
+    // Table/filters/CompactSelect's listbox pattern): real DOM focus moves
+    // through the options, so no aria-activedescendant is needed.
+    const optionRefs = useRef([]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const pendingFocusFirstOption = useRef(false);
+    // Programmatically focusing the input (Escape returning focus there) would
+    // otherwise re-trigger its own onFocus and immediately reopen the list.
+    const skipNextInputFocusOpen = useRef(false);
+    const closeAndFocusInput = () => {
+        var _a;
+        setIsOpen(false);
+        skipNextInputFocusOpen.current = true;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // const filteredOptions = useMemo(() => {
+    //   return options.filter((option) => {
+    //     const optionLabel = option.label || '';
+    //     const searchValue = inputValue || '';
+    //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
+    //   });
+    // }, [options, inputValue]);
+    const filteredOptions = useMemo(() => {
+        return options.filter((option) => {
+            // First filter out already selected options
+            // const isNotSelected = !selectedOptions.some(
+            //   (selected) => selected.id === option.id
+            // );
+            const isNotSelected = isMultipleSelect
+                ? !selectedOptions.some((selected) => selected.id === option.id)
+                : true;
+            // Then apply the search filter
+            const optionLabel = option.label || "";
+            const searchValue = inputValue || "";
+            return (isNotSelected &&
+                optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
+        });
+    }, [options, inputValue, isMultipleSelect, selectedOptions]);
+    // const filteredOptions = useMemo(() => {
+    //   return options.filter((option) =>
+    //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
+    //   );
+    // }, [options, inputValue]);
+    //   const handleOptionClick = useCallback(
+    //     (option: selectOptions) => {
+    //       if (isMultipleSelect) {
+    //         setSelectedOptions((prev) => {
+    //           const isSelected = prev.some((selected) => selected.id === option.id);
+    //           const newSelected = isSelected
+    //             ? prev.filter((selected) => selected.id !== option.id)
+    //             : [...prev, option];
+    //           setInputValue("");
+    //           if (onOptionMultiSelect) {
+    //             onOptionMultiSelect(newSelected);
+    //           }
+    //           return newSelected;
+    //         });
+    //       } else {
+    //         setInputValue(option.label);
+    //         setIsOpen(false);
+    //         if (onOptionSelect) {
+    //           onOptionSelect(option);
+    //         }
+    //       }
+    //     },
+    //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
+    //   );
+    const handleOptionClick = useCallback((option) => {
+        if (isMultipleSelect) {
+            setSelectedOptions((prev) => {
+                const isSelected = prev.some((selected) => selected.id === option.id);
+                const newSelected = isSelected
+                    ? prev.filter((selected) => selected.id !== option.id)
+                    : [...prev, option];
+                // Update the input value and notify the parent
+                setInputValue("");
+                if (onOptionMultiSelect) {
+                    // Call the prop to update state in the parent component
+                    // Note: This should not directly set the state in SelectSearch
+                    setTimeout(() => onOptionMultiSelect(newSelected), 0);
+                }
+                return newSelected;
+            });
+        }
+        else {
+            setInputValue(option.label);
+            setIsOpen(false);
+            if (onOptionSelect) {
+                onOptionSelect(option);
+            }
+        }
+    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
+    const isOptionSelected = useCallback((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
+    useEffect(() => setActiveIndex(0), [inputValue, isOpen]);
+    useEffect(() => {
+        var _a;
+        if (isOpen && pendingFocusFirstOption.current) {
+            pendingFocusFirstOption.current = false;
+            // Refs are already attached by the time this effect runs (React
+            // commits before running effects), so this can focus synchronously.
+            (_a = optionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    const handleListKeyDown = (e) => {
+        if (filteredOptions.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filteredOptions.length) % filteredOptions.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filteredOptions.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
+        }
+    };
+    const handleRemoveOption = (option) => {
+        setSelectedOptions((prev) => prev.filter((selected) => selected.id !== option.id));
+        if (onOptionMultiSelect) {
+            onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
+            setInputValue("");
+        }
+    };
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        inputOnchange(value);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            const matchingOption = options.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+            if (matchingOption) {
+                handleOptionClick(matchingOption);
+            }
+            else if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        else if (e.key === "ArrowDown") {
+            // Space is left untouched here (unlike a button trigger) since this
+            // trigger is a text field — Space must still type a literal space.
+            e.preventDefault();
+            if (!isOpen) {
+                pendingFocusFirstOption.current = true;
+                setIsOpen(true);
+            }
+            else if (filteredOptions.length > 0) {
+                focusOption(0);
+            }
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
+        }
+    };
+    const updateDropdownPosition = () => {
+        if (inputRef.current && dropdownRef.current) {
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const dropdownRect = dropdownRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+            const spaceAbove = inputRect.top + window.scrollY;
+            if (spaceBelow >= dropdownRect.height) {
+                setPosition("below");
+            }
+            else if (spaceAbove >= dropdownRect.height) {
+                setPosition("above");
+            }
+            else {
+                setPosition("below");
+            }
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            updateDropdownPosition();
+        }
+        const handleClickOutside = (event) => {
+            if (inputRef.current &&
+                dropdownRef.current &&
+                !inputRef.current.contains(event.target) &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [_jsx(TagLabel, { width: "50px", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, variant: "outline", borderRadius: FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+                                    if (skipNextInputFocusOpen.current) {
+                                        skipNextInputFocusOpen.current = false;
+                                        return;
+                                    }
+                                    setIsOpen(true);
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
+                                    borderColor: error
+                                        ? theme.colors.semantic.error[500]
+                                        : theme.colors.primary[500],
+                                }, _focus: {
+                                    borderColor: error
+                                        ? theme.colors.semantic.error[500]
+                                        : theme.colors.primary[500],
+                                    boxShadow: fieldFocusRing(theme, !!error),
+                                }, style: {
+                                    ...inputStyle,
+                                    backgroundColor: theme.colors.gray[50],
+                                    fontWeight: 600,
+                                    color: theme.colors.gray[700],
+                                    padding: "0 0.75rem",
+                                    fontSize: 15,
+                                    letterSpacing: 0.7,
+                                    border: error ? errorBorder : defaultBorderThin,
+                                } }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
+                                            ? BottomTextColor
+                                            : theme.colors.primary[500], padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }) }) }));
+}

package/dist/esm/Components/SelectSearch/SelectSearchProps.js

@@ -0,0 +1 @@
+export {};