@mui/codemod/deprecations/autocomplete-props/test-cases/expected.js

Codemod scripts for Material UI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
var _material = require("@mui/material");
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
var _useAutocomplete = _interopRequireDefault(require("@mui/material/useAutocomplete"));
var _jsxRuntime = require("react/jsx-runtime");
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
  slots: {
    paper: CustomPaper,
    popper: CustomPopper
  },
  slotProps: {
    chip: {
      height: 10
    },
    clearIndicator: {
      width: 10
    },
    paper: {
      width: 12
    },
    popper: {
      width: 14
    },
    popupIndicator: {
      width: 16
    },
    listbox: {
      component: CustomListbox,
      ...{
        height: 12
      }
    }
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
  slotProps: {
    chip: {
      height: 10
    },
    clearIndicator: {
      width: 10
    },
    paper: {
      width: 12
    },
    popper: {
      width: 14
    },
    popupIndicator: {
      ...{
        width: 16
      },
      ...{
        width: 20
      }
    },
    listbox: {
      component: CustomListbox,
      ...{
        height: 12
      }
    }
  },
  slots: {
    paper: CustomPaper,
    popper: CustomPopper
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
  slots: {
    paper: CustomPaper,
    popper: CustomPopper
  },
  slotProps: {
    chip: {
      height: 10
    },
    clearIndicator: {
      width: 10
    },
    paper: {
      width: 12
    },
    popper: {
      width: 14
    },
    popupIndicator: {
      width: 16
    },
    listbox: {
      component: CustomListbox,
      ...{
        height: 12
      }
    }
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
  componentsProps: {
    clearIndicator: {
      width: 10
    },
    paper: {
      width: 12
    },
    popper: {
      width: 14
    },
    popupIndicator: {
      width: 16
    }
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
  ChipProps: {
    height: 10
  },
  PaperComponent: CustomPaper,
  PopperComponent: CustomPopper,
  ListboxComponent: CustomListbox,
  ListboxProps: {
    height: 12
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
  multiple: true,
  options: options,
  renderValue: (value, getItemProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
    label: option.label,
    "data-focused": ownerState.focused,
    ...getItemProps({
      index
    })
  }))
});
const {
  getItemProps,
  focusedItem
} = (0, _useAutocomplete.default)(props);
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
  ...getItemProps({
    index: focusedItem
  })
});
const {
  getItemProps: getAutocompleteTagProps,
  focusedItem: focusedAutocompleteTag
} = (0, _useAutocomplete.default)(props);
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
  ...getAutocompleteTagProps({
    index: focusedAutocompleteTag
  })
});