mui-design-system 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/colors/index.d.ts

@@ -1,4 +0,0 @@
-import { IColor, TColors } from './type';
-export declare const colors: {
-    [key in TColors]: IColor;
-};

package/dist/colors/index.js

@@ -1,93 +0,0 @@
-const yellow = {
-    50: "#fffbeb",
-    100: "#fef3c0",
-    200: "#feeda2",
-    300: "#fee578",
-    400: "#fde05d",
-    500: "#fdd835",
-    600: "#e6c530",
-    700: "#b49926",
-    800: "#8b771d",
-    900: "#6a5b16"
-};
-const blue = {
-    50: "#e9f3fc",
-    100: "#b9daf7",
-    200: "#98c8f3",
-    300: "#68afee",
-    400: "#4ba0ea",
-    500: "#1e88e5",
-    600: "#1b7cd0",
-    700: "#1561a3",
-    800: "#114b7e",
-    900: "#0d3960"
-};
-const green = {
-    50: "#ecf6ed",
-    100: "#c5e2c6",
-    200: "#a9d3aa",
-    300: "#81bf84",
-    400: "#69b36c",
-    500: "#43a047",
-    600: "#3d9241",
-    700: "#307232",
-    800: "#255827",
-    900: "#1c431e"
-};
-const orange = {
-    50: "#fff4e6",
-    100: "#fedbb0",
-    200: "#fdca8a",
-    300: "#fcb254",
-    400: "#fca333",
-    500: "#fb8c00",
-    600: "#e47f00",
-    700: "#b26300",
-    800: "#8a4d00",
-    900: "#693b00"
-};
-const red = {
-    50: "#fcebeb",
-    100: "#f7c2c0",
-    200: "#f3a4a2",
-    300: "#ee7a78",
-    400: "#ea615d",
-    500: "#e53935",
-    600: "#d03430",
-    700: "#a32826",
-    800: "#7e1f1d",
-    900: "#601816"
-};
-const purple = {
-    50: "#f4e9f7",
-    100: "#dcbbe5",
-    200: "#cb9ad8",
-    300: "#b36cc6",
-    400: "#a550bb",
-    500: "#8e24aa",
-    600: "#81219b",
-    700: "#651a79",
-    800: "#4e145e",
-    900: "#3c0f47"
-};
-const grey = {
-    50: "#f1f1f1",
-    100: "#d4d4d4",
-    200: "#c0c0c0",
-    300: "#a3a3a3",
-    400: "#919191",
-    500: "#757575",
-    600: "#6a6a6a",
-    700: "#535353",
-    800: "#404040",
-    900: "#313131"
-};
-export const colors = {
-    yellow,
-    blue,
-    green,
-    orange,
-    red,
-    purple,
-    grey
-};

package/dist/colors/type.d.ts

@@ -1,5 +0,0 @@
-export type ColorScale = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-export type TColors = "yellow" | "blue" | "green" | "orange" | "red" | "purple" | "grey";
-export type IColor = {
-    [key in ColorScale]: string;
-};

package/dist/colors/type.js

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

package/dist/components/checkbox-list/CheckboxList.d.ts

