@carbon/react 1.83.0 → 1.84.0

package/lib/components/BadgeIndicator/index.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    count,
-    ...rest
-  } = _ref;
+const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent({
+  className: customClassName,
+  count,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--badge-indicator`, customClassName, {
     [`${prefix}--badge-indicator--count`]: count

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -30,11 +30,10 @@ function Item() {
     className: `${prefix}--link`
   }, "\xA0"));
 }
-function BreadcrumbSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function BreadcrumbSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Button/Button.Skeleton.js

@@ -21,14 +21,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ButtonSkeleton = _ref => {
-  let {
-    className,
-    small = false,
-    href,
-    size = 'lg',
-    ...rest
-  } = _ref;
+const ButtonSkeleton = ({
+  className,
+  small = false,
+  href,
+  size = 'lg',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const buttonClasses = cx__default["default"](className, {
     [`${prefix}--skeleton`]: true,

package/lib/components/Button/ButtonBase.js

@@ -19,30 +19,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase(_ref, ref) {
-  let {
-    as,
-    children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
-    hasIconOnly = false,
-    href,
-    iconDescription,
-    isExpressive = false,
-    isSelected,
-    kind = 'primary',
-    onBlur,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    renderIcon: ButtonImageElement,
-    size,
-    tabIndex,
-    type = 'button',
-    ...rest
-  } = _ref;
+const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase({
+  as,
+  children,
+  className,
+  dangerDescription = 'danger',
+  disabled = false,
+  hasIconOnly = false,
+  href,
+  iconDescription,
+  isExpressive = false,
+  isSelected,
+  kind = 'primary',
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  renderIcon: ButtonImageElement,
+  size,
+  tabIndex,
+  type = 'button',
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const buttonClasses = cx__default["default"](className, {
     [`${prefix}--btn`]: true,

package/lib/components/ChatButton/ChatButton.Skeleton.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ChatButtonSkeleton = _ref => {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
+const ChatButtonSkeleton = ({
+  className,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
     [`${prefix}--layout--size-${size}`]: size

package/lib/components/ChatButton/ChatButton.js

@@ -23,18 +23,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton(_ref, ref) {
-  let {
-    className,
-    children,
-    disabled,
-    isQuickAction,
-    isSelected,
-    kind,
-    renderIcon,
-    size,
-    ...other
-  } = _ref;
+const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton({
+  className,
+  children,
+  disabled,
+  isQuickAction,
+  isSelected,
+  kind,
+  renderIcon,
+  size,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--chat-btn`]: true,

package/lib/components/Checkbox/Checkbox.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 CheckboxSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const CheckboxSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, `${prefix}--checkbox-skeleton`, className)

package/lib/components/Checkbox/Checkbox.js

