@carbon/react 1.53.1 → 1.54.0

package/lib/components/Button/Button.js

@@ -12,17 +12,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
 var index = require('../IconButton/index.js');
 var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var useId = require('../../internal/useId.js');
+var ButtonBase = require('./ButtonBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
@@ -34,18 +31,13 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
-const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
-  let {
+const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(props, ref) {
+  const tooltipRef = React.useRef(null);
+  const {
     as,
     children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
     hasIconOnly = false,
-    href,
     iconDescription,
-    isExpressive = false,
-    isSelected,
     kind = 'primary',
     onBlur,
     onClick,
@@ -54,92 +46,21 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     onMouseLeave,
     renderIcon: ButtonImageElement,
     size,
-    tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
-    type = 'button',
     ...rest
-  } = _ref;
-  const tooltipRef = React.useRef(null);
-  const prefix = usePrefix.usePrefix();
+  } = props;
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
     }
   };
-  const buttonClasses = cx__default["default"](className, {
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--xl`]: size === 'xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--2xl`]: size === '2xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--btn--${kind}`]: kind,
-    [`${prefix}--btn--disabled`]: disabled,
-    [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly,
-    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
-  });
-  const commonProps = {
-    tabIndex,
-    className: buttonClasses,
-    ref
-  };
-  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
-    "aria-label": iconDescription,
-    className: `${prefix}--btn__icon`,
-    "aria-hidden": "true"
-  });
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, null);
-  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
-  let component = 'button';
-  const assistiveId = useId.useId('danger-description');
-  const {
-    'aria-pressed': ariaPressed,
-    'aria-describedby': ariaDescribedBy
-  } = rest;
-  let otherProps = {
-    disabled,
-    type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
-    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
-  };
-  const anchorProps = {
-    href
-  };
-  let assistiveText = null;
-  if (dangerButtonVariants.includes(kind)) {
-    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
-      id: assistiveId,
-      className: `${prefix}--visually-hidden`
-    }, dangerDescription);
-  }
-  if (as) {
-    component = as;
-    otherProps = {
-      ...otherProps,
-      ...anchorProps
-    };
-  } else if (href && !disabled) {
-    component = 'a';
-    otherProps = anchorProps;
-  }
   if (!isIconOnlyButton(hasIconOnly)) {
-    return /*#__PURE__*/React__default["default"].createElement(component, {
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      onClick,
-      ...rest,
-      ...commonProps,
-      ...otherProps
-    }, assistiveText, children, buttonImage);
+    return /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: ref
+    }, props));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
@@ -156,7 +77,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      ref: ref,
       as: as,
       align: align,
       label: iconDescription,
@@ -166,8 +88,9 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
-      onClick: events.composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
+      onClick: events.composeEventHandlers([onClick, handleClick]),
+      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+    }), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';

package/lib/components/Button/ButtonBase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { ButtonProps } from './Button';
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export default ButtonBase;