@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { CheckboxProps, StackProps } from '@mui/material';
-import { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import { IFormOption } from '../input-list/type';
-export interface ICheckboxValue {
-    label: string;
-    value: string | number;
-}
-export interface CheckboxListProps {
-    options: IFormOption[];
-    value?: ICheckboxValue[];
-    defaultValue?: ICheckboxValue[];
-    onChange: (values: ICheckboxValue[]) => void;
-    multiple?: boolean;
-    readonly?: boolean;
-    stackProps?: StackProps;
-    checkboxProps?: CheckboxProps;
-    formControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'control'>;
-}
-declare const CheckboxList: FC<CheckboxListProps>;
-export default CheckboxList;

package/dist/components/checkbox-list/CheckboxList.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormControlLabel, Stack, } from '@mui/material';
-import Checkbox from '@mui/material/Checkbox';
-const CheckboxList = ({ options = [], value = [], onChange, multiple, readonly, checkboxProps, stackProps, formControlLabelProps, }) => {
-    const handleChange = (event, changedValue) => {
-        const newValues = [...value];
-        if (multiple) {
-            if (event.target.checked) {
-                newValues.push(changedValue);
-                onChange(newValues);
-            }
-            else {
-                const index = newValues.findIndex((v) => v.value === changedValue.value);
-                newValues.splice(index, 1);
-                onChange(newValues);
-            }
-        }
-        else {
-            if (event.target.checked) {
-                onChange([changedValue]);
-            }
-            else {
-                onChange([]);
-            }
-        }
-    };
-    return (_jsx(Stack, { ...stackProps, children: options.map((option) => (_jsx(FormControlLabel, { "aria-readonly": readonly, ...(readonly && {
-                sx: { pointerEvents: 'none', userSelect: 'none' },
-            }), control: _jsx(Checkbox, { ...checkboxProps, readOnly: readonly, checked: value?.findIndex((v) => v?.value === option?.value) > -1, onChange: (e) => handleChange(e, option) }), label: option.label, slotProps: { typography: option?.labelProp }, ...formControlLabelProps }, option.value))) }));
-};
-export default CheckboxList;

package/dist/components/custom-auto-complete/CustomAutoComplete.d.ts

@@ -1,27 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
-import { TextFieldProps } from '@mui/material/TextField';
-import { TextFieldVariants } from '@mui/material';
-import { TInputLabelMode } from '../input-list/type';
-export interface CustomAutocompleteProps extends Omit<AutocompleteProps<any, boolean, boolean, undefined>, 'renderInput'> {
-    label?: string | ReactNode;
-    width?: number | string;
-    renderInput?: (params: TextFieldProps) => ReactNode;
-    isLoading?: boolean;
-    variant?: TextFieldVariants;
-    showSelectedCount?: boolean;
-    selectedOptions?: any[];
-    helperText?: string;
-    inputMaxHeight?: string;
-    placeholder?: string;
-    inputLabelMode?: TInputLabelMode;
-    hideLabel?: boolean;
-    textFieldProps?: TextFieldProps;
-    validation?: {
-        isInvalid: boolean;
-        message: string;
-    };
-    onReachEnd?: () => void;
-}
-declare const CustomAutoComplete: FC<CustomAutocompleteProps>;
-export default CustomAutoComplete;

package/dist/components/custom-auto-complete/CustomAutoComplete.js

