@carbon/react 1.31.2 → 1.32.0-rc.0

package/lib/components/DataTable/TableExpandHeader.js

@@ -10,13 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
-var deprecate = require('../../prop-types/deprecate.js');
 var React = require('react');
-var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -90,6 +90,5 @@ TableExpandHeader.propTypes = {
    */
   onExpand: PropTypes__default["default"].oneOfType([requiredIfGivenPropIsTruthy["default"]('enableExpando', PropTypes__default["default"].func), requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].func)])
 };
-var TableExpandHeader$1 = TableExpandHeader;
 
-exports["default"] = TableExpandHeader$1;
+exports["default"] = TableExpandHeader;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -17,14 +17,15 @@ var keys = require('../../../internal/keyboard/keys.js');
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
 var carbonFlatpickrFixEventsPlugin = (config => fp => {
+  const {
+    inputFrom,
+    inputTo,
+    lastStartValue
+  } = config;
   /**
    * Handles `keydown` event.
    */
   const handleKeydown = event => {
-    const {
-      inputFrom,
-      inputTo
-    } = config;
     const {
       target
     } = event;
@@ -45,6 +46,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       }
     }
   };
+  const parseDateWithFormat = dateStr => fp.parseDate(dateStr, fp.config.dateFormat);
 
   /**
    * Handles `blur` event.
@@ -54,11 +56,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
    * set the date again, triggering the calendar to update.
    */
   const handleBlur = event => {
-    const {
-      inputFrom,
-      inputTo,
-      lastStartValue
-    } = config;
     const {
       target
     } = event;
@@ -68,8 +65,9 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     if (inputTo === target && fp.selectedDates[1]) {
       // Using getTime() enables the ability to more readily compare the date currently
       // selected in the calendar and the date currently in the value of the input
-      const selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
-      const currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0);
+      const withoutTime = date => date.setHours(0, 0, 0, 0);
+      const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
+      const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
       // The date should only be set if both dates are valid dates, and they don't match.
       // When they don't match, this indiciates that the date selected in the calendar is stale,
@@ -79,19 +77,17 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
         fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
       }
     }
-
+    const isValidDate = date => date.toString() !== 'Invalid Date';
     // save end date in calendar inmediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
-      let currentEndDate = new Date(inputTo.value);
-      if (currentEndDate.toString() !== 'Invalid Date') {
+      if (isValidDate(parseDateWithFormat(inputTo.value))) {
         fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
       }
     }
 
     // overriding the flatpickr bug where the startDate gets deleted on blur
     if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-      let currentStartDate = new Date(lastStartValue.current);
-      if (currentStartDate.toString() !== 'Invalid Date') {
+      if (isValidDate(parseDateWithFormat(lastStartValue.current))) {
         inputFrom.value = lastStartValue.current;
         if (inputTo.value) {
           fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);

package/lib/components/Dropdown/Dropdown.js

@@ -227,6 +227,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ,
     role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
     ,
+    "aria-owns": getMenuProps().id,
     "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../TextInput/index.js');
+require('../TextInput/ControlledPasswordInput.js');
 var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');

package/lib/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
+    /**
+     * Provide the children form elements to be rendered inside of the <fieldset>
+     */
+    children: React.ReactNode;
+    /**
+     * Provide a custom className to be applied to the containing <fieldset> node
+     */
+    className?: string;
+    /**
+     * Specify whether the <FormGroup> is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide id for the fieldset <legend> which corresponds to the fieldset
+     * `aria-labelledby`
+     */
+    legendId?: string;
+    /**
+     * Provide the text to be rendered inside of the fieldset <legend>
+     */
+    legendText: React.ReactNode;
+    /**
+     * Specify whether the message should be displayed in the <FormGroup>
+     */
+    message?: boolean;
+    /**
+     * Provide the text for the message in the <FormGroup>
+     */
+    messageText?: string;
+}
+declare const FormGroup: {
+    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the children form elements to be rendered inside of the <fieldset>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing <fieldset> node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <FormGroup> is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide id for the fieldset <legend> which corresponds to the fieldset
+         * `aria-labelledby`
+         */
+        legendId: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the text to be rendered inside of the fieldset <legend>
+         */
+        legendText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Specify whether the message should be displayed in the <FormGroup>
+         */
+        message: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text for the message in the <FormGroup>
+         */
+        messageText: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        invalid: boolean;
+        message: boolean;
+        messageText: string;
+    };
+};
+export default FormGroup;

