@carbon/react 1.61.0 → 1.62.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/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/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.js

@@ -13,7 +13,7 @@ import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef, useLayoutEffect } from 'react';
 import '../Grid/FlexGrid.js';
-import '../Grid/Grid.js';
+import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
 import '../Grid/Column.js';
 import '../Grid/ColumnHang.js';
@@ -35,9 +35,10 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 import { matches, match } from '../../internal/keyboard/match.js';
-import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
+import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
 
 var _ChevronLeft, _ChevronRight;
+const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
 
@@ -58,7 +59,7 @@ const TabContext = /*#__PURE__*/React__default.createContext({
   hasSecondaryLabel: false
 });
 const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
-`(max-width: ${breakpoints.md.width})`;
+const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default.createContext(0);
@@ -137,7 +138,47 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes.number
 };
-({
+function TabsVertical(_ref2) {
+  let {
+    children,
+    height,
+    defaultSelectedIndex = 0,
+    onChange,
+    selectedIndex: controlledSelectedIndex,
+    ...rest
+  } = _ref2;
+  const [selectedIndex, setSelectedIndex] = useControllableState({
+    value: controlledSelectedIndex,
+    defaultValue: defaultSelectedIndex,
+    onChange: value => onChange?.({
+      selectedIndex: value
+    })
+  });
+  const props = {
+    ...rest,
+    selectedIndex,
+    onChange: _ref3 => {
+      let {
+        selectedIndex
+      } = _ref3;
+      return setSelectedIndex(selectedIndex);
+    }
+  };
+  const isSm = useMatchMedia(smMediaQuery);
+  if (!isSm) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-component-props
+      React__default.createElement(GridAsGridComponent, {
+        style: {
+          height: height
+        }
+      }, /*#__PURE__*/React__default.createElement(Tabs, props, children))
+    );
+  }
+  return /*#__PURE__*/React__default.createElement(Tabs, props, children);
+}
+TabsVertical.propTypes = {
   /**
    * Provide child elements to be rendered inside the `TabsVertical`.
    * These elements should render either `TabsListVertical` or `TabsPanels`
@@ -162,7 +203,7 @@ Tabs.propTypes = {
    * in a controlled mode and should be used along with `onChange`
    */
   selectedIndex: PropTypes.number
-});
+};
 
 /**
  * Get the next index for a given keyboard event
@@ -183,6 +224,25 @@ function getNextIndex(event, total, index) {
   }
 }
 
+/**
+ * Get the next index for a given keyboard event
+ * given a count of the total items and the current index
+ */
+function getNextIndexVertical(event, total, index) {
+  switch (true) {
+    case match(event, ArrowDown):
+      return (index + 1) % total;
+    case match(event, ArrowUp):
+      return (total + index - 1) % total;
+    case match(event, Home):
+      return 0;
+    case match(event, End):
+      return total - 1;
+    default:
+      return index;
+  }
+}
+
 /**
  * TabList
  */
@@ -477,7 +537,133 @@ TabList.propTypes = {
    */
   scrollIntoView: PropTypes.bool
 };
