@atlaskit/react-select 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/react-select
 
+## 1.0.4
+
+### Patch Changes
+
+- [#150410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150410)
+  [`010ae8c2986e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/010ae8c2986e6) -
+  If select is within react-beatiful-dnd, don't prevent onMouseDown event to fix select is not
+  clickable in dnd
+
+## 1.0.3
+
+### Patch Changes
+
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cjs/accessibility/helpers.js

@@ -8,11 +8,11 @@ exports.isIOS = isIOS;
 exports.isIPad = isIPad;
 exports.isIPhone = isIPhone;
 exports.isMac = isMac;
-/// <reference types="user-agent-data-types" />
-
 function testPlatform(re) {
   var _window$navigator$use;
-  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
+  return typeof window !== 'undefined' && window.navigator != null ?
+  //@ts-expect-error ignore userAgentData type issue
+  re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
 }
 function isIPhone() {
   return testPlatform(/^iPhone/i);

package/dist/cjs/builtins.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isOptionDisabled = exports.getOptionValue = exports.getOptionLabel = exports.formatGroupLabel = void 0;
+/* eslint-disable @repo/internal/fs/filename-pattern-match */
+
 var formatGroupLabel = exports.formatGroupLabel = function formatGroupLabel(group) {
   return group.label;
 };

package/dist/cjs/components/containers.js

@@ -70,11 +70,17 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'valueContainer', {
+  var styles = (0, _utils.getStyleProps)(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
-  }), innerProps), children);
+  });
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: styles.css
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: styles.className || 'value-container'
+  }, innerProps), children);
 };
 
 // ==============================

package/dist/cjs/components/menu.js

@@ -365,7 +365,10 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref7) {
   }), 'loadingMessage', {
     'menu-notice': true,
     'menu-notice--loading': true
-  }), innerProps), children);
+  }), innerProps, {
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    role: "option"
+  }), children);
 };
 
 // ==============================

package/dist/cjs/components/option.js

@@ -53,8 +53,8 @@ var Option = function Option(props) {
     'option--is-selected': isSelected
   }), {
     //@ts-ignore
-    ref: innerRef
-    // aria-disabled={isDisabled}
+    ref: innerRef,
+    "aria-disabled": isDisabled
   }, innerProps), children);
 };
 

package/dist/cjs/index.js

@@ -4,12 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "NonceProvider", {
-  enumerable: true,
-  get: function get() {
-    return _nonceProvider.default;
-  }
-});
 Object.defineProperty(exports, "components", {
   enumerable: true,
   get: function get() {
@@ -48,7 +42,6 @@ Object.defineProperty(exports, "useStateManager", {
 });
 var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 var _stateManager = _interopRequireDefault(require("./state-manager"));
-var _nonceProvider = _interopRequireDefault(require("./nonce-provider"));
 var _styles = require("./styles");
 var _theme = require("./theme");
 var _filters = require("./filters");

package/dist/cjs/select.js

@@ -453,7 +453,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onControlMouseDown", function (event) {
       // Event captured by dropdown indicator
       if (event.defaultPrevented) {
-        return;
+        var _this$controlRef;
+        // react-dnd will fire preventDefault in mouseDown, which make select is not clickable.
+        // temp workaround to check if select is within dnd, we don't do the early return.
+        if (!((_this$controlRef = _this.controlRef) !== null && _this$controlRef !== void 0 && _this$controlRef.closest('[data-rbd-draggable-context-id]'))) {
+          return;
+        }
       }
       var openMenuOnClick = _this.props.openMenuOnClick;
       if (!_this.state.isFocused) {
@@ -1241,7 +1246,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
-      var description = this.props['aria-describedby'] || descriptionId || null;
+      var description = this.props['aria-describedby'] || descriptionId;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
@@ -1589,7 +1594,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
-            onMouseMove: _this4.onMenuMouseMove
+            onMouseMove: _this4.onMenuMouseMove,
+            id: _this4.props.components.Menu ? _this4.getElementId('listbox') : undefined
           },
           isLoading: isLoading,
           placement: placement
@@ -1634,12 +1640,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         delimiter = _this$props13.delimiter,
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
-        isRequired = _this$props13.isRequired,
         required = _this$props13.required,
         name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      var req = required || isRequired || null;
-      if (req && !this.hasValue() && !isDisabled) {
+      if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/cjs/use-state-manager.js

@@ -71,6 +71,8 @@ function useStateManager(_ref) {
   var inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;
   var menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;
   var value = propsValue !== undefined ? propsValue : stateValue;
+
+  //@ts-ignore react-select unsupported props
   return _objectSpread(_objectSpread({}, restSelectProps), {}, {
     inputValue: inputValue,
     menuIsOpen: menuIsOpen,

package/dist/es2019/accessibility/helpers.js

@@ -1,8 +1,8 @@
-/// <reference types="user-agent-data-types" />
-
 function testPlatform(re) {
   var _window$navigator$use;
-  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
+  return typeof window !== 'undefined' && window.navigator != null ?
+  //@ts-expect-error ignore userAgentData type issue
+  re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
 }
 export function isIPhone() {
   return testPlatform(/^iPhone/i);

package/dist/es2019/builtins.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/fs/filename-pattern-match */
+
 export const formatGroupLabel = group => group.label;
 export const getOptionLabel = option => option.label;
 export const getOptionValue = option => option.value;

package/dist/es2019/components/containers.js

@@ -70,11 +70,17 @@ export const ValueContainer = props => {
     isMulti,
     hasValue
   } = props;
-  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
+  const styles = getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
-  }), innerProps), children);
+  });
+  return jsx("div", _extends({
+    css: styles.css
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: styles.className || 'value-container'
+  }, innerProps), children);
 };
 
 // ==============================

package/dist/es2019/components/menu.js

@@ -373,7 +373,10 @@ export const LoadingMessage = ({
   }, 'loadingMessage', {
     'menu-notice': true,
     'menu-notice--loading': true
-  }), innerProps), children);
+  }), innerProps, {
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    role: "option"
+  }), children);
 };
 
 // ==============================

package/dist/es2019/components/option.js

@@ -48,8 +48,8 @@ const Option = props => {
     'option--is-selected': isSelected
   }), {
     //@ts-ignore
-    ref: innerRef
-    // aria-disabled={isDisabled}
+    ref: innerRef,
+    "aria-disabled": isDisabled
   }, innerProps), children);
 };
 

package/dist/es2019/index.js

@@ -1,6 +1,5 @@
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
-export { default as NonceProvider } from './nonce-provider';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
 export { createFilter } from './filters';

package/dist/es2019/select.js

@@ -419,7 +419,12 @@ export default class Select extends Component {
     _defineProperty(this, "onControlMouseDown", event => {
       // Event captured by dropdown indicator
       if (event.defaultPrevented) {
-        return;
+        var _this$controlRef;
+        // react-dnd will fire preventDefault in mouseDown, which make select is not clickable.
+        // temp workaround to check if select is within dnd, we don't do the early return.
+        if (!((_this$controlRef = this.controlRef) !== null && _this$controlRef !== void 0 && _this$controlRef.closest('[data-rbd-draggable-context-id]'))) {
+          return;
+        }
       }
       const {
         openMenuOnClick
@@ -1251,7 +1256,7 @@ export default class Select extends Component {
       commonProps
     } = this;
     const id = inputId || this.getElementId('input');
-    const description = this.props['aria-describedby'] || descriptionId || null;
+    const description = this.props['aria-describedby'] || descriptionId;
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
@@ -1620,7 +1625,8 @@ export default class Select extends Component {
       innerRef: ref,
       innerProps: {
         onMouseDown: this.onMenuMouseDown,
-        onMouseMove: this.onMenuMouseMove
+        onMouseMove: this.onMenuMouseMove,
+        id: this.props.components.Menu ? this.getElementId('listbox') : undefined
       },
       isLoading: isLoading,
       placement: placement
@@ -1659,15 +1665,13 @@ export default class Select extends Component {
       delimiter,
       isDisabled,
       isMulti,
-      isRequired,
       required,
       name
     } = this.props;
     const {
       selectValue
     } = this.state;
-    const req = required || isRequired || null;
-    if (req && !this.hasValue() && !isDisabled) {
+    if (required && !this.hasValue() && !isDisabled) {
       return /*#__PURE__*/React.createElement(RequiredInput, {
         name: name,
         onFocus: this.onValueInputFocus

package/dist/es2019/use-state-manager.js

@@ -47,6 +47,8 @@ export default function useStateManager({
   const inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;
   const menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;
   const value = propsValue !== undefined ? propsValue : stateValue;
+
+  //@ts-ignore react-select unsupported props
   return {
     ...restSelectProps,
     inputValue,

package/dist/esm/accessibility/helpers.js

@@ -1,8 +1,8 @@
-/// <reference types="user-agent-data-types" />
-
 function testPlatform(re) {
   var _window$navigator$use;
-  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
+  return typeof window !== 'undefined' && window.navigator != null ?
+  //@ts-expect-error ignore userAgentData type issue
+  re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
 }
 export function isIPhone() {
   return testPlatform(/^iPhone/i);

package/dist/esm/builtins.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/fs/filename-pattern-match */
+
 export var formatGroupLabel = function formatGroupLabel(group) {
   return group.label;
 };

package/dist/esm/components/containers.js

@@ -66,11 +66,17 @@ export var ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
+  var styles = getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
-  }), innerProps), children);
+  });
+  return jsx("div", _extends({
+    css: styles.css
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: styles.className || 'value-container'
+  }, innerProps), children);
 };
 
 // ==============================

package/dist/esm/components/menu.js

@@ -361,7 +361,10 @@ export var LoadingMessage = function LoadingMessage(_ref7) {
   }), 'loadingMessage', {
     'menu-notice': true,
     'menu-notice--loading': true
-  }), innerProps), children);
+  }), innerProps, {
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    role: "option"
+  }), children);
 };
 
 // ==============================

package/dist/esm/components/option.js

@@ -48,8 +48,8 @@ var Option = function Option(props) {
     'option--is-selected': isSelected
   }), {
     //@ts-ignore
-    ref: innerRef
-    // aria-disabled={isDisabled}
+    ref: innerRef,
+    "aria-disabled": isDisabled
   }, innerProps), children);
 };
 

package/dist/esm/index.js

@@ -1,6 +1,5 @@
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
-export { default as NonceProvider } from './nonce-provider';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
 export { createFilter } from './filters';

package/dist/esm/select.js

@@ -443,7 +443,12 @@ var Select = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onControlMouseDown", function (event) {
       // Event captured by dropdown indicator
       if (event.defaultPrevented) {
-        return;
+        var _this$controlRef;
+        // react-dnd will fire preventDefault in mouseDown, which make select is not clickable.
+        // temp workaround to check if select is within dnd, we don't do the early return.
+        if (!((_this$controlRef = _this.controlRef) !== null && _this$controlRef !== void 0 && _this$controlRef.closest('[data-rbd-draggable-context-id]'))) {
+          return;
+        }
       }
       var openMenuOnClick = _this.props.openMenuOnClick;
       if (!_this.state.isFocused) {
@@ -1231,7 +1236,7 @@ var Select = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
-      var description = this.props['aria-describedby'] || descriptionId || null;
+      var description = this.props['aria-describedby'] || descriptionId;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
@@ -1579,7 +1584,8 @@ var Select = /*#__PURE__*/function (_Component) {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
-            onMouseMove: _this4.onMenuMouseMove
+            onMouseMove: _this4.onMenuMouseMove,
+            id: _this4.props.components.Menu ? _this4.getElementId('listbox') : undefined
           },
           isLoading: isLoading,
           placement: placement
@@ -1624,12 +1630,10 @@ var Select = /*#__PURE__*/function (_Component) {
         delimiter = _this$props13.delimiter,
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
-        isRequired = _this$props13.isRequired,
         required = _this$props13.required,
         name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      var req = required || isRequired || null;
-      if (req && !this.hasValue() && !isDisabled) {
+      if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/React.createElement(RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/esm/use-state-manager.js

@@ -64,6 +64,8 @@ export default function useStateManager(_ref) {
   var inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;
   var menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;
   var value = propsValue !== undefined ? propsValue : stateValue;
+
+  //@ts-ignore react-select unsupported props
   return _objectSpread(_objectSpread({}, restSelectProps), {}, {
     inputValue: inputValue,
     menuIsOpen: menuIsOpen,

package/dist/types/builtins.d.ts

@@ -1,5 +1,5 @@
-import { type GroupBase, type Option } from './types';
+import { type GroupBase } from './types';
 export declare const formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
-export declare const getOptionLabel: (option: Option) => string;
-export declare const getOptionValue: (option: Option) => string;
-export declare const isOptionDisabled: (option: Option) => boolean;
+export declare const getOptionLabel: <Option>(option: Option) => string;
+export declare const getOptionValue: <Option>(option: Option) => string;
+export declare const isOptionDisabled: <Option>(option: Option) => boolean;

package/dist/types/filters.d.ts

@@ -1,4 +1,3 @@
-import { type Option } from './types';
 export interface FilterOptionOption<Option> {
     readonly label: string;
     readonly value: string;
@@ -11,5 +10,5 @@ interface Config<Option> {
     readonly trim?: boolean;
     readonly matchFrom?: 'any' | 'start';
 }
-export declare const createFilter: (config?: Config<Option>) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;
+export declare const createFilter: <Option>(config?: Config<Option>) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;
 export {};

package/dist/types/index.d.ts

@@ -2,7 +2,6 @@ import type Select from './select';
 import type { GroupBase } from './types';
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
-export { default as NonceProvider } from './nonce-provider';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
 export { createFilter } from './filters';
@@ -23,6 +22,6 @@ export type { PlaceholderProps } from './components/placeholder';
 export type { SingleValueProps } from './components/single-value';
 export type { ThemeConfig } from './theme';
 export type { ClassNamesConfig, StylesConfig } from './styles';
-export { type GroupBase, type OptionsOrGroups, type Option, type Options, type SingleValue, type MultiValue, type PropsValue, type OnChangeValue, type Colors, type ThemeSpacing, type Theme, type ClassNamesState, type CX, type GetStyles, type CommonProps, type CommonPropsAndClassName, type ActionMetaBase, type SelectOptionActionMeta, type DeselectOptionActionMeta, type RemoveValueActionMeta, type PopValueActionMeta, type ClearActionMeta, type CreateOptionActionMeta, type InitialInputFocusedActionMeta, type ActionMeta, type SetValueAction, type InputAction, type InputActionMeta, type MenuPlacement, type CoercedMenuPlacement, type MenuPosition, type FocusDirection, type GetOptionLabel, type GetOptionValue, type CSSObjectWithLabel, } from './types';
+export { type GroupBase, type OptionsOrGroups, type Options, type SingleValue, type MultiValue, type PropsValue, type OnChangeValue, type Colors, type ThemeSpacing, type Theme, type ClassNamesState, type CX, type GetStyles, type CommonProps, type CommonPropsAndClassName, type ActionMetaBase, type SelectOptionActionMeta, type DeselectOptionActionMeta, type RemoveValueActionMeta, type PopValueActionMeta, type ClearActionMeta, type CreateOptionActionMeta, type InitialInputFocusedActionMeta, type ActionMeta, type SetValueAction, type InputAction, type InputActionMeta, type MenuPlacement, type CoercedMenuPlacement, type MenuPosition, type FocusDirection, type GetOptionLabel, type GetOptionValue, type CSSObjectWithLabel, } from './types';
 export type { OptionContext, GuidanceContext, AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, AriaLiveMessages, AriaGuidance, AriaOnChange, AriaOnFilter, AriaOnFocus, } from './accessibility';
 export type { FormatOptionLabelContext, FormatOptionLabelMeta } from './select';

package/dist/types/select.d.ts

@@ -405,6 +405,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Use `isRequired` instead.
      */
     required?: boolean;
+    [key: string]: any;
 }
 export declare const defaultProps: {
     'aria-live': string;
@@ -417,16 +418,16 @@ export declare const defaultProps: {
     components: {};
     controlShouldRenderValue: boolean;
     escapeClearsValue: boolean;
-    filterOption: (option: FilterOptionOption<import("./types").Option>, rawInput: string) => boolean;
+    filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
     formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
-    getOptionLabel: (option: import("./types").Option) => string;
-    getOptionValue: (option: import("./types").Option) => string;
+    getOptionLabel: <Option_1>(option: Option_1) => string;
+    getOptionValue: <Option_2>(option: Option_2) => string;
     isDisabled: boolean;
     isLoading: boolean;
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
-    isOptionDisabled: (option: import("./types").Option) => boolean;
+    isOptionDisabled: <Option_3>(option: Option_3) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
     minMenuHeight: number;
@@ -496,16 +497,16 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         components: {};
         controlShouldRenderValue: boolean;
         escapeClearsValue: boolean;
-        filterOption: (option: FilterOptionOption<import("./types").Option>, rawInput: string) => boolean;
+        filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
         formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
-        getOptionLabel: (option: import("./types").Option) => string;
-        getOptionValue: (option: import("./types").Option) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
         isDisabled: boolean;
         isLoading: boolean;
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
-        isOptionDisabled: (option: import("./types").Option) => boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
         minMenuHeight: number;

package/dist/types/types.d.ts

@@ -5,10 +5,6 @@ export interface GroupBase<Option> {
     readonly options: readonly Option[];
     readonly label?: string;
 }
-export interface Option {
-    label: string;
-    value: string;
-}
 export type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (Option | Group)[];
 export type Options<Option> = readonly Option[];
 export type SingleValue<Option> = Option | null;

package/dist/types/utils.d.ts

@@ -1,9 +1,9 @@
 import type { StylesProps } from './styles';
-import type { ClassNamesState, CommonPropsAndClassName, GroupBase, InputActionMeta, MultiValue, OnChangeValue, Option, Options, PropsValue, SingleValue } from './types';
+import type { ClassNamesState, CommonPropsAndClassName, GroupBase, InputActionMeta, MultiValue, OnChangeValue, Options, PropsValue, SingleValue } from './types';
 export declare const noop: () => void;
 export declare const emptyString: () => string;
 export declare function classNames(prefix?: string | null, state?: ClassNamesState, ...classNameList: string[]): string;
-export declare const cleanValue: (value: PropsValue<Option>) => Options<Option>;
+export declare const cleanValue: <Option>(value: PropsValue<Option>) => Options<Option>;
 export declare const cleanCommonProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>(props: Partial<CommonPropsAndClassName<Option, IsMulti, Group>> & AdditionalProps) => Omit<AdditionalProps, keyof CommonPropsAndClassName<Option, IsMulti, Group>>;
 export declare const getStyleProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, Key extends keyof StylesProps<Option, IsMulti, Group>>(props: Pick<CommonPropsAndClassName<Option, IsMulti, Group>, 'cx' | 'getStyles' | 'getClassNames' | 'className'> & StylesProps<Option, IsMulti, Group>[Key], name: Key, classNamesState?: ClassNamesState) => {
     css: import("./types").CSSObjectWithLabel;

package/dist/types-ts4.5/builtins.d.ts

@@ -1,5 +1,5 @@
-import { type GroupBase, type Option } from './types';
+import { type GroupBase } from './types';
 export declare const formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
-export declare const getOptionLabel: (option: Option) => string;
-export declare const getOptionValue: (option: Option) => string;
-export declare const isOptionDisabled: (option: Option) => boolean;
+export declare const getOptionLabel: <Option>(option: Option) => string;
+export declare const getOptionValue: <Option>(option: Option) => string;
+export declare const isOptionDisabled: <Option>(option: Option) => boolean;

package/dist/types-ts4.5/filters.d.ts

@@ -1,4 +1,3 @@
-import { type Option } from './types';
 export interface FilterOptionOption<Option> {
     readonly label: string;
     readonly value: string;
@@ -11,5 +10,5 @@ interface Config<Option> {
     readonly trim?: boolean;
     readonly matchFrom?: 'any' | 'start';
 }
-export declare const createFilter: (config?: Config<Option>) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;
+export declare const createFilter: <Option>(config?: Config<Option>) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -2,7 +2,6 @@ import type Select from './select';
 import type { GroupBase } from './types';
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
-export { default as NonceProvider } from './nonce-provider';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
 export { createFilter } from './filters';
@@ -23,6 +22,6 @@ export type { PlaceholderProps } from './components/placeholder';
 export type { SingleValueProps } from './components/single-value';
 export type { ThemeConfig } from './theme';
 export type { ClassNamesConfig, StylesConfig } from './styles';
-export { type GroupBase, type OptionsOrGroups, type Option, type Options, type SingleValue, type MultiValue, type PropsValue, type OnChangeValue, type Colors, type ThemeSpacing, type Theme, type ClassNamesState, type CX, type GetStyles, type CommonProps, type CommonPropsAndClassName, type ActionMetaBase, type SelectOptionActionMeta, type DeselectOptionActionMeta, type RemoveValueActionMeta, type PopValueActionMeta, type ClearActionMeta, type CreateOptionActionMeta, type InitialInputFocusedActionMeta, type ActionMeta, type SetValueAction, type InputAction, type InputActionMeta, type MenuPlacement, type CoercedMenuPlacement, type MenuPosition, type FocusDirection, type GetOptionLabel, type GetOptionValue, type CSSObjectWithLabel, } from './types';
+export { type GroupBase, type OptionsOrGroups, type Options, type SingleValue, type MultiValue, type PropsValue, type OnChangeValue, type Colors, type ThemeSpacing, type Theme, type ClassNamesState, type CX, type GetStyles, type CommonProps, type CommonPropsAndClassName, type ActionMetaBase, type SelectOptionActionMeta, type DeselectOptionActionMeta, type RemoveValueActionMeta, type PopValueActionMeta, type ClearActionMeta, type CreateOptionActionMeta, type InitialInputFocusedActionMeta, type ActionMeta, type SetValueAction, type InputAction, type InputActionMeta, type MenuPlacement, type CoercedMenuPlacement, type MenuPosition, type FocusDirection, type GetOptionLabel, type GetOptionValue, type CSSObjectWithLabel, } from './types';
 export type { OptionContext, GuidanceContext, AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, AriaLiveMessages, AriaGuidance, AriaOnChange, AriaOnFilter, AriaOnFocus, } from './accessibility';
 export type { FormatOptionLabelContext, FormatOptionLabelMeta } from './select';

package/dist/types-ts4.5/select.d.ts

@@ -405,6 +405,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Use `isRequired` instead.
      */
     required?: boolean;
+    [key: string]: any;
 }
 export declare const defaultProps: {
     'aria-live': string;
@@ -417,16 +418,16 @@ export declare const defaultProps: {
     components: {};
     controlShouldRenderValue: boolean;
     escapeClearsValue: boolean;
-    filterOption: (option: FilterOptionOption<import("./types").Option>, rawInput: string) => boolean;
+    filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
     formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
-    getOptionLabel: (option: import("./types").Option) => string;
-    getOptionValue: (option: import("./types").Option) => string;
+    getOptionLabel: <Option_1>(option: Option_1) => string;
+    getOptionValue: <Option_2>(option: Option_2) => string;
     isDisabled: boolean;
     isLoading: boolean;
     isMulti: boolean;
     isRtl: boolean;
     isSearchable: boolean;
-    isOptionDisabled: (option: import("./types").Option) => boolean;
+    isOptionDisabled: <Option_3>(option: Option_3) => boolean;
     loadingMessage: () => string;
     maxMenuHeight: number;
     minMenuHeight: number;
@@ -496,16 +497,16 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         components: {};
         controlShouldRenderValue: boolean;
         escapeClearsValue: boolean;
-        filterOption: (option: FilterOptionOption<import("./types").Option>, rawInput: string) => boolean;
+        filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
         formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
-        getOptionLabel: (option: import("./types").Option) => string;
-        getOptionValue: (option: import("./types").Option) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
         isDisabled: boolean;
         isLoading: boolean;
         isMulti: boolean;
         isRtl: boolean;
         isSearchable: boolean;
-        isOptionDisabled: (option: import("./types").Option) => boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
         loadingMessage: () => string;
         maxMenuHeight: number;
         minMenuHeight: number;

package/dist/types-ts4.5/types.d.ts

@@ -5,10 +5,6 @@ export interface GroupBase<Option> {
     readonly options: readonly Option[];
     readonly label?: string;
 }
-export interface Option {
-    label: string;
-    value: string;
-}
 export type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (Option | Group)[];
 export type Options<Option> = readonly Option[];
 export type SingleValue<Option> = Option | null;

package/dist/types-ts4.5/utils.d.ts

@@ -1,9 +1,9 @@
 import type { StylesProps } from './styles';
-import type { ClassNamesState, CommonPropsAndClassName, GroupBase, InputActionMeta, MultiValue, OnChangeValue, Option, Options, PropsValue, SingleValue } from './types';
+import type { ClassNamesState, CommonPropsAndClassName, GroupBase, InputActionMeta, MultiValue, OnChangeValue, Options, PropsValue, SingleValue } from './types';
 export declare const noop: () => void;
 export declare const emptyString: () => string;
 export declare function classNames(prefix?: string | null, state?: ClassNamesState, ...classNameList: string[]): string;
-export declare const cleanValue: (value: PropsValue<Option>) => Options<Option>;
+export declare const cleanValue: <Option>(value: PropsValue<Option>) => Options<Option>;
 export declare const cleanCommonProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>(props: Partial<CommonPropsAndClassName<Option, IsMulti, Group>> & AdditionalProps) => Omit<AdditionalProps, keyof CommonPropsAndClassName<Option, IsMulti, Group>>;
 export declare const getStyleProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, Key extends keyof StylesProps<Option, IsMulti, Group>>(props: Pick<CommonPropsAndClassName<Option, IsMulti, Group>, 'cx' | 'getStyles' | 'getClassNames' | 'className'> & StylesProps<Option, IsMulti, Group>[Key], name: Key, classNamesState?: ClassNamesState) => {
     css: import("./types").CSSObjectWithLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,15 +29,14 @@
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/cache": "^11.10.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
 		"memoize-one": "^6.0.0",
 		"use-isomorphic-layout-effect": "^1.1.2"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ^18.2.0",
-		"react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/integration-testing": "*",
@@ -47,8 +46,8 @@
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",
 		"jest-in-case": "^1.0.2",
+		"react-intl-next": "npm:react-intl@^5.18.1",
 		"typescript": "~5.4.2",
-		"user-agent-data-types": "^0.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {

package/dist/cjs/nonce-provider.js

@@ -1,30 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _cache = _interopRequireDefault(require("@emotion/cache"));
-var _react2 = require("@emotion/react");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var NonceProvider = function NonceProvider(_ref) {
-  var nonce = _ref.nonce,
-    children = _ref.children,
-    cacheKey = _ref.cacheKey;
-  var emotionCache = (0, _react.useMemo)(function () {
-    return (0, _cache.default)({
-      key: cacheKey,
-      nonce: nonce
-    });
-  }, [cacheKey, nonce]);
-  return /*#__PURE__*/_react.default.createElement(_react2.CacheProvider, {
-    value: emotionCache
-  }, children);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = exports.default = NonceProvider;

package/dist/es2019/nonce-provider.js

@@ -1,19 +0,0 @@
-import React, { useMemo } from 'react';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-const NonceProvider = ({
-  nonce,
-  children,
-  cacheKey
-}) => {
-  const emotionCache = useMemo(() => createCache({
-    key: cacheKey,
-    nonce
-  }), [cacheKey, nonce]);
-  return /*#__PURE__*/React.createElement(CacheProvider, {
-    value: emotionCache
-  }, children);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export default NonceProvider;

package/dist/esm/nonce-provider.js

@@ -1,20 +0,0 @@
-import React, { useMemo } from 'react';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-var NonceProvider = function NonceProvider(_ref) {
-  var nonce = _ref.nonce,
-    children = _ref.children,
-    cacheKey = _ref.cacheKey;
-  var emotionCache = useMemo(function () {
-    return createCache({
-      key: cacheKey,
-      nonce: nonce
-    });
-  }, [cacheKey, nonce]);
-  return /*#__PURE__*/React.createElement(CacheProvider, {
-    value: emotionCache
-  }, children);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export default NonceProvider;

package/dist/types/nonce-provider.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-interface NonceProviderProps {
-    nonce: string;
-    children: ReactNode;
-    cacheKey: string;
-}
-declare const NonceProvider: ({ nonce, children, cacheKey }: NonceProviderProps) => JSX.Element;
-export default NonceProvider;

package/dist/types-ts4.5/nonce-provider.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-interface NonceProviderProps {
-    nonce: string;
-    children: ReactNode;
-    cacheKey: string;
-}
-declare const NonceProvider: ({ nonce, children, cacheKey }: NonceProviderProps) => JSX.Element;
-export default NonceProvider;