@atlaskit/react-select 2.6.6 → 2.7.1

package/dist/es2019/compiled/components/live-region.js

@@ -1,5 +1,4 @@
-import React, { Fragment, useMemo, useRef } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
+import React, { Fragment, useMemo } from 'react';
 import { defaultAriaLiveMessages } from '../../accessibility';
 import A11yText from './internal/a11y-text';
 
@@ -10,35 +9,24 @@ import A11yText from './internal/a11y-text';
 const LiveRegion = props => {
   const {
     ariaSelection,
-    focusedOption,
-    focusedValue,
     focusableOptions,
     isFocused,
     selectValue,
     selectProps,
-    id,
-    isAppleDevice
+    id
   } = props;
   const {
     ariaLiveMessages,
     getOptionLabel,
     inputValue,
-    isMulti,
     isOptionDisabled,
-    isSearchable,
-    label,
     menuIsOpen,
     options,
     screenReaderStatus,
-    tabSelectsValue,
     isLoading
   } = selectProps;
-  const ariaLabel = selectProps['aria-label'] || label;
   const ariaLive = selectProps['aria-live'];
 
-  // for safari, we will use minimum support from aria-live region
-  const isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
-
   // Update aria live message configuration when prop changes
   const messages = useMemo(() => ({
     ...defaultAriaLiveMessages,
@@ -48,7 +36,7 @@ const LiveRegion = props => {
   // Update aria live selected option when prop changes
   const ariaSelected = useMemo(() => {
     let message = '';
-    if (isA11yImprovementEnabled && menuIsOpen) {
+    if (menuIsOpen) {
       // we don't need to have selected message when the menu is open
       return '';
     }
@@ -70,7 +58,7 @@ const LiveRegion = props => {
       // If there are multiple items from the action then return an array of labels
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
-      if (isA11yImprovementEnabled && !label && !labels.length) {
+      if (!label && !labels.length) {
         // return empty string if no labels provided
         return '';
       }
@@ -85,33 +73,7 @@ const LiveRegion = props => {
       message = messages.onChange(onChangeProps);
     }
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
-  const prevInputValue = useRef('');
-  const ariaFocused = useMemo(() => {
-    let focusMsg = '';
-    const focused = focusedOption || focusedValue;
-    const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on and the input value changed
-      // for safari, we will announce for all
-      return '';
-    }
-    if (focused && messages.onFocus) {
-      const onFocusProps = {
-        focused,
-        label: getOptionLabel(focused),
-        isDisabled: isOptionDisabled(focused, selectValue),
-        isSelected,
-        options: focusableOptions,
-        context: focused === focusedOption ? 'menu' : 'value',
-        selectValue,
-        isMulti
-      };
-      focusMsg = messages.onFocus(onFocusProps);
-    }
-    prevInputValue.current = inputValue;
-    return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (isLoading) {
@@ -132,43 +94,17 @@ const LiveRegion = props => {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   const isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
-  const ariaGuidance = useMemo(() => {
-    if (fg('design_system_select-a11y-improvement')) {
-      // don't announce guidance at all when ff is on
-      return '';
-    }
-    let guidanceMsg = '';
-    if (messages.guidance) {
-      const context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
-      guidanceMsg = messages.guidance({
-        'aria-label': ariaLabel,
-        context,
-        isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
-        isMulti,
-        isSearchable,
-        tabSelectsValue,
-        isInitialFocus
-      });
-    }
-    return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
     id: "aria-selection"
   }, ariaSelected), /*#__PURE__*/React.createElement("span", {
     id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    id: "aria-focused"
-  }, ariaFocused), /*#__PURE__*/React.createElement("span", {
-    id: "aria-guidance"
-  }, ariaGuidance)));
+  }, ariaResults));
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), /*#__PURE__*/React.createElement(A11yText, {
     "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
     ,
-    "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
-    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
-    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
+    role: "status"
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/es2019/compiled/components/multi-value.js

@@ -4,8 +4,8 @@ import "./multi-value.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import CrossIcon from '@atlaskit/icon/core/close';
 import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-import CrossIcon from '@atlaskit/icon/utility/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../utils';
 const multiValueStyles = {
@@ -78,7 +78,8 @@ export function MultiValueRemove({
     LEGACY_fallbackIcon: LegacySelectClearIcon,
     LEGACY_primaryColor: "transparent",
     LEGACY_secondaryColor: "inherit",
-    LEGACY_size: "small"
+    LEGACY_size: "small",
+    size: "small"
   })));
 }
 const MultiValue = props => {

package/dist/es2019/emotion/components/indicators.js

@@ -6,8 +6,8 @@ import _extends from "@babel/runtime/helpers/extends";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { jsx } from '@emotion/react';
-import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import DownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import CrossIcon from '@atlaskit/icon/core/migration/cross-circle--select-clear';
 import { Inline, Pressable, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import { getStyleProps } from '../../utils';
@@ -61,7 +61,8 @@ export const DropdownIndicator = props => {
   }, jsx(DownIcon, {
     color: "currentColor",
     label: "open",
-    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)",
+    size: "small"
   })));
 };
 export const clearIndicatorCSS = ({
@@ -94,7 +95,8 @@ export const ClearIndicator = props => {
     label: "",
     color: "currentColor",
     LEGACY_size: "small",
-    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)",
+    size: "small"
   })));
 };
 

package/dist/es2019/emotion/components/live-region.js

@@ -1,14 +1,12 @@
-/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  * @jsxFrag React.Fragment
  */
-import React, { Fragment, useMemo, useRef } from 'react';
+import { Fragment, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../../accessibility';
 import A11yText from './internal/a11y-text';
 
@@ -19,35 +17,24 @@ import A11yText from './internal/a11y-text';
 const LiveRegion = props => {
   const {
     ariaSelection,
-    focusedOption,
-    focusedValue,
     focusableOptions,
     isFocused,
     selectValue,
     selectProps,
-    id,
-    isAppleDevice
+    id
   } = props;
   const {
     ariaLiveMessages,
     getOptionLabel,
     inputValue,
-    isMulti,
     isOptionDisabled,
-    isSearchable,
-    label,
     menuIsOpen,
     options,
     screenReaderStatus,
-    tabSelectsValue,
     isLoading
   } = selectProps;
-  const ariaLabel = selectProps['aria-label'] || label;
   const ariaLive = selectProps['aria-live'];
 
-  // for safari, we will use minimum support from aria-live region
-  const isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
-
   // Update aria live message configuration when prop changes
   const messages = useMemo(() => ({
     ...defaultAriaLiveMessages,
@@ -57,7 +44,7 @@ const LiveRegion = props => {
   // Update aria live selected option when prop changes
   const ariaSelected = useMemo(() => {
     let message = '';
-    if (isA11yImprovementEnabled && menuIsOpen) {
+    if (menuIsOpen) {
       // we don't need to have selected message when the menu is open
       return '';
     }
@@ -79,7 +66,7 @@ const LiveRegion = props => {
       // If there are multiple items from the action then return an array of labels
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
-      if (isA11yImprovementEnabled && !label && !labels.length) {
+      if (!label && !labels.length) {
         // return empty string if no labels provided
         return '';
       }
@@ -94,33 +81,7 @@ const LiveRegion = props => {
       message = messages.onChange(onChangeProps);
     }
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
-  const prevInputValue = useRef('');
-  const ariaFocused = useMemo(() => {
-    let focusMsg = '';
-    const focused = focusedOption || focusedValue;
-    const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on and the input value changed
-      // for safari, we will announce for all
-      return '';
-    }
-    if (focused && messages.onFocus) {
-      const onFocusProps = {
-        focused,
-        label: getOptionLabel(focused),
-        isDisabled: isOptionDisabled(focused, selectValue),
-        isSelected,
-        options: focusableOptions,
-        context: focused === focusedOption ? 'menu' : 'value',
-        selectValue,
-        isMulti
-      };
-      focusMsg = messages.onFocus(onFocusProps);
-    }
-    prevInputValue.current = inputValue;
-    return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (isLoading) {
@@ -141,43 +102,17 @@ const LiveRegion = props => {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   const isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
-  const ariaGuidance = useMemo(() => {
-    if (fg('design_system_select-a11y-improvement')) {
-      // don't announce guidance at all when ff is on
-      return '';
-    }
-    let guidanceMsg = '';
-    if (messages.guidance) {
-      const context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
-      guidanceMsg = messages.guidance({
-        'aria-label': ariaLabel,
-        context,
-        isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
-        isMulti,
-        isSearchable,
-        tabSelectsValue,
-        isInitialFocus
-      });
-    }
-    return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
     id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
-    id: "aria-focused"
-  }, ariaFocused), jsx("span", {
-    id: "aria-guidance"
-  }, ariaGuidance)));
+  }, ariaResults));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
     "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
     ,
-    "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
-    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
-    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
+    role: "status"
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/es2019/emotion/components/multi-value.js

@@ -5,8 +5,8 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
+import CrossIcon from '@atlaskit/icon/core/close';
 import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-import CrossIcon from '@atlaskit/icon/utility/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../utils';
 export const multiValueCSS = ({
@@ -144,7 +144,8 @@ export function MultiValueRemove({
       LEGACY_fallbackIcon: LegacySelectClearIcon,
       LEGACY_primaryColor: "transparent",
       LEGACY_secondaryColor: "inherit",
-      LEGACY_size: "small"
+      LEGACY_size: "small",
+      size: "small"
     })))
   );
 }