@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/PaginationNav/PaginationNav.js

@@ -10,9 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useState, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { CaretRight, CaretLeft, OverflowMenuHorizontal } from '@carbon/icons-react';
-import Button from '../Button/Button.js';
 import { IconButton } from '../IconButton/index.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _CaretRight, _CaretLeft, _option;
@@ -23,12 +21,11 @@ const translationIds = {
   'carbon.pagination-nav.active': 'Active',
   'carbon.pagination-nav.of': 'of'
 };
-
 function translateWithId(messageId) {
   return translationIds[messageId];
-} // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
-
+}
 
+// https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 function usePrevious(value) {
   const ref = useRef();
   useEffect(() => {
@@ -36,37 +33,30 @@ function usePrevious(value) {
   });
   return ref.current;
 }
-
 function getCuts(page, totalItems, itemsThatFit) {
   let splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-
   if (itemsThatFit >= totalItems) {
     return {
       front: 0,
       back: 0
     };
   }
-
   const split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
   let frontHidden = page + 1 - split;
   let backHidden = totalItems - page - (itemsThatFit - split) + 1;
-
   if (frontHidden <= 1) {
     backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;
     frontHidden = 0;
   }
-
   if (backHidden <= 1) {
     frontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;
     backHidden = 0;
   }
-
   return {
     front: frontHidden,
     back: backHidden
   };
 }
-
 function DirectionButton(_ref) {
   let {
     direction,
@@ -75,27 +65,16 @@ function DirectionButton(_ref) {
     onClick
   } = _ref;
   const prefix = usePrefix();
-  const icon = direction === 'forward' ? CaretRight : CaretLeft;
   return /*#__PURE__*/React__default.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
-  }, FeatureFlags.enabled('enable-v11-release') ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     align: "bottom",
     disabled: disabled,
     kind: "ghost",
     label: label,
     onClick: onClick
-  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))) : /*#__PURE__*/React__default.createElement(Button, {
-    disabled: disabled,
-    renderIcon: icon,
-    kind: "ghost",
-    hasIconOnly: true,
-    iconDescription: label,
-    tooltipAlignment: "center",
-    tooltipPosition: "bottom",
-    onClick: onClick
-  }));
+  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))));
 }
-
 function PaginationItem(_ref2) {
   let {
     page,
@@ -119,7 +98,6 @@ function PaginationItem(_ref2) {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
-
 function PaginationOverflow(_ref3) {
   let {
     fromIndex,
@@ -128,7 +106,6 @@ function PaginationOverflow(_ref3) {
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix();
-
   if (count > 1) {
     return /*#__PURE__*/React__default.createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -154,7 +131,6 @@ function PaginationOverflow(_ref3) {
       className: `${prefix}--pagination-nav__select-icon`
     }))));
   }
-
   if (count === 1) {
     return /*#__PURE__*/React__default.createElement(PaginationItem, {
       page: fromIndex + 1,
@@ -164,10 +140,8 @@ function PaginationOverflow(_ref3) {
       }
     });
   }
-
   return null;
 }
-
 const PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNav(_ref4, ref) {
   let {
     className,
@@ -184,17 +158,14 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   const [cuts, setCuts] = useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
-
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
       onChange(index);
     }
   }
-
   function jumpToNext() {
     const nextIndex = currentPage + 1;
-
     if (nextIndex >= totalItems) {
       if (loop) {
         jumpToItem(0);
@@ -203,10 +174,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
       jumpToItem(nextIndex);
     }
   }
-
   function jumpToPrevious() {
     const previousIndex = currentPage - 1;
-
     if (previousIndex < 0) {
       if (loop) {
         jumpToItem(totalItems - 1);
@@ -215,29 +184,28 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
       jumpToItem(previousIndex);
     }
   }
-
   function pageWouldBeHidden(page) {
     const startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
     const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
-  } // jump to new page if props.page is updated
-
+  }
 
+  // jump to new page if props.page is updated
   useEffect(() => {
     setCurrentPage(page);
-  }, [page]); // re-calculate cuts if props.totalItems or props.itemsShown change
+  }, [page]);
 
