@carbon/react 1.41.0-rc.0 → 1.41.0

package/lib/components/Modal/Modal.js

@@ -35,6 +35,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const getInstanceId = setupGetInstanceId["default"]();
+const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
   let {
     'aria-label': ariaLabelProp,
@@ -66,11 +67,11 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const button = React.useRef();
+  const button = React.useRef(null);
   const secondaryButton = React.useRef();
-  const innerModal = React.useRef();
-  const startTrap = React.useRef();
-  const endTrap = React.useRef();
+  const innerModal = React.useRef(null);
+  const startTrap = React.useRef(null);
+  const endTrap = React.useRef(null);
   const modalInstanceId = `modal-${getInstanceId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -90,7 +91,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     }
   }
   function handleMousedown(evt) {
-    if (innerModal.current && !innerModal.current.contains(evt.target) && !wrapFocus.elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    const target = evt.target;
+    if (innerModal.current && !innerModal.current.contains(target) && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
   }
@@ -123,9 +125,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const modalClasses = cx__default["default"](`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger,
-    [className]: className
-  });
+    [`${prefix}--modal--danger`]: danger
+  }, className);
   const containerClasses = cx__default["default"](`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
     [`${prefix}--modal-container--full-width`]: isFullWidth
@@ -136,7 +137,12 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const footerClasses = cx__default["default"](`${prefix}--modal-footer`, {
     [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
   });
-  const ariaLabel = modalLabel || ariaLabelProp || modalAriaLabel || modalHeading;
+  const asStringOrUndefined = node => {
+    return typeof node === 'string' ? node : undefined;
+  };
+  const modalLabelStr = asStringOrUndefined(modalLabel);
+  const modalHeadingStr = asStringOrUndefined(modalHeading);
+  const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
   const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
   const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
@@ -158,7 +164,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     };
   }, [prefix]);
   React.useEffect(() => {
-    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open);
+    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open ?? false);
   }, [open, prefix]);
   React.useEffect(() => {
     if (!open && launcherButtonRef) {
@@ -178,7 +184,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
-      if (target) {
+      if (target !== null) {
         target.focus();
       }
     };
@@ -206,7 +212,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     className: containerClasses,
     "aria-label": ariaLabel,
     "aria-modal": "true",
-    tabIndex: "-1"
+    tabIndex: -1
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-header`
   }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -253,12 +259,12 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
@@ -393,7 +399,7 @@ Modal.propTypes = {
    * Specify CSS selectors that match DOM elements working as floating menus.
    * Focusing on those elements won't trigger "focus-wrap" behavior
    */
-  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired),
   /**
    * Specify if Enter key should be used as "submit" action
    */
@@ -401,8 +407,8 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(ModalSizes)
 };
-var Modal$1 = Modal;
 
-exports["default"] = Modal$1;
+exports.ModalSizes = ModalSizes;
+exports["default"] = Modal;

package/lib/components/Modal/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 Modal from './Modal';
+export default Modal;
+export { Modal };

package/lib/components/Tile/Tile.js

@@ -92,7 +92,6 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     evt?.persist?.();
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       setIsSelected(!isSelected);
-      onKeyDown(evt);
     }
     onKeyDown(evt);
   }
@@ -112,6 +111,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
     className: classes,
     href: href,
+    tabIndex: !href && !disabled ? 0 : undefined,
     onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,

package/lib/components/Toggletip/index.d.ts

