@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/Dialog/index.js

@@ -12,11 +12,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
+require('../Text/index.js');
+var index$1 = require('../Layer/index.js');
+var ButtonSet = require('../ButtonSet/ButtonSet.js');
+var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
+var useId = require('../../internal/useId.js');
+var InlineLoading = require('../InlineLoading/InlineLoading.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,19 +34,33 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardRef) => {
-  let {
-    children,
-    className,
-    modal,
-    onCancel = noopFn.noopFn,
-    onClick = noopFn.noopFn,
-    onClose = noopFn.noopFn,
-    onRequestClose = noopFn.noopFn,
-    open = false,
-    ...rest
-  } = _ref;
+const DialogContext = /*#__PURE__*/React.createContext({});
+
+/**
+ * ----------
+ * Dialog
+ * ----------
+ */
+
+const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  className,
+  modal,
+  onCancel = noopFn.noopFn,
+  onClick = noopFn.noopFn,
+  onClose = noopFn.noopFn,
+  onRequestClose = noopFn.noopFn,
+  open = false,
+  role,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  ...rest
+}, forwardRef) => {
   const prefix = usePrefix.usePrefix();
+  const dialogId = useId.useId();
+  const titleId = `${prefix}--dialog-header__heading--${dialogId}`;
+  const subtitleId = `${prefix}--dialog-header__label--${dialogId}`;
 
   // This component needs access to a ref, placed on the dialog, to call the
   // various imperative dialog functions (show(), close(), etc.).
@@ -79,15 +103,40 @@ const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef((_ref
       }
     }
   }, [modal, open]);
-  return /*#__PURE__*/React__default["default"].createElement("dialog", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  const containerClasses = cx__default["default"](`${prefix}--dialog-container`);
+  const contextValue = {
+    dialogId,
+    titleId,
+    subtitleId,
+    isOpen: open
+  };
+  React.useEffect(() => {
+    if (ref.current && open && !ariaLabel && !ariaLabelledBy) {
+      const title = ref.current.querySelector(`.${prefix}--dialog-header__heading`);
+
+      // Set aria-labelledby to the title's ID if it exists
+      if (title && title.id) {
+        ref.current.setAttribute('aria-labelledby', title.id);
+      }
+    }
+  }, [open, ariaLabel, ariaLabelledBy, prefix]);
+  return /*#__PURE__*/React__default["default"].createElement(DialogContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default["default"].createElement("dialog", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](`${prefix}--dialog`, {
       [`${prefix}--dialog--modal`]: modal
     }, className),
     ref: ref,
     onCancel: onCancel,
     onClick: handleClick,
-    onClose: onClose
-  }), children);
+    onClose: onClose,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": !ariaLabel ? ariaLabelledBy || titleId : undefined,
+    "aria-describedby": ariaDescribedBy
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: containerClasses
+  }, children)));
 });
 unstable__Dialog.displayName = 'Dialog';
 unstable__Dialog.propTypes = {
@@ -112,30 +161,59 @@ unstable__Dialog.propTypes = {
   /**
    * open initial state
    */
-  open: PropTypes__default["default"].bool
+  open: PropTypes__default["default"].bool,
+  /**
+   * Specify the role of the dialog for accessibility
+   */
+  role: PropTypes__default["default"].oneOf(['dialog', 'alertdialog']),
+  /**
+   * Specify a label for screen readers
+   */
+  'aria-label': PropTypes__default["default"].string,
+  /**
+   * Specify the ID of an element that labels this dialog
+   */
+  'aria-labelledby': PropTypes__default["default"].string,
+  /**
+   * Specify the ID of an element that describes this dialog
+   */
+  ariaDescribedBy: PropTypes__default["default"].string
 };
-const DialogHeader = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref2;
+
+/**
+ * -------------
+ * DialogHeader
+ * -------------
+ */
+
+const DialogHeader = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: `${prefix}--dialog__header`,
     ref: ref
   }, rest), children);
 });
+DialogHeader.displayName = 'DialogHeader';
 DialogHeader.propTypes = {
   /**
    * Provide the contents to be rendered inside of this component
    */
   children: PropTypes__default["default"].node
 };
