@carbon/react 1.24.0-rc.0 → 1.24.0

package/es/components/Slider/Slider.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -59,6 +59,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       isValid: true
     });
 
+    _defineProperty(_assertThisInitialized(_this), "thumbRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "filledTrackRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "element", null);
+
+    _defineProperty(_assertThisInitialized(_this), "inputId", '');
+
+    _defineProperty(_assertThisInitialized(_this), "track", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "onDragStart", function (evt) {
       // Do nothing if component is disabled
       if (_this.props.disabled || _this.props.readOnly) {
@@ -67,11 +77,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDragStop);
+        var _this$element;
+
+        (_this$element = _this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, _this.onDragStop);
       }); // Register drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDrag);
+        var _this$element2;
+
+        (_this$element2 = _this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, _this.onDrag);
       }); // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb
 
@@ -86,11 +100,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDragStop);
+        var _this$element3;
+
+        (_this$element3 = _this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, _this.onDragStop);
       }); // Remove drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDrag);
+        var _this$element4;
+
+        (_this$element4 = _this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, _this.onDrag);
       }); // Set needsOnRelease flag so event fires on next update
 
       _this.setState({
@@ -135,18 +153,23 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     }));
 
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (evt) {
+      var _this$props$step3, _this$props$step4, _this$props$step5, _this$props$step6;
+
       // Do nothing if component is disabled or we don't have a valid event
       if (_this.props.disabled || _this.props.readOnly || !('which' in evt)) {
         return;
       }
 
-      var which = Number.parseInt(evt.which);
       var delta = 0;
 
-      if (matches(which, [ArrowDown, ArrowLeft])) {
-        delta = -_this.props.step;
-      } else if (matches(which, [ArrowUp, ArrowRight])) {
-        delta = _this.props.step;
+      if (matches(evt.which, [ArrowDown, ArrowLeft])) {
+        var _this$props$step;
+
+        delta = -((_this$props$step = _this.props.step) !== null && _this$props$step !== void 0 ? _this$props$step : Slider.defaultProps.step);
+      } else if (matches(evt.which, [ArrowUp, ArrowRight])) {
+        var _this$props$step2;
+
+        delta = (_this$props$step2 = _this.props.step) !== null && _this$props$step2 !== void 0 ? _this$props$step2 : Slider.defaultProps.step;
       } else {
         // Ignore keys we don't want to handle
         return;
@@ -155,15 +178,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
       if (evt.shiftKey) {
         var stepMultiplier = _this.props.stepMultiplier;
-        delta *= stepMultiplier;
+        delta *= stepMultiplier !== null && stepMultiplier !== void 0 ? stepMultiplier : Slider.defaultProps.stepMultiplier;
       }
 
-      Math.floor(_this.state.value / _this.props.step) * _this.props.step;
+      Math.floor(_this.state.value / ((_this$props$step3 = _this.props.step) !== null && _this$props$step3 !== void 0 ? _this$props$step3 : Slider.defaultProps.step)) * ((_this$props$step4 = _this.props.step) !== null && _this$props$step4 !== void 0 ? _this$props$step4 : Slider.defaultProps.step);
 
       var _this$calcValue2 = _this.calcValue({
         // Ensures custom value from `<input>` won't cause skipping next stepping point with right arrow key,
         // e.g. Typing 51 in `<input>`, moving focus onto the thumb and the hitting right arrow key should yield 52 instead of 54
-        value: (delta > 0 ? Math.floor(_this.state.value / _this.props.step) * _this.props.step : _this.state.value) + delta
+        value: (delta > 0 ? Math.floor(_this.state.value / ((_this$props$step5 = _this.props.step) !== null && _this$props$step5 !== void 0 ? _this$props$step5 : Slider.defaultProps.step)) * ((_this$props$step6 = _this.props.step) !== null && _this$props$step6 !== void 0 ? _this$props$step6 : Slider.defaultProps.step) : _this.state.value) + delta
       }),
           value = _this$calcValue2.value,
           left = _this$calcValue2.left;
@@ -197,11 +220,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           value: targetValue,
           useRawValue: true
         }),
-            value = _this$calcValue3.value,
+            _value = _this$calcValue3.value,
             left = _this$calcValue3.left;
 
         _this.setState({
-          value: value,
+          value: _value,
           left: left
         });
       }