@@ -1,75 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import Autocomplete from '@mui/material/Autocomplete';
-import { styled } from '@mui/material/styles';
-import CustomChip from '../custom-chip/CustomChip';
-import { ListBox } from './components/ListBox';
-import AutoCompleteInput from './components/AutoCompleteInput';
-const AutoCompletePaper = styled(Paper)(({ theme }) => ({
-    direction: 'ltr',
-    backgroundColor: theme.palette.background.paper,
-    '.MuiAutocomplete-option': {
-        borderBottom: '1px solid',
-        borderColor: theme.palette.divider,
-        '&:last-child': {
-            borderBottom: 'none',
-        },
-    },
-}));
-const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, validation, selectedOptions, showSelectedCount, isLoading, inputMaxHeight, width, placeholder, variant, hideLabel = false, inputLabelMode, textFieldProps, onReachEnd, ...rest }) => {
-    const loading = isLoading;
-    return (_jsxs(Box, { sx: { width }, children: [_jsx(InputLabel, { sx: {
-                    fontSize: 12,
-                    color: disabled ? 'text.1' : 'text.primary',
-                }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'caption2', children: label })) }), _jsx(Autocomplete, { loading: loading, limitTags: 2, multiple: multiple, disabled: disabled, options: options || [], disableCloseOnSelect: multiple, disablePortal: Boolean(rest.limitTags), value: rest.value, 
-                // defaultValue={rest?.defaultValue}
-                id: 'virtualize-demo', disableListWrap: true, isOptionEqualToValue: (option, value) => {
-                    return option?.value === value?.value;
-                }, renderOption: (props, option, state) => ({
-                    props,
-                    option,
-                    index: state.index,
-                    multiple,
-                    selected: state.selected,
-                }), ListboxProps: { onReachEnd }, ListboxComponent: ListBox, renderGroup: (params) => params, noOptionsText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: "\u0646\u062A\u06CC\u062C\u0647 \u0627\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F" }), loadingText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC..." }), sx: {
-                    padding: 0,
-                    width: '100%',
-                    ...(disabled && { opacity: 0.7, cursor: 'not-allowed' }),
-                }, renderTags: (tagValue, getTagProps) => {
-                    return tagValue.map((option, index) => {
-                        // Ensure that the option is an object with both label and value properties
-                        if (typeof option === 'object' && option.label && option.value) {
-                            return (_createElement(CustomChip, { ...getTagProps({ index }), key: index, label: option.label, labelProps: { sx: {} }, chipProps: {
-                                    sx: {
-                                        height: 24,
-                                        px: 1,
-                                        '& .MuiChip-deleteIcon': { width: 12 },
-                                        '& .MuiChip-label': {
-                                            px: 0,
-                                            '& .MuiTypography-root': { fontSize: 10 },
-                                        },
-                                        ...rest.ChipProps?.sx,
-                                    },
-                                    rounded: true,
-                                    size: 'small',
-                                    ...rest.ChipProps,
-                                } }));
-                        }
-                        else {
-                            return null; // Handle invalid cases gracefully
-                        }
-                    });
-                }, getOptionDisabled: (option) => !!option?.disabled, renderInput: (params) => (_jsx(AutoCompleteInput, { params: params, helperText: helperText, variant: variant, placeholder: placeholder, label: label, isLoading: loading, inputLabelMode: inputLabelMode, inputMaxHeight: inputMaxHeight, textFieldProps: textFieldProps, validation: validation })), PaperComponent: (props) => (_jsx(AutoCompletePaper, { elevation: 1, ...props })), ...rest }), _jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, children: multiple &&
-                    selectedOptions &&
-                    selectedOptions?.length > 0 &&
-                    showSelectedCount && (_jsxs(Typography, { variant: 'caption3', sx: { color: 'text.4', mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
-};
-export default CustomAutoComplete;

package/dist/components/custom-auto-complete/components/AutoCompleteInput.d.ts

@@ -1,21 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AutocompleteRenderInputParams, TextFieldVariants } from '@mui/material';
-import { TextFieldProps } from '@mui/material/TextField';
-import { TInputLabelMode } from '../../input-list/type';
-interface Props {
-    params: AutocompleteRenderInputParams;
-    variant?: TextFieldVariants;
-    placeholder?: string;
-    validation?: {
-        isInvalid: boolean;
-        message: string;
-    };
-    inputLabelMode?: TInputLabelMode;
-    label?: string | ReactNode;
-    helperText?: string;
-    isLoading?: boolean;
-    textFieldProps?: TextFieldProps;
-    inputMaxHeight?: string;
-}
-declare const AutoCompleteInput: FC<Props>;
-export default AutoCompleteInput;

package/dist/components/custom-auto-complete/components/AutoCompleteInput.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputAdornment, useTheme, } from '@mui/material';
-import InfoCircle from '../../../icons/InfoCircle';
-import CircularProgress from '@mui/material/CircularProgress';
-import TextField from '@mui/material/TextField';
-const AutoCompleteInput = ({ params, variant, validation, placeholder, label, helperText, isLoading, inputLabelMode, textFieldProps, inputMaxHeight }) => {
-    const theme = useTheme();
-    return (_jsx(TextField, { variant: variant, placeholder: placeholder, error: validation?.isInvalid, ...(inputLabelMode === 'relative' && { label: label }), ...params, helperText: validation?.message
-            ? validation?.message ?? helperText ?? ' '
-            : undefined, InputProps: {
-            ...params.InputProps,
-            ...(validation?.isInvalid && {
-                startAdornment: (_jsx(InputAdornment, { sx: { pl: 2 }, position: 'start', children: _jsx(InfoCircle, { primarycolor: theme.palette.error.main }) })),
-            }),
-            endAdornment: (_jsxs(InputAdornment, { position: 'end', children: [isLoading && _jsx(CircularProgress, { color: 'inherit', size: 20 }), params.InputProps.endAdornment] })),
-        }, ...textFieldProps, sx: {
-            minWidth: 0,
-            height: '100%',
-            overflow: 'auto',
-            '& .MuiFilledInput-root': {
-                ...(inputLabelMode === 'relative' && {
-                    alignItems: 'flex-end',
-                }),
-            },
-            maxHeight: inputMaxHeight ?? 'unset',
-            ...textFieldProps?.sx,
-        } }));
-};
-export default AutoCompleteInput;

package/dist/components/custom-auto-complete/components/ListBox.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-export declare const LISTBOX_PADDING = 8;
-export declare const ListBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    onReachEnd?: (() => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/custom-auto-complete/components/ListBox.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Adapter for react-window
-import { useTheme } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import * as React from 'react';
-import { VariableSizeList } from 'react-window';
-import { ListRow } from './ListRow';
-import debounce from '../../../methods/debounce';
-export const LISTBOX_PADDING = 8; // px
-export const ListBox = React.forwardRef(function ListBox(props, ref) {
-    const { children, onReachEnd, ...other } = props;
-    const itemData = [];
-    children.forEach((item) => {
-        itemData.push(item);
-        itemData.push(...(item.children || []));
-    });
-    const theme = useTheme();
-    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
-        noSsr: true,
-    });
-    const itemCount = itemData.length;
-    const itemSize = smUp ? 36 : 48;
-    const getHeight = () => {
-        if (itemCount > 8) {
-            return 8 * itemSize;
-        }
-        return itemData.map(() => itemSize).reduce((a, b) => a + b, 0);
-    };
-    const OuterElementContext = React.createContext({});
-    const OuterElementType = React.forwardRef((props, ref) => {
-        const outerProps = React.useContext(OuterElementContext);
-        return _jsx("div", { ref: ref, ...props, ...outerProps });
-    });
-    function useResetCache(data) {
-        const ref = React.useRef(null);
-        React.useEffect(() => {
-            if (ref.current != null) {
-                ref.current.resetAfterIndex(0, true);
-            }
-        }, [data]);
-        return ref;
-    }
-    const gridRef = useResetCache(itemCount);
-    const handleReachEnd = () => {
-        if (onReachEnd) {
-            onReachEnd();
-        }
-    };
-    const debouncedReachEnd = debounce(handleReachEnd, 10);
-    const handleScroll = ({ scrollDirection, scrollOffset, scrollUpdateWasRequested, }) => {
-        if (!scrollUpdateWasRequested &&
-            scrollDirection === 'forward' &&
-            gridRef?.current) {
-            const listHeight = +gridRef.current.props.height;
-            const totalHeight = gridRef.current.props?.itemSize(1) * itemCount;
-            if (scrollOffset + listHeight >= totalHeight) {
-                debouncedReachEnd();
-            }
-        }
-    };
-    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', ref: gridRef, outerElementType: OuterElementType, innerElementType: 'ul', itemSize: (index) => itemSize, overscanCount: 5, itemCount: itemCount, style: { direction: 'inherit' }, onScroll: handleScroll, children: ListRow }) }) }));
-});

