@atlaskit/react-select 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 2.2.0
+
+### Minor Changes
+
+- [#137501](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137501)
+  [`fb85ce5c05391`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb85ce5c05391) -
+  Testing unsafe experimental options, to be removed at a later time.
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/cjs/select.js

@@ -80,7 +80,8 @@ var defaultProps = exports.defaultProps = {
   },
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -1269,14 +1270,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-        'aria-haspopup': 'listbox',
+        'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
         'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
+        'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1543,8 +1544,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: 'option',
-          'aria-selected': isSelected,
+          role: _this4.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+          'aria-selected': _this4.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
           // We don't want aria-disabled if it's false. It's just noisy.
           'aria-disabled': !isDisabled && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
@@ -1669,8 +1670,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               scrollTargetRef(instance);
             },
             innerProps: _objectSpread(_objectSpread({
-              role: 'listbox',
-              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+              role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
@@ -1678,7 +1679,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
-          }), menuUI);
+          }), _this4.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/_react.default.createElement("div", {
+            role: "list"
+          }, menuUI) : menuUI);
         }));
       });
 

package/dist/es2019/select.js

@@ -55,7 +55,8 @@ export const defaultProps = {
   }) => `${count} result${count !== 1 ? 's' : ''} available`,
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   const isDisabled = isOptionDisabled(props, option, selectValue);
@@ -1279,14 +1280,14 @@ export default class Select extends Component {
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
       // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-      'aria-haspopup': 'listbox',
+      'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
       'aria-describedby': this.props['aria-describedby'] || descriptionId,
       'aria-invalid': this.props['aria-invalid'] || isInvalid,
       'aria-label': this.props['aria-label'] || label,
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
-      'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined,
+      'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1572,8 +1573,8 @@ export default class Select extends Component {
         onClick: onSelect,
         onMouseMove: onHover,
         onMouseOver: onHover,
-        role: 'option',
-        'aria-selected': isSelected,
+        role: this.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+        'aria-selected': this.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
         // We don't want aria-disabled if it's false. It's just noisy.
         'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
         'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined,
@@ -1703,8 +1704,8 @@ export default class Select extends Component {
         scrollTargetRef(instance);
       },
       innerProps: {
-        role: 'listbox',
-        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+        role: this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || this.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
         id: this.getElementId('listbox'),
         ...(testId && {
           'data-testid': `${testId}-select--listbox`
@@ -1715,7 +1716,9 @@ export default class Select extends Component {
       isLoading: isLoading,
       maxHeight: maxHeight,
       focusedOption: focusedOption
-    }), menuUI))));
+    }), this.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
+      role: "list"
+    }, menuUI) : menuUI))));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked

package/dist/esm/select.js

@@ -71,7 +71,8 @@ export var defaultProps = {
   },
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -1260,14 +1261,14 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-        'aria-haspopup': 'listbox',
+        'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
         'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
+        'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1534,8 +1535,8 @@ var Select = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: 'option',
-          'aria-selected': isSelected,
+          role: _this4.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+          'aria-selected': _this4.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
           // We don't want aria-disabled if it's false. It's just noisy.
           'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
@@ -1660,8 +1661,8 @@ var Select = /*#__PURE__*/function (_Component) {
               scrollTargetRef(instance);
             },
             innerProps: _objectSpread(_objectSpread({
-              role: 'listbox',
-              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+              role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
@@ -1669,7 +1670,9 @@ var Select = /*#__PURE__*/function (_Component) {
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
-          }), menuUI);
+          }), _this4.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
+            role: "list"
+          }, menuUI) : menuUI);
         }));
       });
 

package/dist/types/components/internal/notify-open-layer-observer.d.ts

@@ -1,5 +1,7 @@
-import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+type NotifyOpenLayerObserverProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
 /**
  * Functional component wrapper around `useNotifyOpenLayerObserver`.
  *

package/dist/types/select.d.ts

@@ -155,7 +155,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Formats group labels in the menu as React components
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     formatGroupLabel: (group: Group) => ReactNode;
     /**
@@ -212,7 +212,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Override the built-in logic to detect whether an option is disabled
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
     /**
@@ -275,7 +275,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Whether the menu should use a portal, and where it should attach
      *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
+     * An example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation
      */
     menuPortalTarget?: HTMLElement | null;
     /**
@@ -369,7 +369,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Style modifier methods
      *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * A basic example can be found at the bottom of the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
@@ -424,6 +424,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     spacing?: 'compact' | 'default';
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
+    UNSAFE_is_experimental_generic?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -466,6 +467,7 @@ export declare const defaultProps: {
     styles: {};
     tabIndex: number;
     tabSelectsValue: boolean;
+    UNSAFE_is_experimental_generic: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -545,6 +547,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         styles: {};
         tabIndex: number;
         tabSelectsValue: boolean;
+        UNSAFE_is_experimental_generic: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

package/dist/types-ts4.5/components/internal/notify-open-layer-observer.d.ts

@@ -1,5 +1,7 @@
-import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+type NotifyOpenLayerObserverProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
 /**
  * Functional component wrapper around `useNotifyOpenLayerObserver`.
  *

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

@@ -155,7 +155,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Formats group labels in the menu as React components
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     formatGroupLabel: (group: Group) => ReactNode;
     /**
@@ -212,7 +212,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Override the built-in logic to detect whether an option is disabled
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
     /**
@@ -275,7 +275,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Whether the menu should use a portal, and where it should attach
      *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
+     * An example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation
      */
     menuPortalTarget?: HTMLElement | null;
     /**
@@ -369,7 +369,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Style modifier methods
      *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * A basic example can be found at the bottom of the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
@@ -424,6 +424,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     spacing?: 'compact' | 'default';
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
+    UNSAFE_is_experimental_generic?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -466,6 +467,7 @@ export declare const defaultProps: {
     styles: {};
     tabIndex: number;
     tabSelectsValue: boolean;
+    UNSAFE_is_experimental_generic: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -545,6 +547,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         styles: {};
         tabIndex: number;
         tabSelectsValue: boolean;
+        UNSAFE_is_experimental_generic: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,9 +33,9 @@
 		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.6.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",