-const DialogControls = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref3;
+
+/**
+ * ---------------
+ * DialogControls
+ * ---------------
+ */
+
+const DialogControls = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
@@ -146,17 +224,24 @@ const DialogControls = /*#__PURE__*/React__default["default"].forwardRef((_ref3,
     }, rest), children)
   );
 });
+DialogControls.displayName = 'DialogControls';
 DialogControls.propTypes = {
   /**
    * Provide children to be rendered inside of this component
    */
   children: PropTypes__default["default"].node
 };
-const DialogCloseButton = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref) => {
-  let {
-    onClick,
-    ...rest
-  } = _ref4;
+
+/**
+ * -------------------
+ * DialogCloseButton
+ * -------------------
+ */
+
+const DialogCloseButton = /*#__PURE__*/React__default["default"].forwardRef(({
+  onClick,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
@@ -168,15 +253,17 @@ const DialogCloseButton = /*#__PURE__*/React__default["default"].forwardRef((_re
       title: "Close",
       "aria-label": "Close",
       align: "left",
-      onClick: onClick
+      onClick: onClick,
+      ref: ref
     }, rest), /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
       size: 20,
       "aria-hidden": "true",
-      tabIndex: "-1",
+      tabIndex: -1,
       className: `${prefix}--icon__close`
     }))
   );
 });