@@ -37,6 +37,7 @@ export declare namespace ToggletipLabel {
 interface ToggletipProps<E extends ElementType> {
     align?: PopoverAlignment | undefined;
     as?: E | undefined;
+    autoAlign?: boolean | undefined;
     className?: string | undefined;
     children?: ReactNode;
     defaultOpen?: boolean | undefined;
@@ -46,7 +47,7 @@ interface ToggletipProps<E extends ElementType> {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-export declare function Toggletip<E extends ElementType = 'span'>({ align, as, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
         /**
@@ -58,6 +59,10 @@ export declare namespace Toggletip {
          * component.
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * 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.Requireable<boolean>;
         /**
          * Custom children to be rendered as the content of the label
          */

package/lib/components/Toggletip/index.js

@@ -73,6 +73,7 @@ function Toggletip(_ref2) {
   let {
     align,
     as,
+    autoAlign,
     className: customClassName,
     children,
     defaultOpen = false
@@ -147,7 +148,8 @@ function Toggletip(_ref2) {
     open: open,
     onKeyDown: onKeyDown,
     onBlur: handleBlur,
-    ref: ref
+    ref: ref,
+    autoAlign: autoAlign
   }, children));
 }
 Toggletip.propTypes = {
@@ -160,6 +162,10 @@ Toggletip.propTypes = {
    * component.
    */
   as: 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,
   /**
    * Custom children to be rendered as the content of the label
    */

package/lib/index.js

@@ -62,6 +62,7 @@ var Link = require('./components/Link/Link.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var Loading = require('./components/Loading/Loading.js');
 var index$7 = require('./components/MenuButton/index.js');
+var Modal = require('./components/Modal/Modal.js');
 var Notification = require('./components/Notification/Notification.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
@@ -209,7 +210,6 @@ var ErrorBoundaryContext = require('./components/ErrorBoundary/ErrorBoundaryCont
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
 var Menu = require('./components/Menu/Menu.js');
 var MenuItem = require('./components/Menu/MenuItem.js');
-var Modal = require('./components/Modal/Modal.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var Pagination$1 = require('./components/Pagination/Pagination.js');
 var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
@@ -283,6 +283,7 @@ exports.Link = Link["default"];
 exports.ListItem = ListItem["default"];
 exports.Loading = Loading["default"];
 exports.MenuButton = index$7.MenuButton;
+exports.Modal = Modal["default"];
 exports.ActionableNotification = Notification.ActionableNotification;
 exports.InlineNotification = Notification.InlineNotification;
 exports.NotificationActionButton = Notification.NotificationActionButton;
@@ -466,7 +467,6 @@ exports.MenuItemDivider = MenuItem.MenuItemDivider;
 exports.MenuItemGroup = MenuItem.MenuItemGroup;
 exports.MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
 exports.MenuItemSelectable = MenuItem.MenuItemSelectable;
-exports.Modal = Modal["default"];
 exports.MultiSelect = MultiSelect["default"];
 exports.Pagination = Pagination$1["default"];
 exports.PaginationNav = PaginationNav["default"];

package/lib/internal/wrapFocus.js

@@ -32,11 +32,11 @@ function elementOrParentIsFloatingMenu(node) {
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
- * @param {HTMLElement|null} options.bodyNode
- * @param {HTMLElement|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {HTMLElement|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {HTMLElement} options.currentActiveNode The DOM node that has focus.
- * @param {HTMLElement} options.oldActiveNode The DOM node that previously had focus.
+ * @param {Node|null} options.bodyNode
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
  * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
  */
 function wrapFocus(_ref) {

package/lib/prop-types/requiredIfGivenPropIsTruthy.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /**
  * @param {string} name The name of the prop that must exist to validate
  * the current prop.
- * @param {Function} propType The original prop type checker.
- * @returns {Function} The new prop type checker for the current prop that
+ * @param {React.Validator} propType The original prop type checker.
+ * @returns {React.Validator} The new prop type checker for the current prop that
  * becomes required if the prop corresponding to the provided prop name exists.
  */
 function requiredIfGivenPropIsTruthy(name, propType) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.41.0-rc.0",
+  "version": "1.41.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,9 +47,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.29.0-rc.0",
-    "@carbon/layout": "^11.20.0-rc.0",
-    "@carbon/styles": "^1.41.0-rc.0",
+    "@carbon/icons-react": "^11.29.0",
+    "@carbon/layout": "^11.20.0",
+    "@carbon/styles": "^1.41.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -77,7 +77,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.26.0-rc.0",
+    "@carbon/themes": "^11.26.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -124,7 +124,7 @@
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "typescript-config-carbon": "^0.2.0-rc.0",
+    "typescript-config-carbon": "^0.2.0",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^4.7.4"
   },
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "da28d28a2d3a34503099e25255076efd3da4db9f"
+  "gitHead": "abe693e46a9b76731f51e47104f3634b6346f845"
 }

package/scss/components/slug/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/slug';

package/scss/components/slug/_slug.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/slug/slug';