carbon-react 118.1.0 → 118.2.0

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

@@ -31,13 +31,13 @@ var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index
 
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 
-var _listActionButton = _interopRequireDefault(require("../list-action-button/list-action-button.component"));
+var _listActionButton = _interopRequireDefault(require("../list-action-button"));
 
 var _selectListContainer = _interopRequireDefault(require("./select-list-container.style"));
 
 var _loader = _interopRequireDefault(require("../../loader"));
 
-var _option = _interopRequireDefault(require("../option/option.component"));
+var _option = _interopRequireDefault(require("../option"));
 
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 
@@ -53,7 +53,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const TABLE_HEADER_HEIGHT = 48;
 const SCROLL_OPTIONS = {
-  smoothScroll: false,
+  behavior: "auto",
   align: "end"
 };
 
@@ -88,9 +88,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
   const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
   const lastFilter = (0, _react.useRef)("");
-  const listRef = (0, _react.useRef)();
-  const tableRef = (0, _react.useRef)();
-  const listActionButtonRef = (0, _react.useRef)();
+  const listRef = (0, _react.useRef)(null);
+  const tableRef = (0, _react.useRef)(null);
+  const listActionButtonRef = (0, _react.useRef)(null);
   const {
     blockScroll,
     allowScroll
@@ -121,11 +121,13 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }, [allowScroll, blockScroll, isOpen]);
   (0, _react.useLayoutEffect)(() => {
     if (multiColumn) {
-      setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
+      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth :
+      /* istanbul ignore next */
+      0);
     }
   }, [multiColumn]);
   const anchorRef = (0, _react.useMemo)(() => ({
-    current: anchorElement
+    current: anchorElement || null
   }), [anchorElement]);
   const handleSelect = (0, _react.useCallback)(optionData => {
     onSelect({ ...optionData,
@@ -136,7 +138,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
 
   const setChildIds = () => {
-    childIdsRef.current = _react.default.Children.map(children, () => (0, _guid.default)());
+    childIdsRef.current = _react.default.Children.map(children, () => (0, _guid.default)()) ||
+    /* istanbul ignore next */
+    null;
   };
 
   if (((_childIdsRef$current = childIdsRef.current) === null || _childIdsRef$current === void 0 ? void 0 : _childIdsRef$current.length) !== _react.default.Children.count(children)) {
@@ -145,7 +149,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
   const childIds = childIdsRef.current;
   const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => child.type === _option.default || child.type === _optionRow.default), [childrenList]);
+  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default)), [childrenList]);
   const {
     measureElement
   } = virtualizer;
@@ -164,7 +168,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     } = item;
     const child = childrenList[index];
 
-    if (!child) {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return child;
     }
 
@@ -172,7 +176,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds[index],
+      id: childIds ? childIds[index] :
+      /* istanbul ignore next */
+      undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -187,20 +193,20 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     };
     return /*#__PURE__*/_react.default.cloneElement(child, newProps);
   });
