@carbon/react 1.24.0 → 1.25.0

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,8 +13,8 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var warning = require('../../internal/warning.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -54,14 +54,14 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
 
   function setTabFocus(evt) {
     if (match.match(evt, keys.ArrowDown)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
         currentIndex: index,
         direction: 1
       });
     }
 
     if (match.match(evt, keys.ArrowUp)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
         currentIndex: index,
         direction: -1
       });
@@ -101,17 +101,22 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
     className: overflowMenuBtnClasses,
     disabled: disabled,
     href: href,
-    index: index,
     onClick: handleClick,
     onKeyDown: function onKeyDown(evt) {
       setTabFocus(evt);
 
       _onKeyDown(evt);
     },
-    role: "menuitem",
+    role: "menuitem" // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
+    // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
+    // so we have to use `any` here
+    ,
     ref: ref,
-    tabIndex: "-1",
-    title: requireTitle ? title || itemText : null
+    tabIndex: -1 // itemText as any: itemText may be a ReactNode, but `title` only accepts string
+    // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
+    // in the next major release
+    ,
+    title: requireTitle ? title || itemText : undefined
   }, rest), OverflowMenuItemContent));
 });
 OverflowMenuItem.propTypes = {

package/lib/components/OverflowMenuV2/index.js

@@ -14,9 +14,10 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var useId = require('../../internal/useId.js');
 var Menu = require('../Menu/Menu.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,53 +40,16 @@ function OverflowMenuV2(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var id = useId.useId('overflowmenu');
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = React.useState([[0, 0], [0, 0]]),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1];
-
-  var triggerRef = React.useRef(null);
   var prefix = usePrefix.usePrefix();
+  var triggerRef = React.useRef(null);
 
-  function openMenu() {
-    if (triggerRef.current) {
-      var _triggerRef$current$g = triggerRef.current.getBoundingClientRect(),
-          left = _triggerRef$current$g.left,
-          top = _triggerRef$current$g.top,
-          right = _triggerRef$current$g.right,
-          bottom = _triggerRef$current$g.bottom;
-
-      setPosition([[left, right], [top, bottom]]);
-    }
-
-    setOpen(true);
-  }
-
-  function closeMenu() {
-    setOpen(false);
-  }
-
-  function handleClick() {
-    if (open) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-
-  function handleMousedown(e) {
-    // prevent default for mousedown on trigger element to avoid
-    // the "blur" event from firing on the menu as this would close
-    // it and immediately re-open since "click" event is fired after
-    // "blur" event.
-    e.preventDefault();
-  }
+  var _useAttachedMenu = useAttachedMenu.useAttachedMenu(triggerRef),
+      open = _useAttachedMenu.open,
+      x = _useAttachedMenu.x,
+      y = _useAttachedMenu.y,
+      handleClick = _useAttachedMenu.handleClick,
+      handleMousedown = _useAttachedMenu.handleMousedown,
+      handleClose = _useAttachedMenu.handleClose;
 
   var containerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__container"));
   var triggerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
@@ -106,9 +70,9 @@ function OverflowMenuV2(_ref) {
     id: id,
     size: size,
     open: open,
-    onClose: closeMenu,
-    x: position[0],
-    y: position[1]
+    onClose: handleClose,
+    x: x,
+    y: y
   }, children));
 }
 

package/lib/components/Popover/index.d.ts

@@ -13,7 +13,7 @@ interface PopoverBaseProps {
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
      */
     autoAlign?: boolean;
     /**
@@ -37,6 +37,10 @@ interface PopoverBaseProps {
      * Render the component using the high-contrast variant
      */
     highContrast?: boolean;
+    /**
+     * Render the component using the tab tip variant
+     */
+    isTabTip?: boolean;
     /**
      * Specify whether the component is currently open or closed
      */

package/lib/components/Popover/index.js

@@ -23,7 +23,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
+var _excluded = ["isTabTip", "align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
     _excluded2 = ["className", "children"];
 var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
   floating: {
@@ -33,13 +33,14 @@ var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
 var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, forwardRef) {
   var _cx;
 
-  var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+  var isTabTip = _ref.isTabTip,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? isTabTip ? 'bottom-left' : 'bottom' : _ref$align,
       as = _ref.as,
       _ref$autoAlign = _ref.autoAlign,
       autoAlign = _ref$autoAlign === void 0 ? false : _ref$autoAlign,
       _ref$caret = _ref.caret,
-      caret = _ref$caret === void 0 ? true : _ref$caret,
+      caret = _ref$caret === void 0 ? isTabTip ? false : true : _ref$caret,
       customClassName = _ref.className,
       children = _ref.children,
       _ref$dropShadow = _ref.dropShadow,
@@ -57,6 +58,15 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       floating: floating
     };
   }, []);
