@carbon/react 1.36.0 → 1.37.0-rc.1

package/es/components/ListBox/ListBoxMenu.d.ts

@@ -6,13 +6,13 @@
  */
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
-export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     /**
      * Specify a custom `id`
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLDivElement, ListBoxMenuProps>;
+export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given

package/es/components/ListBox/ListBoxMenu.js

@@ -23,7 +23,7 @@ const ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     id: id,
     className: `${prefix}--list-box__menu`,

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ForwardedRef } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
-export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify whether the current menu item is "active".
      */
@@ -15,8 +15,12 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the current menu item is "highlighted".
      */
     isHighlighted?: boolean;
+    /**
+     * Specify whether the item should be disabled
+     */
+    disabled?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;

package/es/components/ListBox/ListBoxMenuItem.js

@@ -42,10 +42,9 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined,
-    tabIndex: -1
+    title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
     ref: forwardedRef?.menuItemOptionRef || ref
@@ -58,6 +57,10 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes.node,
+  /**
+   * Specify if the item should be disabled
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify whether the current menu item is "active".
    */

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -33,6 +33,8 @@ import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/key
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
+    clearSelectionDescription,
+    clearSelectionText,
     compareItems,
     direction,
     disabled,
@@ -320,11 +322,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
+        const clearSelectionContent = selectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, ": 0");
         return /*#__PURE__*/React__default.createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+        }, labelProps), titleText, /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionContent)) : null, /*#__PURE__*/React__default.createElement(ListBox, {
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -385,12 +394,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           compareItems,
           locale
         }).map((item, index) => {
+          const isChecked = selectedItem.filter(selected => isEqual(selected, item)).length > 0;
           const itemProps = getItemProps({
             item,
-            disabled: item.disabled
+            disabled: item.disabled,
+            ['aria-selected']: isChecked
           });
           const itemText = itemToString(item);
-          const isChecked = selectedItem.filter(selected => isEqual(selected, item)).length > 0;
           return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
             key: itemProps.id,
             "aria-label": itemText,
@@ -423,6 +433,14 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes.string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes.string,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -544,7 +562,9 @@ FilterableMultiSelect.defaultProps = {
   locale: 'en',
   sortItems: defaultSortItems,
   open: false,
-  selectionFeedback: 'top-after-reopen'
+  selectionFeedback: 'top-after-reopen',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: '
 };
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -9,15 +9,13 @@ import React from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ListBoxProps } from '../ListBox/ListBox';
 import { OnChangeData } from '../Dropdown';
+import type { InternationalProps } from '../../types/common';
 interface SharedOptions {
     locale: string;
 }
 interface DownshiftTypedProps<ItemType> {
     itemToString?(item: ItemType): string;
 }
-interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
-    translateWithId?(messageId: MID, args?: ARGS): string;
-}
 interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
     compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
     selectedItems: ItemType[];

package/es/components/MultiSelect/MultiSelect.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
-import Downshift, { useSelect } from 'downshift';
+import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState } from 'react';
@@ -24,18 +24,22 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Delete, Escape, Space, ArrowDown } from '../../internal/keyboard/keys.js';
+import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
 const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  MenuKeyDownSpaceButton,
-  ToggleButtonClick
+  ToggleButtonBlur,
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownEnter,
+  ToggleButtonKeyDownEscape,
+  ToggleButtonKeyDownSpaceButton,
+  ItemMouseMove,
+  ToggleButtonClick,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -49,7 +53,7 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_ref, ref) {
+const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
     id,
@@ -92,7 +96,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   const {
     current: multiSelectInstanceId
   } = useRef(getInstanceId());
-  const [highlightedIndex, setHighlightedIndex] = useState();
   const [isFocused, setIsFocused] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(open || false);
@@ -108,31 +111,46 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     onChange,
     selectedItems: selected
   });
-  const {
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getItemProps,
-    selectedItem
-  } = useSelect({
+  const selectProps = {
     ...downshiftProps,
-    highlightedIndex,
+    stateReducer,
     isOpen,
     itemToString: items => {
       return Array.isArray(items) && items.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
-    onStateChange,
     selectedItem: controlledSelectedItems,
-    items
-  });
+    items,
+    isItemDisabled(item, _index) {
+      return item.disabled;
+    }
+  };
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem,
+    highlightedIndex
+  } = useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
       setInputFocused(true);
     },
     onBlur: () => {
       setInputFocused(false);
+    },
+    onKeyDown: e => {
+      if (!disabled) {
+        if ((match(e, Delete) || match(e, Escape)) && !isOpen) {
+          clearSelection();
+          e.stopPropagation();
+        }
+        if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setIsOpenWrapper(true);
+        }
+      }
     }
   });
   const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
@@ -198,47 +216,54 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   } else if (selectionFeedback === 'top-after-reopen') {
     sortOptions.selectedItems = topItems;
   }
-  function onStateChange(changes) {
-    if (changes.isOpen && !isOpen) {
-      setTopItems(controlledSelectedItems);
-    }
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
+    }
     switch (type) {
       case ItemClick:
-      case MenuKeyDownSpaceButton:
+      case ToggleButtonKeyDownSpaceButton:
+      case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
           break;
         }
         onItemChange(changes.selectedItem);
-        break;
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case ToggleButtonBlur:
+      case ToggleButtonKeyDownEscape:
         setIsOpenWrapper(false);
-        setHighlightedIndex(changes.highlightedIndex);
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        setHighlightedIndex(changes.highlightedIndex);
         break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
-  const onKeyDown = e => {
-    if (!disabled) {
-      if (match(e, Delete) || match(e, Escape)) {
-        clearSelection();
-        e.stopPropagation();
-      }
-      if (match(e, Space) || match(e, ArrowDown)) {
-        setIsOpenWrapper(true);
-      }
-    }
-  };
   const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
