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

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

import { createContext, forwardRef, useRef, useImperativeHandle, useContext } from 'react';
import Divider from '@mui/material/Divider';
import Checkbox from '@mui/material/Checkbox';
import { useTheme } from '@mui/material';
import { jsxs, jsx } from 'react/jsx-runtime';

const contextDefaultValue = {
  onSelectAll: _selectedAll => void 0,
  selectedAll: false,
  indeterminate: false
};
const MuiAutocompleteSelectAllContext = /*#__PURE__*/createContext(contextDefaultValue);
const MuiAutocompleteSelectAllListBox = /*#__PURE__*/forwardRef(function ListBoxBase(props, ref) {
  const theme = useTheme();
  const {
    children,
    ...rest
  } = props;
  const innerRef = useRef(null);
  useImperativeHandle(ref, () => innerRef.current);
  const {
    onSelectAll,
    selectedAll,
    indeterminate
  } = useContext(MuiAutocompleteSelectAllContext);
  return /*#__PURE__*/jsxs("ul", {
    ...rest,
    ref: innerRef,
    role: "list-box",
    children: [/*#__PURE__*/jsxs("li", {
      style: {
        display: "flex",
        alignItems: "center"
      },
      children: [/*#__PURE__*/jsx(Checkbox, {
        id: "selectAll",
        indeterminate: indeterminate,
        checked: selectedAll,
        onChange: _e => onSelectAll(selectedAll)
        // TODO: use primary color without defining
        ,
        sx: {
          ml: 2,
          color: `${theme.palette.primary.main} !important`
        }
      }), "Select All"]
    }), /*#__PURE__*/jsx(Divider, {}), children]
  });
});
const MuiAutocompleteSelectAll = {
  Provider: MuiAutocompleteSelectAllContext.Provider,
  ListBox: MuiAutocompleteSelectAllListBox
};

export { MuiAutocompleteSelectAll };
//# sourceMappingURL=SelectAllListBox.js.map