@carbon/react 1.61.0-rc.1 → 1.62.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -217,7 +217,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           setHighlightedIndex(changes.selectedItem);
           if (onChange) {
             onChange({
-              selectedItem: changes.selectedItem
+              selectedItem: changes.selectedItem,
+              inputValue
             });
           }
           return changes;
@@ -430,6 +431,16 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         if (highlightedIndex !== -1) {
           selectItem(filterItems(items, itemToString, inputValue)[highlightedIndex]);
         }
+
+        // Since `onChange` does not normally fire when the menu is closed, we should
+        // manually fire it when `allowCustomValue` is provided, the menu is closing,
+        // and there is a value.
+        if (allowCustomValue && isOpen && inputValue) {
+          onChange({
+            selectedItem,
+            inputValue
+          });
+        }
         event.preventDownshiftDefault = true;
         event?.persist?.();
       }

package/es/components/ComposedModal/ComposedModal.js

@@ -21,6 +21,7 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { composeEventHandlers } from '../../tools/events.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';
 
@@ -148,7 +149,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
     onKeyDown?.(event);
   }
-  function handleMousedown(evt) {
+  function handleOnClick(evt) {
     const target = evt.target;
     evt.stopPropagation();
     if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
@@ -256,7 +257,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     ref: ref,
     "aria-hidden": !open,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
-    onMouseDown: handleMousedown,
+    onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onKeyDown: handleKeyDown,
     className: modalClass
   }), /*#__PURE__*/React__default.createElement("div", {

package/es/components/DatePicker/plugins/rangePlugin.js

@@ -25,14 +25,16 @@ var carbonFlatpickrRangePlugin = (config => {
         origSetDate.call(this, dates, triggerChange, format);
         // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
-        if (!triggerChange) {
+        if (!triggerChange && dates.length === 2) {
           const {
-            _input: inputDates
+            _input: inputFrom
           } = fp;
-          const inputDatesArray = inputDates.value.split(' ');
-          [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
+          const {
+            input: inputTo
+          } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
             if (input) {
-              input = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
           });
         }

package/es/components/Dialog/index.d.ts

@@ -4,7 +4,6 @@
  * 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 'wicg-inert';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface DialogProps extends ReactAttr<HTMLDialogElement> {
@@ -26,6 +25,6 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
      */
     open?: boolean;
 }
-declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export { Dialog };
-export default Dialog;
+declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+export { unstable__Dialog };
+export default unstable__Dialog;

package/es/components/Modal/Modal.js

@@ -26,6 +26,7 @@ import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { composeEventHandlers } from '../../tools/events.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
@@ -106,7 +107,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       }
     }
   }
-  function handleMousedown(evt) {
+  function handleOnClick(evt) {
     const target = evt.target;
     evt.stopPropagation();
     if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
@@ -305,7 +306,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
-    onMouseDown: handleMousedown,
+    onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",

package/es/components/Search/Search.js

@@ -120,15 +120,15 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    "aria-label": "button",
+    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? uniqueId : undefined,
-    role: "button",
+    role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
     tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
-    "aria-expanded": onExpand && isExpanded ? true : false,
+    "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : undefined,
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon

package/es/components/Slider/Slider.d.ts

@@ -36,7 +36,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     disabled?: boolean;
     /**
-     * The callback to format the label associated with the minimum/maximum value.
+     * The callback to format the label associated with the minimum/maximum value and the value tooltip when hideTextInput is true.
      */
     formatLabel?: (value: number, label: string | undefined) => string;
     /**

package/es/components/Slider/Slider.js

@@ -1092,13 +1092,14 @@ class Slider extends PureComponent {
       }, other), /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
-        label: `${value}`,
+        label: `${formatLabel(value, '')}`,
         align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
         tabIndex: !readOnly ? 0 : -1,
+        "aria-valuetext": `${formatLabel(value, '')}`,
         "aria-valuemax": twoHandles ? valueUpper : max,
         "aria-valuemin": min,
         "aria-valuenow": value,
@@ -1111,7 +1112,7 @@ class Slider extends PureComponent {
       }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
-        label: `${valueUpper}`,
+        label: `${formatLabel(valueUpper || 0, '')}`,
         align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: upperThumbClasses,

package/es/components/Tabs/Tabs.d.ts

@@ -77,6 +77,63 @@ declare namespace Tabs {
         selectedIndex: PropTypes.Requireable<number>;
     };
 }
+export interface TabsVerticalProps {
+    /**
+     * Provide child elements to be rendered inside the `TabsVertical`.
+     * These elements should render either `TabsListVertical` or `TabsPanels`
+     */
+    children?: ReactNode;
+    /**
+     * Specify which content tab should be initially selected when the component
+     * is first rendered
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * Option to set a height style only if using vertical variation
+     */
+    height?: string;
+    /**
+     * Provide an optional function which is called
+     * whenever the state of the `Tabs` changes
+     */
+    onChange?(state: {
+        selectedIndex: number;
+    }): void;
+    /**
+     * Control which content panel is currently selected. This puts the component
+     * in a controlled mode and should be used along with `onChange`
+     */
+    selectedIndex?: number;
+}
+declare function TabsVertical({ children, height, defaultSelectedIndex, onChange, selectedIndex: controlledSelectedIndex, ...rest }: TabsVerticalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsVertical {
+    var propTypes: {
+        /**
+         * Provide child elements to be rendered inside the `TabsVertical`.
+         * These elements should render either `TabsListVertical` or `TabsPanels`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify which content tab should be initially selected when the component
+         * is first rendered
+         */
+        defaultSelectedIndex: PropTypes.Requireable<number>;
+        /**
+         * Option to set a height style only if using vertical variation
+         */
+        height: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function which is called whenever the state of the
+         * `Tabs` changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Control which content panel is currently selected. This puts the component
+         * in a controlled mode and should be used along with `onChange`
+         */
+        selectedIndex: PropTypes.Requireable<number>;
+    };
+}
 /**
  * TabList
  */
@@ -195,6 +252,59 @@ declare namespace TabList {
         scrollIntoView: PropTypes.Requireable<boolean>;
     };
 }
+/**
+ * TabListVertical
+ */
+export interface TabListVerticalProps extends DivAttributes {
+    /**
+     * Specify whether the content tab should be activated automatically or
+     * manually
+     */
+    activation?: 'automatic' | 'manual';
+    /**
+     * Provide an accessible label to be read when a user interacts with this
+     * component
+     */
+    'aria-label': string;
+    /**
+     * Provide child elements to be rendered inside `ContentTabs`.
+     * These elements should render a `ContentTab`
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to the container node
+     */
+    className?: string;
+    /**
+     * Choose whether to automatically scroll to newly selected tabs
+     * on component rerender
+     */
+    scrollIntoView?: boolean;
+}
+declare function TabListVertical({ activation, 'aria-label': label, children, className: customClassName, scrollIntoView, ...rest }: TabListVerticalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabListVertical {
+    var propTypes: {
+        /**
+         * Specify whether the content tab should be activated automatically or
+         * manually
+         */
+        activation: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label to be read when a user interacts with this
+         * component
+         */
+        'aria-label': PropTypes.Validator<string>;
+        /**
+         * Provide child elements to be rendered inside `ContentTabs`.
+         * These elements should render a `ContentTab`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to the container node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
 /**
  * Tab
  */
@@ -308,4 +418,4 @@ declare namespace TabPanels {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
 }
-export { Tabs, Tab, IconTab, TabPanel, TabPanels, TabList };
+export { Tabs, TabsVertical, Tab, IconTab, TabPanel, TabPanels, TabList, TabListVertical, };