@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/PaginationNav/PaginationNav.js

@@ -14,35 +14,14 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var Button = require('../Button/Button.js');
 var index = require('../IconButton/index.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var _CaretRight, _CaretLeft, _option;
 const translationIds = {
@@ -52,12 +31,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 = React.useRef();
   React.useEffect(() => {
@@ -65,37 +43,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,
@@ -104,27 +75,16 @@ function DirectionButton(_ref) {
     onClick
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const icon = direction === 'forward' ? iconsReact.CaretRight : iconsReact.CaretLeft;
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
-  }, FeatureFlags__namespace.enabled('enable-v11-release') ? /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "bottom",
     disabled: disabled,
     kind: "ghost",
     label: label,
     onClick: onClick
-  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))) : /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    disabled: disabled,
-    renderIcon: icon,
-    kind: "ghost",
-    hasIconOnly: true,
-    iconDescription: label,
-    tooltipAlignment: "center",
-    tooltipPosition: "bottom",
-    onClick: onClick
-  }));
+  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))));
 }
-
 function PaginationItem(_ref2) {
   let {
     page,
@@ -148,7 +108,6 @@ function PaginationItem(_ref2) {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
-
 function PaginationOverflow(_ref3) {
   let {
     fromIndex,
@@ -157,7 +116,6 @@ function PaginationOverflow(_ref3) {
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix.usePrefix();
-
   if (count > 1) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -183,7 +141,6 @@ function PaginationOverflow(_ref3) {
       className: `${prefix}--pagination-nav__select-icon`
     }))));
   }
-
   if (count === 1) {
     return /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
       page: fromIndex + 1,
@@ -193,10 +150,8 @@ function PaginationOverflow(_ref3) {
       }
     });
   }
-
   return null;
 }
-
 const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function PaginationNav(_ref4, ref) {
   let {
     className,
@@ -213,17 +168,14 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   const [cuts, setCuts] = React.useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.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);
@@ -232,10 +184,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
       jumpToItem(nextIndex);
     }
   }
-
   function jumpToPrevious() {
     const previousIndex = currentPage - 1;
-
     if (previousIndex < 0) {
       if (loop) {
         jumpToItem(totalItems - 1);
@@ -244,29 +194,28 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
       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
   React.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
   React.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
   React.useEffect(() => {
     if (pageWouldBeHidden(currentPage)) {
       const delta = currentPage - prevPage || 0;
-
       if (delta > 0) {
         const splitPoint = itemsThatFit - 3;
         setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
@@ -293,7 +242,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     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["default"].createElement(PaginationItem, {
     page: 1,
@@ -306,7 +256,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     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["default"].createElement(PaginationItem, {
     key: `item-${item}`,
     page: item + 1,
@@ -319,7 +270,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     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["default"].createElement(PaginationItem, {
     page: totalItems,
     translateWithId: t,
@@ -343,17 +295,14 @@ DirectionButton.propTypes = {
    * The direction this button represents ("forward" or "backward").
    */
   direction: PropTypes__default["default"].oneOf(['forward', 'backward']),
-
   /**
    * Whether or not the button should be disabled.
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * The label shown in the button's tooltip.
    */
   label: PropTypes__default["default"].string,
-
   /**
    * The callback function called when the button is clicked.
    */
@@ -364,17 +313,14 @@ PaginationItem.propTypes = {
    * Whether or not this is the currently active page.
    */
   isActive: PropTypes__default["default"].bool,
-
   /**
    * The callback function called when the item is clicked.
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * The page number this item represents.
    */
   page: PropTypes__default["default"].number,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
@@ -386,17 +332,14 @@ PaginationOverflow.propTypes = {
    * How many items to display in this overflow.
    */
   count: PropTypes__default["default"].number,
-
   /**
    * From which index on this overflow should start displaying pages.
    */
   fromIndex: PropTypes__default["default"].number,
-
   /**
    * The callback function called when the user selects a page from the overflow.
    */
   onSelect: PropTypes__default["default"].func,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
@@ -409,32 +352,26 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * The number of items to be shown.
    */
   itemsShown: PropTypes__default["default"].number,
-
   /**
    * Whether user should be able to loop through the items when reaching first / last.
    */
   loop: PropTypes__default["default"].bool,
-
   /**
    * The callback function called when the current page changes.
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * The index of current page.
    */
   page: PropTypes__default["default"].number,
-
   /**
    * The total number of items.
    */
   totalItems: PropTypes__default["default"].number,
-
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message

package/lib/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/lib/components/Popover/index.js

@@ -16,6 +16,7 @@ var React = require('react');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useEvent = require('../../internal/useEvent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,37 +29,47 @@ const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
     current: null
   }
 });
-const Popover = /*#__PURE__*/React__default["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.usePrefix();
   const floating = React.useRef(null);
   const popover = React.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)
+  useEvent.useWindowEvent('blur', () => {
+    if (open) {
+      onRequestClose?.();
+    }
+  });
+  useEvent.useWindowEvent('click', event => {
+    if (open && !popover?.current?.contains(event.target)) {
+      onRequestClose?.();
+    }
+  });
   const value = React.useMemo(() => {
     return {
       floating
     };
   }, []);
-
   if (isTabTip) {
     const tabTipAlignments = ['bottom-left', 'bottom-right'];
-
     if (!tabTipAlignments.includes(align)) {
       align = 'bottom-left';
     }
   }
-
   const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
   const [autoAligned, setAutoAligned] = React.useState(false);
   const [autoAlignment, setAutoAlignment] = React.useState(align);
@@ -76,104 +87,90 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef((_ref, forward
     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["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;
@@ -185,73 +182,72 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef((_ref, forward
       return item;
     }
   });
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["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["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__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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__default["default"].bool,
-
   /**
    * Specify whether a caret should be rendered
    */
   caret: PropTypes__default["default"].bool,
-
   /**
    * Provide elements to be rendered inside of the component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether a drop shadow should be rendered on the popover
    */
   dropShadow: PropTypes__default["default"].bool,
-
   /**
    * Render the component using the high-contrast variant
    */
   highContrast: PropTypes__default["default"].bool,
-
   /**
    * Render the component using the tab tip variant
    */
   isTabTip: PropTypes__default["default"].bool,
-
+  /**
+   * Specify a handler for closing popover.
+   * The handler should take care of closing the popover, e.g. changing the `open` prop.
+   */
+  onRequestClose: PropTypes__default["default"].func,
   /**
    * Specify whether the component is currently open or closed
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref2, forwardRef) {
+function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
+_ref2, forwardRef) {
   let {
     className,
     children,
@@ -270,13 +266,13 @@ const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(functio
   }, children), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--popover-caret`
   }));
-});
+}
+const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(PopoverContentRenderFunction);
 PopoverContent.propTypes = {
   /**
    * Provide elements to be rendered inside of the component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -20,7 +20,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const PrimaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
   kind: "primary"
 }, props));
-
 var PrimaryButton$1 = PrimaryButton;
 
 exports["default"] = PrimaryButton$1;