+  // re-calculate cuts if props.totalItems or props.itemsShown change
   useEffect(() => {
     setItemsThatFit(itemsShown >= 4 ? itemsShown : 4);
     setCuts(getCuts(currentPage, totalItems, itemsShown));
   }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
-  // update cuts if necessary whenever currentPage changes
 
+  // update cuts if necessary whenever currentPage changes
   useEffect(() => {
     if (pageWouldBeHidden(currentPage)) {
       const delta = currentPage - prevPage || 0;
-
       if (delta > 0) {
         const splitPoint = itemsThatFit - 3;
         setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
@@ -264,7 +232,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
     onClick: jumpToPrevious
-  }), // render first item if at least 5 items can be displayed or
+  }),
+  // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
   (itemsThatFit >= 5 || itemsThatFit <= 4 && currentPage <= 1) && /*#__PURE__*/React__default.createElement(PaginationItem, {
     page: 1,
@@ -277,7 +246,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     fromIndex: startOffset,
     count: cuts.front,
     onSelect: jumpToItem
-  }), // render items between overflows
+  }),
+  // render items between overflows
   [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default.createElement(PaginationItem, {
     key: `item-${item}`,
     page: item + 1,
@@ -290,7 +260,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
     onSelect: jumpToItem
-  }), // render last item unless there is only one in total
+  }),
+  // render last item unless there is only one in total
   totalItems > 1 && /*#__PURE__*/React__default.createElement(PaginationItem, {
     page: totalItems,
     translateWithId: t,
@@ -314,17 +285,14 @@ DirectionButton.propTypes = {
    * The direction this button represents ("forward" or "backward").
    */
   direction: PropTypes.oneOf(['forward', 'backward']),
-
   /**
    * Whether or not the button should be disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * The label shown in the button's tooltip.
    */
   label: PropTypes.string,
-
   /**
    * The callback function called when the button is clicked.
    */
@@ -335,17 +303,14 @@ PaginationItem.propTypes = {
    * Whether or not this is the currently active page.
    */
   isActive: PropTypes.bool,
-
   /**
    * The callback function called when the item is clicked.
    */
   onClick: PropTypes.func,
-
   /**
    * The page number this item represents.
    */
   page: PropTypes.number,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
@@ -357,17 +322,14 @@ PaginationOverflow.propTypes = {
    * How many items to display in this overflow.
    */
   count: PropTypes.number,
-
   /**
    * From which index on this overflow should start displaying pages.
    */
   fromIndex: PropTypes.number,
-
   /**
    * The callback function called when the user selects a page from the overflow.
    */
   onSelect: PropTypes.func,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
@@ -380,32 +342,26 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * The number of items to be shown.
    */
   itemsShown: PropTypes.number,
-
   /**
    * Whether user should be able to loop through the items when reaching first / last.
    */
   loop: PropTypes.bool,
-
   /**
    * The callback function called when the current page changes.
    */
   onChange: PropTypes.func,
-
   /**
    * The index of current page.
    */
   page: PropTypes.number,
-
   /**
    * The total number of items.
    */
   totalItems: PropTypes.number,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message

package/es/components/Popover/index.d.ts

@@ -4,8 +4,8 @@
  * 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 from 'react';
-import { PolymorphicProps } from '../../types/common';
+import React, { type WeakValidationMap, type ElementType } from 'react';
+import { type PolymorphicProps } from '../../types/common';
 export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
 interface PopoverBaseProps {
     /**
@@ -41,15 +41,21 @@ interface PopoverBaseProps {
      * Render the component using the tab tip variant
      */
     isTabTip?: boolean;
+    /**
+     * Specify a handler for closing popover.
+     * The handler should take care of closing the popover, e.g. changing the `open` prop.
+     */
+    onRequestClose?: () => void;
     /**
      * Specify whether the component is currently open or closed
      */
     open: boolean;
 }
-export type PopoverProps<T extends React.ElementType> = PolymorphicProps<T, PopoverBaseProps>;
-declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverBaseProps & Omit<any, "as"> & {
-    as?: React.ElementType<any> | undefined;
-}, string | number | symbol> & React.RefAttributes<Element>>;
+export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
+export declare const Popover: (<E extends React.ElementType<any> = "span">(props: PopoverProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: WeakValidationMap<PopoverProps<any>> | undefined;
+};
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
-declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
-export { Popover, PopoverContent };
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/es/components/Popover/index.js

@@ -12,43 +12,54 @@ import React__default, { useRef, useMemo, useState } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
 
 const PopoverContext = /*#__PURE__*/React__default.createContext({
   floating: {
     current: null
   }
 });
-const Popover = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
+function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
     align = isTabTip ? 'bottom-left' : 'bottom',
-    as,
+    as: BaseComponent = 'span',
     autoAlign = false,
     caret = isTabTip ? false : true,
     className: customClassName,
     children,
     dropShadow = true,
     highContrast = false,
+    onRequestClose,
     open,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const floating = useRef(null);
   const popover = useRef(null);
+
+  // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
+  useWindowEvent('blur', () => {
+    if (open) {
+      onRequestClose?.();
+    }
+  });
+  useWindowEvent('click', event => {
+    if (open && !popover?.current?.contains(event.target)) {
+      onRequestClose?.();
+    }
+  });
   const value = useMemo(() => {
     return {
       floating
     };
   }, []);
-
   if (isTabTip) {
     const tabTipAlignments = ['bottom-left', 'bottom-right'];
-
     if (!tabTipAlignments.includes(align)) {
       align = 'bottom-left';
     }
   }
-
   const ref = useMergedRefs([forwardRef, popover]);
   const [autoAligned, setAutoAligned] = useState(false);
   const [autoAlignment, setAutoAlignment] = useState(align);
@@ -66,104 +77,90 @@ const Popover = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
     if (!open) {
       return;
     }
-
     if (!autoAlign || isTabTip) {
       setAutoAligned(false);
       return;
     }
-
     if (!floating.current) {
       return;
     }
-
     if (autoAligned === true) {
       return;
     }
+    const rect = floating.current.getBoundingClientRect();
 
-    const rect = floating.current.getBoundingClientRect(); // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
-
+    // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
     const conditions = {
       left: rect.x < -16,
       top: rect.y < -16,
       right: rect.x + (rect.width - 16) > document.documentElement.clientWidth,
       bottom: rect.y + (rect.height - 16) > document.documentElement.clientHeight
     };
-
     if (!conditions.left && !conditions.top && !conditions.right && !conditions.bottom) {
       setAutoAligned(false);
       return;
     }
+    const alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right'];
 
-    const alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right']; // Creates the prioritized list of options depending on ideal alignment coming from `align`
-
+    // Creates the prioritized list of options depending on ideal alignment coming from `align`
     const options = [align];
     let option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
-
     while (option) {
       if (options.includes(option)) {
         break;
       }
-
       options.push(option);
       option = alignments[(alignments.indexOf(option) + 1) % alignments.length];
     }
-
     function isVisible(alignment) {
       if (!popover.current || !floating.current) {
         return false;
       }
-
       popover.current.classList.add(`${prefix}--popover--${alignment}`);
-      const rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
+      const rect = floating.current.getBoundingClientRect();
 
+      // Check if popover is not visible to the left of the screen
       if (rect.x < -16) {
         popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
-      } // Check if popover is not visible at the top of the screen
-
+      }
 
+      // Check if popover is not visible at the top of the screen
       if (rect.y < -16) {
         popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
-      } // Check if popover is not visible to right of screen
-
+      }
 
+      // Check if popover is not visible to right of screen
       if (rect.x + (rect.width - 16) > document.documentElement.clientWidth) {
         popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
-      } // Check if popover is not visible to bottom of screen
-
+      }
 
+      // Check if popover is not visible to bottom of screen
       if (rect.y + (rect.height - 16) > document.documentElement.clientHeight) {
         popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
       }
-
       popover.current.classList.remove(`${prefix}--popover--${alignment}`);
       return true;
     }
-
     let alignment = null;
-
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
-
       if (isVisible(option)) {
         alignment = option;
         break;
       }
     }
-
     if (alignment) {
       setAutoAligned(true);
       setAutoAlignment(alignment);
     }
   }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
-  const BaseComponent = as ?? 'span';
   const mappedChildren = React__default.Children.map(children, child => {
     const item = child;
-
-    if ((item === null || item === void 0 ? void 0 : item.type) === 'button') {
+    if (item?.type === 'button') {
       const {
         className
       } = item.props;
@@ -175,73 +172,72 @@ const Popover = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
       return item;
     }
   });
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className,
     ref: ref
   }), isTabTip ? mappedChildren : children));