@@ -303,17 +328,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     "aria-disabled": disabled || readOnly,
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
-    ref: mergedRef,
-    onKeyDown: onKeyDown
+    ref: mergedRef
   }, readOnlyEventHandlers), /*#__PURE__*/React__default.createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
-    "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen &&
+  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
@@ -321,8 +343,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
       item,
       // we don't want Downshift to set aria-selected for us
       // we also don't want to set 'false' for reader verbosity's sake
-      ['aria-selected']: isChecked ? true : undefined,
-      disabled: item.disabled
+      ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
@@ -330,7 +351,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
       isActive: isChecked,
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index,
-      title: itemText
+      title: itemText,
+      disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React__default.createElement("span", {
@@ -373,8 +395,7 @@ MultiSelect.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes.shape(Downshift.propTypes),
+  downshiftProps: PropTypes.object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/es/components/NumberInput/NumberInput.d.ts

@@ -128,5 +128,5 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     warnText?: ReactNode;
 }
-declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInput };

package/es/components/NumberInput/NumberInput.js

@@ -149,6 +149,22 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
   const Icon = normalizedProps.icon;
+  function handleStepperClick(event, direction) {
+    if (inputRef.current) {
+      direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
+      const state = {
+        value: Number(inputRef.current.value),
+        direction: direction
+      };
+      setValue(state.value);
+      if (onChange) {
+        onChange(event, state);
+      }
+      if (onClick) {
+        onClick(event, state);
+      }
+    }
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -204,19 +220,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     "aria-label": decrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) - step),
-        direction: 'down'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'down'),
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -228,19 +232,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     "aria-label": incrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) + step),
-        direction: 'up'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'up'),
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -467,22 +459,4 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-/**
- * Clamp the given value between the upper bound `max` and the lower bound `min`
- *
- * 16 digit min/max more precise than Infinity. Somewhere in 9 quadrillion,
- * there will be integer display issues at runtime. 9quad is a safe cutoff.
- * @param {number} max
- * @param {number} min
- * @param {number} value
- */
-const boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
-
-function clamp() {
-  let max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
-  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
-  let value = arguments.length > 2 ? arguments[2] : undefined;
-  return Math.min(max, Math.max(min, value));
-}
-
 export { NumberInput, translationIds };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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';
+export interface SkeletonPlaceholderProps {
+    /**
+     * Add a custom class to the component to set the height and width
+     */
+    className?: string;
+}
+declare const SkeletonPlaceholder: {
+    ({ className, ...other }: SkeletonPlaceholderProps): JSX.Element;
+    propTypes: {
+        /**
+         * Add a custom class to the component
+         * to set the height and width
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default SkeletonPlaceholder;

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -18,9 +18,8 @@ const SkeletonPlaceholder = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const skeletonPlaceholderClasses = cx({
-    [`${prefix}--skeleton__placeholder`]: true,
-    [className]: className
-  });
+    [`${prefix}--skeleton__placeholder`]: true
+  }, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: skeletonPlaceholderClasses
   }, other));
@@ -32,6 +31,5 @@ SkeletonPlaceholder.propTypes = {
    */
   className: PropTypes.string
 };
-var SkeletonPlaceholder$1 = SkeletonPlaceholder;
 
-export { SkeletonPlaceholder$1 as default };
+export { SkeletonPlaceholder as default };

package/es/components/SkeletonPlaceholder/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 SkeletonPlaceholder from './SkeletonPlaceholder';
+export default SkeletonPlaceholder;
+export { SkeletonPlaceholder };

package/es/components/Slider/Slider.d.ts

@@ -300,6 +300,12 @@ export default class Slider extends PureComponent<SliderProps> {
      * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
      */
     clamp(val: any, min: any, max: any): number;
+    /**
+     * Takes a value and ensures it fits to the steps of the range
+     * @param value
+     * @returns value of the nearest step
+     */
+    nearestStepValue(value: any): number;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"

package/es/components/Slider/Slider.js

@@ -129,7 +129,7 @@ class Slider extends PureComponent {
         clientX
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -178,7 +178,7 @@ class Slider extends PureComponent {
         value: (delta > 0 ? Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step) : this.state.value) + delta
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -388,6 +388,21 @@ class Slider extends PureComponent {
   clamp(val, min, max) {
     return Math.max(min, Math.min(val, max));
   }
+
+  /**
+   * Takes a value and ensures it fits to the steps of the range
+   * @param value
+   * @returns value of the nearest step
+   */
+  nearestStepValue(value) {
+    const tempInput = document.createElement('input');
+    tempInput.type = 'range';
+    tempInput.min = `${this.props.min}`;
+    tempInput.max = `${this.props.max}`;
+    tempInput.step = `${this.props.step}`;
+    tempInput.value = `${value}`;
+    return parseFloat(tempInput.value);
+  }
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {

package/es/components/StructuredList/StructuredList.js

@@ -161,11 +161,14 @@ function StructuredListRow(props) {
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
-    className: classes
+    className: classes,
+    "aria-busy": "true"
   }), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default.createElement("div", _extends({}, other, {
+  React__default.createElement("div", _extends({
+    "aria-busy": "true"
+  }, other, {
     role: "row",
     className: classes,
     onClick: () => {

package/es/components/Tag/Tag.Skeleton.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 React from 'react';
+export interface TagSkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm` or
+     * default sizes.
+     */
+    size?: 'sm';
+}
+declare function TagSkeleton({ className, size, ...rest }: TagSkeletonProps): JSX.Element;
+declare namespace TagSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm` or
+         * default sizes.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+}
+export default TagSkeleton;
+export { TagSkeleton };