@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/TextInput/TextInput.js

@@ -14,36 +14,35 @@ import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { useAnnouncer } from '../../internal/useAnnouncer.js';
+import { getAnnouncement } from '../../internal/getAnnouncement.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
-  let {
-    className,
-    decorator,
-    disabled = false,
-    helperText,
-    hideLabel,
-    id,
-    inline = false,
-    invalid = false,
-    invalidText,
-    labelText,
-    light,
-    onChange = () => {},
-    onClick = () => {},
-    placeholder,
-    readOnly,
-    size,
-    type = 'text',
-    warn = false,
-    warnText,
-    enableCounter = false,
-    maxCount,
-    slug,
-    ...rest
-  } = _ref;
+const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
+  className,
+  decorator,
+  disabled = false,
+  helperText,
+  hideLabel,
+  id,
+  inline = false,
+  invalid = false,
+  invalidText,
+  labelText,
+  light,
+  onChange = () => {},
+  onClick = () => {},
+  placeholder,
+  readOnly,
+  size,
+  type = 'text',
+  warn = false,
+  warnText,
+  enableCounter = false,
+  maxCount,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const {
     defaultValue,
@@ -154,7 +153,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
   } = useContext(FormContext);
   const announcerRef = useRef(null);
   const [prevAnnouncement, setPrevAnnouncement] = useState('');
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = getAnnouncement(textCount, maxCount);
   useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current;

package/es/components/TextInput/util.js

