@comet/admin-react-select 6.12.1-canary-20240605133817 → 7.0.0-beta.0

package/lib/ReactSelect.d.ts

@@ -1,21 +1,19 @@
 import { SvgIconComponent } from "@mui/icons-material";
-import { ComponentsOverrides, InputBaseProps, Theme } from "@mui/material";
+import { ComponentsOverrides, Theme } from "@mui/material";
 import * as React from "react";
 import { OptionTypeBase } from "react-select";
 import { Props as ReactSelectAsyncProps } from "react-select/async";
 import { Props as ReactSelectProps } from "react-select/base";
 import { Props as ReactSelectCreatableProps } from "react-select/creatable";
-import { SelectClassKey } from "./ReactSelect.styles";
-export declare const ControlInput: ({ ...props }: InputBaseProps) => JSX.Element;
-export interface SelectProps<OptionType extends OptionTypeBase> {
-    theme: Theme;
-    selectComponent: React.ComponentType<ReactSelectProps<OptionType>>;
+export type SelectClassKey = "input" | "valueContainer" | "chip" | "chipFocused" | "noOptionsMessage" | "singleValue" | "placeholder" | "paper" | "indicatorsContainer" | "indicatorSeparator" | "clearIndicator" | "indicator" | "dropdownIndicator" | "option" | "optionSelected" | "optionFocused";
+export interface SelectProps<OptionType extends OptionTypeBase, IsMulti extends boolean = false> {
+    selectComponent: React.ComponentType<ReactSelectProps<OptionType, IsMulti>>;
     clearIcon?: SvgIconComponent;
     dropdownIcon?: SvgIconComponent;
     dropdownIconOpen?: SvgIconComponent;
 }
 export declare function ReactSelect<OptionType extends OptionTypeBase>(props: ReactSelectProps<OptionType>): JSX.Element;
-export declare function ReactSelectAsync<OptionType extends OptionTypeBase, IsMulti extends boolean>(props: ReactSelectAsyncProps<OptionType, IsMulti>): JSX.Element;
+export declare function ReactSelectAsync<OptionType extends OptionTypeBase, IsMulti extends boolean = false>(props: ReactSelectAsyncProps<OptionType, IsMulti>): JSX.Element;
 export declare function ReactSelectCreatable<OptionType extends OptionTypeBase, IsMulti extends boolean>(props: ReactSelectCreatableProps<OptionType, IsMulti>): JSX.Element;
 export declare function ReactSelectAsyncCreatable<OptionType extends OptionTypeBase, IsMulti extends boolean>(props: ReactSelectCreatableProps<OptionType, IsMulti> & ReactSelectAsyncProps<OptionType, IsMulti>): JSX.Element;
 declare module "@mui/material/styles" {
@@ -27,7 +25,7 @@ declare module "@mui/material/styles" {
     }
     interface Components {
         CometAdminSelect?: {
-            defaultProps?: ComponentsPropsList["CometAdminSelect"];
+            defaultProps?: Partial<ComponentsPropsList["CometAdminSelect"]>;
             styleOverrides?: ComponentsOverrides<Theme>["CometAdminSelect"];
         };
     }

package/lib/ReactSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactSelect.d.ts","sourceRoot":"","sources":["../src/ReactSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAQ,mBAAmB,EAAa,cAAc,EAAmB,KAAK,EAAwB,MAAM,eAAe,CAAC;AAGnI,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACtD,OAAoB,EAAE,KAAK,IAAI,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAwB,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAU7F,OAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAc9D,eAAO,MAAM,YAAY,iBAAkB,cAAc,gBAA4E,CAAC;AA0HtI,MAAM,WAAW,WAAW,CAAC,UAAU,SAAS,cAAc;IAC1D,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC;AA6BD,wBAAgB,WAAW,CAAC,UAAU,SAAS,cAAc,EAAE,KAAK,EAAE,gBAAgB,CAAC,UAAU,CAAC,eAGjG;AAED,wBAAgB,gBAAgB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,EAAE,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,OAAO,CAAC,eAG7I;AAED,wBAAgB,oBAAoB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,EAC3F,KAAK,EAAE,yBAAyB,CAAC,UAAU,EAAE,OAAO,CAAC,eAIxD;AAED,wBAAgB,yBAAyB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,EAChG,KAAK,EAAE,yBAAyB,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,qBAAqB,CAAC,UAAU,EAAE,OAAO,CAAC,eAIrG;AAED,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KACpC;IAED,UAAU,mBAAmB;QACzB,gBAAgB,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;KACtC;IAED,UAAU,UAAU;QAChB,gBAAgB,CAAC,EAAE;YACf,YAAY,CAAC,EAAE,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;YACvD,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC;SACnE,CAAC;KACL;CACJ"}
+{"version":3,"file":"ReactSelect.d.ts","sourceRoot":"","sources":["../src/ReactSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAQ,mBAAmB,EAAgD,KAAK,EAAwB,MAAM,eAAe,CAAC;AAErI,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACtD,OAAoB,EAAE,KAAK,IAAI,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAwB,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAU7F,MAAM,MAAM,cAAc,GACpB,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,aAAa,GACb,OAAO,GACP,qBAAqB,GACrB,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,mBAAmB,GACnB,QAAQ,GACR,gBAAgB,GAChB,eAAe,CAAC;AAuQtB,MAAM,WAAW,WAAW,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,GAAG,KAAK;IAC3F,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAC5E,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC;AAsBD,wBAAgB,WAAW,CAAC,UAAU,SAAS,cAAc,EAAE,KAAK,EAAE,gBAAgB,CAAC,UAAU,CAAC,eAEjG;AAED,wBAAgB,gBAAgB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/F,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,OAAO,CAAC,eAGpD;AAED,wBAAgB,oBAAoB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,EAC3F,KAAK,EAAE,yBAAyB,CAAC,UAAU,EAAE,OAAO,CAAC,eAGxD;AAED,wBAAgB,yBAAyB,CAAC,UAAU,SAAS,cAAc,EAAE,OAAO,SAAS,OAAO,EAChG,KAAK,EAAE,yBAAyB,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,qBAAqB,CAAC,UAAU,EAAE,OAAO,CAAC,eAGrG;AAED,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KACpC;IAED,UAAU,mBAAmB;QACzB,gBAAgB,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;KACtC;IAED,UAAU,UAAU;QAChB,gBAAgB,CAAC,EAAE;YACf,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAChE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC;SACnE,CAAC;KACL;CACJ"}

package/lib/ReactSelect.js

@@ -4,25 +4,24 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ControlInput = void 0;
 exports.ReactSelect = ReactSelect;
 exports.ReactSelectAsync = ReactSelectAsync;
 exports.ReactSelectAsyncCreatable = ReactSelectAsyncCreatable;
 exports.ReactSelectCreatable = ReactSelectCreatable;
+var _admin = require("@comet/admin");
 var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
 var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@mui/material/styles");
 var React = _interopRequireWildcard(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _async = _interopRequireDefault(require("react-select/async"));
 var _asyncCreatable = _interopRequireDefault(require("react-select/async-creatable"));
 var _creatable = _interopRequireDefault(require("react-select/creatable"));
-var _ReactSelect = _interopRequireDefault(require("./ReactSelect.styles"));
 var _excluded = ["inputRef"],
-  _excluded2 = ["classes", "theme", "components", "selectComponent"];
+  _excluded2 = ["components", "selectComponent"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,37 +30,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var NoOptionsMessageText = (0, _admin.createComponentSlot)(_material.Typography)({
+  componentName: "Select",
+  slotName: "noOptionsMessage"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styles.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        color: ", ";\n    "])), theme.spacing(1), theme.spacing(2), theme.palette.text.secondary);
+});
 function NoOptionsMessage(props) {
-  return /*#__PURE__*/React.createElement(_material.Typography, _extends({
-    className: props.selectProps.classes.noOptionsMessage
-  }, props.innerProps), props.children);
+  return /*#__PURE__*/React.createElement(NoOptionsMessageText, props.innerProps, props.children);
 }
-function inputComponent(_ref) {
-  var inputRef = _ref.inputRef,
-    props = _objectWithoutProperties(_ref, _excluded);
+function inputComponent(_ref2) {
+  var inputRef = _ref2.inputRef,
+    props = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: inputRef
   }, props));
 }
-var ControlInput = function ControlInput(_ref2) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return /*#__PURE__*/React.createElement(_material.InputBase, _extends({
-    classes: {
-      root: "root",
-      focused: "focused"
-    }
-  }, props));
-};
-exports.ControlInput = ControlInput;
+var ControlInput = (0, _admin.createComponentSlot)(_material.InputBase)({
+  componentName: "Select",
+  slotName: "input"
+})((0, _styles.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", " {\n        display: flex;\n        padding-right: 0;\n    }\n"])), _material.inputBaseClasses.input));
 function Control(props) {
   var InputProps = {
     inputComponent: inputComponent,
     inputProps: _objectSpread({
-      className: props.selectProps.classes.input,
       inputRef: props.innerRef,
       children: props.children
     }, props.innerProps)
@@ -71,79 +68,138 @@ function Control(props) {
     fullWidth: true
   }, InputProps, props.selectProps.textFieldProps));
 }
+var OptionMenuItem = (0, _admin.createComponentSlot)(_material.MenuItem)({
+  componentName: "Select",
+  slotName: "option",
+  classesResolver: function classesResolver(ownerState) {
+    return [ownerState.focused && "optionFocused", ownerState.selected && "optionSelected"];
+  }
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    ownerState = _ref3.ownerState;
+  return (0, _styles.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        ", "\n\n        ", "\n    "])), ownerState.selected && (0, _styles.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            font-weight: ", ";\n        "])), theme.typography.fontWeightMedium), ownerState.focused && (0, _styles.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            background-color: ", ";\n        "])), theme.palette.action.selected));
+});
 function Option(props) {
-  var rootClasses = [props.selectProps.classes.option];
-  if (props.isFocused) rootClasses.push(props.selectProps.classes.optionFocused);
-  if (props.isSelected) rootClasses.push(props.selectProps.classes.optionSelected);
-  return /*#__PURE__*/React.createElement(_material.MenuItem, _extends({
-    classes: {
-      root: rootClasses.join(" ")
-    },
+  return /*#__PURE__*/React.createElement(OptionMenuItem, _extends({
     ref: props.innerRef,
     selected: props.isSelected,
-    disabled: props.isDisabled,
+    ownerState: {
+      focused: props.isFocused,
+      selected: props.isSelected
+    },
+    disabled: props.isDisabled
+    // @ts-expect-error The type is not correctly passed through to `MenuItem` when using `styled()`, see: https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
+    ,
     component: "div"
   }, props.innerProps), props.children);
 }
+var PlaceholderSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "placeholder"
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return (0, _styles.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        color: ", ";\n    "])), theme.palette.text.disabled);
+});
 function Placeholder(props) {
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: props.selectProps.classes.placeholder
-  }, props.innerProps), props.children);
+  return /*#__PURE__*/React.createElement(PlaceholderSlot, props.innerProps, props.children);
 }
