rsuite 6.0.0-canary-20250620 → 6.0.0-canary-2025062016

package/SegmentedControl/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/SegmentedControl",
+  "private": true,
+  "main": "../cjs/SegmentedControl/index.js",
+  "module": "../esm/SegmentedControl/index.js",
+  "types": "../esm/SegmentedControl/index.d.ts"
+}

package/SegmentedControl/styles/index.css

@@ -0,0 +1,157 @@
+:root{
+  --rs-segmented-control-spacing:calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-border-radius:var(--rs-radius-md);
+  --rs-segmented-control-border-width:1px;
+  --rs-segmented-control-padding:calc(var(--rs-spacing) * 0.5);
+  --rs-segmented-control-height:36px;
+  --rs-segmented-control-height-xs:24px;
+  --rs-segmented-control-height-sm:30px;
+  --rs-segmented-control-height-lg:42px;
+  --rs-segmented-control-height-xl:48px;
+  --rs-segmented-control-item-padding-y:calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-item-padding-y-xs:calc(var(--rs-spacing) * 0.5);
+  --rs-segmented-control-item-padding-y-sm:calc(var(--rs-spacing) * 0.75);
+  --rs-segmented-control-item-padding-y-lg:calc(var(--rs-spacing) * 1.25);
+  --rs-segmented-control-item-padding-y-xl:calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x:calc(var(--rs-spacing) * 2);
+  --rs-segmented-control-item-padding-x-xs:calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x-sm:calc(var(--rs-spacing) * 1.75);
+  --rs-segmented-control-item-padding-x-lg:calc(var(--rs-spacing) * 2.25);
+  --rs-segmented-control-item-padding-x-xl:calc(var(--rs-spacing) * 2.5);
+  --rs-segmented-control-font-size:var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-xs:var(--rs-font-size-extra-small);
+  --rs-segmented-control-font-size-sm:var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-lg:var(--rs-font-size-base);
+  --rs-segmented-control-font-size-xl:var(--rs-font-size-large);
+  --rs-segmented-control-indicator-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --rs-segmented-control-indicator-border-radius:calc(var(--rs-radius-md) - 2px);
+  --rs-segmented-control-indicator-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --rs-segmented-control-underline-height:2px;
+  --rs-segmented-control-pill-indicator-height:calc(var(--rs-segmented-control-height) - 8px);
+  --rs-segmented-control-pill-indicator-border-radius:var(--rs-radius-md);
+  --rs-segmented-control-pill-indicator-shadow:var(--rs-shadow-sm);
+}
+
+.rs-segmented-control{
+  display:inline-flex;
+  position:relative;
+  align-items:center;
+  height:var(--rs-segmented-control-height);
+  border-style:solid;
+  border-width:var(--rs-segmented-control-border-width);
+  border-color:var(--rs-segmented-control-border-color);
+  border-radius:var(--rs-segmented-control-border-radius);
+  padding:var(--rs-segmented-control-padding);
+  gap:var(--rs-segmented-control-spacing);
+  background-color:var(--rs-segmented-control-bg);
+  box-sizing:border-box;
+  font-size:var(--rs-segmented-control-font-size);
+}
+.rs-segmented-control:where([data-size=xs]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-xs);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xs);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xs);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xs);
+}
+.rs-segmented-control:where([data-size=sm]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-sm);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-sm);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-sm);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-sm);
+}
+.rs-segmented-control:where([data-size=lg]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-lg);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-lg);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-lg);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-lg);
+}
+.rs-segmented-control:where([data-size=xl]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-xl);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xl);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xl);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xl);
+}
+.rs-segmented-control[data-block=true]{
+  display:flex;
+  width:100%;
+}
+.rs-segmented-control[data-block=true] .rs-segmented-control-item{
+  flex:1 1 0%;
+  min-width:0;
+  text-align:center;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.rs-segmented-control:empty{
+  display:none;
+}
+.rs-segmented-control .rs-segmented-control-item{
+  position:relative;
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:100%;
+  padding-inline:var(--rs-segmented-control-item-padding-x);
+  padding-block:var(--rs-segmented-control-item-padding-y);
+  border-radius:var(--rs-segmented-control-indicator-border-radius);
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  transition:color 0.2s ease;
+  color:var(--rs-segmented-control-item-color);
+}
+.rs-segmented-control .rs-segmented-control-item[data-active]{
+  color:var(--rs-segmented-control-item-active-color);
+}
+.rs-segmented-control .rs-segmented-control-item[data-disabled]{
+  opacity:0.5;
+  cursor:not-allowed;
+}
+.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-radio{
+  position:absolute;
+  opacity:0;
+  width:0;
+  height:0;
+  margin:0;
+  padding:0;
+}
+.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-label{
+  font-size:var(--rs-font-size-sm);
+  line-height:var(--rs-line-height-sm);
+}
+.rs-segmented-control .rs-segmented-control-indicator{
+  position:absolute;
+  z-index:0;
+  transition:var(--rs-segmented-control-indicator-transition);
+  box-shadow:var(--rs-segmented-control-indicator-shadow);
+}
+[data-theme=high-contrast] .rs-segmented-control .rs-segmented-control-indicator, .rs-theme-high-contrast .rs-segmented-control .rs-segmented-control-indicator{
+  transition:none;
+}
+.rs-segmented-control:where([data-indicator=pill]) .rs-segmented-control-indicator{
+  background-color:var(--rs-segmented-control-pill-indicator-bg);
+  border-radius:var(--rs-segmented-control-pill-indicator-border-radius);
+  box-shadow:var(--rs-segmented-control-pill-indicator-shadow);
+  height:var(--rs-segmented-control-pill-indicator-height);
+}
+.rs-segmented-control:where([data-indicator=underline]){
+  padding-block:0;
+  padding-inline:var(--rs-segmented-control-border-radius);
+  background-color:transparent;
+}
+.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-item{
+  padding-bottom:calc(var(--rs-segmented-control-item-padding-y) + var(--rs-segmented-control-underline-height));
+  border-radius:0;
+  position:relative;
+  z-index:1;
+}
+.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-indicator{
+  bottom:-1px;
+  height:var(--rs-segmented-control-underline-height);
+  background-color:var(--rs-segmented-control-underline-color);
+  border-radius:var(--rs-radius-none);
+  box-shadow:none;
+}

package/cjs/Grid/utils/styles.d.ts

@@ -3,4 +3,4 @@ import type { GutterType } from '../types';
 /**
  * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
  */
-export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string>;
+export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string | undefined>;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -14,7 +14,10 @@ export interface RadioContextProps {
     ]>;
 }
 export interface RadioGroupProps<T = string | number> extends BoxProps, FormControlBaseProps<T> {
-    /** A radio group can have different appearances */
+    /**
+     * A radio group can have different appearances
+     * @deprecated Use `<SegmentedControl indicator="underline" />` instead
+     */
     appearance?: 'default' | 'picker';
     /** Name to use for form */
     name?: string;

package/cjs/SegmentedControl/Indicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IndicatorProps {
+    style: React.CSSProperties;
+    classPrefix: string;
+}
+declare const Indicator: {
+    ({ style, classPrefix }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default Indicator;

package/cjs/SegmentedControl/Indicator.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+const Indicator = ({
+  style,
+  classPrefix
+}) => {
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('indicator'),
+    style: style
+  });
+};
+Indicator.displayName = 'Indicator';
+var _default = exports.default = Indicator;

package/cjs/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps, Size } from '../internals/types';
+export interface SegmentedItemDataType {
+    /** The label of the item */
+    label: React.ReactNode;
+    /** The value of the item */
+    value: string | number;
+}
+export interface SegmentedControlProps<T = string | number | null> extends BoxProps, Omit<FormControlBaseProps<T>, 'readOnly' | 'plaintext'> {
+    /** The indicator style of the segmented control */
+    indicator?: 'pill' | 'underline';
+    /** Name to use for form */
+    name?: string;
+    /** Data of segmented items */
+    data?: SegmentedItemDataType[];
+    /** Display block style, fit the width of the container */
+    block?: boolean;
+    /** A segmented control can have different sizes */
+    size?: Size;
+}
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+declare const SegmentedControl: import("../internals/types").InternalRefForwardingComponent<"div", SegmentedControlProps<string | number | null>, never> & Record<string, never>;
+export default SegmentedControl;

