@itwin/itwinui-react 3.18.3 → 3.19.1

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -14,6 +14,16 @@ type ToggleSwitchProps = {
      * @default 'right'
      */
     labelPosition?: 'left' | 'right';
+    /**
+     * Passes props to wrapper.
+     *
+     * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to
+     * `<input>` element.
+     *
+     * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
+     * and `style` are applied on the `<input>` element, similar to other DOM props.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLElement>;
 } & ({
     /**
      * Size of the toggle switch.
@@ -32,6 +42,17 @@ type ToggleSwitchProps = {
 });
 /**
  * A switch for turning on and off.
+ *
+ * ---
+ *
+ * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to `<input>`
+ * element.
+ *
+ * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
+ * and `style` are applied on the `<input>` element, similar to other DOM props.
+ *
+ * ---
+ *
  * @example
  * <caption>Basic toggle</caption>
  * <ToggleSwitch onChange={(e) => console.log(e.target.checked)} defaultChecked />

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -24,15 +24,22 @@ const ToggleSwitch = _react.forwardRef((props, ref) => {
     style,
     size = 'default',
     labelProps = {},
+    wrapperProps,
     icon: iconProp,
     ...rest
   } = props;
+  let { consistentPropsSpread } =
+    (0, _index.useFutureFlag)('ToggleSwitch') || {};
+  let shouldApplyClassNameAndStyleOnInput =
+    null != wrapperProps || consistentPropsSpread;
   let shouldShowIcon =
     void 0 === iconProp || (null !== iconProp && 'small' !== size);
   return _react.createElement(
     _index.Box,
     {
       as: label ? 'label' : 'div',
+      style: shouldApplyClassNameAndStyleOnInput ? void 0 : style,
+      ...wrapperProps,
       className: (0, _classnames.default)(
         'iui-toggle-switch-wrapper',
         {
@@ -40,19 +47,23 @@ const ToggleSwitch = _react.forwardRef((props, ref) => {
           'iui-label-on-right': label && 'right' === labelPosition,
           'iui-label-on-left': label && 'left' === labelPosition,
         },
-        className,
+        shouldApplyClassNameAndStyleOnInput ? void 0 : className,
+        wrapperProps?.className,
       ),
       'data-iui-size': size,
-      style: style,
     },
     _react.createElement(_index.Box, {
       as: 'input',
-      className: 'iui-toggle-switch',
       type: 'checkbox',
       role: 'switch',
+      style: shouldApplyClassNameAndStyleOnInput ? style : void 0,
+      ...rest,
+      className: (0, _classnames.default)(
+        'iui-toggle-switch',
+        shouldApplyClassNameAndStyleOnInput ? className : void 0,
+      ),
       disabled: disabled,
       ref: ref,
-      ...rest,
     }),
     shouldShowIcon &&
       _react.createElement(

package/cjs/core/TransferList/TransferList.d.ts

@@ -32,25 +32,27 @@ type TransferListListboxLabelOwnProps = {
  */
 export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
-     * 	TransferList listbox wrapper subcomponent
+     * TransferList listbox wrapper subcomponent
      */
     ListboxWrapper: PolymorphicForwardRefComponent<"div", TransferListListboxWrapperOwnProps>;
     /**
-     * 	TransferList listbox subcomponent
+     * TransferList listbox subcomponent
      */
     Listbox: PolymorphicForwardRefComponent<"ul", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as"> & {
         as?: "div" | undefined;
     }>;
     /**
-     * 	TransferList item subcomponent
+     * TransferList item subcomponent.
+     *
+     * Renders a `ListItem` and is compatible with `ListItem`'s [subcomponents](https://itwinui.bentley.com/docs/list#with-subcomponents).
      */
     Item: PolymorphicForwardRefComponent<"li", TransferListItemOwnProps>;
     /**
-     * 	TransferList listbox label subcomponent
+     * TransferList listbox label subcomponent
      */
     ListboxLabel: PolymorphicForwardRefComponent<"div", TransferListListboxLabelOwnProps>;
     /**
-     * 	TransferList toolbar subcomponent
+     * TransferList toolbar subcomponent
      */
     Toolbar: PolymorphicForwardRefComponent<"div", object>;
 };

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.18.3';
+const e = '3.19.1';
 const u = new Proxy(
   {},
   {

package/cjs/utils/components/index.d.ts

@@ -9,6 +9,6 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
-export * from './LineClamp.js';
+export * from './lineClamp.js';
 export * from './FieldsetBase.js';
 export * from './OverflowContainer.js';

package/cjs/utils/components/index.js

@@ -14,6 +14,6 @@ _export_star._(require('./Box.js'), exports);
 _export_star._(require('./ButtonBase.js'), exports);
 _export_star._(require('./Portal.js'), exports);
 _export_star._(require('./ShadowRoot.js'), exports);
-_export_star._(require('./LineClamp.js'), exports);
+_export_star._(require('./lineClamp.js'), exports);
 _export_star._(require('./FieldsetBase.js'), exports);
 _export_star._(require('./OverflowContainer.js'), exports);

package/cjs/utils/components/lineClamp.d.ts

@@ -0,0 +1,5 @@
+/** @private */
+export declare const lineClamp: {
+    css: string;
+    className: string;
+};

package/cjs/utils/components/lineClamp.js

@@ -0,0 +1,23 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'lineClamp', {
+  enumerable: true,
+  get: function () {
+    return lineClamp;
+  },
+});
+const className = '_iui-line-clamp';
+const css = `
+.${className} {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--_iui-line-clamp, 3);
+  -webkit-box-orient: vertical;
+}
+`;
+const lineClamp = {
+  css,
+  className,
+};

package/cjs/utils/functions/react.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+/**
+ * `true` if the current React version is 17 or 18. Else, is `false`.
+ * @private
+ */
+export declare const isReact17or18: boolean;
 /**
  * Wrapper over `cloneElement` that automatically checks for `isValidElement`
  * and automatically merges `children.ref` with the ref passed in props.

package/cjs/utils/functions/react.js

@@ -2,19 +2,33 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'cloneElementWithRef', {
-  enumerable: true,
-  get: function () {
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  cloneElementWithRef: function () {
     return cloneElementWithRef;
   },
+  isReact17or18: function () {
+    return isReact17or18;
+  },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _useMergedRefs = require('../hooks/useMergedRefs.js');
+const _React = _react;
+const isReact17or18 = (() => {
+  let version = _React.version?.split('.')?.[0];
+  return ['17', '18'].includes(version);
+})();
 const cloneElementWithRef = (children, getProps) => {
   if (!children) return null;
   if (!_react.isValidElement(children)) return children;
-  let childrenRef = children.props?.ref || children?.ref;
+  let childrenRef = isReact17or18 ? children?.ref : children.props?.ref;
   let props = getProps(children);
   let ref = (0, _useMergedRefs.mergeRefs)(
     ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),

package/cjs/utils/hooks/useControlledState.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * Wrapper over `useState` that always gives preference to the
  * controlled state (which often comes from a prop).
@@ -6,8 +5,12 @@ import * as React from 'react';
  * This is helpful when a component needs to support both uncontrolled
  * and controlled states. If controlled value/setter is not passed,
  * then it will work just like a regular `useState`.
+ * The only exception is that the set function only accepts the new state. It does not accept a function.
+ *
+ * **NOTE**: `setControlledState` is called only when the value *changes* (uncontrolled mode) or should *change*
+ * (controlled mode).
  *
  * @example
  * const [state, setState] = useControlledState(null, props.value, props.onChange);
  */
-export declare const useControlledState: <T>(initialValue: T, controlledState: T | undefined, setControlledState?: React.Dispatch<React.SetStateAction<T>>) => readonly [T, React.Dispatch<React.SetStateAction<T>>];
+export declare const useControlledState: <T>(initialValue: T, controlledState: T | undefined, setControlledState?: (value: T) => void) => readonly [T, (value: T) => void];

package/cjs/utils/hooks/useControlledState.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, 'useControlledState', {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useLatestRef = require('./useLatestRef.js');
 const useControlledState = (
   initialValue,
   controlledState,
@@ -20,12 +21,15 @@ const useControlledState = (
     () => (void 0 !== controlledState ? controlledState : uncontrolledState),
     [controlledState, uncontrolledState],
   );
+  let oldState = (0, _useLatestRef.useLatestRef)(state);
   let setState = _react.useCallback(
     (value) => {
+      if (value === oldState.current) return;
+      oldState.current = value;
       setUncontrolledState(value);
       setControlledState?.(value);
     },
-    [setControlledState, setUncontrolledState],
+    [oldState, setControlledState],
   );
   return [state, setState];
 };

package/cjs/utils/hooks/useGlobals.d.ts

@@ -10,7 +10,6 @@ export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType;
     themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
     portalContainer?: HTMLElement | null;
-    future?: import("../../core/ThemeProvider/ThemeProvider.js").FutureOptions;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/cjs/utils/providers/FutureFlagsProvider.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export type FutureOptions = {
+    /**
+     * @alpha
+     *
+     * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
+     *
+     * This is useful in making apps looks like future versions of iTwinUI to help with incremental adoption.
+     *
+     * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
+     */
+    themeBridge?: boolean;
+    ToggleSwitch?: {
+        /**
+         * When `true`, `className` and `style` will be applied on the
+         * input element, along with the rest of the DOM props.
+         *
+         * By default (without this flag), `className` and `style` get
+         * applied on the wrapper element, unless `wrapperProps` is also passed.
+         */
+        consistentPropsSpread?: boolean;
+    };
+};
+/**
+ * Hook to access future flags.
+ * @private
+ *
+ * @example
+ * ```jsx
+ * const themeBridge = useFutureFlag('themeBridge');
+ * ```
+ */
+export declare function useFutureFlag<K extends keyof FutureOptions>(key: K): FutureOptions[K];
+/** @private */
+export declare const FutureFlagsProvider: ({ children, value, }: React.PropsWithChildren<{
+    value: true | FutureOptions;
+}>) => React.JSX.Element;

package/cjs/utils/providers/FutureFlagsProvider.js

@@ -0,0 +1,48 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  FutureFlagsProvider: function () {
+    return FutureFlagsProvider;
+  },
+  useFutureFlag: function () {
+    return useFutureFlag;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useSafeContext = require('../hooks/useSafeContext.js');
+const FutureFlagsContext = _react.createContext({});
+function useFutureFlag(key) {
+  let context = (0, _useSafeContext.useSafeContext)(FutureFlagsContext);
+  return context[key];
+}
+const FutureFlagsProvider = ({ children, value }) => {
+  if (true === value)
+    value = {
+      themeBridge: true,
+    };
+  let context = _react.useContext(FutureFlagsContext);
+  let combinedValue = {
+    ...context,
+    ...value,
+  };
+  return _react.createElement(
+    FutureFlagsContext.Provider,
+    {
+      value: _react.useMemo(
+        () => combinedValue,
+        [JSON.stringify(combinedValue)],
+      ),
+    },
+    children,
+  );
+};

package/cjs/utils/providers/index.d.ts

@@ -1 +1,2 @@
+export * from './FutureFlagsProvider.js';
 export * from './HydrationProvider.js';

package/cjs/utils/providers/index.js

@@ -3,4 +3,5 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 const _export_star = require('@swc/helpers/_/_export_star');
+_export_star._(require('./FutureFlagsProvider.js'), exports);
 _export_star._(require('./HydrationProvider.js'), exports);

package/esm/core/Buttons/DropdownButton.d.ts

@@ -8,7 +8,7 @@ export type DropdownButtonProps = {
      * Pass a function that takes the `close` argument (to close the menu),
      * and returns a list of `MenuItem` components.
      */
-    menuItems: (close: () => void) => React.JSX.Element[];
+    menuItems: ((close: () => void) => React.JSX.Element[]) | React.JSX.Element[] | React.JSX.Element;
     /**
      * Style of the dropdown button.
      * Use 'borderless' to hide outline.

package/esm/core/Buttons/IconButton.d.ts

@@ -25,7 +25,7 @@ export type IconButtonProps = {
      * @deprecated Use `label` instead.
      */
     title?: string;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading' | 'stretched'>;
 /**
  * Icon button
  * @example

package/esm/core/Carousel/Carousel.d.ts

@@ -40,22 +40,22 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
      * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
      */
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
             title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
             as?: "button" | undefined;
         }>;
-        NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
             title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
             as?: "button" | undefined;
         }>;
     };

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -7,22 +7,22 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
  * `children` can be specified to override what is shown in this navigation section.
  */
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
-    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
         title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
         as?: "button" | undefined;
     }>;