+var SingleValueSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "singleValue"
+})((0, _styles.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n"]))));
 function SingleValue(props) {
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: props.selectProps.classes.singleValue
-  }, props.innerProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValueSlot, props.innerProps, props.children);
 }
+var ValueContainerSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "valueContainer"
+})((0, _styles.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-wrap: nowrap;\n    flex: 1;\n    align-items: center;\n    overflow: hidden;\n"]))));
 function ValueContainer(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: props.selectProps.classes.valueContainer
-  }, props.children);
+  return /*#__PURE__*/React.createElement(ValueContainerSlot, null, props.children);
 }
+var MultiValueChip = (0, _admin.createComponentSlot)(_material.Chip)({
+  componentName: "Select",
+  slotName: "chip",
+  classesResolver: function classesResolver(ownerState) {
+    return [ownerState.focused && "chipFocused"];
+  }
+})(function (_ref5) {
+  var theme = _ref5.theme,
+    ownerState = _ref5.ownerState;
+  return (0, _styles.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        margin: ", " ", ";\n\n        ", "\n    "])), theme.spacing(0.5), theme.spacing(0.25), ownerState.focused && (0, _styles.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background-color: ", ";\n        "])), theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[700]));
+});
 function MultiValue(props) {
-  return /*#__PURE__*/React.createElement(_material.Chip, {
+  return /*#__PURE__*/React.createElement(MultiValueChip, {
     tabIndex: -1,
+    ownerState: {
+      focused: props.isFocused
+    },
     label: props.children,
-    className: (0, _classnames["default"])(props.selectProps.classes.chip, _defineProperty({}, props.selectProps.classes.chipFocused, props.isFocused)),
     onDelete: props.removeProps.onClick,
     deleteIcon: /*#__PURE__*/React.createElement(_Cancel["default"], props.removeProps)
   });
 }
+var MenuSlot = (0, _admin.createComponentSlot)(_material.Paper)({
+  componentName: "Select",
+  slotName: "paper"
+})();
 function Menu(props) {
-  return /*#__PURE__*/React.createElement(_material.Paper, _extends({
-    className: props.selectProps.classes.paper
-  }, props.innerProps), props.children);
+  return /*#__PURE__*/React.createElement(MenuSlot, props.innerProps, props.children);
 }
+var IndicatorsContainerSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "indicatorsContainer"
+})((0, _styles.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: flex;\n"]))));
 function IndicatorsContainer(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: props.selectProps.classes.indicatorsContainer
-  }, props.children);
+  return /*#__PURE__*/React.createElement(IndicatorsContainerSlot, null, props.children);
 }