package/lib/components/IconButton/index.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
@@ -32,10 +33,10 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     closeOnActivation = true,
     defaultOpen = false,
     disabled,
-    enterDelayMs,
+    enterDelayMs = 100,
     kind,
     label,
-    leaveDelayMs,
+    leaveDelayMs = 100,
     wrapperClasses,
     size,
     ...rest

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright IBM Corp. 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, { ElementType, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Density of components within this layout
+ */
+type Density = 'condensed' | 'normal';
+/**
+ * Size of components within this layout
+ */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface LayoutProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Specify a custom component or element to be rendered as the top-level
+     * element in the component
+     */
+    as?: (() => ReactNode) | string | ElementType;
+    /**
+     * Provide child elements to be rendered inside of `Layout`
+     */
+    children?: ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the desired density of components within this layout
+     */
+    density?: Density;
+    /**
+     * Specify the desired size of components within this layout
+     */
+    size?: Size;
+}
+declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<React.ReactNode>>;
+export interface LayoutConstraintProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Specify a custom component or element to be rendered as the top-level
+     * element in the component
+     */
+    as?: (() => ReactNode) | string | ElementType;
+    /**
+     * Provide child elements to be rendered inside of `LayoutConstraint`
+     */
+    children?: ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the desired layout density constraints of this element's children
+     */
+    density?: {
+        min?: Density | null;
+        default?: Density | null;
+        max?: Density | null;
+    } | null;
+    /**
+     * Specify the desired layout size constraints of this element's children
+     */
+    size?: {
+        min?: Size | null;
+        default?: Size | null;
+        max?: Size | null;
+    } | null;
+}
+declare const LayoutConstraint: React.ForwardRefExoticComponent<LayoutConstraintProps & React.RefAttributes<React.ReactNode>>;
+export { Layout, LayoutConstraint };

package/lib/components/Layout/index.js

@@ -23,6 +23,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 const densities = ['condensed', 'normal'];
+
+/**
+ * Density of components within this layout
+ */
+
+/**
+ * Size of components within this layout
+ */
+
 const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref, forwardRef) {
   let {
     as: BaseComponent = 'div',
@@ -34,8 +43,8 @@ const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](className, `${prefix}--layout`, {
-    [`${prefix}--layout--size-${size}`]: sizes.includes(size),
-    [`${prefix}--layout--density-${density}`]: densities.includes(density)
+    [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
+    [`${prefix}--layout--density-${density}`]: density && densities.includes(density)
   });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: forwardRef,
@@ -82,9 +91,9 @@ const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(funct
   }).map(_ref3 => {
     let [group, constraints] = _ref3;
     return {
-      [`${prefix}--layout-constraint--${group}:default-${constraints?.default}`]: constraints?.default,
-      [`${prefix}--layout-constraint--${group}:min-${constraints?.min}`]: constraints?.min,
-      [`${prefix}--layout-constraint--${group}:max-${constraints?.max}`]: constraints?.max
+      [`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
+      [`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
+      [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
     };
   }));
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/Link/Link.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, { AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-interface LinkProps {
+import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

package/lib/components/Link/Link.js

@@ -44,7 +44,8 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
     className,
-    rel
+    rel,
+    target
   };
 
   // Reference for disabled links:

package/lib/components/MenuButton/index.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');

package/lib/components/Modal/Modal.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var toggleClass = require('../../tools/toggleClass.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var Modal = require('../Modal/Modal.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var types = require('../../prop-types/types.js');
 var warning = require('../../internal/warning.js');