-    NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
         title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -1,20 +1,9 @@
 import * as React from 'react';
-export declare const ComboBoxMenuItem: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "as" | "role" | "onClick" | "size" | "icon" | "disabled" | "value" | "startIcon" | "endIcon" | "index" | "focused" | "isSelected" | "sublabel" | "badge" | "subMenuItems"> & {
-    isSelected?: boolean;
-    disabled?: boolean;
-    value?: unknown;
-    onClick?: (value?: unknown) => void;
-    size?: "default" | "large";
-    sublabel?: React.ReactNode;
-    startIcon?: React.JSX.Element;
-    icon?: React.JSX.Element;
-    endIcon?: React.JSX.Element;
-    badge?: React.JSX.Element;
-    role?: string;
-    subMenuItems?: React.JSX.Element[];
-    children?: React.ReactNode;
-} & Pick<import("../List/ListItem.js").ListItemOwnProps, "focused"> & {
+import type { MenuItemProps } from '../Menu/MenuItem.js';
+type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
-} & {
+};
+export declare const ComboBoxMenuItem: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "as" | "role" | "onClick" | "size" | "icon" | "disabled" | "value" | "startIcon" | "endIcon" | "index" | "focused" | "isSelected" | "sublabel" | "badge" | "subMenuItems"> & ComboBoxMenuItemProps & {
     as?: "div" | undefined;
 }>;