+
+  if (isTabTip) {
+    var tabTipAlignments = ['bottom-left', 'bottom-right'];
+
+    if (!tabTipAlignments.includes(align)) {
+      align = 'bottom-left';
+    }
+  }
+
   var ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
 
   var _useState = React.useState(false),
@@ -69,13 +79,13 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       autoAlignment = _useState4[0],
       setAutoAlignment = _useState4[1];
 
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _cx), customClassName);
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned && !isTabTip), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--tab-tip"), isTabTip), _cx), customClassName);
   useIsomorphicEffect["default"](function () {
     if (!open) {
       return;
     }
 
-    if (!autoAlign) {
+    if (!autoAlign || isTabTip) {
       setAutoAligned(false);
       return;
     }
@@ -166,14 +176,27 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       setAutoAligned(true);
       setAutoAlignment(alignment);
     }
-  }, [autoAligned, align, autoAlign, prefix, open]);
+  }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
   var BaseComponent = as !== null && as !== void 0 ? as : 'span';
+  var mappedChildren = React__default["default"].Children.map(children, function (child) {
+    var item = child;
+
+    if ((item === null || item === void 0 ? void 0 : item.type) === 'button') {
+      var _className = item.props.className;
+      var tabTipClasses = cx__default["default"]("".concat(prefix, "--popover--tab-tip__button"), _className);
+      return /*#__PURE__*/React__default["default"].cloneElement(item, {
+        className: tabTipClasses
+      });
+    } else {
+      return item;
+    }
+  });
   return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), children));
+  }), isTabTip ? mappedChildren : children));
 }); // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
 
@@ -194,7 +217,7 @@ Popover.propTypes = {
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes__default["default"].bool,
 
@@ -224,6 +247,11 @@ Popover.propTypes = {
    */
   highContrast: PropTypes__default["default"].bool,
 
+  /**
+   * Render the component using the tab tip variant
+   */
+  isTabTip: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the component is currently open or closed
    */

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -22,6 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _excluded = ["children", "className", "defaultSelected", "disabled", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected"];
 var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function RadioButtonGroup(_ref, ref) {
   var _classNames;
 
@@ -38,7 +39,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
       _ref$orientation = _ref.orientation,
       orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
       readOnly = _ref.readOnly,
-      valueSelected = _ref.valueSelected;
+      valueSelected = _ref.valueSelected,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
   var prefix = usePrefix.usePrefix();
 
   var _useState = React.useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
@@ -95,11 +98,11 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
     ref: ref
-  }, /*#__PURE__*/React__default["default"].createElement("fieldset", {
+  }, /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
     className: fieldsetClasses,
     disabled: disabled,
     "aria-readonly": readOnly
-  }, legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
+  }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()));
 });

package/lib/components/RadioTile/RadioTile.js

@@ -29,8 +29,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _CheckmarkFilled;
 
 var _excluded = ["children", "className", "disabled", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
-
-function RadioTile(_ref) {
+var RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function RadioTile(_ref, ref) {
   var _cx;
 
   var children = _ref.children,
@@ -70,7 +69,8 @@ function RadioTile(_ref) {
     onKeyDown: !disabled ? handleOnKeyDown : null,
     tabIndex: !disabled ? tabIndex : null,
     type: "radio",
-    value: value
+    value: value,
+    ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
     htmlFor: inputId,
     className: className
@@ -79,8 +79,7 @@ function RadioTile(_ref) {
   }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, null))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--tile-content")
   }, children)));
