@atlaskit/react-select 3.0.0 → 3.0.1

package/dist/cjs/components/internal/dummy-input.js

@@ -1,14 +1,30 @@
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DummyInput;
-var _react = _interopRequireDefault(require("react"));
-var _dummyInput = _interopRequireDefault(require("../../compiled/components/internal/dummy-input"));
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
+require("./dummy-input.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _utils = require("../../utils");
+var _excluded = ["innerRef"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var dummyInputStyles = null;
+function DummyInput(_ref) {
+  var innerRef = _ref.innerRef,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Remove animation props not meant for HTML elements
+  var filteredProps = (0, _utils.removeProps)(props, 'onExited', 'in', 'enter', 'exit', 'appear');
 
-function DummyInput(props) {
-  return /*#__PURE__*/_react.default.createElement(_dummyInput.default, props);
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
+    ref: innerRef,
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz", "-dummyInput"])
+  }, filteredProps));
 }

package/dist/cjs/components/internal/required-input.js

@@ -1,16 +1,34 @@
+/* required-input.tsx generated by @compiled/babel-plugin v0.36.1 */
 "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 = _interopRequireDefault(require("react"));
-var _requiredInput = _interopRequireDefault(require("../../compiled/components/internal/required-input"));
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
-
-var RequiredInput = function RequiredInput(props) {
-  return /*#__PURE__*/_react.default.createElement(_requiredInput.default, props);
+require("./required-input.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = null;
+var RequiredInput = function RequiredInput(_ref) {
+  var name = _ref.name,
+    onFocus = _ref.onFocus;
+  return /*#__PURE__*/React.createElement("input", {
+    required: true,
+    name: name,
+    tabIndex: -1,
+    "aria-hidden": "true"
+    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw", "-requiredInput"]),
+    onFocus: onFocus,
+    // Prevent `Switching from uncontrolled to controlled` error
+    value: "",
+    onChange: _noop.default
+  });
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/live-region.js

@@ -1,20 +1,116 @@
 "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 = _interopRequireDefault(require("react"));
-var _liveRegion = _interopRequireDefault(require("../compiled/components/live-region"));
-/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
-
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _accessibility = require("../accessibility");
+var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
 // ==============================
 // Root Container
 // ==============================
 
 var LiveRegion = function LiveRegion(props) {
-  return /*#__PURE__*/_react.default.createElement(_liveRegion.default, props);
+  var ariaSelection = props.ariaSelection,
+    focusableOptions = props.focusableOptions,
+    isFocused = props.isFocused,
+    selectValue = props.selectValue,
+    selectProps = props.selectProps,
+    id = props.id;
+  var ariaLiveMessages = selectProps.ariaLiveMessages,
+    getOptionLabel = selectProps.getOptionLabel,
+    inputValue = selectProps.inputValue,
+    isOptionDisabled = selectProps.isOptionDisabled,
+    menuIsOpen = selectProps.menuIsOpen,
+    options = selectProps.options,
+    screenReaderStatus = selectProps.screenReaderStatus,
+    isLoading = selectProps.isLoading;
+  var ariaLive = selectProps['aria-live'];
+
+  // Update aria live message configuration when prop changes
+  var messages = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _accessibility.defaultAriaLiveMessages), ariaLiveMessages || {});
+  }, [ariaLiveMessages]);
+
+  // Update aria live selected option when prop changes
+  var ariaSelected = (0, _react.useMemo)(function () {
+    var message = '';
+    if (menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
+    if (ariaSelection && messages.onChange) {
+      var option = ariaSelection.option,
+        selectedOptions = ariaSelection.options,
+        removedValue = ariaSelection.removedValue,
+        removedValues = ariaSelection.removedValues,
+        value = ariaSelection.value;
+      // select-option when !isMulti does not return option so we assume selected option is value
+      var asOption = function asOption(val) {
+        return !Array.isArray(val) ? val : null;
+      };
+
+      // If there is just one item from the action then get its label
+      var selected = removedValue || option || asOption(value);
+      var label = selected ? getOptionLabel(selected) : '';
+
+      // If there are multiple items from the action then return an array of labels
+      var multiSelected = selectedOptions || removedValues || undefined;
+      var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (!label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
+      var onChangeProps = _objectSpread({
+        // multiSelected items are usually items that have already been selected
+        // or set by the user as a default value so we assume they are not disabled
+        isDisabled: selected && isOptionDisabled(selected, selectValue),
+        label: label,
+        labels: labels
+      }, ariaSelection);
+      message = messages.onChange(onChangeProps);
+    }
+    return message;
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
+  var ariaResults = (0, _react.useMemo)(function () {
+    var resultsMsg = '';
+    if (isLoading) {
+      resultsMsg = 'Loading. ';
+    }
+    if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
+    }
+    if (options && options.length === 0) {
+      resultsMsg = 'No options. ';
+    }
+    return resultsMsg;
+  }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
+  var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
+  var ScreenReaderText = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    id: "aria-selection"
+  }, ariaSelected), /*#__PURE__*/_react.default.createElement("span", {
+    id: "aria-results"
+  }, ariaResults));
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_a11yText.default, {
+    id: id
+  }, isInitialFocus && ScreenReaderText), /*#__PURE__*/_react.default.createElement(_a11yText.default, {
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    role: "status"
+  }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc