carbon-react 104.8.0 → 104.10.2

package/lib/components/select/__internal__/select-text/select-text.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+export interface SelectTextProps {
+  /** If true the Component will be disabled */
+  disabled?: boolean;
+  /** Value to be displayed */
+  formattedValue?: string;
+  /** Label id passed from Select component  */
+  labelId?: string;
+  /** If true, the list is displayed */
+  isOpen?: boolean;
+  /** Callback function for when the Select Textbox loses it's focus. */
+  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** Callback function for when the component is clicked. */
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Callback function for when the Select Textbox is focused. */
+  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** Callback function for when the key is pressed when focused on Select Text. */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+  /** Callback function for when the left mouse key is pressed when focused on Select Text. */
+  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Placeholder string to be displayed when formattedValue is empty */
+  placeholder?: string;
+  /** If true the Component will be read-only */
+  readOnly?: boolean;
+  /** If true the component has no border and a transparent background */
+  transparent?: boolean;
+  /** Id of the Select Text element */
+  textId?: string;
+}
+
+declare function SelectText(props: SelectTextProps): JSX.Element;
+
+export default SelectText;

package/lib/components/select/__internal__/select-text/select-text.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSelectText;
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/select/__internal__/select-text/select-text.style.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _themes = require("../../../../style/themes");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledSelectText = _styledComponents.default.span`
+  ${({
+  disabled,
+  hasPlaceholder,
+  readOnly,
+  theme,
+  transparent
+}) => (0, _styledComponents.css)`
+    align-items: center;
+    display: inline-flex;
+    flex-grow: 1;
+    font-size: 14px;
+    height: auto;
+    overflow: hidden;
+    outline: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 30px;
+    z-index: 1;
+
+    ${transparent && (0, _styledComponents.css)`
+      font-weight: 900;
+      text-align: right;
+      flex-direction: row-reverse;
+    `}
+
+    ${hasPlaceholder && (0, _styledComponents.css)`
+      color: ${theme.text.placeholder};
+      font-weight: normal;
+      user-select: none;
+    `}
+
+    ${disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+      color: var(--colorsUtilityYin030);
+      text-shadow: none;
+    `}
+
+    ${readOnly && (0, _styledComponents.css)`
+      cursor: default;
+      color: var(--colorsYin065);
+      text-shadow: none;
+    `}
+  `}
+`;
+StyledSelectText.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = StyledSelectText;
+exports.default = _default;

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -67,6 +67,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   ...textboxProps
 }, inputRef) => {
+  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)();
@@ -255,6 +256,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = (0, _react.useCallback)(optionData => {
     const {
+      id: selectedOptionId,
       text,
       value: newValue,
       selectionType
@@ -273,6 +275,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     setTextValue(text);
     triggerChange(newValue);
+    setActiveDescendantId(selectedOptionId);
 
     if (selectionType !== "navigationKey") {
       setOpen(false);
@@ -434,8 +437,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
@@ -444,8 +445,10 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : "",
-    type: "text",
+    activeDescendantId: activeDescendantId,
+    "aria-controls": isOpen ? selectListId.current : undefined,
+    isOpen: isOpen,
+    hasTextCursor: true,
     labelId: labelId.current,
     positionedChildren: disablePortal && isOpen && selectList
   }, getTextboxProps())), !disablePortal && isOpen && selectList);

package/lib/components/select/multi-select/multi-select.component.js

@@ -70,7 +70,9 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   ...textboxProps
 }, inputRef) => {
+  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
+  const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)();
   const listboxRef = (0, _react.useRef)();
@@ -163,6 +165,13 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
+  const accessibilityLabel = (0, _react.useMemo)(() => {
+    return selectedValue && selectedValue.length ? _react.default.Children.map(children, child => {
+      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    }).filter(child => child).reduce((acc, item) => {
+      return acc ? `${acc}, ${item}` : item;
+    }, "") : null;
+  }, [children, selectedValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
 
@@ -340,11 +349,13 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const onSelectOption = (0, _react.useCallback)(optionData => {
     const {
       value: newValue,
-      selectionType
+      selectionType,
+      id: selectedOptionId
     } = optionData;
 
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
+      setActiveDescendantId(selectedOptionId);
       return;
     }
 
@@ -440,12 +451,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     multiColumn: multiColumn,
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    loaderDataRole: "multi-select-list-loader"
+    loaderDataRole: "multi-select-list-loader",
+    multiselectValues: selectedValue
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     disabled: disabled,
     readOnly: readOnly,
@@ -454,9 +464,15 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : "",
-    type: "text",
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
+    "data-element": "accessibility-label",
+    id: accessibilityLabelId.current
+  }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    accessibilityLabelId: accessibilityLabelId.current,
+    activeDescendantId: activeDescendantId,
+    "aria-controls": isOpen ? selectListId.current : undefined,
+    hasTextCursor: true,
+    isOpen: isOpen,
     labelId: labelId.current,
     positionedChildren: disablePortal && isOpen && selectList
   }, getTextboxProps())), !disablePortal && isOpen && selectList);

package/lib/components/select/multi-select/multi-select.style.d.ts

@@ -1,2 +1,3 @@
 export const StyledSelectPillContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectMultiSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledAccessibilityLabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/select/multi-select/multi-select.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectMultiSelect = exports.StyledSelectPillContainer = void 0;
+exports.StyledAccessibilityLabelContainer = exports.StyledSelectMultiSelect = exports.StyledSelectPillContainer = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -47,6 +47,10 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
   }
 `;
 exports.StyledSelectMultiSelect = StyledSelectMultiSelect;