-  const lastOptionIndex = (0, _findLastIndex.default)(childrenList, child => child.type === _option.default || child.type === _optionRow.default);
+  const lastOptionIndex = (0, _findLastIndex.default)(childrenList, child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default));
   const getNextHighlightableItemIndex = (0, _react.useCallback)((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
     let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
 
-    if (nextElement && nextElement.type !== _option.default && nextElement.type !== _optionRow.default) {
-      nextIndex = getNextHighlightableItemIndex(key, nextIndex, lastIndex);
+    if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default) {
+      nextIndex = getNextHighlightableItemIndex(key, nextIndex);
     }
 
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
   const getIndexOfMatch = (0, _react.useCallback)(valueToMatch => {
-    return childrenList.findIndex(child => child.props.value === valueToMatch);
+    return childrenList.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.value === valueToMatch);
   }, [childrenList]);
   const highlightNextItem = (0, _react.useCallback)(key => {
     let currentIndex = currentOptionsListIndex;
@@ -224,7 +230,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds[nextIndex]
+      id: childIds ? childIds[nextIndex] :
+      /* istanbul ignore next */
+      undefined
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
@@ -233,8 +241,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         selectionType: "tab"
       });
     } else {
+      var _listActionButtonRef$;
+
       event.preventDefault();
-      listActionButtonRef.current.focus();
+      (_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : _listActionButtonRef$.focus();
     }
   }, [onSelect]);
   const focusOnAnchor = (0, _react.useCallback)(() => {
@@ -260,7 +270,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       event.preventDefault();
       const currentOption = childrenList[currentOptionsListIndex];
 
-      if (!currentOption) {
+      if (! /*#__PURE__*/_react.default.isValidElement(currentOption)) {
         onSelectListClose();
         return;
       }
@@ -270,7 +280,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         value
       } = currentOption.props;
       onSelect({
-        id: childIds[currentOptionsListIndex],
+        id: childIds ? childIds[currentOptionsListIndex] :
+        /* istanbul ignore next */
+        undefined,
         text,
         value,
         selectionType: "enterKey"
@@ -286,7 +298,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [onSelectListClose]);
   (0, _useModalManager.default)({
-    open: isOpen,
+    open: !!isOpen,
     closeModal: handleEscapeKey,
     modalRef: listRef,
     triggerRefocusOnClose: false
@@ -303,15 +315,15 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
     window.addEventListener(keyboardEvent, handleGlobalKeydown);
-    listElement.addEventListener("scroll", handleListScroll);
+    listElement === null || listElement === void 0 ? void 0 : listElement.addEventListener("scroll", handleListScroll);
     return function cleanup() {
       window.removeEventListener(keyboardEvent, handleGlobalKeydown);
-      listElement.removeEventListener("scroll", handleListScroll);
+      listElement === null || listElement === void 0 ? void 0 : listElement.removeEventListener("scroll", handleListScroll);
     };
   }, [handleGlobalKeydown, handleListScroll, listContainerRef]);
   (0, _react.useEffect)(() => {
     if (!filterText || filterText === lastFilter.current) {
-      lastFilter.current = filterText;
+      lastFilter.current = filterText || "";
       return;
     }
 
@@ -384,9 +396,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   };
   (0, _react.useLayoutEffect)(() => {
     if (listActionButton && isOpen) {
-      var _listActionButtonRef$, _listActionButtonRef$2;
+      var _listActionButtonRef$2, _listActionButtonRef$3;
 
-      actionButtonHeight.current = ((_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : (_listActionButtonRef$2 = _listActionButtonRef$.parentElement) === null || _listActionButtonRef$2 === void 0 ? void 0 : _listActionButtonRef$2.offsetHeight) || 0;
+      actionButtonHeight.current = ((_listActionButtonRef$2 = listActionButtonRef.current) === null || _listActionButtonRef$2 === void 0 ? void 0 : (_listActionButtonRef$3 = _listActionButtonRef$2.parentElement) === null || _listActionButtonRef$3 === void 0 ? void 0 : _listActionButtonRef$3.offsetHeight) || 0;
     }
   }, [listActionButton, isOpen]);
 
@@ -423,7 +435,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
-    tabIndex: "-1",
+    tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
   }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
@@ -433,79 +445,36 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 SelectList.propTypes = {
-  /** The ID for the parent <div> */
-  id: _propTypes.default.string,
-
-  /** The Id of the label */
-  labelId: _propTypes.default.string,
-
-  /** Child components (such as <Option>) */
-  children: _propTypes.default.node,
-
-  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-  disablePortal: _propTypes.default.bool,
-
-  /** DOM element to position the dropdown menu list relative to */
-  anchorElement: _propTypes.default.object,
-
-  /** A callback for when a child is selected */
-  onSelect: _propTypes.default.func.isRequired,
-
-  /** A callback for when the list should be closed */
-  onSelectListClose: _propTypes.default.func.isRequired,
-
-  /** Text value to highlight an option */
-  filterText: _propTypes.default.string,
-
-  /** Value of option to be highlighted on component render */
-  highlightedValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
-  /** True for default text button or a Button Component to be rendered */
-  listActionButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.element]),
-
-  /** Maximum list height - defaults to 180 */
-  listMaxHeight: _propTypes.default.number,
-
-  /** A callback for when the Action Button is triggered */
-  onListAction: _propTypes.default.func,
-
-  /** If true the loader animation is displayed below the last option */
-  isLoading: _propTypes.default.bool,
-
-  /** A callback that is triggered when a user scrolls to the bottom of the list */
-  onListScrollBottom: _propTypes.default.func,
-
-  /** SelectList table header, should consist of multiple th elements. Works only in multiColumn mode */
-  tableHeader: _propTypes.default.node,
-
-  /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
-  multiColumn: _propTypes.default.bool,
-
-  /** Data role for loader component */
-  loaderDataRole: _propTypes.default.string,
-
-  /** Placement of the select list relative to the input element */
-  listPlacement: _propTypes.default.oneOf(["top", "bottom", "right", "left"]),
-
-  /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool,
-
-  /** @private @ignore
-   * Hides the list (with CSS display: none) if not set
-   */
-  isOpen: _propTypes.default.bool,
-
-  /** array of selected values, if rendered as part of a MultiSelect */
-  multiselectValues: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)]),
-
-  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
-   * DOM at all times, which may cause performance problems on very large lists */
-  enableVirtualScroll: _propTypes.default.bool,
-
-  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
-   * Higher values make for smoother scrolling but may impact performance.
-   * Only used if the `enableVirtualScroll` prop is set. */
-  virtualScrollOverscan: _propTypes.default.number
+  "anchorElement": function (props, propName) {
+    if (props[propName] == null) {
+      return null;
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  },
+  "children": _propTypes.default.node,
+  "disablePortal": _propTypes.default.bool,
+  "enableVirtualScroll": _propTypes.default.bool,
+  "filterText": _propTypes.default.string,
+  "flipEnabled": _propTypes.default.bool,
+  "highlightedValue": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  "id": _propTypes.default.string,
+  "isLoading": _propTypes.default.bool,
+  "isOpen": _propTypes.default.bool,
+  "labelId": _propTypes.default.string,
+  "listActionButton": _propTypes.default.node,
+  "listMaxHeight": _propTypes.default.number,
+  "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  "loaderDataRole": _propTypes.default.string,
+  "multiColumn": _propTypes.default.bool,
+  "multiselectValues": _propTypes.default.arrayOf(_propTypes.default.string),
+  "onListAction": _propTypes.default.func,
+  "onListScrollBottom": _propTypes.default.func,
+  "onMouseDown": _propTypes.default.func,
+  "onSelect": _propTypes.default.func.isRequired,
+  "onSelectListClose": _propTypes.default.func.isRequired,
+  "tableHeader": _propTypes.default.node,
+  "virtualScrollOverscan": _propTypes.default.number
 };
 var _default = SelectList;
 exports.default = _default;

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