@@ -229,18 +252,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "calcValue", function (_ref) {
-      var _ref$clientX = _ref.clientX,
-          clientX = _ref$clientX === void 0 ? null : _ref$clientX,
-          _ref$value = _ref.value,
-          value = _ref$value === void 0 ? null : _ref$value,
+      var _this$element5, _this$element5$getBou, _this$props$step7, _this$props$step8;
+
+      var clientX = _ref.clientX,
+          value = _ref.value,
           _ref$useRawValue = _ref.useRawValue,
           useRawValue = _ref$useRawValue === void 0 ? false : _ref$useRawValue;
       var range = _this.props.max - _this.props.min;
-
-      var boundingRect = _this.element.getBoundingClientRect();
-
-      var totalSteps = range / _this.props.step;
-      var width = boundingRect.right - boundingRect.left; // Enforce a minimum width of at least 1 for calculations
+      var boundingRect = (_this$element5 = _this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
+      var totalSteps = range / ((_this$props$step7 = _this.props.step) !== null && _this$props$step7 !== void 0 ? _this$props$step7 : Slider.defaultProps.step);
+      var width = boundingRect ? boundingRect.right - boundingRect.left : 0; // Enforce a minimum width of at least 1 for calculations
 
       if (width <= 0) {
         width = 1;
@@ -251,7 +272,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       var leftPercent;
 
       if (clientX != null) {
-        var leftOffset = clientX - boundingRect.left;
+        var _boundingRect$left;
+
+        var leftOffset = clientX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
@@ -270,7 +293,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         };
       }
 
-      var steppedValue = Math.round(leftPercent * totalSteps) * _this.props.step;
+      var steppedValue = Math.round(leftPercent * totalSteps) * ((_this$props$step8 = _this.props.step) !== null && _this$props$step8 !== void 0 ? _this$props$step8 : Slider.defaultProps.step);
 
       var steppedPercent = _this.clamp(steppedValue / range, 0, 1);
 
@@ -297,11 +320,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         var _this$calcValue4 = this.calcValue({
           useRawValue: true
         }),
-            value = _this$calcValue4.value,
+            _value2 = _this$calcValue4.value,
             left = _this$calcValue4.left;
 
         this.setState({
-          value: value,
+          value: _value2,
           left: left
         });
       }
@@ -320,10 +343,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidUpdate(prevProps, prevState) {
       // Fire onChange event handler if present, if there's a usable value, and
       // if the value is different from the last one
-      this.thumbRef.current.style.left = "".concat(this.state.left, "%");
-      this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      if (this.thumbRef.current) {
+        this.thumbRef.current.style.left = "".concat(this.state.left, "%");
+      }
+
+      if (this.filledTrackRef.current) {
+        this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      }
 
-      if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
+      if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
         this.props.onChange({
           value: this.state.value
         });
@@ -468,8 +496,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           name: name,
           className: inputClasses,
           value: value,
-          "aria-labelledby": !ariaLabelInput ? labelId : null,
-          "aria-label": ariaLabelInput ? ariaLabelInput : null,
+          "aria-labelledby": !ariaLabelInput ? labelId : undefined,
+          "aria-label": ariaLabelInput ? ariaLabelInput : undefined,
           disabled: disabled,
           required: required,
           min: min,
@@ -477,9 +505,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           step: step,
           onChange: _this2.onChange,
           onBlur: _this2.onBlur,
-          onKeyUp: _this2.onInputKeyUp,
+          onKeyUp: _this2.props.onInputKeyUp,
           "data-invalid": isValid ? null : true,
-          "aria-invalid": isValid ? null : true,
+          "aria-invalid": isValid ? undefined : true,
           readOnly: readOnly
         })));
       });

