@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/Tile/Tile.js

@@ -35,16 +35,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    light = false,
-    slug,
-    hasRoundedCorners = false,
-    ...rest
-  } = _ref;
+const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile({
+  children,
+  className,
+  decorator,
+  light = false,
+  slug,
+  hasRoundedCorners = false,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const tileClasses = cx__default["default"](`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
@@ -91,22 +90,21 @@ Tile.propTypes = {
    */
   slug: deprecate["default"](PropTypes__default["default"].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__default["default"].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__default["default"].forwardRef(function ClickableTile({
+  children,
+  className,
+  clicked = false,
+  decorator,
+  disabled,
+  href,
+  light,
+  onClick = () => {},
+  onKeyDown = () => {},
+  renderIcon: Icon,
+  hasRoundedCorners,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
     [`${prefix}--tile--is-clicked`]: clicked,
@@ -215,24 +213,23 @@ ClickableTile.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-const SelectableTile = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
@@ -382,28 +379,27 @@ SelectableTile.propTypes = {
    */
   value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React__default["default"].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__default["default"].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] = React.useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = React.useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = React.useState(expanded);
@@ -629,10 +625,9 @@ ExpandableTile.propTypes = {
   tileExpandedLabel: PropTypes__default["default"].string
 };
 ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  let {
-    children
-  } = _ref5;
+const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
@@ -646,10 +641,9 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes__default["default"].node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  let {
-    children
-  } = _ref6;
+const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Toggle/Toggle.js

@@ -25,24 +25,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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.usePrefix();
   const buttonElement = React.useRef(null);
   const [checked, setChecked] = useControllableState.useControllableState({

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -22,13 +22,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = React.useContext(usePrefix.PrefixContext);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)

package/lib/components/Toggletip/index.js

@@ -29,13 +29,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /**
  * 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.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
@@ -70,16 +69,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 = React.useRef(null);
   const [open, setOpen] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
@@ -137,10 +135,9 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useEvent.useWindowEvent('click', _ref3 => {
-    let {
-      target
-    } = _ref3;
+  useEvent.useWindowEvent('click', ({
+    target
+  }) => {
     if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
@@ -219,14 +216,13 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref4, ref) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref4;
+const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
@@ -264,11 +260,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__default["default"].forwardRef(function ToggletipContent(_ref5, ref) {
-  let {
-    children,
-    className: customClassName
-  } = _ref5;
+const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent({
+  children,
+  className: customClassName
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
@@ -296,11 +291,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.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -26,20 +26,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
   const tooltipId = useId.useFallbackId(id);

package/lib/components/Tooltip/Tooltip.js

@@ -32,22 +32,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-const Tooltip = /*#__PURE__*/React__default["default"].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__default["default"].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 = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = React.useState(false);

package/lib/components/TreeView/TreeNode.js

@@ -27,27 +27,26 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TreeNode = /*#__PURE__*/React__default["default"].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__default["default"].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;

package/lib/components/TreeView/TreeView.js

@@ -27,20 +27,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TreeView = _ref => {
-  let {
-    active: prespecifiedActive,
-    children,
-    className,
-    hideLabel = false,
-    label,
-    multiselect = false,
-    onActivate,
-    onSelect,
-    selected: preselected,
-    size = 'sm',
-    ...rest
-  } = _ref;
+const TreeView = ({
+  active: prespecifiedActive,
+  children,
+  className,
+  hideLabel = false,
+  label,
+  multiselect = false,
+  onActivate,
+  onSelect,
+  selected: preselected,
+  size = 'sm',
+  ...rest
+}) => {
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
@@ -75,8 +74,7 @@ const TreeView = _ref => {
       item.tabIndex = -1;
     });
   }
-  function handleTreeSelect(event) {
-    let node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  function handleTreeSelect(event, node = {}) {
     const nodeId = node.id;
     if (multiselect && (event.metaKey || event.ctrlKey)) {
       if (!selected.includes(nodeId)) {

package/lib/components/UIShell/Content.js

@@ -20,13 +20,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Content = _ref => {
-  let {
-    className: customClassName,
-    children,
-    tagName = 'main',
-    ...rest
-  } = _ref;
+const Content = ({
+  className: customClassName,
+  children,
+  tagName = 'main',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--content`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(tagName, {

package/lib/components/UIShell/Header.js

@@ -22,12 +22,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Header = _ref => {
-  let {
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+const Header = ({
+  className: customClassName,
+  children,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--header`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/UIShell/HeaderContainer.js

@@ -21,12 +21,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function HeaderContainer(_ref) {
-  let {
-    render: Children,
-    isSideNavExpanded = false,
-    ...rest
-  } = _ref;
+function HeaderContainer({
+  render: Children,
+  isSideNavExpanded = false,
+  ...rest
+}) {
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
   useEvent.useWindowEvent('keydown', event => {

package/lib/components/UIShell/HeaderGlobalAction.js

@@ -32,19 +32,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  *
  * Note: children passed to this component should be an Icon.
  */
-const HeaderGlobalAction = /*#__PURE__*/React__default["default"].forwardRef(function HeaderGlobalAction(_ref, ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    onClick,
-    tooltipHighContrast = true,
-    tooltipDropShadow,
-    isActive,
-    tooltipAlignment,
-    ...rest
-  } = _ref;
+const HeaderGlobalAction = /*#__PURE__*/React__default["default"].forwardRef(function HeaderGlobalAction({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  onClick,
+  tooltipHighContrast = true,
+  tooltipDropShadow,
+  isActive,
+  tooltipAlignment,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [customClassName]: !!customClassName,