@carbon/react 1.44.0 → 1.45.0-rc.0

package/es/components/Slider/SliderHandles.js

@@ -0,0 +1,65 @@
+/**
+ * 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 { PrefixContext } from '../../internal/usePrefix.js';
+import React__default from 'react';
+
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
+const LowerHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
+}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path2 || (_path2 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
+}, _path3 || (_path3 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path4 || (_path4 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path5 || (_path5 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 0H16v6.46h-.92z"
+})), _path6 || (_path6 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
+})), _path7 || (_path7 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
+}))));
+const UpperHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
+}, _path8 || (_path8 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path9 || (_path9 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const UpperHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
+}, _path10 || (_path10 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path11 || (_path11 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path12 || (_path12 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M.92 24H0v-6.46h.92z"
+})), _path13 || (_path13 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
+})), _path14 || (_path14 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
+}))));
+
+export { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus };

package/es/components/Tabs/Tabs.js

@@ -257,7 +257,7 @@ function TabList(_ref2) {
     }
   }, [scrollLeft, children, dismissable]);
   useEffectOnce(() => {
-    if (tabs.current[selectedIndex].disabled) {
+    if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
       });

package/es/components/TextArea/TextArea.d.ts

@@ -25,7 +25,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      */
     disabled?: boolean;
     /**
-     * Specify whether to display the character counter
+     * Specify whether to display the counter
      */
     enableCounter?: boolean;
     /**
@@ -60,7 +60,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      */
     light?: boolean;
     /**
-     * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+     * Max entity count allowed for the textarea. This is needed in order for enableCounter to display
      */
     maxCount?: number;
     /**
@@ -86,7 +86,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      */
     rows?: number;
     /**
-     * Provide a `Slug` component to be rendered inside the `TextArea` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
      */
     slug?: ReactNodeLike;
     /**
@@ -101,6 +101,10 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: ReactNodeLike;
+    /**
+     * Specify the method used for calculating the counter number
+     */
+    counterMode?: 'character' | 'word';
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
 export default TextArea;

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -39,6 +39,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     placeholder = '',
     enableCounter = false,
     maxCount = undefined,
+    counterMode = 'character',
     warn = false,
     warnText = '',
     rows = 4,
@@ -53,15 +54,25 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     defaultValue,
     value
   } = other;
