@carbon/react 1.36.0 → 1.37.0-rc.1

package/lib/components/MultiSelect/MultiSelect.js

@@ -33,7 +33,6 @@ var keys = require('../../internal/keyboard/keys.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -42,12 +41,16 @@ const noop = () => {};
 const getInstanceId = setupGetInstanceId["default"]();
 const {
   ItemClick,
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  MenuKeyDownSpaceButton,
-  ToggleButtonClick
+  ToggleButtonBlur,
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownEnter,
+  ToggleButtonKeyDownEscape,
+  ToggleButtonKeyDownSpaceButton,
+  ItemMouseMove,
+  ToggleButtonClick,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -61,7 +64,7 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function MultiSelect(_ref, ref) {
+const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
     id,
@@ -104,7 +107,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   const {
     current: multiSelectInstanceId
   } = React.useRef(getInstanceId());
-  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -120,31 +122,46 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     onChange,
     selectedItems: selected
   });
-  const {
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getItemProps,
-    selectedItem
-  } = Downshift.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
+  } = Downshift.useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
       setInputFocused(true);
     },
     onBlur: () => {
       setInputFocused(false);
+    },
+    onKeyDown: e => {
+      if (!disabled) {
+        if ((match.match(e, keys.Delete) || match.match(e, keys.Escape)) && !isOpen) {
+          clearSelection();
+          e.stopPropagation();
+        }
+        if ((match.match(e, keys.Space) || match.match(e, keys.ArrowDown) || match.match(e, keys.Enter)) && !isOpen) {
+          setIsOpenWrapper(true);
+        }
+      }
     }
   });
   const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
@@ -210,47 +227,54 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   } 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.match(e, keys.Delete) || match.match(e, keys.Escape)) {
-        clearSelection();
-        e.stopPropagation();
-      }
-      if (match.match(e, keys.Space) || match.match(e, keys.ArrowDown)) {
-        setIsOpenWrapper(true);
-      }
-    }
-  };
   const multiSelectFieldWrapperClasses = cx__default["default"](`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
@@ -315,17 +339,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     "aria-disabled": disabled || readOnly,
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
-    ref: mergedRef,
-    onKeyDown: onKeyDown
+    ref: mergedRef
   }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({
-    "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen &&
+  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
@@ -333,8 +354,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
       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["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
@@ -342,7 +362,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
       isActive: isChecked,
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index$1,
-      title: itemText
+      title: itemText,
+      disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -385,8 +406,7 @@ MultiSelect.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+  downshiftProps: PropTypes__default["default"].object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/lib/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/lib/components/NumberInput/NumberInput.js

@@ -159,6 +159,22 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     [`${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["default"].createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -214,19 +230,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "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"
@@ -238,19 +242,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "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"
@@ -477,23 +469,5 @@ 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));
-}
-
 exports.NumberInput = NumberInput;
 exports.translationIds = translationIds;

package/lib/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/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -28,9 +28,8 @@ const SkeletonPlaceholder = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const skeletonPlaceholderClasses = cx__default["default"]({
-    [`${prefix}--skeleton__placeholder`]: true,
-    [className]: className
-  });
+    [`${prefix}--skeleton__placeholder`]: true
+  }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: skeletonPlaceholderClasses
   }, other));
@@ -42,6 +41,5 @@ SkeletonPlaceholder.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SkeletonPlaceholder$1 = SkeletonPlaceholder;
 
-exports["default"] = SkeletonPlaceholder$1;
+exports["default"] = SkeletonPlaceholder;

package/lib/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/lib/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/lib/components/Slider/Slider.js

@@ -140,7 +140,7 @@ class Slider extends React.PureComponent {
         clientX
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -189,7 +189,7 @@ class Slider extends React.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
       });
@@ -399,6 +399,21 @@ class Slider extends React.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/lib/components/StructuredList/StructuredList.js

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

package/lib/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 };

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,122 @@
+/**
+ * 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';
+import { PolymorphicProps } from '../../types/common';
+declare const TYPES: {
+    red: string;
+    magenta: string;
+    purple: string;
+    blue: string;
+    cyan: string;
+    teal: string;
+    green: string;
+    gray: string;
+    'cool-gray': string;
+    'warm-gray': string;
+    'high-contrast': string;
+    outline: string;
+};
+export interface TagBaseProps {
+    /**
+     * Provide content to be rendered inside of a <Tag>
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the <Tag> is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determine if <Tag> is a filter/chip
+     */
+    filter?: boolean;
+    /**
+     * Specify the id for the tag.
+     */
+    id?: string;
+    /**
+     * Click handler for filter tag close button.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm` or
+     * 'md' (default) sizes.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Text to show on clear filters
+     */
+    title?: string;
+    /**
+     * Specify the type of the <Tag>
+     */
+    type?: keyof typeof TYPES;
+}
+export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
+declare const Tag: {
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    propTypes: {
+        /**
+         * Provide an alternative tag or component to use instead of the default
+         * wrapping element
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Provide content to be rendered inside of a <Tag>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the <Tag> is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Determine if <Tag> is a filter/chip
+         */
+        filter: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Click handler for filter tag close button.
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm` or
+         * 'md' (default) sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Text to show on clear filters
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the type of the <Tag>
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export declare const types: string[];
+export default Tag;

package/lib/components/Tag/Tag.js

@@ -65,6 +65,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type,
     [`${prefix}--tag--interactive`]: other.onClick && !filter
   });
+  const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -78,8 +79,8 @@ const Tag = _ref => {
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tag__label`,
-      title: typeof children === 'string' ? children : null
-    }, children !== null && children !== undefined ? children : TYPES[type]), /*#__PURE__*/React__default["default"].createElement("button", {
+      title: typeof children === 'string' ? children : undefined
+    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -96,8 +97,8 @@ const Tag = _ref => {
   }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement("span", {
-    title: typeof children === 'string' ? children : null
-  }, children !== null && children !== undefined ? children : TYPES[type]));
+    title: typeof children === 'string' ? children : undefined
+  }, children !== null && children !== undefined ? children : typeText));
 };
 Tag.propTypes = {
   /**
@@ -149,7 +150,6 @@ Tag.propTypes = {
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
 const types = Object.keys(TYPES);
-var Tag$1 = Tag;
 
-exports["default"] = Tag$1;
+exports["default"] = Tag;
 exports.types = types;

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

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

package/lib/components/TextArea/TextArea.js

@@ -69,7 +69,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     id,
     onChange: evt => {
       if (!other.disabled && onChange) {
-        evt.persist();
+        evt?.persist?.();
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
           setTextCount(evt.target?.value?.length);