package/es/components/TextInput/TextInput.d.ts

@@ -0,0 +1,106 @@
+/**
+ * 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, { ReactNode } from 'react';
+type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Specify an optional className to be applied to the `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     * 'The `light` prop for `TextInput` has ' +
+        'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the input. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>`
+     * is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number | undefined;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<unknown>>;
+export default TextInput;

package/es/components/TextInput/TextInput.js

@@ -61,7 +61,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   var defaultValue = rest.defaultValue,
       value = rest.value;
 
-  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) || 0),
+  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0),
       _useState2 = _slicedToArray(_useState, 2),
       textCount = _useState2[0],
       setTextCount = _useState2[1];
@@ -139,6 +139,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
       isFluid = _useContext.isFluid;
 
   var ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
@@ -148,7 +149,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   }, /*#__PURE__*/React__default.createElement("div", {
     className: fieldWrapperClasses,
     "data-invalid": normalizedProps.invalid || null
-  }, normalizedProps.icon && /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }), input, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--text-input__counter-alert"),

package/es/internal/useMergedRefs.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { Ref, ForwardedRef } from 'react';
+/**
+ * Combine multiple refs into a single ref. This use useful when you have two
+ * refs from both `React.forwardRef` and `useRef` that you would like to add to
+ * the same node.
+ */
+export declare const useMergedRefs: <T>(refs: ForwardedRef<T>[]) => Ref<T>;

package/es/internal/useMergedRefs.js

@@ -11,12 +11,9 @@ import { useCallback } from 'react';
  * Combine multiple refs into a single ref. This use useful when you have two
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
  * the same node.
- *
- * @param {Array} refs
- * @returns {Function}
  */
 
-function useMergedRefs(refs) {
+var useMergedRefs = function useMergedRefs(refs) {
   return useCallback(function (node) {
     refs.forEach(function (ref) {
       if (typeof ref === 'function') {
@@ -26,6 +23,6 @@ function useMergedRefs(refs) {
       }
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, refs);
-}
+};
 
 export { useMergedRefs };

package/es/internal/useNormalizedInputProps.js

@@ -25,6 +25,7 @@ import { usePrefix } from './usePrefix.js';
  * @property {boolean} disabled - Whether the input is disabled
  * @property {boolean} invalid - Whether the input is invalid (takes precedence over warn)
  * @property {string} invalidId - The invalid message's id
+ * @property {string} helperId - id used for helper text
  * @property {boolean} warn - Whether the input is in warning state
  * @property {string} warnId - The warning message's id
  * @property {React.ReactNode | null} validation – React node rendering the appropriate validation message (if any)

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

@@ -16,9 +16,9 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      */
     isHighlighted?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
-} | null;
+}) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;
 export default _default;

package/lib/components/Menu/Menu.js

@@ -107,10 +107,6 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
       returnFocus();
     }
 
-    childDispatch({
-      type: 'clearRegisteredItems'
-    });
-
     if (onClose) {
       onClose();
     }

package/lib/components/Menu/MenuContext.js

@@ -33,12 +33,9 @@ function menuReducer(state, action) {
 
     case 'registerItem':
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-        items: [].concat(_rollupPluginBabelHelpers.toConsumableArray(state.items), [action.payload])
-      });
-
-    case 'clearRegisteredItems':
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-        items: []
+        items: [].concat(_rollupPluginBabelHelpers.toConsumableArray(state.items), [action.payload]).filter(function (item) {
+          return item.ref.current !== null;
+        })
       });
   }
 }

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