-  const [textCount, setTextCount] = useState(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   const {
     current: textAreaInstanceId
   } = useRef(getInstanceId());
   const textareaRef = useRef(null);
   const ref = useMergedRefs([forwardRef, textareaRef]);
+  function getInitialTextCount() {
+    const targetValue = defaultValue || value || textareaRef.current?.value || '';
+    const strValue = targetValue.toString();
+    if (counterMode === 'character') {
+      return strValue.length;
+    } else {
+      return strValue.match(/\w+/g)?.length || 0;
+    }
+  }
+  const [textCount, setTextCount] = useState(getInitialTextCount());
   useEffect(() => {
-    setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
-  }, [value, defaultValue]);
+    setTextCount(getInitialTextCount());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, defaultValue, counterMode]);
   useIsomorphicEffect(() => {
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
@@ -72,14 +83,63 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   }, [other.cols]);
   const textareaProps = {
     id,
+    onKeyDown: evt => {
+      if (!disabled && enableCounter && counterMode === 'word') {
+        const key = evt.which;
+        if (maxCount && textCount >= maxCount && key === 32) {
+          evt.preventDefault();
+        }
+      }
+    },
+    onPaste: evt => {
+      if (!disabled) {
+        if (counterMode === 'word' && enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+          const existingWords = textareaRef.current.value.match(/\w+/g) || [];
+          const pastedWords = evt.clipboardData.getData('Text').match(/\w+/g) || [];
+          const totalWords = existingWords.length + pastedWords.length;
+          if (totalWords > maxCount) {
+            evt.preventDefault();
+            const allowedWords = existingWords.concat(pastedWords).slice(0, maxCount);
+            setTimeout(() => {
+              setTextCount(maxCount);
+            }, 0);
+            textareaRef.current.value = allowedWords.join(' ');
+          }
+        }
+      }
+    },
     onChange: evt => {
-      if (!disabled && onChange) {
-        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);
-        }, 0);
-        onChange(evt);
+      if (!disabled) {
+        if (counterMode == 'character') {
+          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);
+          }, 0);
+        } else if (counterMode == 'word') {
+          if (!evt.target.value) {
+            setTimeout(() => {
+              setTextCount(0);
+            }, 0);
+            return;
+          }
+          if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+            const matchedWords = evt.target?.value?.match(/\w+/g);
+            if (matchedWords && matchedWords.length <= maxCount) {
+              textareaRef.current.removeAttribute('maxLength');
+              setTimeout(() => {
+                setTextCount(matchedWords.length);
+              }, 0);
+            } else if (matchedWords && matchedWords.length > maxCount) {
+              setTimeout(() => {
+                setTextCount(matchedWords.length);
+              }, 0);
+            }
+          }
+        }
+        if (onChange) {
+          onChange(evt);
+        }
       }
     },
     onClick: evt => {
@@ -114,7 +174,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement(Text, {
+  const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
@@ -147,9 +207,12 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     ariaDescribedBy = helperId;
   }
   if (enableCounter) {
-    textareaProps.maxLength = maxCount;
+    // handle different counter mode
+    if (counterMode == 'character') {
+      textareaProps.maxLength = maxCount;
+    }
   }
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -197,6 +260,10 @@ TextArea.propTypes = {
    * Specify the `cols` attribute for the underlying `<textarea>` node
    */
   cols: PropTypes.number,
+  /**
+   * Specify the method used for calculating the counter number
+   */
+  counterMode: PropTypes.oneOf(['character', 'word']),
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -206,7 +273,7 @@ TextArea.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Specify whether to display the character counter
+   * Specify whether to display the counter
    */
   enableCounter: PropTypes.bool,
   /**
@@ -240,7 +307,7 @@ TextArea.propTypes = {
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `TextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
-   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   * Max entity count allowed for the textarea. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes.number,
   /**
@@ -266,7 +333,7 @@ TextArea.propTypes = {
    */
   rows: PropTypes.number,
   /**
-   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
   slug: PropTypes.node,
   /**

package/es/components/TextInput/TextInput.d.ts

@@ -87,7 +87,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
-     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/TextInput/TextInput.js

@@ -261,7 +261,7 @@ TextInput.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `TextInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Tile/Tile.d.ts

@@ -6,12 +6,12 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     /** @deprecated */
     light?: boolean;
     /**
-     * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+     * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
      * when `slug` prop is present
      */
     hasRoundedCorners?: boolean;
     /**
-     * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: ReactNodeLike;
 }
@@ -30,7 +30,7 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      */
     disabled?: boolean;
     /**
-     * Specify if the `ClickableTile` component should be rendered with rounded corners.
+     * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
      * Only valid when `slug` prop is present
      */
     hasRoundedCorners?: boolean;
@@ -57,7 +57,7 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      */
     rel?: string;
     /**
-     * Specify if a `Slug` icon should be rendered inside the `ClickableTile`
+     * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
      */
     slug?: boolean;
 }
@@ -72,7 +72,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     disabled?: boolean;
     /**
-     * Specify if the `SelectableTile` component should be rendered with rounded corners.
+     * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
      * Only valid when `slug` prop is present
      */
     hasRoundedCorners?: boolean;
@@ -102,7 +102,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     selected?: boolean;
     /**
-     * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: ReactNodeLike;
     /**
@@ -130,7 +130,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     expanded?: boolean;
     /**
-     * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
      * Only valid when `slug` prop is present
      */
     hasRoundedCorners?: boolean;
@@ -147,7 +147,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     onKeyUp?(event: KeyboardEvent): void;
     /**
-     * Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Tile/Tile.js

@@ -56,7 +56,7 @@ Tile.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
    * when `slug` prop is present
    */
   hasRoundedCorners: PropTypes.bool,
@@ -68,7 +68,7 @@ Tile.propTypes = {
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
-   * Provide a `Slug` component to be rendered inside the `Tile` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
    */
   slug: PropTypes.node
 };
@@ -173,7 +173,7 @@ ClickableTile.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
    * Only valid when `slug` prop is present
    */
   hasRoundedCorners: PropTypes.bool,
@@ -308,7 +308,7 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
    * Only valid when `slug` prop is present
    */
   hasRoundedCorners: PropTypes.bool,
@@ -343,7 +343,7 @@ SelectableTile.propTypes = {
    */
   selected: PropTypes.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
   slug: PropTypes.node,
   /**
@@ -573,6 +573,10 @@ ExpandableTile.propTypes = {
    * optional handler to trigger a function when a key is pressed
    */
   onKeyUp: PropTypes.func,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+   */
+  slug: PropTypes.node,
   /**
    * The `tabindex` attribute.
    */

package/es/components/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { useDelayedState } from '../../internal/useDelayedState.js';
 import { useId } from '../../internal/useId.js';
@@ -17,6 +17,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
+/**
+ * Event types that trigger a "drag" to stop.
+ */
+const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
 function Tooltip(_ref) {
   let {
     align = 'top',
@@ -33,6 +37,8 @@ function Tooltip(_ref) {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
   const id = useId('tooltip');
   const prefix = usePrefix();
   const child = React__default.Children.only(children);
@@ -41,7 +47,11 @@ function Tooltip(_ref) {
     onBlur: () => setOpen(false),
     onClick: () => closeOnActivation && setOpen(false),
     // This should be placed on the trigger in case the element is disabled
-    onMouseEnter
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown: onDragStart,
+    onMouseMove: onMouseMove,
+    onTouchStart: onDragStart
   };
   function getChildEventHandlers(childProps) {
     const eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
@@ -71,11 +81,34 @@ function Tooltip(_ref) {
     }
   }
   function onMouseEnter() {
+    setIsPointerIntersecting(true);
     setOpen(true, enterDelayMs);
   }
   function onMouseLeave() {
+    setIsPointerIntersecting(false);
+    if (isDragging) {
+      return;
+    }
     setOpen(false, leaveDelayMs);
   }
+  function onMouseMove(evt) {
+    if (evt.buttons === 1) {
+      setIsDragging(true);
+    } else {
+      setIsDragging(false);
+    }
+  }
+  function onDragStart() {
+    setIsDragging(true);
+  }
+  const onDragStop = useCallback(() => {
+    setIsDragging(false);
+    // Close the tooltip, unless the mouse pointer is within the bounds of the
+    // trigger.
+    if (!isPointerIntersecting) {
+      setOpen(false, leaveDelayMs);
+    }
+  }, [isPointerIntersecting, leaveDelayMs, setOpen]);
   useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
   useEffect(() => {
     if (containerRef !== null && containerRef.current) {
@@ -85,6 +118,19 @@ function Tooltip(_ref) {
       }
     }
   });
+  useEffect(() => {
+    if (isDragging) {
+      // Register drag stop handlers.
+      DRAG_STOP_EVENT_TYPES.forEach(eventType => {
+        document.addEventListener(eventType, onDragStop);
+      });
+    }
+    return () => {
+      DRAG_STOP_EVENT_TYPES.forEach(eventType => {
+        document.removeEventListener(eventType, onDragStop);
+      });
+    };
+  }, [isDragging, onDragStop]);
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
     align: align,
     className: cx(`${prefix}--tooltip`, customClassName),

package/es/components/UIShell/HeaderPanel.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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, { ReactNode } from 'react';
+interface HeaderPanelProps {
+    /**
+     * Specify whether focus and blur listeners are added. They are by default.
+     */
+    addFocusListeners?: boolean;
+    /**
+     * The content that will render inside of the `HeaderPanel`
+     */
+    children?: ReactNode;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+    /**
+     * Specify whether the panel is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Provide the `href` to the id of the element on your package that could
+     * be target.
+     */
+    href?: string;
+    /**
+     * An optional listener that is called a callback to collapse the HeaderPanel
+     */
+    onHeaderPanelFocus?: () => void;
+}
+declare const HeaderPanel: React.FC<HeaderPanelProps>;
+export default HeaderPanel;

package/es/components/UIShell/HeaderPanel.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import React__default, { useRef, useState } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -24,7 +24,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
     addFocusListeners = true,
     onHeaderPanelFocus = noopFn,
     href,
-    ...other
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const headerPanelReference = useRef(null);
@@ -61,12 +61,13 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
   useWindowEvent('click', () => {
     const focusedElement = document.activeElement;
     setLastClickedElement(focusedElement);
-    if (children.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelRef?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    const childJsxElement = children;
+    if (childJsxElement.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     ref: headerPanelRef
   }, eventHandlers), children);
@@ -99,6 +100,5 @@ HeaderPanel.propTypes = {
   onHeaderPanelFocus: PropTypes.func
 };
 HeaderPanel.displayName = 'HeaderPanel';
-var HeaderPanel$1 = HeaderPanel;
 
-export { HeaderPanel$1 as default };
+export { HeaderPanel as default };

package/es/index.js

@@ -54,6 +54,7 @@ export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { GridSettings } from './components/Grid/GridContext.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
+export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
@@ -157,7 +158,6 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
-export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
@@ -197,6 +197,7 @@ export { default as TableHeader } from './components/DataTable/TableHeader.js';
 export { default as TableRow } from './components/DataTable/TableRow.js';
 export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
 export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
+export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
 export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
 export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
 export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';

package/es/internal/useAnnouncer.js

@@ -6,9 +6,10 @@
  */
 
 function useAnnouncer(textCount, maxCount) {
+  let entityName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'characters';
   const lastTen = maxCount - 10;
   if (textCount >= lastTen) {
-    return `${maxCount - textCount} characters left.`;
+    return `${maxCount - textCount} ${entityName} left.`;
   }
 }
 

package/es/internal/useNoInteractiveChildren.js

@@ -74,7 +74,7 @@ function getRoleContent(node) {
  * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
  */
 function isFocusable(element) {
-  if (element.tabIndex < 0) {
+  if (element.tabIndex === undefined || element.tabIndex < 0) {
     return false;
   }
   if (element.disabled) {
@@ -85,12 +85,8 @@ function isFocusable(element) {
       return !!element.href && element.rel !== 'ignore';
     case 'INPUT':
       return element.type !== 'hidden';
-    case 'BUTTON':
-    case 'SELECT':
-    case 'TEXTAREA':
-      return true;
     default:
-      return false;
+      return true;
   }
 }