@atlaskit/select 17.11.10 → 17.11.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/select
 
+## 17.11.11
+
+### Patch Changes
+
+- [#125980](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125980)
+  [`d908d9c41ed27`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d908d9c41ed27) -
+  The parent group label in `CountrySelect` must be announced with options.
+- Updated dependencies
+
 ## 17.11.10
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
-/**
+var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // custom option renderer
 var labelStyles = (0, _react.css)({
-  alignItems: 'center',
   display: 'flex',
+  alignItems: 'center',
   lineHeight: 1.2
 });
 var flagStyles = (0, _react.css)({
@@ -78,14 +78,33 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 };
 
 // put it all together
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
 var CountrySelect = function CountrySelect(props) {
+  var ariaLiveMessages = props.ariaLiveMessages,
+    options = props.options;
+  var countryOptions = options || _countries.groupedCountries;
   return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     isMulti: false,
-    options: _countries.groupedCountries
+    options: countryOptions,
+    ariaLiveMessages: (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
+      onFocus: function onFocus(data) {
+        return (0, _countryGroupsAnnouncement.onCountryOptionFocus)(data, countryOptions);
+      }
+    }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
   }, props));
 };
 var _default = exports.default = CountrySelect;

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.11.10";
+var packageVersion = "17.11.11";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/index.js

@@ -83,6 +83,12 @@ Object.defineProperty(exports, "default", {
     return _select.default;
   }
 });
+Object.defineProperty(exports, "isCountryOptionsGrouped", {
+  enumerable: true,
+  get: function get() {
+    return _countryGroupsAnnouncement.isCountryOptionsGrouped;
+  }
+});
 Object.defineProperty(exports, "isOptionsGrouped", {
   enumerable: true,
   get: function get() {
@@ -95,6 +101,12 @@ Object.defineProperty(exports, "mergeStyles", {
     return _reactSelect.mergeStyles;
   }
 });
+Object.defineProperty(exports, "onCountryOptionFocus", {
+  enumerable: true,
+  get: function get() {
+    return _countryGroupsAnnouncement.onCountryOptionFocus;
+  }
+});
 Object.defineProperty(exports, "useAsync", {
   enumerable: true,
   get: function get() {
@@ -116,6 +128,7 @@ var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select")
 var _creatableSelect = _interopRequireDefault(require("./entry-points/creatable-select"));
 var _asyncCreatableSelect = _interopRequireDefault(require("./entry-points/async-creatable-select"));
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
+var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
 var _CheckboxSelect = _interopRequireDefault(require("./CheckboxSelect"));
 var _CountrySelect = _interopRequireDefault(require("./CountrySelect"));
 var _RadioSelect = _interopRequireDefault(require("./RadioSelect"));

package/dist/cjs/utils/country-groups-announcement.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isCountryOptionsGrouped = void 0;
+exports.onCountryOptionFocus = onCountryOptionFocus;
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+function onCountryOptionFocus(onFocusProps, defaultOptions) {
+  var _groupData$options$fi;
+  var focused = onFocusProps.focused;
+  var isOptionFocused = function isOptionFocused(option) {
+    return option.name === focused.name;
+  };
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
+}
+
+// Helper function which identifies if options are grouped.
+var isCountryOptionsGrouped = exports.isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
+  return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
+    return obj.hasOwnProperty('options');
+  });
+};

package/dist/es2019/CountrySelect.js

@@ -3,15 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
+
 import { groupedCountries } from './data/countries';
 import Select from './Select';
+import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 // custom option renderer
 const labelStyles = css({
-  alignItems: 'center',
   display: 'flex',
+  alignItems: 'center',
   lineHeight: 1.2
 });
 const flagStyles = css({
@@ -62,12 +63,36 @@ const formatOptionLabel = (opt, {
 }) => context === 'value' ? controlLabel(opt) : optionLabel(opt);
 
 // put it all together
-const CountrySelect = props => jsx(Select, _extends({
-  isClearable: false,
-  formatOptionLabel: formatOptionLabel,
-  getOptionLabel: getOptionLabel,
-  getOptionValue: getOptionValue,
-  isMulti: false,
-  options: groupedCountries
-}, props));
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+const CountrySelect = props => {
+  const {
+    ariaLiveMessages,
+    options
+  } = props;
+  const countryOptions = options || groupedCountries;
+  return jsx(Select, _extends({
+    isClearable: false,
+    formatOptionLabel: formatOptionLabel,
+    getOptionLabel: getOptionLabel,
+    getOptionValue: getOptionValue,
+    isMulti: false,
+    options: countryOptions,
+    ariaLiveMessages: isCountryOptionsGrouped(countryOptions) ? {
+      onFocus: data => onCountryOptionFocus(data, countryOptions),
+      ...ariaLiveMessages
+    } : {
+      ...ariaLiveMessages
+    }
+  }, props));
+};
 export default CountrySelect;

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.11.10";
+const packageVersion = "17.11.11";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/index.js

@@ -7,6 +7,7 @@ export { default as AsyncSelect } from './entry-points/async-select';
 export { default as CreatableSelect } from './entry-points/creatable-select';
 export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { isOptionsGrouped } from './utils/grouped-options-announcement';
+export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';

package/dist/es2019/utils/country-groups-announcement.js

@@ -0,0 +1,22 @@
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+export function onCountryOptionFocus(onFocusProps, defaultOptions) {
+  var _groupData$options$fi;
+  const {
+    focused
+  } = onFocusProps;
+  const isOptionFocused = option => {
+    return option.name === focused.name;
+  };
+  const groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return `Option ${focused.name} (${focused.abbr.toUpperCase()}) +${focused.code}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} group, item ${groupOptionIndex + 1} out of ${groupData === null || groupData === void 0 ? void 0 : groupData.options.length}. All in all `;
+}
+
+// Helper function which identifies if options are grouped.
+export const isCountryOptionsGrouped = arr => {
+  return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
+};

package/dist/esm/CountrySelect.js

@@ -1,17 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
+
 import { groupedCountries } from './data/countries';
 import Select from './Select';
+import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 // custom option renderer
 var labelStyles = css({
-  alignItems: 'center',
   display: 'flex',
+  alignItems: 'center',
   lineHeight: 1.2
 });
 var flagStyles = css({
@@ -70,14 +74,33 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 };
 
 // put it all together
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
 var CountrySelect = function CountrySelect(props) {
+  var ariaLiveMessages = props.ariaLiveMessages,
+    options = props.options;
+  var countryOptions = options || groupedCountries;
   return jsx(Select, _extends({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     isMulti: false,
-    options: groupedCountries
+    options: countryOptions,
+    ariaLiveMessages: isCountryOptionsGrouped(countryOptions) ? _objectSpread({
+      onFocus: function onFocus(data) {
+        return onCountryOptionFocus(data, countryOptions);
+      }
+    }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
   }, props));
 };
 export default CountrySelect;

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.11.10";
+var packageVersion = "17.11.11";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export { default as AsyncSelect } from './entry-points/async-select';
 export { default as CreatableSelect } from './entry-points/creatable-select';
 export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { isOptionsGrouped } from './utils/grouped-options-announcement';
+export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';

package/dist/esm/utils/country-groups-announcement.js

@@ -0,0 +1,22 @@
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+export function onCountryOptionFocus(onFocusProps, defaultOptions) {
+  var _groupData$options$fi;
+  var focused = onFocusProps.focused;
+  var isOptionFocused = function isOptionFocused(option) {
+    return option.name === focused.name;
+  };
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
+}
+
+// Helper function which identifies if options are grouped.
+export var isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
+  return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
+    return obj.hasOwnProperty('options');
+  });
+};

package/dist/types/CountrySelect.d.ts

@@ -1,6 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
 declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
 export default CountrySelect;

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export { default as AsyncSelect } from './entry-points/async-select';
 export { default as CreatableSelect } from './entry-points/creatable-select';
 export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { isOptionsGrouped } from './utils/grouped-options-announcement';
+export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';

package/dist/types/utils/country-groups-announcement.d.ts

@@ -0,0 +1,15 @@
+import { type AriaOnFocusProps, type OptionsOrGroups } from 'react-select';
+import { type GroupType } from '../types';
+type Country = {
+    icon: string;
+    name: string;
+    abbr: string;
+    code: string | number;
+};
+export type CountyGroupOptions = {
+    label: string;
+    options: Country[];
+};
+export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
+export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
+export {};

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

@@ -1,6 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
+/**
+ * __Country select__
+ *
+ * A country select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
 declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
 export default CountrySelect;

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

@@ -7,6 +7,7 @@ export { default as AsyncSelect } from './entry-points/async-select';
 export { default as CreatableSelect } from './entry-points/creatable-select';
 export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
 export { isOptionsGrouped } from './utils/grouped-options-announcement';
+export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
 export { default as CheckboxSelect } from './CheckboxSelect';
 export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';

package/dist/types-ts4.5/utils/country-groups-announcement.d.ts

@@ -0,0 +1,15 @@
+import { type AriaOnFocusProps, type OptionsOrGroups } from 'react-select';
+import { type GroupType } from '../types';
+type Country = {
+    icon: string;
+    name: string;
+    abbr: string;
+    code: string | number;
+};
+export type CountyGroupOptions = {
+    label: string;
+    options: Country[];
+};
+export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
+export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.11.10",
+	"version": "17.11.11",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/icon": "^22.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/spinner": "^16.2.0",