package/cjs/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,87 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
+var _SegmentedItem = _interopRequireDefault(require("./SegmentedItem"));
+var _Indicator = _interopRequireDefault(require("./Indicator"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _useIndicatorPosition = _interopRequireDefault(require("./hooks/useIndicatorPosition"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+const SegmentedControl = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _hooks.useCustom)('SegmentedControl', props);
+  const {
+    as,
+    className,
+    classPrefix = 'segmented-control',
+    value: valueProp,
+    defaultValue,
+    indicator = 'pill',
+    size = 'md',
+    block = false,
+    name,
+    disabled,
+    data,
+    onChange,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
+  const id = (0, _hooks.useUniqueId)('segmented', name);
+
+  // Ref for container element
+  const containerRef = (0, _react.useRef)(null);
+
+  // Get the active item index
+  const activeIndex = data === null || data === void 0 ? void 0 : data.findIndex(item => item.value === value);
+  const {
+    style: indicatorStyle
+  } = (0, _useIndicatorPosition.default)({
+    containerRef,
+    activeIndex,
+    indicator,
+    data
+  });
+  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
+  });
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "radiogroup",
+    ref: (0, _utils.mergeRefs)(ref, containerRef),
+    className: classes,
+    "data-size": size,
+    "data-block": block || undefined,
+    "data-indicator": indicator
+  }, rest), data === null || data === void 0 ? void 0 : data.map((item, index) => /*#__PURE__*/_react.default.createElement(_SegmentedItem.default, {
+    key: index,
+    item: item,
+    index: index,
+    name: id,
+    active: value === item.value,
+    disabled: disabled,
+    classPrefix: classPrefix,
+    onChange: handleChange
+  })), activeIndex !== -1 && /*#__PURE__*/_react.default.createElement(_Indicator.default, {
+    style: indicatorStyle,
+    classPrefix: classPrefix
+  }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+var _default = exports.default = SegmentedControl;

package/cjs/SegmentedControl/SegmentedItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SegmentedItemDataType } from './SegmentedControl';
+export interface SegmentedItemProps {
+    item: SegmentedItemDataType;
+    index: number;
+    name?: string;
+    active: boolean;
+    disabled?: boolean;
+    classPrefix: string;
+    onChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const SegmentedItem: {
+    ({ item, index, name, active, disabled, classPrefix, onChange }: SegmentedItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default SegmentedItem;

package/cjs/SegmentedControl/SegmentedItem.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+const SegmentedItem = ({
+  item,
+  index,
+  name,
+  active,
+  disabled,
+  classPrefix,
+  onChange
+}) => {
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const handleChange = event => {
+    if (disabled) return;
+    onChange(item.value, event);
+  };
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: prefix('item'),
+    "data-value": item.value,
+    "data-index": index,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    name: name,
+    value: String(item.value),
+    checked: active,
+    disabled: disabled,
+    onChange: handleChange,
+    className: prefix('radio')
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('label')
+  }, item.label));
+};
+SegmentedItem.displayName = 'SegmentedItem';
+var _default = exports.default = SegmentedItem;