-}); // Note: this displayName is temporarily set so that Storybook ArgTable
-// correctly displays the name of this component
+}
+const Popover = /*#__PURE__*/React__default.forwardRef(PopoverRenderFunction);
 
+// Note: this displayName is temporarily set so that Storybook ArgTable
+// correctly displays the name of this component
 if (process.env.NODE_ENV !== "production") {
   Popover.displayName = 'Popover';
 }
-
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
-
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
-
   /**
    * Specify whether a caret should be rendered
    */
   caret: PropTypes.bool,
-
   /**
    * Provide elements to be rendered inside of the component
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes.string,
-
   /**
    * Specify whether a drop shadow should be rendered on the popover
    */
   dropShadow: PropTypes.bool,
-
   /**
    * Render the component using the high-contrast variant
    */
   highContrast: PropTypes.bool,
-
   /**
    * Render the component using the tab tip variant
    */
   isTabTip: PropTypes.bool,
-
+  /**
+   * Specify a handler for closing popover.
+   * The handler should take care of closing the popover, e.g. changing the `open` prop.
+   */
+  onRequestClose: PropTypes.func,
   /**
    * Specify whether the component is currently open or closed
    */
   open: PropTypes.bool.isRequired
 };
-const PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref2, forwardRef) {
+function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
+_ref2, forwardRef) {
   let {
     className,
     children,
@@ -260,13 +256,13 @@ const PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverCo
   }, children), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--popover-caret`
   }));
-});
+}
+const PopoverContent = /*#__PURE__*/React__default.forwardRef(PopoverContentRenderFunction);
 PopoverContent.propTypes = {
   /**
    * Provide elements to be rendered inside of the component
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/es/components/PrimaryButton/PrimaryButton.js

@@ -12,7 +12,6 @@ import Button from '../Button/Button.js';
 const PrimaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
   kind: "primary"
 }, props));
-
 var PrimaryButton$1 = PrimaryButton;
 
 export { PrimaryButton$1 as default };