+const StyledAccessibilityLabelContainer = _styledComponents.default.div`
+  display: none;
+`;
+exports.StyledAccessibilityLabelContainer = StyledAccessibilityLabelContainer;
 StyledSelectPillContainer.defaultProps = {
   theme: _themes.baseTheme
 };

package/lib/components/select/option/option.component.js

@@ -5,46 +5,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _option = _interopRequireDefault(require("./option.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Option = /*#__PURE__*/_react.default.forwardRef(({
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  id,
+  index,
   hidden,
   onClick
 }, ref) => {
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
+  let isSelected = selectListContext.currentOptionsListIndex === index;
+
+  if (selectListContext.multiselectValues) {
+    isSelected = selectListContext.multiselectValues.includes(value);
+  }
+
   function handleClick() {
     if (!onClick) {
       onSelect({
         text,
-        value
+        value,
+        id
       });
     } else {
       onSelect();
       onClick({
         target: {
           text,
-          value
+          value,
+          id
         }
       });
     }
   }
 
   return /*#__PURE__*/_react.default.createElement(_option.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": isSelected,
     "data-component": "option",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children || text);
@@ -60,6 +77,13 @@ Option.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string,
+
   /**
    * @private
    * @ignore
@@ -75,8 +99,8 @@ Option.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

package/lib/components/select/option-row/option-row.component.js

@@ -5,35 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _optionRow = _interopRequireDefault(require("./option-row.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
+  id,
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  index,
   hidden
 }, ref) => {
   const handleClick = () => {
     onSelect({
+      id,
       text,
       value
     });
   };
 
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
   return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": selectListContext.currentOptionsListIndex === index,
     "data-component": "option-row",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children);
@@ -49,6 +59,13 @@ OptionRow.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string.isRequired,
+
   /**
    * @private
    * @ignore
@@ -58,8 +75,8 @@ OptionRow.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

package/lib/components/select/select-list/select-list.component.js

@@ -29,6 +29,10 @@ var _loader = _interopRequireDefault(require("../../loader"));
 
 var _option = _interopRequireDefault(require("../option/option.component"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -84,7 +88,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const anchorRef = (0, _react.useMemo)(() => ({
     current: anchorElement
   }), [anchorElement]);
-  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const optionRefList = (0, _react.useMemo)(() => _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _option.default || (child === null || child === void 0 ? void 0 : child.type) === _optionRow.default) {
       return /*#__PURE__*/_react.default.createRef();
@@ -92,6 +95,26 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     return null;
   }).filter(child => child), [children]);
+  const handleSelect = (0, _react.useCallback)(optionData => {
+    onSelect({ ...optionData,
+      selectionType: "click"
+    });
+  }, [onSelect]);
+  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
+    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
+      return child;
+    }
+
+    const newProps = {
+      index,
+      id: (0, _guid.default)(),
+      onSelect: handleSelect,
+      hidden: isLoading && _react.default.Children.count(children) === 1,
+      ref: optionRefList[index]
+    };
+    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
+  }), [children, handleSelect, isLoading, optionRefList]);
+  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = (0, _react.useMemo)(() => {
     let lastIndex = 0;
     childrenList.forEach((element, index) => {
@@ -131,12 +154,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const {
       text,
-      value
+      value,
+      id: itemId
     } = childrenList[nextIndex].props;
     onSelect({
       text,
       value,
-      selectionType: "navigationKey"
+      selectionType: "navigationKey",
+      id: itemId
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
@@ -174,10 +199,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       const {
+        id: itemId,
         text,
         value
       } = currentOption.props;
       onSelect({
+        id: itemId,
         text,
         value,
         selectionType: "enterKey"
@@ -194,24 +221,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       onListScrollBottom();
     }
   }, [onListScrollBottom]);
-  const handleSelect = (0, _react.useCallback)(optionData => {
-    onSelect({ ...optionData,
-      selectionType: "click"
-    });
-  }, [onSelect]);
-  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
-    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
-      return child;
-    }
-
-    const newProps = {
-      onSelect: handleSelect,
-      isHighlighted: currentOptionsListIndex === index,
-      hidden: isLoading && _react.default.Children.count(children) === 1,
-      ref: optionRefList[index]
-    };
-    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, currentOptionsListIndex, handleSelect, isLoading, optionRefList]);
   const assignListWidth = (0, _react.useCallback)(() => {
     if (!disablePortal && anchorElement) {
       const inputBoundingRect = anchorElement.getBoundingClientRect();
@@ -313,6 +322,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     height: listHeight,
     width: listWidth,
     ref: listContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
+    value: {
+      currentOptionsListIndex
+    }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper",
     height: listHeight,
@@ -324,14 +337,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "select-list",
     role: "listbox",
     ref: listRef,
-    tabIndex: "0",
+    tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn
   }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
-  }))));
+  })))));
 });
 
 SelectList.propTypes = {