package/cjs/SegmentedControl/hooks/useIndicatorPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+interface UseIndicatorPositionProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+    activeIndex?: number;
+    indicator: 'pill' | 'underline';
+    data?: Array<{
+        value: string | number;
+    }>;
+    block?: boolean;
+}
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+declare const useIndicatorPosition: ({ containerRef, activeIndex, indicator, data }: UseIndicatorPositionProps) => {
+    style: import("react").CSSProperties;
+};
+export default useIndicatorPosition;

package/cjs/SegmentedControl/hooks/useIndicatorPosition.js

@@ -0,0 +1,55 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _hooks = require("../../internals/hooks");
+/**
+ * Updates the indicator position based on the active item
+ */
+const updateIndicatorPosition = (container, activeIndex, indicator) => {
+  if (activeIndex === -1) return {};
+  const activeItem = container.querySelector(`[data-index="${activeIndex}"]`);
+  if (!activeItem) return {};
+  const containerStyle = window.getComputedStyle(container);
+  const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+  return {
+    transform: `translateX(${activeItem.offsetLeft - paddingLeft}px)`,
+    width: activeItem.offsetWidth,
+    height: indicator === 'underline' ? 2 : activeItem.offsetHeight
+  };
+};
+
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+const useIndicatorPosition = ({
+  containerRef,
+  activeIndex,
+  indicator,
+  data
+}) => {
+  const [indicatorStyle, setIndicatorStyle] = (0, _react.useState)({});
+  const updatePosition = (0, _react.useCallback)(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+      return;
+    }
+    const newStyle = updateIndicatorPosition(containerRef.current, activeIndex, indicator);
+    setIndicatorStyle(prev => (0, _isEqual.default)(prev, newStyle) ? prev : newStyle);
+  }, [containerRef, activeIndex, indicator]);
+
+  // Update position when active item or data changes
+  (0, _react.useEffect)(() => {
+    updatePosition();
+  }, [updatePosition, data]);
+
+  // Set up resize observer
+  (0, _hooks.useElementResize)(containerRef, updatePosition);
+  return {
+    style: indicatorStyle
+  };
+};
+var _default = exports.default = useIndicatorPosition;

package/cjs/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+import SegmentedControl from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedItemDataType } from './SegmentedControl';
+export { SegmentedControl };
+export default SegmentedControl;

package/cjs/SegmentedControl/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl"));
+exports.SegmentedControl = _SegmentedControl.default;
+// export types
+// export components
+var _default = exports.default = _SegmentedControl.default;

package/cjs/Slider/ProgressBar.js

