mui-dynamic-field/dist/esm/components/MultiSelect/index.js

A dynamic and customizable input field component for React, built with Material UI & TypeScript.

import { extractValue } from '../../utils.js';
import { MuiAutocompleteSelectAll } from './SelectAllListBox.js';
import { Autocomplete, MenuItem, Checkbox, TextField, Chip } from '@mui/material';
import { jsx, jsxs } from 'react/jsx-runtime';

const MultiSelect = ({
  _key,
  value,
  onChange,
  disabled,
  extraData,
  color,
  size,
  error,
  errorText,
  placeholder,
  ChipProps = {},
  extraProps
}) => {
  const selectedAll = value?.length === extraData?.length;
  const {
    textFieldProps = {},
    ...restProps
  } = extraProps || {};
  const {
    slotProps = {},
    ...restTextFieldProps
  } = textFieldProps;
  return /*#__PURE__*/jsx(MuiAutocompleteSelectAll.Provider, {
    value: {
      onSelectAll: selectedAll => {
        onChange && (selectedAll ? onChange({
          _key,
          value: []
        }) : onChange({
          _key,
          value: extraData
        }));
      },
      selectedAll,
      indeterminate: !!value?.length && !selectedAll
    },
    children: /*#__PURE__*/jsx(Autocomplete, {
      disablePortal: true,
      multiple: true,
      disabled: disabled,
      options: extraData || [],
      onChange: (_, value) => {
        onChange && onChange({
          _key,
          value
        });
      },
      value: Array.isArray(value) ? value : [value],
      color: color,
      size: size,
      getOptionLabel: option => extractValue(option, "label"),
      disableCloseOnSelect: true,
      limitTags: 3,
      slotProps: {
        listbox: {
          component: MuiAutocompleteSelectAll.ListBox
        }
      },
      isOptionEqualToValue: (option, value) => {
        return extractValue(option, "value") === extractValue(value, "value");
      },
      renderTags: (tags, getTagProps) => {
        return tags.map((tag, index) => {
          const {
            disabled,
            onDelete,
            ...tagProps
          } = getTagProps({
            index
          });
          return /*#__PURE__*/jsx(Chip, {
            onClick: e => {
              e.stopPropagation();
              ChipProps.onClick && ChipProps.onClick(tag);
            },
            onDelete: deleteProps => !disabled && onDelete(deleteProps),
            label: extractValue(tag, "label"),
            ...tagProps
          });
        });
      },
      renderInput: params => {
        const {
          InputProps,
          ...restParams
        } = params;
        const {
          startAdornment,
          ...restInputProps
        } = InputProps;
        return /*#__PURE__*/jsx(TextField, {
          ...restParams,
          variant: "outlined",
          size: size,
          error: error,
          helperText: errorText,
          label: placeholder,
          slotProps: {
            inputLabel: slotProps.inputLabel,
            input: {
              startAdornment: /*#__PURE__*/jsx("div", {
                style: {
                  maxHeight: 100,
                  overflowY: "auto"
                },
                className: "hide-scrollbar",
                children: startAdornment
              }),
              ...restInputProps,
              ...(slotProps?.input || {})
            }
          },
          ...restTextFieldProps
        });
      },
      renderOption: ({
        key,
        ...rest
      }, option, {
        selected
      }) => {
        return /*#__PURE__*/jsxs(MenuItem, {
          ...rest,
          children: [/*#__PURE__*/jsx(Checkbox, {
            checked: selected
          }), String(extractValue(option, "label"))]
        }, key);
      },
      ...restProps
    })
  });
};

export { MultiSelect as default };
//# sourceMappingURL=index.js.map