+DialogCloseButton.displayName = 'DialogCloseButton';
 DialogCloseButton.propTypes = {
   /**
    * Specify a click handler applied to the IconButton
@@ -184,7 +271,344 @@ DialogCloseButton.propTypes = {
   onClick: PropTypes__default["default"].func
 };
 
+/**
+ * ------------
+ * DialogTitle
+ * ------------
+ */
+
+const DialogTitle = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  className,
+  id,
+  ...rest
+}, ref) => {
+  const prefix = usePrefix.usePrefix();
+  const {
+    titleId
+  } = React.useContext(DialogContext);
+  const headingId = id || titleId;
+  return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
+    as: "h2",
+    id: headingId,
+    className: cx__default["default"](`${prefix}--dialog-header__heading`, className),
+    ref: ref
+  }, rest), children);
+});
+DialogTitle.displayName = 'DialogTitle';
+DialogTitle.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the title node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify an optional id for the title element
+   */
+  id: PropTypes__default["default"].string
+};
+
+/**
+ * ---------------
+ * DialogSubtitle
+ * ---------------
+ */
+
+const DialogSubtitle = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  className,
+  id,
+  ...rest
+}, ref) => {
+  const prefix = usePrefix.usePrefix();
+  const {
+    subtitleId
+  } = React.useContext(DialogContext);
+  const labelId = id || subtitleId;
+  return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
+    as: "h2",
+    id: labelId,
+    className: cx__default["default"](`${prefix}--dialog-header__label`, className),
+    ref: ref
+  }, rest), children);
+});
+DialogSubtitle.displayName = 'DialogSubtitle';
+DialogSubtitle.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the subtitle node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify an optional id for the subtitle element
+   */
+  id: PropTypes__default["default"].string
+};
+
+/**
+ * -----------
+ * DialogBody
+ * -----------
+ */
+
+const DialogBody = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  className,
+  hasScrollingContent,
+  ...rest
+}, ref) => {
+  const prefix = usePrefix.usePrefix();
+  const contentRef = React.useRef(null);
+  const [isScrollable, setIsScrollable] = React.useState(false);
+  const dialogId = useId.useId();
+  const dialogBodyId = `${prefix}--dialog-body--${dialogId}`;
+  useIsomorphicEffect["default"](() => {
+    if (contentRef.current) {
+      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+    }
+    function handler() {
+      if (contentRef.current) {
+        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+      }
+    }
+    const debouncedHandler = debounce.debounce(handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return () => {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []);
+  const contentClasses = cx__default["default"](`${prefix}--dialog-content`, {
+    [`${prefix}--dialog-scroll-content`]: hasScrollingContent || isScrollable
+  }, className);
+  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
+    tabIndex: 0,
+    role: 'region'
+  } : {};
+  const combinedRef = el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      ref.current = el;
+    }
+    contentRef.current = el;
+  };
+  return /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({
+    ref: combinedRef,
+    id: dialogBodyId,
+    className: contentClasses
+  }, hasScrollingContentProps, rest), children);
+});
+DialogBody.displayName = 'DialogBody';
+DialogBody.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the body node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify whether the content has overflow that should be scrollable
+   */
+  hasScrollingContent: PropTypes__default["default"].bool
+};
+
+/**
+ * -------------
+ * DialogFooter
+ * -------------
+ */
+
+const DialogFooter = /*#__PURE__*/React__default["default"].forwardRef(({
+  children,
+  className,
+  onRequestClose = noopFn.noopFn,
+  onSecondarySubmit,
+  onRequestSubmit = noopFn.noopFn,
+  primaryButtonText = 'Save',
+  primaryButtonDisabled = false,
+  secondaryButtonText = 'Cancel',
+  secondaryButtons,
+  loadingStatus = 'inactive',
+  loadingDescription,
+  loadingIconDescription,
+  onLoadingSuccess = noopFn.noopFn,
+  danger = false,
+  ...rest
+}, ref) => {
+  const prefix = usePrefix.usePrefix();
+  const button = React.useRef(null);
+  const {
+    isOpen
+  } = React.useContext(DialogContext);
+  const [secondaryButtonRef, setSecondaryButtonRef] = React.useState(null);
+  React.useEffect(() => {
+    if (danger && secondaryButtonRef) {
+      const focusFrame = requestAnimationFrame(() => {
+        secondaryButtonRef.focus();
+      });
+      return () => cancelAnimationFrame(focusFrame);
+    }
+  }, [danger, secondaryButtonRef, isOpen]);
+  const classes = cx__default["default"](`${prefix}--dialog-footer`, className, {
+    [`${prefix}--dialog-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
+  });
+  const loadingActive = loadingStatus !== 'inactive';
+  const primaryButtonClass = cx__default["default"]({
+    [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
+  });
+  const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+  if (children) {
+    return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+      className: classes,
+      ref: ref
+    }, rest), children);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classes,
+    "aria-busy": loadingActive,
+    ref: ref
+  }, rest), Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({
+    buttonText,
+    onClick: onButtonClick
+  }, i) => /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    key: `${buttonText}-${i}`,
+    autoFocus: danger,
+    kind: "secondary",
+    ref: i === 0 && danger ? setSecondaryButtonRef : undefined,
+    onClick: onButtonClick
+  }, buttonText)) : secondaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    ref: danger ? setSecondaryButtonRef : undefined,
+    disabled: loadingActive,
+    kind: "secondary",
+    autoFocus: danger,
+    onClick: onSecondaryButtonClick
+  }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    className: primaryButtonClass,
+    kind: danger ? 'danger' : 'primary',
+    disabled: loadingActive || primaryButtonDisabled,
+    onClick: onRequestSubmit,
+    ref: button
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default["default"].createElement(InlineLoading["default"], {
+    status: loadingStatus,
+    description: loadingDescription,
+    iconDescription: loadingIconDescription,
+    className: `${prefix}--inline-loading--btn`,
+    onSuccess: onLoadingSuccess
+  })));
+});
+DialogFooter.displayName = 'DialogFooter';
+DialogFooter.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the footer node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify a handler for closing dialog.
+   */
+  onRequestClose: PropTypes__default["default"].func,
+  /**
+   * Specify a handler for the secondary button.
+   */
+  onSecondarySubmit: PropTypes__default["default"].func,
+  /**
+   * Specify a handler for submitting dialog.
+   */
+  onRequestSubmit: PropTypes__default["default"].func,
+  /**
+   * Specify the text for the primary button
+   */
+  primaryButtonText: PropTypes__default["default"].node,
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  primaryButtonDisabled: PropTypes__default["default"].bool,
+  /**
+   * Specify the text for the secondary button
+   */
+  secondaryButtonText: PropTypes__default["default"].node,
+  /**
+   * Specify an array of config objects for secondary buttons
+   */
+  secondaryButtons: (props, propName, componentName) => {
+    if (props.secondaryButtons) {
+      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
+        return new Error(`${propName} needs to be an array of two button config objects`);
+      }
+      const shape = {
+        buttonText: PropTypes__default["default"].node,
+        onClick: PropTypes__default["default"].func
+      };
+      props[propName].forEach(secondaryButton => {
+        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
+      });
+    }
+    return null;
+  },
+  /**
+   * Specify whether the Dialog is for dangerous actions
+   */
+  danger: PropTypes__default["default"].bool,
+  /**
+   * Specify loading status
+   */
+  loadingStatus: PropTypes__default["default"].oneOf(['inactive', 'active', 'finished', 'error']),
+  /**
+   * Specify the description for the loading text
+   */
+  loadingDescription: PropTypes__default["default"].string,
+  /**
+   * Specify the description for the loading icon
+   */
+  loadingIconDescription: PropTypes__default["default"].string,
+  /**
+   * Provide an optional handler to be invoked when loading is
+   * successful
+   */
+  onLoadingSuccess: PropTypes__default["default"].func
+};
+/**
+ * -------
+ * Exports
+ * -------
+ */
+
+const Dialog = unstable__Dialog;
+Dialog.Root = unstable__Dialog;
+Dialog.Root.displayName = 'Dialog.Root';
+Dialog.Header = DialogHeader;
+Dialog.Header.displayName = 'Dialog.Header';
+Dialog.Controls = DialogControls;
+Dialog.Controls.displayName = 'Dialog.Controls';
+Dialog.CloseButton = DialogCloseButton;
+Dialog.CloseButton.displayName = 'Dialog.CloseButton';
+Dialog.Title = DialogTitle;
+Dialog.Title.displayName = 'Dialog.Title';
+Dialog.Subtitle = DialogSubtitle;
+Dialog.Subtitle.displayName = 'Dialog.Subtitle';
+Dialog.Body = DialogBody;
+Dialog.Body.displayName = 'Dialog.Body';
+Dialog.Footer = DialogFooter;
+Dialog.Footer.displayName = 'Dialog.Footer';
+
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
 exports.DialogCloseButton = DialogCloseButton;
 exports.DialogControls = DialogControls;
+exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
+exports.DialogSubtitle = DialogSubtitle;
+exports.DialogTitle = DialogTitle;
 exports.unstable__Dialog = unstable__Dialog;

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -23,13 +23,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const DropdownSkeleton = _ref => {
-  let {
-    className,
-    size,
-    hideLabel,
-    ...rest
-  } = _ref;
+const DropdownSkeleton = ({
+  className,
+  size,
+  hideLabel,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--form-item`, {
     [`${prefix}--list-box--${size}`]: size

package/lib/components/Dropdown/Dropdown.js

@@ -84,40 +84,39 @@ function stateReducer(state, actionAndChanges) {
       return changes;
   }
 }
-const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    autoAlign = false,
-    className: containerClassName,
-    decorator,
-    disabled = false,
-    direction = 'bottom',
-    items: itemsProp,
-    label,
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    itemToString = defaultItemToString,
-    itemToElement = null,
-    renderSelectedItem,
-    type = 'default',
-    size,
-    onChange,
-    id,
-    titleText = '',
-    hideLabel,
-    helperText = '',
-    translateWithId,
-    light,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    initialSelectedItem,
-    selectedItem: controlledSelectedItem,
-    downshiftProps,
-    readOnly,
-    slug,
-    ...other
-  } = _ref;
+const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
+  autoAlign = false,
+  className: containerClassName,
+  decorator,
+  disabled = false,
+  direction = 'bottom',
+  items: itemsProp,
+  label,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  itemToString = defaultItemToString,
+  itemToElement = null,
+  renderSelectedItem,
+  type = 'default',
+  size,
+  onChange,
+  id,
+  titleText = '',
+  hideLabel,
+  helperText = '',
+  translateWithId,
+  light,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  initialSelectedItem,
+  selectedItem: controlledSelectedItem,
+  downshiftProps,
+  readOnly,
+  slug,
+  ...other
+}, ref) => {
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const {
     refs,
@@ -132,11 +131,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
     middleware: [react.size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });
@@ -164,10 +162,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const onSelectedItemChange = React.useCallback(_ref3 => {
-    let {
-      selectedItem
-    } = _ref3;
+  const onSelectedItemChange = React.useCallback(({
+    selectedItem
+  }) => {
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null