@@ -25,7 +25,7 @@ const ProgressBar = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
-  const startKey = vertical ? 'bottom' : 'inset-inline-start';
+  const startKey = vertical ? 'bottom' : 'insetInlineStart';
   const styles = (0, _utils.mergeStyles)(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`

package/cjs/index.d.ts

@@ -57,6 +57,7 @@ export * from './RadioGroup';
 export * from './RadioTile';
 export * from './RadioTileGroup';
 export * from './SelectPicker';
+export * from './SegmentedControl';
 export * from './CheckPicker';
 export * from './InputPicker';
 export * from './TagPicker';

package/cjs/index.js

@@ -356,6 +356,12 @@ Object.keys(_SelectPicker).forEach(function (key) {
   if (key in exports && exports[key] === _SelectPicker[key]) return;
   exports[key] = _SelectPicker[key];
 });
+var _SegmentedControl = require("./SegmentedControl");
+Object.keys(_SegmentedControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentedControl[key]) return;
+  exports[key] = _SegmentedControl[key];
+});
 var _CheckPicker = require("./CheckPicker");
 Object.keys(_CheckPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/internals/Provider/types.d.ts

@@ -87,6 +87,7 @@ import type { RangeSliderProps } from '../../RangeSlider';
 import type { RateProps } from '../../Rate';
 import type { RowProps } from '../../Row';
 import type { SelectPickerProps } from '../../SelectPicker';
+import type { SegmentedControlProps } from '../../SegmentedControl';
 import type { SidebarProps } from '../../Sidebar';
 import type { SidenavProps } from '../../Sidenav';
 import type { SliderProps } from '../../Slider';
@@ -209,6 +210,7 @@ export interface ReactSuiteComponents {
     Rate: ComponentProps<RateProps>;
     Row: ComponentProps<RowProps>;
     SelectPicker: ComponentProps<SelectPickerProps>;
+    SegmentedControl: ComponentProps<SegmentedControlProps>;
     Sidebar: ComponentProps<SidebarProps>;
     Sidenav: ComponentProps<SidenavProps>;
     Slider: ComponentProps<SliderProps>;

package/cjs/internals/hooks/useElementResize.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Attach the event handler directly to the specified DOM element,
  * and it will be triggered when the size of the DOM element is changed.
@@ -5,5 +6,5 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export declare function useElementResize(eventTarget: Element | null | (() => Element | null), listener: ResizeObserverCallback): void;
+export declare function useElementResize(eventTarget: Element | null | (() => Element | null) | React.RefObject<Element | null>, listener: ResizeObserverCallback): void;
 export default useElementResize;

package/cjs/internals/hooks/useElementResize.js

@@ -15,18 +15,61 @@ var _resizeObserver = require("@juggle/resize-observer");
  */
 function useElementResize(eventTarget, listener) {
   const resizeObserver = (0, _react.useRef)(null);
+  const currentElement = (0, _react.useRef)(null);
+
+  // Create the observer
   (0, _react.useEffect)(() => {
-    if (!resizeObserver.current) {
-      const target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-      if (target) {
-        resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
-        resizeObserver.current.observe(target);
+    // Get the target element
+    let target = null;
+    if (eventTarget) {
+      if (typeof eventTarget === 'function') {
+        target = eventTarget();
+      } else if ('current' in eventTarget) {
+        target = eventTarget.current;
+      } else {
+        target = eventTarget;
+      }
+    }
+
+    // If target changed, disconnect the previous observer
+    if (currentElement.current !== target) {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+        resizeObserver.current = null;
       }
+      currentElement.current = target;
+    }
+
+    // If we have a target and no observer, create one
+    if (target && !resizeObserver.current) {
+      const observer = new _resizeObserver.ResizeObserver(listener);
+      observer.observe(target);
+      resizeObserver.current = observer;
     }
+
+    // Cleanup function
     return () => {
-      var _resizeObserver$curre;
-      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 || _resizeObserver$curre.disconnect();
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+        resizeObserver.current = null;
+      }
+      currentElement.current = null;
     };
   }, [eventTarget, listener]);
+
+  // Update the current element reference if it changes
+  (0, _react.useEffect)(() => {
+    if (eventTarget) {
+      if (typeof eventTarget === 'function') {
+        currentElement.current = eventTarget();
+      } else if ('current' in eventTarget) {
+        currentElement.current = eventTarget.current;
+      } else {
+        currentElement.current = eventTarget;
+      }
+    } else {
+      currentElement.current = null;
+    }
+  }, [eventTarget]);
 }
 var _default = exports.default = useElementResize;

package/cjs/internals/utils/style-sheet/css.d.ts

@@ -3,7 +3,7 @@ import type { StyleProperties } from '../../types';
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
-export declare function getCssValue(value?: number | string | null, unit?: string): string;
+export declare function getCssValue(value?: number | string | null, unit?: string): string | undefined;
 /**
  * Merge multiple style objects, filtering out undefined values
  */

package/cjs/internals/utils/style-sheet/css.js

@@ -12,7 +12,7 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
  */
 function getCssValue(value, unit = 'px') {
   if (value === undefined || value === null || value === '') {
-    return '';
+    return undefined;
   }
 
   // If the value is 0, return it as a string without unit