@@ -0,0 +1,12 @@
+interface StyledSelectListProps {
+    listHeight?: number;
+}
+declare const StyledSelectList: import("styled-components").StyledComponent<"ul", any, StyledSelectListProps, never>;
+declare const StyledSelectLoaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSelectListTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+interface StyledSelectListTableHeaderProps {
+    scrollbarWidth: number;
+}
+declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
+declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, };

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

@@ -55,9 +55,9 @@ const StyledSelectListTable = _styledComponents.default.table`
     width: 100%;
     table-layout: fixed;
   }
-`; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
-
+`;
 exports.StyledSelectListTable = StyledSelectListTable;
+// TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
 const StyledSelectListTableHeader = _styledComponents.default.thead`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   position: sticky;

package/lib/components/select/select-textbox/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./select-textbox";
+export { default } from "./select-textbox.component";
+export type { SelectTextboxProps, FormInputPropTypes, } from "./select-textbox.component";

package/lib/components/select/select-textbox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _selectTextbox.default;
+  }
+});
+
+var _selectTextbox = _interopRequireDefault(require("./select-textbox.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/select-textbox/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/select/select-textbox/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { CommonTextboxProps } from "../../textbox";
+import { ValidationProps } from "../../../__internal__/validations";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Prop to specify the aria-label attribute of the component input */
+    ariaLabel?: string;
+    /** Prop to specify the aria-labeledby property of the component input */
+    ariaLabelledby?: string;
+    /** If true the Component will be focused when rendered */
+    autoFocus?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Id attribute of the input element */
+    id?: string;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /** Label content */
+    label?: string;
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Label width */
+    labelWidth?: number;
+    /** Name attribute of the input element */
+    name?: string;
+    /** Specify a callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on click */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** pecify a callback triggered on keuyDown */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder string to be displayed in input */
+    placeholder?: string;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /**
+     * Id of the element containing the currently displayed value
+     * to be read by voice readers
+     * @private
+     * @ignore
+     */
+    accessibilityLabelId?: string;
+    /**
+     * Label id passed from Select component
+     * @private
+     * @ignore
+     *
+     */
+    labelId?: string;
+}
+export interface SelectTextboxProps extends FormInputPropTypes {
+    /** Id attribute of the select list */
+    "aria-controls"?: string;
+    /** Value to be displayed in the Textbox */
+    formattedValue?: string;
+    /** If true, the input will be displayed */
+    hasTextCursor?: boolean;
+    /** If true, the list is displayed */
+    isOpen?: boolean;
+    /** Value of the Select Input */
+    selectedValue?: string | Record<string, unknown> | string[] | Record<string, unknown>[];
+    /** @private @ignore */
+    textboxRef?: HTMLInputElement | null;
+    /** @private @ignore */
+    transparent?: boolean;
+    /** @private @ignore */
+    activeDescendantId?: string;
+}
+declare const SelectTextbox: React.ForwardRefExoticComponent<SelectTextboxProps & React.RefAttributes<HTMLInputElement>>;
+export default SelectTextbox;