-}
-
+});
 RadioTile.propTypes = {
   /**
    * `true` if this tile should be selected.
@@ -137,5 +136,6 @@ RadioTile.defaultProps = {
   onChange: function onChange() {},
   tabIndex: 0
 };
+var RadioTile$1 = RadioTile;
 
-exports["default"] = RadioTile;
+exports["default"] = RadioTile$1;

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+type ExcludedAttributes = 'size';
+interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline?: boolean;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the control.
+     */
+    labelText?: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     *
+     * @deprecated The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component.
+     * It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Reserved for use with <Pagination> component. Will not render a label for the
+     * select since Pagination renders one for us.
+     */
+    noLabel?: boolean;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of the underlying `<input>` changes.
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Select Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "hideLabel" | "light" | "invalid" | "invalidText" | "warn" | "warnText" | "helperText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/lib/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItem> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the <SelectItem> is hidden
+     */
+    hidden?: boolean;
+    /**
+     * Provide the contents of your <SelectItem>
+     */
+    text: string;
+    /**
+     * Specify the value of the <SelectItem>
+     */
+    value: any;
+}
+declare const SelectItem: {
+    ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItem> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the <SelectItem> is hidden
+         */
+        hidden: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the contents of your <SelectItem>
+         */
+        text: PropTypes.Validator<string>;
+        /**
+         * Specify the value of the <SelectItem>
+         */
+        value: PropTypes.Validator<any>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        hidden: boolean;
+        value: string;
+        text: string;
+    };
+};
+export default SelectItem;

package/lib/components/SelectItem/SelectItem.js

@@ -24,8 +24,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["className", "value", "disabled", "hidden", "text"];
 
 var SelectItem = function SelectItem(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       value = _ref.value,
       disabled = _ref.disabled,
@@ -34,7 +32,7 @@ var SelectItem = function SelectItem(_ref) {
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var selectItemClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select-option"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
+  var selectItemClasses = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--select-option"), true), className && _rollupPluginBabelHelpers.defineProperty({}, className, className)));
   return /*#__PURE__*/React__default["default"].createElement("option", _rollupPluginBabelHelpers["extends"]({}, other, {
     className: selectItemClasses,
     value: value,

package/lib/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SelectItemGroupProps extends HTMLAttributes<HTMLOptGroupElement> {
+    /**
+     * Provide the contents of your <SelectItemGroup>
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItemGroup> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the label to be displayed
+     */
+    label: string;
+}
+declare const SelectItemGroup: {
+    ({ children, className, disabled, label, ...other }: SelectItemGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the contents of your <SelectItemGroup>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <SelectItemGroup> should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the label to be displayed
+         */
+        label: PropTypes.Validator<string>;
+    };
+    defaultProps: {
+        disabled: boolean;
+        label: string | undefined;
+    };
+};
+export default SelectItemGroup;

package/lib/components/SkeletonText/SkeletonText.js

@@ -56,7 +56,7 @@ var SkeletonText = function SkeletonText(_ref) {
   useIsomorphicEffect["default"](function () {
     refs.current.map(function (item, j) {
       var randomPercentWidth = getRandomInt(0, 75, j) + 'px';
-      var randomPxWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
+      var randomPxWidth = getRandomInt(Math.max(widthNum - 75, 0), widthNum, j) + 'px';
 
       if (item) {
         if (widthPercent && paragraph) {

package/lib/components/StructuredList/StructuredList.js

@@ -23,7 +23,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
+var _StructuredListWrappe;
+
+var _excluded = ["children", "selection", "className", "aria-label", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
     _excluded4 = ["onKeyDown", "children", "className", "head"],
@@ -37,7 +39,8 @@ function StructuredListWrapper(props) {
   var children = props.children,
       selection = props.selection,
       className = props.className,
-      ariaLabel = props.ariaLabel,
+      ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
       isFlush = props.isFlush,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
@@ -58,46 +61,15 @@ function StructuredListWrapper(props) {
     role: "table",
     className: classes
   }, other, {
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }), children)));
 }
-StructuredListWrapper.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the container node
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * Provide the contents of your StructuredListWrapper
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify if structured list is condensed, default is false
-   */
-  isCondensed: PropTypes__default["default"].bool,
-
-  /**
-   * Specify if structured list is flush, default is false
-   */
-  isFlush: PropTypes__default["default"].bool,
-
-  /**
-   * Specify whether your StructuredListWrapper should have selections
-   */
-  selection: PropTypes__default["default"].bool
-};
-StructuredListWrapper.defaultProps = {
+StructuredListWrapper.propTypes = (_StructuredListWrappe = {}, _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isCondensed", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isFlush", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "selection", PropTypes__default["default"].bool), _StructuredListWrappe);
+StructuredListWrapper.defaultProps = _rollupPluginBabelHelpers.defineProperty({
   selection: false,
   isCondensed: false,
-  isFlush: false,
-  ariaLabel: 'Structured list section'
-};
+  isFlush: false
+}, 'aria-label', 'Structured list section');
 function StructuredListHead(props) {
   var children = props.children,
       className = props.className,