@carbon/react 1.40.0 → 1.41.0

package/es/components/Modal/Modal.d.ts

@@ -0,0 +1,137 @@
+/**
+ * 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 React from 'react';
+import { ReactAttr } from '../../types/common';
+export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
+export type ModalSize = (typeof ModalSizes)[number];
+export interface ModalSecondaryButton {
+    buttonText?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface ModalProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning
+     * Should go hand in hand with the danger prop.
+     */
+    alert?: boolean;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your Modal
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel?: string;
+    /**
+     * Specify whether the Modal is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+    /**
+     * Specify the DOM element ID of the top-level node.
+     */
+    id?: string;
+    /**
+     * Specify whether or not the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Provide a ref to return focus to once the modal is closed.
+     */
+    launcherButtonRef?: any;
+    /**
+     * Specify a label to be read by screen readers on the modal root node
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specify the content of the modal header title.
+     */
+    modalHeading?: React.ReactNode;
+    /**
+     * Specify the content of the modal header label.
+     */
+    modalLabel?: React.ReactNode;
+    /**
+     * Specify a handler for keypresses.
+     * @deprecated this property is unused
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for closing modal.
+     * The handler should care of closing modal, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for "submitting" modal.
+     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: React.ReactNode;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: React.ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: ModalSecondaryButton[];
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify CSS selectors that match DOM elements working as floating menus.
+     * Focusing on those elements won't trigger "focus-wrap" behavior
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * Specify if Enter key should be used as "submit" action
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Specify the size variant.
+     */
+    size?: ModalSize;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/es/components/Modal/Modal.js

@@ -18,50 +18,50 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter } from '../../internal/keyboard/keys.js';
 
 const getInstanceId = setupGetInstanceId();