package/lib/components/Button/ButtonBase.js

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function ButtonBase(_ref, ref) {
+  let {
+    as,
+    children,
+    className,
+    dangerDescription = 'danger',
+    disabled = false,
+    hasIconOnly = false,
+    href,
+    iconDescription,
+    isExpressive = false,
+    isSelected,
+    kind = 'primary',
+    onBlur,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    renderIcon: ButtonImageElement,
+    size,
+    tabIndex,
+    type = 'button',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const buttonClasses = cx__default["default"](className, {
+    [`${prefix}--btn`]: true,
+    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--xl`]: size === 'xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--2xl`]: size === '2xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
+    [`${prefix}--btn--${kind}`]: kind,
+    [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--btn--expressive`]: isExpressive,
+    [`${prefix}--btn--icon-only`]: hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
+    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
+  });
+  const commonProps = {
+    tabIndex,
+    className: buttonClasses,
+    ref
+  };
+  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
+    "aria-label": iconDescription,
+    className: `${prefix}--btn__icon`,
+    "aria-hidden": "true"
+  });
+  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
+  let component = 'button';
+  const assistiveId = useId.useId('danger-description');
+  const {
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedBy
+  } = rest;
+  let otherProps = {
+    disabled,
+    type,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
+    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
+  };
+  const anchorProps = {
+    href
+  };
+  let assistiveText = null;
+  if (dangerButtonVariants.includes(kind)) {
+    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
+      id: assistiveId,
+      className: `${prefix}--visually-hidden`
+    }, dangerDescription);
+  }
+  if (as) {
+    component = as;
+    otherProps = {
+      ...otherProps,
+      ...anchorProps
+    };
+  } else if (href && !disabled) {
+    component = 'a';
+    otherProps = anchorProps;
+  }
+  return /*#__PURE__*/React__default["default"].createElement(component, {
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onClick,
+    ...rest,
+    ...commonProps,
+    ...otherProps
+  }, assistiveText, children, buttonImage);
+});
+
+exports["default"] = ButtonBase;

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -167,6 +167,7 @@ function CodeSnippet(_ref) {
       feedback: feedback,
       feedbackTimeout: feedbackTimeout
     }), /*#__PURE__*/React__default["default"].createElement("code", {
+      "aria-live": "assertive",
       id: uid,
       ref: innerCodeRef
     }, children));

package/lib/components/ComboBox/ComboBox.js

@@ -249,7 +249,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
   });
-  const comboBoxHelperId = !helperText ? undefined : `combobox-helper-text-${comboBoxInstanceId}`;
+  const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
+  const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
+  const invalidTextId = `combobox-invalid-text-${comboBoxInstanceId}`;
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
@@ -387,6 +389,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }
     } : {};
+
+    // The input should be described by the appropriate message text id
+    // when both the message is supplied *and* when the component is in
+    // the matching state (invalid, warn, etc).
+    const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -399,11 +406,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       disabled: disabled,
       invalid: invalid,
       invalidText: invalidText,
+      invalidTextId: invalidTextId,
       isOpen: isOpen,
       light: light,
       size: size,
       warn: warn,
-      warnText: warnText
+      warnText: warnText,
+      warnTextId: warnTextId
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--list-box__field`
     }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
@@ -421,7 +430,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, inputProps, rest, readOnlyEventHandlers, {
       readOnly: readOnly,
       ref: mergeRefs["default"](textInput, ref),
-      "aria-describedby": helperText && !invalid && !warn && !isFluid ? comboBoxHelperId : undefined
+      "aria-describedby": ariaDescribedBy
     })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
       className: `${prefix}--list-box__invalid-icon`
     }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
@@ -460,7 +469,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       as: "div",
-      id: comboBoxHelperId,
+      id: helperTextId,
       className: helperClasses
     }, helperText))));
   });

package/lib/components/ComboButton/index.js

@@ -162,7 +162,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.

package/lib/components/ComposedModal/ComposedModal.js