+var IndicatorSeparatorSlot = (0, _admin.createComponentSlot)("span")({
+  componentName: "Select",
+  slotName: "indicatorSeparator"
+})(function (_ref6) {
+  var theme = _ref6.theme;
+  return (0, _styles.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 1px;\n        flex-grow: 1;\n        background-color: ", ";\n    "])), theme.palette.divider);
+});
 function IndicatorSeparator(props) {
-  return /*#__PURE__*/React.createElement("span", {
-    className: props.selectProps.classes.indicatorSeparator
-  });
+  return /*#__PURE__*/React.createElement(IndicatorSeparatorSlot, null);
 }
-function ClearIndicator(_ref3) {
-  var selectProps = _ref3.selectProps,
-    clearValue = _ref3.clearValue;
+var ClearIndicatorSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "clearIndicator",
+  classesResolver: function classesResolver() {
+    return ["indicator"];
+  }
+})(function (_ref7) {
+  var theme = _ref7.theme;
+  return (0, _styles.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ", ";\n        width: 32px;\n        cursor: pointer;\n        font-size: 18px;\n    "])), theme.palette.grey[500]);
+});
+function ClearIndicator(_ref8) {
+  var selectProps = _ref8.selectProps,
+    clearValue = _ref8.clearValue;
   var Icon = selectProps.clearIcon ? selectProps.clearIcon : _Clear["default"];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(selectProps.classes.indicator, " ").concat(selectProps.classes.clearIndicator),
+  return /*#__PURE__*/React.createElement(ClearIndicatorSlot, {
     onClick: clearValue
   }, /*#__PURE__*/React.createElement(Icon, {
     fontSize: "inherit",
     color: "inherit"
   }));
 }
-function DropdownIndicator(_ref4) {
-  var selectProps = _ref4.selectProps;
+var DropdownIndicatorSlot = (0, _admin.createComponentSlot)("div")({
+  componentName: "Select",
+  slotName: "dropdownIndicator",
+  classesResolver: function classesResolver() {
+    return ["indicator"];
+  }
+})(function (_ref9) {
+  var theme = _ref9.theme;
+  return (0, _styles.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ", ";\n        width: 32px;\n        cursor: pointer;\n        font-size: 20px;\n    "])), theme.palette.grey[500]);
+});
+function DropdownIndicator(_ref10) {
+  var selectProps = _ref10.selectProps;
   var DefaultIcon = selectProps.dropdownIcon ? selectProps.dropdownIcon : _KeyboardArrowDown["default"];
   var OpenIcon = selectProps.dropdownIconOpen ? selectProps.dropdownIconOpen : _KeyboardArrowDown["default"];
   var Icon = selectProps.menuIsOpen ? OpenIcon : DefaultIcon;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(selectProps.classes.indicator, " ").concat(selectProps.classes.dropdownIndicator)
-  }, /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/React.createElement(DropdownIndicatorSlot, null, /*#__PURE__*/React.createElement(Icon, {
     fontSize: "inherit",
     color: "inherit"
   }));
@@ -162,62 +218,42 @@ var components = {
   ClearIndicator: ClearIndicator,
   DropdownIndicator: DropdownIndicator
 };
-function SelectWrapper(_ref5) {
-  var classes = _ref5.classes,
-    theme = _ref5.theme,
-    origComponents = _ref5.components,
-    SelectComponent = _ref5.selectComponent,
-    rest = _objectWithoutProperties(_ref5, _excluded2);
+function SelectWrapper(_ref11) {
+  var origComponents = _ref11.components,
+    SelectComponent = _ref11.selectComponent,
+    rest = _objectWithoutProperties(_ref11, _excluded2);
+  var _useTheme = (0, _material.useTheme)(),
+    zIndex = _useTheme.zIndex;
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({
-    classes: classes,
     menuPortalTarget: document.body,
     components: _objectSpread(_objectSpread({}, components), origComponents),
-    placeholder: ""
+    placeholder: "",
+    styles: {
+      menuPortal: function menuPortal(styles) {
+        return _objectSpread(_objectSpread({}, styles), {}, {
+          zIndex: zIndex.modal
+        });
+      }
+    }
   }, rest));
 }
-var ExtendedSelectWrapper = (0, _styles.withStyles)(_ReactSelect["default"], {
-  name: "CometAdminSelect"
-})(SelectWrapper);
-var useReactSelectStyles = function useReactSelectStyles() {
-  var _useTheme = (0, _material.useTheme)(),
-    zIndex = _useTheme.zIndex;
-  return {
-    menuPortal: function menuPortal(styles) {
-      return _objectSpread(_objectSpread({}, styles), {}, {
-        zIndex: zIndex.modal
-      });
-    }
-  };
-};
 function ReactSelect(props) {
-  var reactSelectStyles = useReactSelectStyles();
-  return /*#__PURE__*/React.createElement(ExtendedSelectWrapper, _extends({
+  return /*#__PURE__*/React.createElement(SelectWrapper, _extends({
     selectComponent: _reactSelect["default"]
-  }, props, {
-    styles: _objectSpread({}, reactSelectStyles)
-  }));
+  }, props));
 }
 function ReactSelectAsync(props) {
-  var reactSelectStyles = useReactSelectStyles();
-  return /*#__PURE__*/React.createElement(ExtendedSelectWrapper, _extends({
+  return /*#__PURE__*/React.createElement(SelectWrapper, _extends({
     selectComponent: _async["default"]
-  }, props, {
-    styles: _objectSpread({}, reactSelectStyles)
-  }));
+  }, props));
 }
 function ReactSelectCreatable(props) {
-  var reactSelectStyles = useReactSelectStyles();
-  return /*#__PURE__*/React.createElement(ExtendedSelectWrapper, _extends({
+  return /*#__PURE__*/React.createElement(SelectWrapper, _extends({
     selectComponent: _creatable["default"]
-  }, props, {
-    styles: _objectSpread({}, reactSelectStyles)
-  }));
+  }, props));
 }
 function ReactSelectAsyncCreatable(props) {
-  var reactSelectStyles = useReactSelectStyles();
-  return /*#__PURE__*/React.createElement(ExtendedSelectWrapper, _extends({
+  return /*#__PURE__*/React.createElement(SelectWrapper, _extends({
     selectComponent: _asyncCreatable["default"]
-  }, props, {
-    styles: _objectSpread({}, reactSelectStyles)
-  }));
+  }, props));
 }

package/lib/index.d.ts

@@ -1,5 +1,4 @@
 export { FinalFormReactSelect, FinalFormReactSelectAsync, FinalFormReactSelectAsyncCreatable, FinalFormReactSelectCreatable, } from "./FinalFormReactSelect";
 export { FinalFormReactSelectStaticOptions } from "./FinalFormReactSelectStaticOptions";
-export { ControlInput, ReactSelect, ReactSelectAsync, ReactSelectAsyncCreatable, ReactSelectCreatable, SelectProps } from "./ReactSelect";
-export { SelectClassKey } from "./ReactSelect.styles";
+export { ReactSelect, ReactSelectAsync, ReactSelectAsyncCreatable, ReactSelectCreatable, SelectClassKey, SelectProps } from "./ReactSelect";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EACzB,kCAAkC,EAClC,6BAA6B,GAChC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1I,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EACzB,kCAAkC,EAClC,6BAA6B,GAChC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ControlInput", {
-  enumerable: true,
-  get: function get() {
-    return _ReactSelect.ControlInput;
-  }
-});
 Object.defineProperty(exports, "FinalFormReactSelect", {
   enumerable: true,
   get: function get() {
@@ -66,7 +60,7 @@ Object.defineProperty(exports, "ReactSelectCreatable", {
 Object.defineProperty(exports, "SelectClassKey", {
   enumerable: true,
   get: function get() {
-    return _ReactSelect2.SelectClassKey;
+    return _ReactSelect.SelectClassKey;
   }
 });
 Object.defineProperty(exports, "SelectProps", {
@@ -77,5 +71,4 @@ Object.defineProperty(exports, "SelectProps", {
 });
 var _FinalFormReactSelect = require("./FinalFormReactSelect");
 var _FinalFormReactSelectStaticOptions = require("./FinalFormReactSelectStaticOptions");
-var _ReactSelect = require("./ReactSelect");
-var _ReactSelect2 = require("./ReactSelect.styles");
+var _ReactSelect = require("./ReactSelect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/admin-react-select",
-  "version": "6.12.1-canary-20240605133817",
+  "version": "7.0.0-beta.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/vivid-planet/comet",
@@ -13,17 +13,16 @@
     "lib"
   ],
   "dependencies": {
-    "@comet/admin": "6.12.1-canary-20240605133817",
+    "@comet/admin": "^7.0.0-beta.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.20.12",
-    "@comet/admin-babel-preset": "6.12.1-canary-20240605133817",
-    "@comet/eslint-config": "6.12.1-canary-20240605133817",
+    "@comet/admin-babel-preset": "^7.0.0-beta.0",
+    "@comet/eslint-config": "^7.0.0-beta.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/styles": "^5.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-select": "^3.1.2",
@@ -41,7 +40,6 @@
   "peerDependencies": {
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/styles": "^5.0.0",
     "final-form": "^4.16.1",
     "react": "^17.0",
     "react-dom": "^17.0",

package/lib/ReactSelect.styles.d.ts

@@ -1,5 +0,0 @@
-import { Theme } from "@mui/material";
-export type SelectClassKey = "input" | "valueContainer" | "chip" | "chipFocused" | "noOptionsMessage" | "singleValue" | "placeholder" | "paper" | "indicatorsContainer" | "indicatorSeparator" | "clearIndicator" | "indicator" | "dropdownIndicator" | "option" | "optionSelected" | "optionFocused";
-declare const styles: (theme: Theme) => import("@mui/styles").StyleRules<Record<string, unknown>, SelectClassKey>;
-export default styles;
-//# sourceMappingURL=ReactSelect.styles.d.ts.map

package/lib/ReactSelect.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactSelect.styles.d.ts","sourceRoot":"","sources":["../src/ReactSelect.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,MAAM,cAAc,GACpB,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,aAAa,GACb,OAAO,GACP,qBAAqB,GACrB,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,mBAAmB,GACnB,QAAQ,GACR,gBAAgB,GAChB,eAAe,CAAC;AAEtB,QAAA,MAAM,MAAM,UAAW,KAAK,8EA6DtB,CAAC;AAEP,eAAe,MAAM,CAAC"}

package/lib/ReactSelect.styles.js

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _styles = require("@mui/material/styles");
-var _styles2 = require("@mui/styles");
-var styles = function styles(theme) {
-  return (0, _styles2.createStyles)({
-    input: {
-      display: "flex",
-      paddingRight: 0
-    },
-    valueContainer: {
-      display: "flex",
-      flexWrap: "nowrap",
-      flex: 1,
-      alignItems: "center",
-      overflow: "hidden"
-    },
-    chip: {
-      margin: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(0.25))
-    },
-    chipFocused: {
-      backgroundColor: (0, _styles.emphasize)(theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[700], 0.08)
-    },
-    noOptionsMessage: {
-      padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
-      color: theme.palette.text.secondary
-    },
-    singleValue: {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    placeholder: {
-      color: theme.palette.text.disabled
-    },
-    paper: {},
-    indicatorsContainer: {
-      display: "flex"
-    },
-    indicatorSeparator: {
-      width: 1,
-      flexGrow: 1,
-      backgroundColor: theme.palette.divider
-    },
-    indicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: theme.palette.grey[500],
-      width: 32,
-      cursor: "pointer"
-    },
-    clearIndicator: {
-      fontSize: 18
-    },
-    dropdownIndicator: {
-      fontSize: 20
-    },
-    option: {},
-    optionSelected: {
-      fontWeight: theme.typography.fontWeightMedium
-    },
-    optionFocused: {
-      backgroundColor: theme.palette.grey[50]
-    }
-  });
-};
-var _default = styles;
-exports["default"] = _default;