@carbon/react 1.44.0 → 1.45.0

package/lib/components/Slider/Slider.js

@@ -20,6 +20,9 @@ var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var iconsReact = require('@carbon/icons-react');
 require('../Text/index.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+var SliderHandles = require('./SliderHandles.js');
 var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
 
@@ -30,59 +33,53 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 
-var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
-const LowerHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
-}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path2 || (_path2 = /*#__PURE__*/React__default["default"].createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const LowerHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
-}, _path3 || (_path3 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path4 || (_path4 = /*#__PURE__*/React__default["default"].createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path5 || (_path5 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M15.08 0H16v6.46h-.92z"
-})), _path6 || (_path6 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
-})), _path7 || (_path7 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
-}))));
-const UpperHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
-}, _path8 || (_path8 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path9 || (_path9 = /*#__PURE__*/React__default["default"].createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const UpperHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, _path10 || (_path10 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path11 || (_path11 = /*#__PURE__*/React__default["default"].createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path12 || (_path12 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M.92 24H0v-6.46h.92z"
-})), _path13 || (_path13 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
-})), _path14 || (_path14 = /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
-}))));
+var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
+const ThumbWrapper = _ref => {
+  let {
+    hasTooltip = false,
+    className,
+    style,
+    children,
+    ...rest
+  } = _ref;
+  if (hasTooltip) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-component-props
+      React__default["default"].createElement(Tooltip.Tooltip, _rollupPluginBabelHelpers["extends"]({
+        className: className,
+        style: style
+      }, rest), children)
+    );
+  } else {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-dom-props
+      React__default["default"].createElement("div", {
+        className: className,
+        style: style
+      }, children)
+    );
+  }
+};
+ThumbWrapper.propTypes = {
+  /**
+   * The thumb node itself.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * CSS wrapper class names.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Should the thumb show a tooltip with the current value?
+   */
+  hasTooltip: PropTypes__default["default"].bool.isRequired,
+  /**
+   * Percentage offset for the select thumb value.
+   */
+  style: PropTypes__default["default"].object
+};
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
@@ -159,6 +156,12 @@ class Slider extends React.PureComponent {
         return;
       }
 