@@ -0,0 +1,51 @@
+/**
+ * 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 { PolymorphicProps } from '../../types/common';
+export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+interface PopoverBaseProps {
+    /**
+     * Specify how the popover should align with the trigger element
+     */
+    align?: PopoverAlignment;
+    /**
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+     */
+    autoAlign?: boolean;
+    /**
+     * Specify whether a caret should be rendered
+     */
+    caret?: boolean;
+    /**
+     * Provide elements to be rendered inside of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be added to the outermost node in the
+     * component
+     */
+    className?: string;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover
+     */
+    dropShadow?: boolean;
+    /**
+     * Render the component using the high-contrast variant
+     */
+    highContrast?: boolean;
+    /**
+     * Specify whether the component is currently open or closed
+     */
+    open: boolean;
+}
+export type PopoverProps<T extends React.ElementType> = PolymorphicProps<T, PopoverBaseProps>;
+declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverBaseProps & Omit<any, "as"> & {
+    as?: React.ElementType<any> | undefined;
+}, string | number | symbol> & React.RefAttributes<Element>>;
+export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
+export { Popover, PopoverContent };

package/lib/components/Popover/index.js

@@ -30,29 +30,28 @@ var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
     current: null
   }
 });
-var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover(props, forwardRef) {
+var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, forwardRef) {
   var _cx;
 
-  var _props$align = props.align,
-      align = _props$align === void 0 ? 'bottom' : _props$align,
-      _props$as = props.as,
-      BaseComponent = _props$as === void 0 ? 'span' : _props$as,
-      _props$autoAlign = props.autoAlign,
-      autoAlign = _props$autoAlign === void 0 ? false : _props$autoAlign,
-      _props$caret = props.caret,
-      caret = _props$caret === void 0 ? true : _props$caret,
-      customClassName = props.className,
-      children = props.children,
-      _props$dropShadow = props.dropShadow,
-      dropShadow = _props$dropShadow === void 0 ? true : _props$dropShadow,
-      _props$highContrast = props.highContrast,
-      highContrast = _props$highContrast === void 0 ? false : _props$highContrast,
-      open = props.open,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+      as = _ref.as,
+      _ref$autoAlign = _ref.autoAlign,
+      autoAlign = _ref$autoAlign === void 0 ? false : _ref$autoAlign,
+      _ref$caret = _ref.caret,
+      caret = _ref$caret === void 0 ? true : _ref$caret,
+      customClassName = _ref.className,
+      children = _ref.children,
+      _ref$dropShadow = _ref.dropShadow,
+      dropShadow = _ref$dropShadow === void 0 ? true : _ref$dropShadow,
+      _ref$highContrast = _ref.highContrast,
+      highContrast = _ref$highContrast === void 0 ? false : _ref$highContrast,
+      open = _ref.open,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var floating = React.useRef();
-  var popover = React.useRef();
+  var floating = React.useRef(null);
+  var popover = React.useRef(null);
   var value = React.useMemo(function () {
     return {
       floating: floating
@@ -70,7 +69,7 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       autoAlignment = _useState4[0],
       setAutoAlignment = _useState4[1];
 
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _cx), customClassName);
   useIsomorphicEffect["default"](function () {
     if (!open) {
       return;
@@ -118,6 +117,10 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
     }
 
     function isVisible(alignment) {
+      if (!popover.current || !floating.current) {
+        return false;
+      }
+
       popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
       var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
 
@@ -164,6 +167,7 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       setAutoAlignment(alignment);
     }
   }, [autoAligned, align, autoAlign, prefix, open]);
+  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
   return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -225,10 +229,10 @@ Popover.propTypes = {
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, forwardRef) {
-  var className = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
+var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref2, forwardRef) {
+  var className = _ref2.className,
+      children = _ref2.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
 
   var prefix = usePrefix.usePrefix();
 

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

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
-      * Specify an optional className to add to the form item wrapper.
-      */
+     * Specify an optional className to add to the form item wrapper.
+     */
     className?: string;
     /**
      * Specify whether the label should be hidden, or not