-({
+
+/**
+ * TabListVertical
+ */
+
+// type TabElement = HTMLElement & { disabled?: boolean };
+
+function TabListVertical(_ref7) {
+  let {
+    activation = 'automatic',
+    'aria-label': label,
+    children,
+    className: customClassName,
+    scrollIntoView,
+    ...rest
+  } = _ref7;
+  const {
+    activeIndex,
+    selectedIndex,
+    setSelectedIndex,
+    setActiveIndex
+  } = React__default.useContext(TabsContext);
+  const prefix = usePrefix();
+  const ref = useRef(null);
+  const [isOverflowingBottom, setIsOverflowingBottom] = useState(false);
+  const [isOverflowingTop, setIsOverflowingTop] = useState(false);
+  const isSm = useMatchMedia(smMediaQuery);
+  const className = cx(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
+  const tabs = useRef([]);
+  function onKeyDown(event) {
+    if (matches(event, [ArrowDown, ArrowUp, Home, End])) {
+      event.preventDefault();
+      const filtredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
+      if (activation === 'automatic') {
+        setSelectedIndex(nextIndex);
+      } else if (activation === 'manual') {
+        setActiveIndex(nextIndex);
+      }
+      tabs.current[nextIndex]?.focus();
+    }
+  }
+  useEffectOnce(() => {
+    if (tabs.current[selectedIndex]?.disabled) {
+      const activeTabs = tabs.current.filter(tab => {
+        return !tab.disabled;
+      });
+      if (activeTabs.length > 0) {
+        const tab = activeTabs[0];
+        setSelectedIndex(tabs.current.indexOf(tab));
+      }
+    }
+  });
+  useEffect(() => {
+    function handler() {
+      const containerHeight = ref.current?.offsetHeight;
+      const containerTop = ref.current?.getBoundingClientRect().top;
+      const selectedPositionTop = tabs.current[selectedIndex]?.getBoundingClientRect().top;
+      const halfTabHeight = verticalTabHeight / 2;
+      if (containerTop && containerHeight) {
+        // scrolls so selected tab is in view
+        if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
+          ref.current.scrollTo({
+            top: (selectedIndex - 1) * verticalTabHeight,
+            behavior: 'smooth'
+          });
+        }
+      }
+    }
+    window.addEventListener('resize', handler);
+    handler();
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, [selectedIndex, scrollIntoView]);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const handler = () => {
+      const halfTabHeight = verticalTabHeight / 2;
+      setIsOverflowingBottom(element.scrollTop + element.clientHeight + halfTabHeight <= element.scrollHeight);
+      setIsOverflowingTop(element.scrollTop > halfTabHeight);
+    };
+    const resizeObserver = new ResizeObserver(() => handler());
+    resizeObserver.observe(element);
+    element.addEventListener('scroll', handler);
+    return () => {
+      resizeObserver.disconnect();
+      element.removeEventListener('scroll', handler);
+    };
+  });
+  if (isSm) {
+    return /*#__PURE__*/React__default.createElement(TabList, _extends({}, rest, {
+      "aria-label": label,
+      contained: true
+    }), children);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, isOverflowingTop && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tab--list-gradient_top`
+  }), /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    "aria-label": label,
+    ref: ref,
+    role: "tablist",
+    className: `${prefix}--tab--list`,
+    onKeyDown: onKeyDown
+  }), React__default.Children.map(children, (child, index) => {
+    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
+      value: {
+        index,
+        hasSecondaryLabel: false
+      }
+    }, /*#__PURE__*/React__default.cloneElement(child, {
+      ref: node => {
+        tabs.current[index] = node;
+      }
+    }));
+  })), isOverflowingBottom && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tab--list-gradient_bottom`
+  }));
+}
+TabListVertical.propTypes = {
   /**
    * Specify whether the content tab should be activated automatically or
    * manually
@@ -497,7 +683,7 @@ TabList.propTypes = {
    * Specify an optional className to be added to the container node
    */
   className: PropTypes.string
-});
+};
 
 /**
  * Helper function to set up the behavior when a button is "long pressed".
@@ -603,7 +789,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
   useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
   useLayoutEffect(() => {
     function handler() {
-      const elementTabId = document.getElementById(`${id}`);
+      const elementTabId = document.getElementById(`${id}`) || tabRef.current;
       const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
       isEllipsisActive(newElement);
     }
@@ -986,4 +1172,4 @@ TabPanels.propTypes = {
   children: PropTypes.node
 };
 
-export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs };
+export { IconTab, Tab, TabList, TabListVertical, TabPanel, TabPanels, Tabs, TabsVertical };

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

@@ -7,4 +7,4 @@
 import { Tabs } from './Tabs';
 export default Tabs;
 export { default as TabsSkeleton } from './Tabs.Skeleton';
-export { TabPanels, type TabPanelsProps, TabPanel, type TabPanelProps, TabList, type TabListProps, IconTab, type IconTabProps, Tabs, type TabsProps, } from './Tabs';
+export { TabPanels, type TabPanelsProps, TabPanel, type TabPanelProps, TabList, type TabListProps, TabListVertical, type TabListVerticalProps, IconTab, type IconTabProps, Tabs, type TabsProps, TabsVertical, type TabsVerticalProps, } from './Tabs';

package/es/components/Tile/Tile.js

@@ -390,6 +390,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   const [interactive, setInteractive] = useState(true);
   const aboveTheFold = useRef(null);
   const belowTheFold = useRef(null);
+  const chevronInteractiveRef = useRef(null);
   const tileContent = useRef(null);
   const tile = useRef(null);
   const ref = useMergedRefs([forwardRef, tile]);
@@ -421,7 +422,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     setMaxHeight();
   }
   function handleKeyUp(evt) {
-    if (evt.target !== tile.current) {
+    if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
       if (matches(evt, [Enter, Space])) {
         evt.preventDefault();
       }
@@ -515,6 +516,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
     onClick: composeEventHandlers([onClick, handleClick]),
     "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+    ref: chevronInteractiveRef,
     className: chevronInteractiveClassNames
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement("div", {
     ref: belowTheFold,

package/es/index.js

@@ -107,7 +107,7 @@ export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredL
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as IconSwitch } from './components/Switch/IconSwitch.js';
-export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
+export { IconTab, Tab, TabList, TabListVertical, TabPanel, TabPanels, Tabs, TabsVertical } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as Tag } from './components/Tag/Tag.js';

package/lib/components/ComboBox/ComboBox.js

@@ -227,7 +227,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           setHighlightedIndex(changes.selectedItem);
           if (onChange) {
             onChange({
-              selectedItem: changes.selectedItem
+              selectedItem: changes.selectedItem,
+              inputValue
             });
           }
           return changes;
@@ -440,6 +441,16 @@ const ComboBox = /*#__PURE__*/React.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/lib/components/ComposedModal/ComposedModal.js

@@ -25,6 +25,7 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index$1 = require('../FeatureFlags/index.js');
+var events = require('../../tools/events.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -159,7 +160,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
     onKeyDown?.(event);
   }
-  function handleMousedown(evt) {
+  function handleOnClick(evt) {
     const target = evt.target;
     evt.stopPropagation();
     if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
@@ -267,7 +268,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: ref,
     "aria-hidden": !open,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
-    onMouseDown: handleMousedown,
+    onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onKeyDown: handleKeyDown,
     className: modalClass
   }), /*#__PURE__*/React__default["default"].createElement("div", {

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

@@ -33,14 +33,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/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/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,