@@ -27,26 +27,25 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    className,
-    decorator,
-    helperText,
-    id,
-    labelText,
-    onChange = noopFn.noopFn,
-    onClick,
-    indeterminate = false,
-    invalid,
-    invalidText,
-    hideLabel,
-    readOnly,
-    title = '',
-    warn,
-    warnText,
-    slug,
-    ...other
-  } = _ref;
+const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({
+  className,
+  decorator,
+  helperText,
+  id,
+  labelText,
+  onChange = noopFn.noopFn,
+  onClick,
+  indeterminate = false,
+  invalid,
+  invalidText,
+  hideLabel,
+  readOnly,
+  title = '',
+  warn,
+  warnText,
+  slug,
+  ...other
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -24,23 +24,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const CheckboxGroup = _ref => {
-  let {
-    children,
-    className,
-    decorator,
-    helperText,
-    invalid,
-    invalidText,
-    legendId,
-    legendText,
-    readOnly,
-    warn,
-    warnText,
-    slug,
-    orientation = 'vertical',
-    ...rest
-  } = _ref;
+const CheckboxGroup = ({
+  children,
+  className,
+  decorator,
+  helperText,
+  invalid,
+  invalidText,
+  legendId,
+  legendText,
+  readOnly,
+  warn,
+  warnText,
+  slug,
+  orientation = 'vertical',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;

package/lib/components/ClassPrefix/index.js

@@ -18,11 +18,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ClassPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
+function ClassPrefix({
+  children,
+  prefix
+}) {
   return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Provider, {
     value: prefix
   }, children);

package/lib/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -22,12 +22,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _span, _span2, _span3, _span4;
-function CodeSnippetSkeleton(_ref) {
-  let {
-    className: containerClassName,
-    type = 'single',
-    ...rest
-  } = _ref;
+function CodeSnippetSkeleton({
+  className: containerClassName,
+  type = 'single',
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--snippet`]: true,

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -38,32 +38,31 @@ const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
-function CodeSnippet(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    className,
-    type = 'single',
-    children,
-    disabled,
-    feedback,
-    feedbackTimeout,
-    onClick,
-    ['aria-label']: ariaLabel = 'Copy to clipboard',
-    ariaLabel: deprecatedAriaLabel,
-    copyText,
-    copyButtonDescription,
-    light,
-    showMoreText = 'Show more',
-    showLessText = 'Show less',
-    hideCopyButton,
-    wrapText = false,
-    maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
-    maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
-    minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
-    minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
-    ...rest
-  } = _ref;
+function CodeSnippet({
+  align = 'bottom',
+  autoAlign = false,
+  className,
+  type = 'single',
+  children,
+  disabled,
+  feedback,
+  feedbackTimeout,
+  onClick,
+  ['aria-label']: ariaLabel = 'Copy to clipboard',
+  ariaLabel: deprecatedAriaLabel,
+  copyText,
+  copyButtonDescription,
+  light,
+  showMoreText = 'Show more',
+  showLessText = 'Show less',
+  hideCopyButton,
+  wrapText = false,
+  maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+  maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+  minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+  minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
+  ...rest
+}) {
   const [expandedCode, setExpandedCode] = React.useState(false);
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = React.useState(false);
   const {

package/lib/components/ComboBox/ComboBox.js

@@ -65,11 +65,10 @@ const defaultItemToString = item => {
   return '';
 };
 const defaultShouldFilterItem = () => true;
-const autocompleteCustomFilter = _ref => {
-  let {
-    item,
-    inputValue
-  } = _ref;
+const autocompleteCustomFilter = ({
+  item,
+  inputValue
+}) => {
   if (inputValue === null || inputValue === '') {
     return true; // Show all items if there's no input
   }
@@ -77,13 +76,12 @@ const autocompleteCustomFilter = _ref => {
   const lowercaseInput = inputValue.toLowerCase();
   return lowercaseItem.startsWith(lowercaseInput);
 };
-const getInputValue = _ref2 => {
-  let {
-    initialSelectedItem,
-    itemToString,
-    selectedItem,
-    prevSelectedItem
-  } = _ref2;
+const getInputValue = ({
+  initialSelectedItem,
+  itemToString,
+  selectedItem,
+  prevSelectedItem
+}) => {
   // If there's a current selection (even if it's an object or string), use it.
   if (selectedItem !== null && typeof selectedItem !== 'undefined') {
     return itemToString(selectedItem);
@@ -99,11 +97,10 @@ const getInputValue = _ref2 => {
   // string.
   return '';
 };
-const findHighlightedIndex = (_ref3, inputValue) => {
-  let {
-    items,
-    itemToString = defaultItemToString
-  } = _ref3;
+const findHighlightedIndex = ({
+  items,
+  itemToString = defaultItemToString
+}, inputValue) => {
   if (!inputValue) {
     return -1;
   }
@@ -482,18 +479,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString: item => {
       return itemToString(item);
     },
-    onInputValueChange(_ref4) {
-      let {
-        inputValue
-      } = _ref4;
+    onInputValueChange({
+      inputValue
+    }) {
       const normalizedInput = inputValue || '';
       setInputValue(normalizedInput);
       setHighlightedIndex(indexToHighlight(normalizedInput));
     },
-    onHighlightedIndexChange: _ref5 => {
-      let {
-        highlightedIndex
-      } = _ref5;
+    onHighlightedIndexChange: ({
+      highlightedIndex
+    }) => {
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -512,11 +507,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       return item?.disabled;
     },
     ...downshiftProps,
-    onStateChange: _ref6 => {
-      let {
-        type,
-        selectedItem: newSelectedItem
-      } = _ref6;
+    onStateChange: ({
+      type,
+      selectedItem: newSelectedItem
+    }) => {
       downshiftProps?.onStateChange?.({
         type,
         selectedItem: newSelectedItem

package/lib/components/ComboBox/tools/filter.js

@@ -9,17 +9,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const defaultFilterItems = (items, _ref) => {
-  let {
-    itemToString,
-    inputValue
-  } = _ref;
-  return items.filter(item => {
-    if (!inputValue) {
-      return true;
-    }
-    return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
-  });
-};
+const defaultFilterItems = (items, {
+  itemToString,
+  inputValue
+}) => items.filter(item => {
+  if (!inputValue) {
+    return true;
+  }
+  return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+});
 
 exports.defaultFilterItems = defaultFilterItems;

package/lib/components/ComboButton/index.js

@@ -46,19 +46,18 @@ const defaultTranslations = {
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }
-const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton(_ref, forwardRef) {
-  let {
-    children,
-    className,
-    disabled,
-    label,
-    onClick,
-    size = 'lg',
-    menuAlignment = 'bottom',
-    tooltipAlignment,
-    translateWithId: t = defaultTranslateWithId,
-    ...rest
-  } = _ref;
+const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function ComboButton({
+  children,
+  className,
+  disabled,
+  label,
+  onClick,
+  size = 'lg',
+  menuAlignment = 'bottom',
+  tooltipAlignment,
+  translateWithId: t = defaultTranslateWithId,
+  ...rest
+}, forwardRef) {
   // feature flag utilized to separate out only the dynamic styles from @floating-ui
   // flag is turned on when collision detection (ie. flip, hide) logic is not desired
   const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
@@ -73,11 +72,10 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });

package/lib/components/ComposedModal/ComposedModal.js

@@ -38,14 +38,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
-  let {
-    className: customClassName,
-    children,
-    hasForm,
-    hasScrollingContent,
-    ...rest
-  } = _ref;
+const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody({
+  className: customClassName,
+  children,
+  hasForm,
+  hasScrollingContent,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const contentRef = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
@@ -103,27 +102,26 @@ ModalBody.propTypes = {
    */
   hasScrollingContent: PropTypes__default["default"].bool
 };
-const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal(_ref2, ref) {
-  let {
-    ['aria-labelledby']: ariaLabelledBy,
-    ['aria-label']: ariaLabel,
-    children,
-    className: customClassName,
-    containerClassName,
-    danger,
-    decorator,
-    isFullWidth,
-    onClose,
-    onKeyDown,
-    open,
-    preventCloseOnClickOutside,
-    selectorPrimaryFocus = '[data-modal-primary-focus]',
-    selectorsFloatingMenus,
-    size,
-    launcherButtonRef,
-    slug,
-    ...rest
-  } = _ref2;
+const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal({
+  ['aria-labelledby']: ariaLabelledBy,
+  ['aria-label']: ariaLabel,
+  children,
+  className: customClassName,
+  containerClassName,
+  danger,
+  decorator,
+  isFullWidth,
+  onClose,
+  onKeyDown,
+  open,
+  preventCloseOnClickOutside,
+  selectorPrimaryFocus = '[data-modal-primary-focus]',
+  selectorsFloatingMenus,
+  size,
+  launcherButtonRef,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const [isOpen, setIsOpen] = React.useState(!!open);
   const [wasOpen, setWasOpen] = React.useState(!!open);
@@ -184,12 +182,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       closeModal(evt);
     }
   }
-  function handleBlur(_ref3) {
-    let {
-      target: oldActiveNode,
-      relatedTarget: currentActiveNode
-    } = _ref3;
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+  function handleBlur({
+    target: oldActiveNode,
+    relatedTarget: currentActiveNode
+  }) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -208,6 +205,23 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -322,7 +336,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,