@mui/x-data-grid-premium/components/chartsPanel/data/GridChartsPanelDataSearch.js

The Premium plan edition of the MUI X Data Grid Components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridChartsPanelDataSearch = GridChartsPanelDataSearch;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _styles = require("@mui/material/styles");
var _internals = require("@mui/x-data-grid-pro/internals");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    container: ['chartsPanelDataSearchContainer']
  };
  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridChartsPanelDataSearchContainer = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataSearchContainer'
})({
  padding: _internals.vars.spacing(1)
});
function GridChartsPanelDataSearch(props) {
  const {
    onClear,
    value,
    onChange
  } = props;
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const apiRef = (0, _useGridApiContext.useGridApiContext)();
  const classes = useUtilityClasses(rootProps);
  const handleKeyDown = event => {
    if (event.key === 'Escape') {
      onClear();
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataSearchContainer, {
    ownerState: rootProps,
    className: classes.container,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
      size: "small",
      "aria-label": apiRef.current.getLocaleText('chartsSearchLabel'),
      placeholder: apiRef.current.getLocaleText('chartsSearchPlaceholder'),
      onKeyDown: handleKeyDown,
      fullWidth: true,
      slotProps: {
        input: {
          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSearchIcon, {
            fontSize: "small"
          }),
          endAdornment: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
            edge: "end",
            size: "small",
            onClick: onClear,
            "aria-label": apiRef.current.getLocaleText('chartsSearchClear'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSearchClearIcon, {
              fontSize: "small"
            })
          }) : null
        },
        htmlInput: {
          role: 'searchbox'
        }
      }
    }, rootProps.slotProps?.baseTextField, {
      value: value,
      onChange: onChange
    }))
  });
}