@@ -23,6 +23,7 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -125,6 +126,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const button = React.useRef(null);
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -142,12 +144,19 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  function handleKeyDown(evt) {
-    evt.stopPropagation();
-    if (match.match(evt, keys.Escape)) {
-      closeModal(evt);
+  function handleKeyDown(event) {
+    event.stopPropagation();
+    if (match.match(event, keys.Escape)) {
+      closeModal(event);
+    }
+    if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
+      wrapFocus.wrapFocusWithoutSentinels({
+        containerNode: innerModal.current,
+        currentActiveNode: event.target,
+        event: event
+      });
     }
-    onKeyDown?.(evt);
+    onKeyDown?.(event);
   }
   function handleMousedown(evt) {
     evt.stopPropagation();
@@ -255,7 +264,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: handleBlur,
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     onMouseDown: handleMousedown,
     onKeyDown: handleKeyDown,
     className: modalClass
@@ -265,14 +274,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedSlug, childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`

package/lib/components/DataTable/DataTable.js

@@ -324,7 +324,7 @@ class DataTable extends React__default["default"].Component {
         isSortable,
         useStaticWidth,
         stickyHeader,
-        overflowMenuOnHover = true,
+        overflowMenuOnHover = false,
         experimentalAutoAlign
       } = this.props;
       return {

package/lib/components/DataTable/TableBatchAction.d.ts

@@ -24,7 +24,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
 declare const TableBatchAction: {
     ({ renderIcon, iconDescription, ...props }: {
         [x: string]: any;
-        renderIcon?: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType | undefined;
+        renderIcon?: import("@carbon/icons-react").CarbonIconType | undefined;
         iconDescription?: string | undefined;
     }): import("react/jsx-runtime").JSX.Element;
     propTypes: {

package/lib/components/DataTable/TableToolbarMenu.d.ts

@@ -8,13 +8,17 @@ import React from 'react';
 export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**
-     * Provide an optional class name for the toolbar menu
+     * Provide an optional class name for the toolbar menu trigger button
      */
     className?: string;
     /**
      * The description of the menu icon.
      */
     iconDescription?: string;
+    /**
+     * Provide an optional class name for the toolbar menu
+     */
+    menuOptionsClass?: string;
     /**
      * Optional prop to allow overriding the default menu icon
      */

package/lib/components/DataTable/TableToolbarMenu.js

@@ -30,16 +30,19 @@ const TableToolbarMenu = _ref => {
     renderIcon = iconsReact.Settings,
     iconDescription = defaultIconDescription,
     children,
+    menuOptionsClass,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const toolbarActionClasses = cx__default["default"](className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
+  const menuOptionsClasses = cx__default["default"](menuOptionsClass, `${prefix}--toolbar-action__menu`);
   return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
     "aria-label": iconDescription,
     renderIcon: renderIcon,
     className: toolbarActionClasses,
     title: iconDescription,
     iconDescription: iconDescription,
+    menuOptionsClass: menuOptionsClasses,
     flipped: true
   }, rest), children);
 };
@@ -53,6 +56,10 @@ TableToolbarMenu.propTypes = {
    * The description of the menu icon.
    */
   iconDescription: PropTypes__default["default"].string,
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  menuOptionsClass: PropTypes__default["default"].string,
   /**
    * Optional prop to allow overriding the default menu icon
    */

package/lib/components/DatePicker/DatePicker.d.ts

@@ -102,6 +102,10 @@ interface DatePickerProps {
      * The `open` event handler.
      */
     onOpen?: flatpickr.Options.Hook;
+    /**
+     * flatpickr prop passthrough. Controls how dates are parsed.
+     */
+    parseDate?: (date: string) => Date | false;
     /**
      * whether the DatePicker is to be readOnly
      * if boolean applies to all inputs

package/lib/components/DatePicker/DatePicker.js

@@ -170,6 +170,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     readOnly = false,
     short = false,
     value,
+    parseDate: parseDateProp,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -279,6 +280,37 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     } else {
       localeData = l10n__default["default"][locale];
     }
+
+    /**
+     * parseDate is called before the date is actually set.
+     * It attempts to parse the input value and return a valid date string.
+     * Flatpickr's default parser results in odd dates when given invalid
+     * values, so instead here we normalize the month/day to `1` if given
+     * a value outside the acceptable range.
+     */
+    let parseDate;
+    if (!parseDateProp && dateFormat === 'm/d/Y') {
+      // This function only supports the default dateFormat.
+      parseDate = date => {
+        // Month must be 1-12. If outside these bounds, `1` should be used.
+        const month = date.split('/')[0] <= 12 && date.split('/')[0] > 0 ? parseInt(date.split('/')[0]) : 1;
+        const year = parseInt(date.split('/')[2]);
+        if (month && year) {
+          // The month and year must be provided to be able to determine
+          // the number of days in the month.
+          const daysInMonth = new Date(year, month, 0).getDate();
+          // If the day does not fall within the days in the month, `1` should be used.
+          const day = date.split('/')[1] <= daysInMonth && date.split('/')[1] > 0 ? parseInt(date.split('/')[1]) : 1;
+          return new Date(`${year}/${month}/${day}`);
+        } else {
+          // With no month and year, we cannot calculate anything.
+          // Returning false gives flatpickr an invalid date, which will clear the input
+          return false;
+        }
+      };
+    } else if (parseDateProp) {
+      parseDate = parseDateProp;
+    }
     const {
       current: start
     } = startInputField;
@@ -297,6 +329,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       [enableOrDisable]: enableOrDisableArr,
       minDate: minDate,
       maxDate: maxDate,
+      parseDate: parseDate,
       plugins: [datePickerType === 'range' ? rangePlugin["default"]({
         input: endInputField.current
       }) : () => {}, appendTo ? appendToPlugin["default"]({
@@ -708,6 +741,10 @@ DatePicker.propTypes = {
    * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
    */
   onOpen: PropTypes__default["default"].func,
+  /**
+   * flatpickr prop passthrough. Controls how dates are parsed.
+   */
+  parseDate: PropTypes__default["default"].func,
   /**
    * whether the DatePicker is to be readOnly
    * if boolean applies to all inputs

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

@@ -13,7 +13,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/lib/components/IconButton/index.js

@@ -12,12 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 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');
 var usePrefix = require('../../internal/usePrefix.js');
+var ButtonBase = require('../Button/ButtonBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,7 +54,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     disabled: disabled,
     kind: kind,
     ref: ref,
@@ -69,7 +68,7 @@ IconButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

package/lib/components/ListBox/ListBox.d.ts

@@ -21,6 +21,10 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      * Specify the text to be displayed when the control is invalid
      */
     invalidText?: React.ReactNode;
+    /**
+     * Specify the id to be applied to the element containing the invalid text
+     */
+    invalidTextId?: string;
     /**
      * Specify if the control should render open
      */
@@ -50,6 +54,10 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Specify the id to be applied to the element containing the warn text
+     */
+    warnTextId?: string;
 }
 export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
 /**