+export {};

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -41,7 +41,7 @@ export const ComboBoxMenuItem = React.memo(
         disabled: disabled,
         focused: focusedIndex === index,
         ref: refs,
-        onClick: () => onClick?.(value),
+        onClick: () => onClick?.(),
         role: role,
         tabIndex: 'presentation' === role ? void 0 : -1,
         'aria-selected': isSelected,

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -16,7 +16,7 @@ export type DropdownMenuProps = {
     /**
      * Child element to wrap dropdown with.
      */
-    children: React.ReactNode;
+    children: React.JSX.Element;
     /**
      * Middleware options.
      *

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -28,7 +28,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
      * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;

package/esm/core/Menu/MenuItem.d.ts

@@ -10,14 +10,20 @@ export type MenuItemProps = {
      * Item is disabled.
      */
     disabled?: boolean;
+} & ({
     /**
      * Value of the item.
+     * @deprecated
      */
-    value?: unknown;
+    value: unknown;
     /**
      * Callback function that handles click and keyboard submit actions.
      */
     onClick?: (value?: unknown) => void;
+} | {
+    /** @deprecated */ value?: never;
+    onClick?: (event?: React.MouseEvent) => void;
+}) & {
     /**
      * Modify height of the item.
      * Use 'large' when any of the sibling items have `sublabel`.

package/esm/core/Menu/MenuItem.js

@@ -63,13 +63,10 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     }),
     [hasSubMenu],
   );
-  let onClick = () => {
+  let onClick = (event) => {
     if (disabled) return;
     if (shouldCloseMenuOnClick) dropdownMenu?.close();
-    onClickProp?.(value);
-  };
-  let handlers = {
-    onClick,
+    onClickProp?.(value ?? event);
   };
   let focusableItemIndex = parentMenu?.focusableElements.findIndex(
     (el) => el === menuItemRef.current,
@@ -94,9 +91,13 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
             focusableItemIndex,
-            userProps: handlers,
+            userProps: {
+              onClick,
+            },
           })
-        : handlers),
+        : {
+            onClick,
+          }),
       ...rest,
     },
     startIcon &&

package/esm/core/Popover/Popover.d.ts

@@ -14,8 +14,10 @@ type PopoverOptions = {
      */
     visible?: boolean;
     /**
-     * Callback invoked every time the popover visibility changes as a result
-     * of internal logic. Should be used alongside `visible` prop.
+     * Callback invoked every time the popover visibility *changes* (uncontrolled mode) or should *change*
+     * (controlled mode) as a result of internal logic.
+     *
+     * Should be used alongside `visible` prop.
      */
     onVisibleChange?: (visible: boolean) => void;
     /**
@@ -147,7 +149,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
     open: boolean;
-    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    onOpenChange: (value: boolean) => void;
     getReferenceProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };

package/esm/core/Select/Select.js

@@ -12,6 +12,7 @@ import {
   useLatestRef,
   InputWithIcon,
   mergeEventHandlers,
+  isReact17or18,
 } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
@@ -174,7 +175,13 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
               isSelected,
             })
           : React.createElement(MenuItem, null, option.label);
-        let { label, icon, startIcon: startIconProp, ...restOption } = option;
+        let {
+          label,
+          icon,
+          startIcon: startIconProp,
+          value: _,
+          ...restOption
+        } = option;
         let startIcon = startIconProp ?? icon;
         return React.cloneElement(menuItem, {
           key: `${label}-${index}`,
@@ -451,15 +458,17 @@ let SelectListbox = React.forwardRef((props, forwardedRef) => {
   }, []);
   let children = React.useMemo(
     () =>
-      React.Children.map(childrenProp, (child, index) =>
-        React.isValidElement(child)
-          ? React.createElement(CompositeItem, {
-              key: index,
-              render: child,
-              ref: child.props.ref || child.ref,
-            })
-          : child,
-      ),
+      React.Children.map(childrenProp, (child, index) => {
+        if (React.isValidElement(child)) {
+          let ref = isReact17or18 ? child.ref : child.props.ref;
+          return React.createElement(CompositeItem, {
+            key: index,
+            ref: ref,
+            render: child,
+          });
+        }
+        return child;
+      }),
     [childrenProp],
   );
   return React.createElement(