@@ -21,22 +21,19 @@ const helperProps = helperId => ({
  * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
  * @returns {object}
  */
-const textInputProps = _ref => {
-  let {
-    sharedTextInputProps,
-    invalid,
-    invalidId,
-    warn,
-    warnId,
-    hasHelper,
-    helperId
-  } = _ref;
-  return {
-    ...sharedTextInputProps,
-    ...(invalid ? invalidProps(invalidId) : {}),
-    ...(warn ? warnProps(warnId) : {}),
-    ...(hasHelper ? helperProps(helperId) : {})
-  };
-};
+const textInputProps = ({
+  sharedTextInputProps,
+  invalid,
+  invalidId,
+  warn,
+  warnId,
+  hasHelper,
+  helperId
+}) => ({
+  ...sharedTextInputProps,
+  ...(invalid ? invalidProps(invalidId) : {}),
+  ...(warn ? warnProps(warnId) : {}),
+  ...(hasHelper ? helperProps(helperId) : {})
+});
 
 export { textInputProps };

package/es/components/Theme/index.js

@@ -16,11 +16,10 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 const ThemeContext = /*#__PURE__*/React.createContext({
   theme: 'white'
 });
-const GlobalTheme = /*#__PURE__*/React.forwardRef(function GlobalTheme(_ref, ref) {
-  let {
-    children,
-    theme
-  } = _ref;
+const GlobalTheme = /*#__PURE__*/React.forwardRef(function GlobalTheme({
+  children,
+  theme
+}, ref) {
   const value = useMemo(() => {
     return {
       theme
@@ -47,13 +46,12 @@ GlobalTheme.propTypes = {
 /**
  * Specify the theme to be applied to a page, or a region in a page
  */
-function Theme(_ref2) {
-  let {
-    as: BaseComponent = 'div',
-    className: customClassName,
-    theme,
-    ...rest
-  } = _ref2;
+function Theme({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  theme,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(customClassName, {
     [`${prefix}--white`]: theme === 'white',

package/es/components/Tile/Tile.js

@@ -25,16 +25,15 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React.forwardRef(function Tile(_ref, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    light = false,
-    slug,
-    hasRoundedCorners = false,
-    ...rest
-  } = _ref;
+const Tile = /*#__PURE__*/React.forwardRef(function Tile({
+  children,
+  className,
+  decorator,
+  light = false,
+  slug,
+  hasRoundedCorners = false,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const tileClasses = cx(`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
@@ -81,22 +80,21 @@ Tile.propTypes = {
    */
   slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
-const ClickableTile = /*#__PURE__*/React.forwardRef(function ClickableTile(_ref2, ref) {
-  let {
-    children,
-    className,
-    clicked = false,
-    decorator,
-    disabled,
-    href,
-    light,
-    onClick = () => {},
-    onKeyDown = () => {},
-    renderIcon: Icon,
-    hasRoundedCorners,
-    slug,
-    ...rest
-  } = _ref2;
+const ClickableTile = /*#__PURE__*/React.forwardRef(function ClickableTile({
+  children,
+  className,
+  clicked = false,
+  decorator,
+  disabled,
+  href,
+  light,
+  onClick = () => {},
+  onKeyDown = () => {},
+  renderIcon: Icon,
+  hasRoundedCorners,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
     [`${prefix}--tile--is-clicked`]: clicked,
@@ -205,24 +203,23 @@ ClickableTile.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile(_ref3, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    disabled,
-    id,
-    light,
-    onClick = () => {},
-    onChange = () => {},
-    onKeyDown = () => {},
-    selected = false,
-    tabIndex = 0,
-    title = 'title',
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref3;
+const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
+  children,
+  className,
+  decorator,
+  disabled,
+  id,
+  light,
+  onClick = () => {},
+  onChange = () => {},
+  onKeyDown = () => {},
+  selected = false,
+  tabIndex = 0,
+  title = 'title',
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
@@ -372,28 +369,27 @@ SelectableTile.propTypes = {
    */
   value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile(_ref4, forwardRef) {
-  let {
-    tabIndex = 0,
-    className,
-    children,
-    decorator,
-    expanded = false,
-    tileMaxHeight = 0,
-    // eslint-disable-line
-    tilePadding = 0,
-    // eslint-disable-line
-    onClick,
-    onKeyUp,
-    tileCollapsedIconText = 'Interact to expand Tile',
-    tileExpandedIconText = 'Interact to collapse Tile',
-    tileCollapsedLabel,
-    tileExpandedLabel,
-    light,
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref4;
+const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile({
+  tabIndex = 0,
+  className,
+  children,
+  decorator,
+  expanded = false,
+  tileMaxHeight = 0,
+  // eslint-disable-line
+  tilePadding = 0,
+  // eslint-disable-line
+  onClick,
+  onKeyUp,
+  tileCollapsedIconText = 'Interact to expand Tile',
+  tileExpandedIconText = 'Interact to collapse Tile',
+  tileCollapsedLabel,
+  tileExpandedLabel,
+  light,
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, forwardRef) {
   const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = useState(expanded);
@@ -619,10 +615,9 @@ ExpandableTile.propTypes = {
   tileExpandedLabel: PropTypes.string
 };
 ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  let {
-    children
-  } = _ref5;
+const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(function TilAboveTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -636,10 +631,9 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes.node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  let {
-    children
-  } = _ref6;
+const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(function TileBelowTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/es/components/Toggle/Toggle.Skeleton.js

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/Toggle/Toggle.js

@@ -15,24 +15,23 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _path;
-function Toggle(_ref) {
-  let {
-    'aria-labelledby': ariaLabelledby,
-    className,
-    defaultToggled = false,
-    disabled = false,
-    hideLabel = false,
-    id,
-    labelA = 'Off',
-    labelB = 'On',
-    labelText,
-    onClick,
-    onToggle,
-    readOnly,
-    size = 'md',
-    toggled,
-    ...other
-  } = _ref;
+function Toggle({
+  'aria-labelledby': ariaLabelledby,
+  className,
+  defaultToggled = false,
+  disabled = false,
+  hideLabel = false,
+  id,
+  labelA = 'Off',
+  labelB = 'On',
+  labelText,
+  onClick,
+  onToggle,
+  readOnly,
+  size = 'md',
+  toggled,
+  ...other
+}) {
   const prefix = usePrefix();
   const buttonElement = useRef(null);
   const [checked, setChecked] = useControllableState({

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -12,13 +12,12 @@ import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = useContext(PrefixContext);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)

package/es/components/Toggletip/index.js

@@ -19,13 +19,12 @@ import { usePrefix } from '../../internal/usePrefix.js';
 /**
  * Used to render the label for a Toggletip
  */
-function ToggletipLabel(_ref) {
-  let {
-    as: BaseComponent = 'span',
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function ToggletipLabel({
+  as: BaseComponent = 'span',
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
@@ -60,16 +59,15 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-function Toggletip(_ref2) {
-  let {
-    align,
-    as,
-    autoAlign,
-    className: customClassName,
-    children,
-    defaultOpen = false,
-    ...rest
-  } = _ref2;
+function Toggletip({
+  align,
+  as,
+  autoAlign,
+  className: customClassName,
+  children,
+  defaultOpen = false,
+  ...rest
+}) {
   const ref = useRef(null);
   const [open, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
@@ -127,10 +125,9 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useWindowEvent('click', _ref3 => {
-    let {
-      target
-    } = _ref3;
+  useWindowEvent('click', ({
+    target
+  }) => {
     if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
@@ -209,14 +206,13 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React.forwardRef(function ToggletipButton(_ref4, ref) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref4;
+const ToggletipButton = /*#__PURE__*/React.forwardRef(function ToggletipButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
@@ -254,11 +250,10 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent(_ref5, ref) {
-  let {
-    children,
-    className: customClassName
-  } = _ref5;
+const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent({
+  children,
+  className: customClassName
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(PopoverContent, _extends({
@@ -286,11 +281,10 @@ ToggletipContent.displayName = 'ToggletipContent';
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-function ToggletipActions(_ref6) {
-  let {
-    children,
-    className: customClassName
-  } = _ref6;
+function ToggletipActions({
+  children,
+  className: customClassName
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React.createElement("div", {

package/es/components/Tooltip/DefinitionTooltip.js

@@ -16,20 +16,19 @@ import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const DefinitionTooltip = _ref => {
-  let {
-    align = 'bottom',
-    autoAlign,
-    className,
-    children,
-    definition,
-    defaultOpen = false,
-    id,
-    openOnHover,
-    tooltipText,
-    triggerClassName,
-    ...rest
-  } = _ref;
+const DefinitionTooltip = ({
+  align = 'bottom',
+  autoAlign,
+  className,
+  children,
+  definition,
+  defaultOpen = false,
+  id,
+  openOnHover,
+  tooltipText,
+  triggerClassName,
+  ...rest
+}) => {
   const [isOpen, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
   const tooltipId = useFallbackId(id);

package/es/components/Tooltip/Tooltip.js

@@ -22,22 +22,21 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    as,
-    align = 'top',
-    className: customClassName,
-    children,
-    label,
-    description,
-    enterDelayMs = 100,
-    leaveDelayMs = 300,
-    defaultOpen = false,
-    closeOnActivation = false,
-    dropShadow = false,
-    highContrast = true,
-    ...rest
-  } = _ref;
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  as,
+  align = 'top',
+  className: customClassName,
+  children,
+  label,
+  description,
+  enterDelayMs = 100,
+  leaveDelayMs = 300,
+  defaultOpen = false,
+  closeOnActivation = false,
+  dropShadow = false,
+  highContrast = true,
+  ...rest
+}, ref) => {
   const tooltipRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = useState(false);

package/es/components/TreeView/TreeNode.js

@@ -17,27 +17,26 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { uniqueId } from '../../tools/uniqueId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
-const TreeNode = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
-  let {
-    active,
-    children,
-    className,
-    depth: propDepth,
-    disabled,
-    id: nodeId,
-    isExpanded,
-    defaultIsExpanded,
-    label,
-    onNodeFocusEvent,
-    onSelect: onNodeSelect,
-    onToggle,
-    onTreeSelect,
-    renderIcon: Icon,
-    selected: propSelected,
-    value,
-    href,
-    ...rest
-  } = _ref;
+const TreeNode = /*#__PURE__*/React.forwardRef(({
+  active,
+  children,
+  className,
+  depth: propDepth,
+  disabled,
+  id: nodeId,
+  isExpanded,
+  defaultIsExpanded,
+  label,
+  onNodeFocusEvent,
+  onSelect: onNodeSelect,
+  onToggle,
+  onTreeSelect,
+  renderIcon: Icon,
+  selected: propSelected,
+  value,
+  href,
+  ...rest
+}, forwardedRef) => {
   // These are provided by the parent TreeView component
   const depth = propDepth;
   const selected = propSelected;