package/dist/components/custom-auto-complete/components/ListRow.d.ts

@@ -1,2 +0,0 @@
-import { ListChildComponentProps } from 'react-window';
-export declare function ListRow(props: ListChildComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-auto-complete/components/ListRow.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import Typography from '@mui/material/Typography';
-import { LISTBOX_PADDING } from './ListBox';
-import { Checkbox } from '@mui/material';
-export function ListRow(props) {
-    const { data, index, style } = props;
-    const dataSet = data[index];
-    const inlineStyle = {
-        ...style,
-        top: style.top + LISTBOX_PADDING,
-    };
-    const { props: optionProps, option, multiple, selected } = dataSet || {};
-    return (_createElement("li", { ...optionProps, key: option.value, style: inlineStyle },
-        multiple && _jsx(Checkbox, { checked: selected, sx: { opacity: 'inherit' } }),
-        _jsx(Typography, { variant: 'caption3', children: option?.label }))
-    // <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
-    //   {option?.label}
-    // </Typography>
-    );
-}

package/dist/components/custom-auto-complete-advanced/CustomAutoComplete.d.ts

@@ -1,28 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
-import { TextFieldProps } from '@mui/material/TextField';
-import { TextFieldVariants } from '@mui/material';
-import { TInputLabelMode } from '../input-list/type';
-export interface CustomAutocompleteAdvancedProps extends Omit<AutocompleteProps<any, boolean, boolean, boolean>, 'renderInput'> {
-    label?: string | ReactNode;
-    width?: number | string;
-    renderInput?: (params: TextFieldProps) => ReactNode;
-    isLoading?: boolean;
-    variant?: TextFieldVariants;
-    showSelectedCount?: boolean;
-    selectedOptions?: any[];
-    helperText?: string;
-    inputMaxHeight?: string;
-    placeholder?: string;
-    inputLabelMode?: TInputLabelMode;
-    hideLabel?: boolean;
-    textFieldProps?: TextFieldProps;
-    validation?: {
-        isInvalid: boolean;
-        message: string;
-    };
-    onReachEnd?: () => void;
-    onSearch?: (e: any) => void;
-}
-declare const CustomAutoCompleteAdvanced: FC<CustomAutocompleteAdvancedProps>;
-export default CustomAutoCompleteAdvanced;

package/dist/components/custom-auto-complete-advanced/CustomAutoComplete.js

@@ -1,92 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import Autocomplete from '@mui/material/Autocomplete';
-import { styled } from '@mui/material/styles';
-import { ListBox } from './components/ListBox';
-import RenderInput from './components/RenderInput';
-import RenderTags from './components/RenderTags';
-import SvgAdd from '../../icons/Add';
-const AutoCompletePaper = styled(Paper)(({ theme }) => ({
-    direction: 'ltr',
-    boxShadow: '0px 0px 10px rgba(94, 129, 233, 0.2)',
-    marginTop: 8,
-    backgroundColor: theme.palette.background.paper,
-    '.MuiAutocomplete-option': {
-        borderBottom: '1px solid',
-        borderColor: theme.palette.divider,
-        paddingLeft: '0 !important',
-        '&:last-child': {
-            borderBottom: 'none',
-        },
-    },
-}));
-const LimitedTagsCount = (more, size) => {
-    return (_jsxs(Typography, { variant: 'caption2.medium', sx: {
-            position: 'absolute',
-            right: 64,
-            top: size === 'medium' ? 12 : 8,
-            backgroundColor: 'background.default',
-            borderRadius: '100%',
-            minWidth: 24,
-            textAlign: 'center',
-        }, children: [String(more), "+"] }));
-};
-const CustomAutoCompleteAdvanced = ({ label, helperText, options, multiple, disabled, limitTags, validation, selectedOptions, showSelectedCount, isLoading, inputMaxHeight, placeholder, variant, hideLabel = false, inputLabelMode = 'static', textFieldProps, onReachEnd, onSearch, sx, ...rest }) => {
-    //Keeping the value controlled by state helps to track free solo stage for search
-    const [value, setValue] = useState('');
-    const onChangeValue = (newValue) => {
-        setValue(newValue || '');
-    };
-    //_______________________________________________________________________________
-    //Cache result options for search and integration across the pages
-    const cachedOptionsRef = useRef([]);
-    const cachedOptions = useMemo(() => {
-        options.forEach((option) => {
-            if (!cachedOptionsRef.current.find((opt) => opt.value === option?.value)
-                ?.value) {
-                cachedOptionsRef.current.push(option);
-            }
-        });
-        return cachedOptionsRef.current;
-    }, [options.length]);
-    //_______________________________________________________________________________
-    const lang = document.documentElement.lang;
-    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { sx: {
-                    fontSize: 12,
-                    color: disabled ? 'text.1' : 'text.primary',
-                }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'caption2', children: label })) }), _jsx(Autocomplete, { loading: isLoading, limitTags: limitTags, multiple: multiple, id: 'ideep-auto-complete', options: cachedOptions || [], disabled: disabled, "aria-disabled": disabled, disableCloseOnSelect: multiple, value: rest.value, disableListWrap: true, isOptionEqualToValue: (option, value) => {
-                    return option?.value === value?.value;
-                }, freeSolo: Boolean(onSearch) && Boolean(value), renderOption: (props, option, state) => ({
-                    props,
-                    option,
-                    index: state.index,
-                    multiple,
-                    selected: state.selected,
-                }), ListboxProps: { onReachEnd, isLoading }, ListboxComponent: ListBox, noOptionsText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: lang.includes('fa') ? 'نتیجه ای یافت نشد' : 'No results found.' }), loadingText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: lang.includes('fa') ? 'در حال بارگزاری...' : 'Loading...' }), renderTags: (value, getTagProps) => RenderTags(value, getTagProps, variant !== 'standard' ? variant : 'filled', rest.size), getOptionDisabled: (option) => !!option?.disabled, renderInput: (params) => (_createElement(RenderInput, { params: params, ...(inputLabelMode === 'relative' && {
-                        label,
-                    }), loading: isLoading, key: 'render-input-' + label, helperText: helperText, variant: variant, placeholder: (selectedOptions?.length || 0) < 0 ? placeholder : undefined, inputMaxHeight: inputMaxHeight, disabled: disabled, label: label, textFieldProps: textFieldProps, validation: validation, handleSearch: onSearch, handleChange: onChangeValue, value: value })), clearIcon: _jsx(SvgAdd, { style: { transform: 'rotate(45deg)' }, primarycolor: 'inherit' }), getLimitTagsText: (more) => LimitedTagsCount(more, rest.size), sx: [
-                    ...(Array.isArray(sx) ? sx : [sx]),
-                    {
-                        padding: 0,
-                        width: '100%',
-                        '& .MuiAutocomplete-popupIndicator': {
-                            width: '100%',
-                            maxWidth: 27,
-                        },
-                        ...(disabled && { cursor: 'not-allowed' }),
-                    },
-                ], PaperComponent: (props) => (_jsx(AutoCompletePaper, { elevation: 0, ...props })), ...rest }), _jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, children: multiple &&
-                    selectedOptions &&
-                    selectedOptions?.length > 0 &&
-                    showSelectedCount && (_jsxs(Typography, { variant: 'caption3', sx: { mt: 1 }, children: [selectedOptions?.length, " ", lang.includes('fa') ? 'گزینه' : 'item', selectedOptions?.length > 1 && !lang.includes('fa') && 's', ' ', lang.includes('fa') ? 'انتخاب شده' : ' selected'] })) })] }));
-};
-export default CustomAutoCompleteAdvanced;