+      // We're going to force focus on one of the handles later on here, b/c we're
+      // firing on a mousedown event, we need to call event.preventDefault() to
+      // keep the focus from leaving the HTMLElement.
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#notes
+      evt.preventDefault();
+
       // Register drag stop handlers
       DRAG_STOP_EVENT_TYPES.forEach(element => {
         this.element?.ownerDocument.addEventListener(element, this.onDragStop);
@@ -171,14 +174,34 @@ class Slider extends React.PureComponent {
       const clientX = this.getClientXFromEvent(evt);
       let activeHandle;
       if (this.hasTwoHandles()) {
-        const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
-        const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
-        if (distanceToLower <= distanceToUpper) {
+        if (evt.target == this.thumbRef.current) {
           activeHandle = HandlePosition.LOWER;
-        } else {
+        } else if (evt.target == this.thumbRefUpper.current) {
           activeHandle = HandlePosition.UPPER;
+        } else {
+          const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
+          const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
+          if (distanceToLower <= distanceToUpper) {
+            activeHandle = HandlePosition.LOWER;
+          } else {
+            activeHandle = HandlePosition.UPPER;
+          }
         }
       }
+
+      // Force focus to the appropriate handle.
+      const focusOptions = {
+        preventScroll: true
+      };
+      if (this.hasTwoHandles()) {
+        if (this.thumbRef.current && activeHandle === HandlePosition.LOWER) {
+          this.thumbRef.current.focus(focusOptions);
+        } else if (this.thumbRefUpper.current && activeHandle === HandlePosition.UPPER) {
+          this.thumbRefUpper.current.focus(focusOptions);
+        }
+      } else if (this.thumbRef.current) {
+        this.thumbRef.current.focus(focusOptions);
+      }
       this.setState({
         activeHandle
       });
@@ -476,12 +499,12 @@ class Slider extends React.PureComponent {
         }
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "calcLeftPercent", _ref => {
+    _rollupPluginBabelHelpers.defineProperty(this, "calcLeftPercent", _ref2 => {
       let {
         clientX,
         value,
         range
-      } = _ref;
+      } = _ref2;
       const boundingRect = this.element?.getBoundingClientRect?.();
       let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
@@ -503,11 +526,11 @@ class Slider extends React.PureComponent {
       // re-assure Typescript, return 0.
       return 0;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "calcSteppedValuePercent", _ref2 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "calcSteppedValuePercent", _ref3 => {
       let {
         leftPercent,
         range
-      } = _ref2;
+      } = _ref3;
       const {
         step = 1
       } = this.props;
@@ -536,12 +559,12 @@ class Slider extends React.PureComponent {
      *   clientX is not provided.
      * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "calcValue", _ref3 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "calcValue", _ref4 => {
       let {
         clientX,
         value,
         useRawValue = false
-      } = _ref3;
+      } = _ref4;
       const range = this.props.max - this.props.min;
 
       // @todo solve for rtl.
@@ -592,11 +615,11 @@ class Slider extends React.PureComponent {
      *
      * Guards against setting either lower or upper values beyond its counterpart.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "setValueLeftForHandle", (handle, _ref4) => {
+    _rollupPluginBabelHelpers.defineProperty(this, "setValueLeftForHandle", (handle, _ref5) => {
       let {
         value: newValue,
         left: newLeft
-      } = _ref4;
+      } = _ref5;
       const {
         value,
         valueUpper,
@@ -631,13 +654,13 @@ class Slider extends React.PureComponent {
         });
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "isValidValueForPosition", _ref5 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "isValidValueForPosition", _ref6 => {
       let {
         handle,
         value: newValue,
         min,
         max
-      } = _ref5;
+      } = _ref6;
       const {
         value,
         valueUpper
@@ -656,21 +679,21 @@ class Slider extends React.PureComponent {
       }
       return false;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "isValidValue", _ref6 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "isValidValue", _ref7 => {
       let {
         value,
         min,
         max
-      } = _ref6;
+      } = _ref7;
       return !(value < min || value > max);
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValueForPosition", _ref7 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValueForPosition", _ref8 => {
       let {
         handle,
         value: newValue,
         min,
         max
-      } = _ref7;
+      } = _ref8;
       const {
         value,
         valueUpper
@@ -689,12 +712,12 @@ class Slider extends React.PureComponent {
       }
       return newValue;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValue", _ref8 => {
+    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValue", _ref9 => {
       let {
         value,
         min,
         max
-      } = _ref8;
+      } = _ref9;
       if (value < min) {
         value = min;
       }
@@ -779,22 +802,10 @@ class Slider extends React.PureComponent {
     // Fire onChange event handler if present, if there's a usable value, and
     // if the value is different from the last one
     if (this.hasTwoHandles()) {
-      if (this.thumbRef.current) {
-        this.thumbRef.current.style.insetInlineStart = `${this.state.left}%`;
-        if (this.state.isRtl) {
-          this.thumbRef.current.style.transform = `translate(100%, -50%)`;
-        }
-      }
-      if (this.thumbRefUpper.current) {
-        this.thumbRefUpper.current.style.insetInlineStart = `${this.state.leftUpper}%`;
-      }
       if (this.filledTrackRef.current) {
         this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
       }
     } else {
-      if (this.thumbRef.current) {
-        this.thumbRef.current.style.insetInlineStart = this.state.isRtl ? `calc(${this.state.left}% - 14px)` : `${this.state.left}%`;
-      }
       if (this.filledTrackRef.current) {
         this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
       }
@@ -988,7 +999,8 @@ class Slider extends React.PureComponent {
       const containerClasses = cx__default["default"](`${prefix}--slider-container`, {
         [`${prefix}--slider-container--two-handles`]: twoHandles,
         [`${prefix}--slider-container--disabled`]: disabled,
-        [`${prefix}--slider-container--readonly`]: readOnly
+        [`${prefix}--slider-container--readonly`]: readOnly,
+        [`${prefix}--slider-container--rtl`]: isRtl
       });
       const sliderClasses = cx__default["default"](`${prefix}--slider`, {
         [`${prefix}--slider--disabled`]: disabled,
@@ -996,8 +1008,7 @@ class Slider extends React.PureComponent {
       });
       const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
       const conditionalInputClasses = {
-        [`${prefix}--text-input--light`]: light,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+        [`${prefix}--text-input--light`]: light
       };
       const lowerInputClasses = cx__default["default"]([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
         [`${prefix}--text-input--invalid`]: !readOnly && !isValid,
@@ -1008,10 +1019,12 @@ class Slider extends React.PureComponent {
         [`${prefix}--slider-text-input--warn`]: showWarningUpper
       }]);
       const lowerInputWrapperClasses = cx__default["default"]([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--lower`, {
-        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
       }]);
       const upperInputWrapperClasses = cx__default["default"]([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--upper`, {
-        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
       }]);
       const lowerThumbClasses = cx__default["default"](`${prefix}--slider__thumb`, {
         [`${prefix}--slider__thumb--lower`]: twoHandles
@@ -1019,6 +1032,22 @@ class Slider extends React.PureComponent {
       const upperThumbClasses = cx__default["default"](`${prefix}--slider__thumb`, {
         [`${prefix}--slider__thumb--upper`]: twoHandles
       });
+      const lowerThumbWrapperClasses = cx__default["default"]([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+        [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+      }]);
+      const upperThumbWrapperClasses = cx__default["default"]([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+        [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+      }]);
+      const lowerThumbWrapperProps = {
+        style: {
+          insetInlineStart: `${this.state.left}%`
+        }
+      };
+      const upperThumbWrapperProps = {
+        style: {
+          insetInlineStart: `${this.state.leftUpper}%`
+        }
+      };
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cx__default["default"](`${prefix}--form-item`, className)
       }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -1067,7 +1096,12 @@ class Slider extends React.PureComponent {
         role: "presentation",
         tabIndex: -1,
         "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
-      }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, other), /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
+        hasTooltip: hideTextInput,
+        className: lowerThumbWrapperClasses,
+        label: `${value}`,
+        align: twoHandles ? 'top-right' : 'top'
+      }, lowerThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
@@ -1081,7 +1115,12 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl && (_LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(LowerHandle, null))), twoHandles && !isRtl && (_LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default["default"].createElement(LowerHandleFocus, null))), twoHandles && isRtl && (_UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(UpperHandle, null))), twoHandles && isRtl && (_UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default["default"].createElement(UpperHandleFocus, null)))), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
+      }, 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}`,
+        align: "top-left"
+      }, upperThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: upperThumbClasses,
         role: "slider",
         tabIndex: !readOnly ? 0 : -1,
@@ -1093,7 +1132,7 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl && (_UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(UpperHandle, null))), twoHandles && !isRtl && (_UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(UpperHandleFocus, null))), twoHandles && isRtl && (_LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(LowerHandle, null))), twoHandles && isRtl && (_LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(LowerHandleFocus, null)))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, null))) : undefined)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;

package/lib/components/Slider/SliderHandles.d.ts

@@ -0,0 +1,4 @@
+export declare const LowerHandle: () => JSX.Element;
+export declare const LowerHandleFocus: () => JSX.Element;
+export declare const UpperHandle: () => JSX.Element;
+export declare const UpperHandleFocus: () => JSX.Element;

package/lib/components/Slider/SliderHandles.js

@@ -0,0 +1,76 @@
+/**
+ * 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 usePrefix = require('../../internal/usePrefix.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
+const LowerHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
+}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path2 || (_path2 = /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const LowerHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
+}, _path3 || (_path3 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path4 || (_path4 = /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path5 || (_path5 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M15.08 0H16v6.46h-.92z"
+})), _path6 || (_path6 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
+})), _path7 || (_path7 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
+}))));
+const UpperHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
+}, _path8 || (_path8 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path9 || (_path9 = /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const UpperHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
+}, _path10 || (_path10 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path11 || (_path11 = /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path12 || (_path12 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M.92 24H0v-6.46h.92z"
+})), _path13 || (_path13 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
+})), _path14 || (_path14 = /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
+}))));
+
+exports.LowerHandle = LowerHandle;
+exports.LowerHandleFocus = LowerHandleFocus;
+exports.UpperHandle = UpperHandle;
+exports.UpperHandleFocus = UpperHandleFocus;

package/lib/components/Slug/index.js

@@ -135,6 +135,7 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     className: `${prefix}--slug__additional-text`
   }, aiTextLabel)), children));
 });
+Slug.displayName = 'Slug';
 Slug.propTypes = {
   /**
    * Specify the correct translation of the AI text

package/lib/components/Tabs/Tabs.js

@@ -268,7 +268,7 @@ function TabList(_ref2) {
     }
   }, [scrollLeft, children, dismissable]);
   useEffectOnce.useEffectOnce(() => {
-    if (tabs.current[selectedIndex].disabled) {
+    if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
       });

package/lib/components/Tag/Tag.d.ts

@@ -4,7 +4,7 @@
  * 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 PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 declare const TYPES: {
@@ -23,7 +23,7 @@ declare const TYPES: {
 };
 export interface TagBaseProps {
     /**
-     * Provide content to be rendered inside of a <Tag>
+     * Provide content to be rendered inside of a `Tag`
      */
     children?: React.ReactNode;
     /**
@@ -31,11 +31,11 @@ export interface TagBaseProps {
      */
     className?: string;
     /**
-     * Specify if the <Tag> is disabled
+     * Specify if the `Tag` is disabled
      */
     disabled?: boolean;
     /**
-     * Determine if <Tag> is a filter/chip
+     * Determine if `Tag` is a filter/chip
      */
     filter?: boolean;
     /**
@@ -56,18 +56,22 @@ export interface TagBaseProps {
      * 'md' (default) sizes.
      */
     size?: 'sm' | 'md';
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Text to show on clear filters
      */
     title?: string;
     /**
-     * Specify the type of the <Tag>
+     * Specify the type of the `Tag`
      */
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
 declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): JSX.Element;
     propTypes: {
         /**
          * Provide an alternative tag or component to use instead of the default
@@ -75,7 +79,7 @@ declare const Tag: {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * Provide content to be rendered inside of a <Tag>
+         * Provide content to be rendered inside of a `Tag`
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
@@ -83,11 +87,11 @@ declare const Tag: {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Specify if the <Tag> is disabled
+         * Specify if the `Tag` is disabled
          */
         disabled: PropTypes.Requireable<boolean>;
         /**
-         * Determine if <Tag> is a filter/chip
+         * Determine if `Tag` is a filter/chip
          */
         filter: PropTypes.Requireable<boolean>;
         /**
@@ -108,12 +112,16 @@ declare const Tag: {
          * 'md' (default) sizes.
          */
         size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Text to show on clear filters
          */
         title: PropTypes.Requireable<string>;
         /**
-         * Specify the type of the <Tag>
+         * Specify the type of the `Tag`
          */
         type: PropTypes.Requireable<string>;
     };