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

package/lib/components/Modal/Modal.js

@@ -30,6 +30,7 @@ var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
+var events = require('../../tools/events.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -117,7 +118,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       }
     }
   }
-  function handleMousedown(evt) {
+  function handleOnClick(evt) {
     const target = evt.target;
     evt.stopPropagation();
     if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
@@ -316,7 +317,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   return /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
-    onMouseDown: handleMousedown,
+    onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",

package/lib/components/Search/Search.js

@@ -130,15 +130,15 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["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["default"].createElement(CustomSearchIcon, {
     icon: renderIcon

package/lib/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/lib/components/Slider/Slider.js

@@ -1103,13 +1103,14 @@ class Slider extends React.PureComponent {
       }, other), /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
-        label: `${value}`,
+        label: `${formatLabel(value, '')}`,
         align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default["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,
@@ -1122,7 +1123,7 @@ class Slider extends React.PureComponent {
       }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
-        label: `${valueUpper}`,
+        label: `${formatLabel(valueUpper || 0, '')}`,
         align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: upperThumbClasses,

package/lib/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, };