package/dist/components/custom-auto-complete-advanced/components/ListBox.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export declare const LISTBOX_PADDING = 8;
-export declare const ListBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    onReachEnd?: (() => void) | undefined;
-    isLoading?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/custom-auto-complete-advanced/components/ListBox.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Adapter for react-window
-import { LinearProgress, useTheme } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import * as React from 'react';
-import { VariableSizeList } from 'react-window';
-import { ListRow } from './ListRow';
-import { useRef } from 'react';
-import debounce from '../../../methods/debounce';
-export const LISTBOX_PADDING = 8; // px
-export const ListBox = React.forwardRef(function ListBox(props, ref) {
-    const { children, onReachEnd, isLoading, ...other } = props;
-    const itemData = [];
-    children.forEach((item) => {
-        itemData.push(item);
-        itemData.push(...(item.children || []));
-    });
-    const prevItemCount = useRef(undefined);
-    const theme = useTheme();
-    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
-        noSsr: true,
-    });
-    const itemCount = itemData.length;
-    const itemSize = smUp ? 36 : 48;
-    const getHeight = () => {
-        if (itemCount > 8) {
-            return 8 * itemSize;
-        }
-        return itemData.map(() => itemSize).reduce((a, b) => a + b, 0);
-    };
-    const OuterElementContext = React.createContext({});
-    const OuterElementType = React.forwardRef((props, ref) => {
-        const outerProps = React.useContext(OuterElementContext);
-        return _jsx("div", { ref: ref, ...props, ...outerProps });
-    });
-    OuterElementType.displayName = 'OuterElementType';
-    function useResetCache(data) {
-        const ref = React.useRef(null);
-        React.useEffect(() => {
-            if (ref.current != null) {
-                ref.current.resetAfterIndex(itemCount, true);
-                gridRef.current?.scrollToItem(prevItemCount.current || 0, 'start');
-                prevItemCount.current = itemCount;
-            }
-        }, [data]);
-        return ref;
-    }
-    const gridRef = useResetCache(itemCount);
-    const handleReachEnd = () => {
-        if (onReachEnd) {
-            onReachEnd();
-        }
-    };
-    const debouncedReachEnd = debounce(handleReachEnd, 10);
-    const handleScroll = ({ scrollDirection, scrollOffset, scrollUpdateWasRequested, }) => {
-        if (!scrollUpdateWasRequested &&
-            scrollDirection === 'forward' &&
-            gridRef?.current) {
-            const listHeight = +gridRef.current.props.height;
-            const totalHeight = gridRef.current.props?.itemSize(1) * itemCount;
-            if (scrollOffset + listHeight >= totalHeight) {
-                debouncedReachEnd();
-            }
-        }
-    };
-    return (_jsxs("div", { ref: ref, style: { position: 'relative', width: '100%', height: '100%' }, children: [isLoading && (_jsx(_Fragment, { children: _jsx(LinearProgress, { sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                    } }) })), _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', ref: gridRef, outerElementType: OuterElementType, innerElementType: 'ul', itemSize: (index) => itemSize, overscanCount: 5, itemCount: itemCount, style: {
-                        direction: 'inherit',
-                        transition: '0.3s ease all',
-                        filter: isLoading ? 'brightness(92%) blur(2px)' : 'none',
-                    }, onScroll: handleScroll, initialScrollOffset: (itemCount - itemSize) * itemSize, children: ListRow }) })] }));
-});

package/dist/components/custom-auto-complete-advanced/components/ListRow.d.ts

@@ -1,2 +0,0 @@
-import { ListChildComponentProps } from 'react-window';
-export declare function ListRow(props: ListChildComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-auto-complete-advanced/components/ListRow.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import Typography from '@mui/material/Typography';
-import { LISTBOX_PADDING } from './ListBox';
-import { Checkbox } from '@mui/material';
-export function ListRow(props) {
-    const { data, index, style } = props;
-    const dataSet = data[index];
-    const inlineStyle = {
-        ...style,
-        top: style.top + LISTBOX_PADDING,
-    };
-    const { props: optionProps, option, multiple, selected } = dataSet || {};
-    return (_createElement("li", { ...optionProps, key: option?.value, style: inlineStyle },
-        multiple && _jsx(Checkbox, { checked: selected, sx: { opacity: 'inherit' } }),
-        _jsx(Typography, { variant: 'caption3', children: option?.label })));
-}