+const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   let {
     'aria-label': ariaLabelProp,
     children,
     className,
-    modalHeading,
-    modalLabel,
+    modalHeading = '',
+    modalLabel = '',
     modalAriaLabel,
-    passiveModal,
+    passiveModal = false,
     secondaryButtonText,
     primaryButtonText,
     open,
-    onRequestClose,
-    onRequestSubmit,
+    onRequestClose = noopFn,
+    onRequestSubmit = noopFn,
     onSecondarySubmit,
-    primaryButtonDisabled,
+    primaryButtonDisabled = false,
     danger,
     alert,
     secondaryButtons,
-    selectorPrimaryFocus,
-    // eslint-disable-line
+    selectorPrimaryFocus = '[data-modal-primary-focus]',
     selectorsFloatingMenus,
-    // eslint-disable-line
     shouldSubmitOnEnter,
-    // eslint-disable-line
     size,
-    hasScrollingContent,
+    hasScrollingContent = false,
     closeButtonLabel,
-    preventCloseOnClickOutside,
-    // eslint-disable-line
+    preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const button = useRef();
+  const button = useRef(null);
   const secondaryButton = useRef();
-  const innerModal = useRef();
-  const startTrap = useRef();
-  const endTrap = useRef();
+  const innerModal = useRef(null);
+  const startTrap = useRef(null);
+  const endTrap = useRef(null);
   const modalInstanceId = `modal-${getInstanceId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -81,7 +81,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     }
   }
   function handleMousedown(evt) {
-    if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    const target = evt.target;
+    if (innerModal.current && !innerModal.current.contains(target) && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
   }
@@ -114,9 +115,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger,
-    [className]: className
-  });
+    [`${prefix}--modal--danger`]: danger
+  }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
     [`${prefix}--modal-container--full-width`]: isFullWidth
@@ -127,7 +127,12 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const footerClasses = cx(`${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,
@@ -149,7 +154,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
   }, [prefix]);
   useEffect(() => {
-    toggleClass(document.body, `${prefix}--body--with-modal-open`, open);
+    toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
   }, [open, prefix]);
   useEffect(() => {
     if (!open && launcherButtonRef) {
@@ -169,7 +174,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
-      if (target) {
+      if (target !== null) {
         target.focus();
       }
     };
@@ -197,13 +202,15 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     className: containerClasses,
     "aria-label": ariaLabel,
     "aria-modal": "true",
-    tabIndex: "-1"
+    tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal-header`
-  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
+  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement(Text, {
+    as: "h2",
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
+  }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
+    as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
@@ -242,12 +249,12 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
-    tabIndex: "0",
+    tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
@@ -382,7 +389,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.arrayOf(PropTypes.string),
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Specify if Enter key should be used as "submit" action
    */
@@ -390,20 +397,7 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
-};
-Modal.defaultProps = {
-  onRequestClose: () => {},
-  onRequestSubmit: () => {},
-  primaryButtonDisabled: false,
-  onKeyDown: () => {},
-  passiveModal: false,
-  modalHeading: '',
-  modalLabel: '',
-  preventCloseOnClickOutside: false,
-  selectorPrimaryFocus: '[data-modal-primary-focus]',
-  hasScrollingContent: false
+  size: PropTypes.oneOf(ModalSizes)
 };
-var Modal$1 = Modal;
 
-export { Modal$1 as default };
+export { ModalSizes, Modal as default };

package/es/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/es/components/ModalWrapper/ModalWrapper.js

@@ -13,6 +13,7 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import { warning } from '../../internal/warning.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {
@@ -57,19 +58,21 @@ class ModalWrapper extends React__default.Component {
   render() {
     const {
       children,
-      onKeyDown,
+      onKeyDown = noopFn,
       buttonTriggerText,
       buttonTriggerClassName,
       renderTriggerButtonIcon,
-      triggerButtonIconDescription,
-      triggerButtonKind,
-      disabled,
+      primaryButtonText = 'Save',
+      secondaryButtonText = 'Cancel',
+      triggerButtonIconDescription = 'Provide icon description if icon is used',
+      triggerButtonKind = 'primary',
+      disabled = false,
       handleSubmit,
       // eslint-disable-line no-unused-vars
-      shouldCloseAfterSubmit,
+      shouldCloseAfterSubmit = true,
       // eslint-disable-line no-unused-vars
-      selectorPrimaryFocus,
-      preventCloseOnClickOutside,
+      selectorPrimaryFocus = '[data-modal-primary-focus]',
+      preventCloseOnClickOutside = false,
       // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
@@ -97,7 +100,9 @@ class ModalWrapper extends React__default.Component {
       onClick: this.handleOpen,
       ref: this.triggerButton
     }, buttonTriggerText), /*#__PURE__*/React__default.createElement(Modal, _extends({
-      ref: this.modal
+      ref: this.modal,
+      primaryButtonText: primaryButtonText,
+      secondaryButtonText: secondaryButtonText
     }, props), children));
   }
 }
@@ -126,16 +131,5 @@ _defineProperty(ModalWrapper, "propTypes", {
   triggerButtonKind: PropTypes.oneOf(ButtonKinds),
   withHeader: PropTypes.bool
 });
-_defineProperty(ModalWrapper, "defaultProps", {
-  shouldCloseAfterSubmit: true,
-  primaryButtonText: 'Save',
-  secondaryButtonText: 'Cancel',
-  triggerButtonIconDescription: 'Provide icon description if icon is used',
-  triggerButtonKind: 'primary',
-  disabled: false,
-  preventCloseOnClickOutside: false,
-  selectorPrimaryFocus: '[data-modal-primary-focus]',
-  onKeyDown: () => {}
-});
 
 export { ModalWrapper as default };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -33,35 +33,35 @@ import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/key
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
-    clearSelectionDescription,
-    clearSelectionText,
-    compareItems,
-    direction,
-    disabled,
+    clearSelectionDescription = 'Total items selected: ',
+    clearSelectionText = 'To clear selection, press Delete or Backspace',
+    compareItems = defaultCompareItems,
+    direction = 'bottom',
+    disabled = false,
     downshiftProps,
-    filterItems,
+    filterItems = defaultFilterItems,
     helperText,
     hideLabel,
     id,
-    initialSelectedItems,
+    initialSelectedItems = [],
     invalid,
     invalidText,
     items,
     itemToElement: ItemToElement,
     // needs to be capitalized for react to render it correctly
-    itemToString,
+    itemToString = defaultItemToString,
     light,
-    locale,
+    locale = 'en',
     onInputValueChange,
-    open,
+    open = false,
     onChange,
     onMenuChange,
     placeholder,
     titleText,
     type,
-    selectionFeedback,
+    selectionFeedback = 'top-after-reopen',
     size,
-    sortItems,
+    sortItems = defaultSortItems,
     translateWithId,
     useTitleInItem,
     warn,
@@ -297,10 +297,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             if (match(event, Tab)) {
               handleOnMenuChange(false);
             }
-            if (match(event, Home)) {
+            if (match(event, Home) && event.code !== 'Numpad7') {
               event.target.setSelectionRange(0, 0);
             }
-            if (match(event, End)) {
+            if (match(event, End) && event.code !== 'Numpad1') {
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
           },
@@ -552,20 +552,6 @@ FilterableMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-FilterableMultiSelect.defaultProps = {
-  compareItems: defaultCompareItems,
-  direction: 'bottom',
-  disabled: false,
-  filterItems: defaultFilterItems,
-  initialSelectedItems: [],
-  itemToString: defaultItemToString,
-  locale: 'en',
-  sortItems: defaultSortItems,
-  open: false,
-  selectionFeedback: 'top-after-reopen',
-  clearSelectionText: 'To clear selection, press Delete or Backspace,',
-  clearSelectionDescription: 'Total items selected: '
-};
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 
 export { FilterableMultiSelect$1 as default };

package/es/components/MultiSelect/MultiSelect.js

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
-import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
+import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
 import { useSelection } from '../../internal/Selection.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
@@ -22,11 +22,11 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { noopFn } from '../../internal/noopFn.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
-const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
@@ -60,18 +60,18 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     items,
     itemToElement,
     itemToString = defaultItemToString,
-    titleText,
+    titleText = false,
     hideLabel,
     helperText,
     label,
-    type,
+    type = 'default',
     size,
-    disabled,
-    initialSelectedItems,
-    sortItems,
-    compareItems,
-    clearSelectionText,
-    clearSelectionDescription,
+    disabled = false,
+    initialSelectedItems = [],
+    sortItems = defaultSortItems,
+    compareItems = defaultCompareItems,
+    clearSelectionText = 'To clear selection, press Delete or Backspace',
+    clearSelectionDescription = 'Total items selected: ',
     light,
     invalid,
     invalidText,
@@ -80,14 +80,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     useTitleInItem,
     translateWithId,
     downshiftProps,
-    open,
-    selectionFeedback,
+    open = false,
+    selectionFeedback = 'top-after-reopen',
     onChange,
     onMenuChange,
-    direction,
+    direction = 'bottom',
     selectedItems: selected,
     readOnly,
-    locale
+    locale = 'en'
   } = _ref;
   const prefix = usePrefix();
   const {
@@ -321,7 +321,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: multiSelectFieldWrapperClasses
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
-    clearSelection: !disabled && !readOnly ? clearSelection : noop,
+    clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
     selectionCount: selectedItems.length
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
@@ -394,7 +394,7 @@ MultiSelect.propTypes = {
    * Provide a compare function that is used to determine the ordering of
    * options. See 'sortItems' for more control.
    */
-  compareItems: PropTypes.func.isRequired,
+  compareItems: PropTypes.func,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -516,7 +516,7 @@ MultiSelect.propTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes.func.isRequired,
+  sortItems: PropTypes.func,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
@@ -543,22 +543,6 @@ MultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-MultiSelect.defaultProps = {
-  compareItems: defaultCompareItems,
-  disabled: false,
-  locale: 'en',
-  itemToString: defaultItemToString,
-  initialSelectedItems: [],
-  sortItems: defaultSortItems,
-  type: 'default',
-  titleText: false,
-  open: false,
-  selectionFeedback: 'top-after-reopen',
-  direction: 'bottom',
-  clearSelectionText: 'To clear selection, press Delete or Backspace,',
-  clearSelectionDescription: 'Total items selected: ',
-  selectedItems: undefined
-};
 var MultiSelect$1 = MultiSelect;
 
 export { MultiSelect$1 as default };

package/es/components/MultiSelect/MultiSelectPropTypes.js

@@ -15,7 +15,7 @@ const sortingPropTypes = {
    * compareFunction :
    *  (itemA: string, itemB: string, { locale: string }) => number
    */
-  compareItems: PropTypes.func.isRequired,
+  compareItems: PropTypes.func,
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus
@@ -34,7 +34,7 @@ const sortingPropTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes.func.isRequired
+  sortItems: PropTypes.func
 };
 
 export { sortingPropTypes };

package/es/components/MultiSelect/tools/sorting.js

@@ -9,8 +9,8 @@
  * Use the local `localCompare` with the `numeric` option to sort two,
  * potentially alpha-numeric, strings in a list of items.
  *
- * @param {string} itemA
- * @param {string} itemB
+ * @param {ItemType} itemA
+ * @param {ItemType} itemB
  * @param {object} options
  * @param {string} options.locale
  * @returns {number}