@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/cjs/core/Input/Input.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/input.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type InputProps = {
     /**
      * Set focus on input element.
@@ -10,7 +9,7 @@ export declare type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+};
 /**
  * Basic input component
  * @example
@@ -18,15 +17,5 @@ export declare type InputProps = {
  * <Input disabled />
  * <Input size='small' />
  */
-export declare const Input: React.ForwardRefExoticComponent<{
-    /**
-     * Set focus on input element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Modify size of the input.
-     */
-    size?: "small" | "large" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: PolymorphicForwardRefComponent<"input", InputProps>;
 export default Input;

package/cjs/core/Input/Input.js

@@ -34,7 +34,6 @@ exports.Input = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic input component
  * @example
@@ -44,7 +43,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 exports.Input = React.forwardRef((props, ref) => {
     const { setFocus = false, size, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const inputRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputRef, ref);
     React.useEffect(() => {
@@ -52,6 +50,6 @@ exports.Input = React.forwardRef((props, ref) => {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", { className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
+    return (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
 });
 exports.default = exports.Input;

package/cjs/core/Input/index.d.ts

@@ -1,4 +1,3 @@
 export { Input } from './Input.js';
-export type { InputProps } from './Input.js';
 declare const _default: "./Input";
 export default _default;

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
-export declare type InputGroupProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -37,7 +36,7 @@ export declare type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -53,5 +52,5 @@ export declare type InputGroupProps = {
  *  <Radio />
  * </InputGroup>
  */
-export declare const InputGroup: (props: InputGroupProps) => JSX.Element;
+export declare const InputGroup: PolymorphicForwardRefComponent<"div", InputGroupProps>;
 export default InputGroup;

package/cjs/core/InputGroup/InputGroup.js

@@ -30,7 +30,6 @@ exports.InputGroup = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -46,9 +45,8 @@ require("@itwin/itwinui-css/css/utils.css");
  *  <Radio />
  * </InputGroup>
  */
-const InputGroup = (props) => {
-    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, className, style, required = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.InputGroup = React.forwardRef((props, forwardedRef) => {
+    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, ...rest } = props;
     const icon = () => {
         if (svgIcon) {
             return React.cloneElement(svgIcon, { 'aria-hidden': true });
@@ -60,8 +58,7 @@ const InputGroup = (props) => {
         }
         return undefined;
     };
-    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style, ...rest },
-        React.createElement("div", { className: 'iui-input-group' }, children)));
-};
-exports.InputGroup = InputGroup;
+    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-input-group' }, children)));
+});
 exports.default = exports.InputGroup;

package/cjs/core/InputGroup/index.d.ts

@@ -1,4 +1,3 @@
 export { InputGroup } from './InputGroup.js';
-export type { InputGroupProps } from './InputGroup.js';
 declare const _default: "./InputGroup";
 export default _default;

package/cjs/core/Label/Label.d.ts

@@ -1,11 +1,5 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
-declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
-    /**
-     * What element should the label be rendered as?
-     * @default 'label'
-     */
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type LabelOwnProps = {
     /**
      * Set the display style of the label.
      *   - 'block' - default, no extra spacing (label and input will be on separate lines)
@@ -19,7 +13,6 @@ declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
      */
     required?: boolean;
 };
-export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwnProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof LabelOwnProps<T>>;
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.
@@ -27,5 +20,5 @@ export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwn
  * <Label htmlFor='name-input'>Name</Label>
  * <Input id='name-input' />
  */
-export declare const Label: <T extends React.ElementType<any> = "label">(props: LabelProps<T>) => JSX.Element;
+export declare const Label: PolymorphicForwardRefComponent<"label", LabelOwnProps>;
 export default Label;

package/cjs/core/Label/Label.js

@@ -34,7 +34,6 @@ exports.Label = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.
@@ -42,13 +41,11 @@ require("@itwin/itwinui-css/css/utils.css");
  * <Label htmlFor='name-input'>Name</Label>
  * <Input id='name-input' />
  */
-const Label = (props) => {
-    const { as: Element = 'label', displayStyle = 'block', required, className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-input-label', {
+exports.Label = React.forwardRef((props, forwardedRef) => {
+    const { displayStyle = 'block', required, className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-input-label', {
             'iui-inline': displayStyle === 'inline',
             'iui-required': required,
-        }, className), ...rest }, children));
-};
-exports.Label = Label;
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.Label;

package/cjs/core/Label/index.d.ts

@@ -1,4 +1,3 @@
 export { Label } from './Label.js';
-export type { LabelProps } from './Label.js';
 declare const _default: "./Label";
 export default _default;

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { InputProps } from '../Input/Input.js';
-import '@itwin/itwinui-css/css/input.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.
@@ -52,50 +52,5 @@ export declare type LabeledInputProps = {
  * <LabeledInput status='positive' label='Positive' />
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
-export declare const LabeledInput: React.ForwardRefExoticComponent<{
-    /**
-     * Label of the input.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the input. Does not apply to 'inline' input.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the input.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | undefined;
-    /**
-     * Custom CSS class name for the input element.
-     */
-    inputClassName?: string | undefined;
-    /**
-     * Custom CSS Style for the input element.
-     */
-    inputStyle?: React.CSSProperties | undefined;
-    /**
-     * Set display style of label.
-     * Supported values:
-     * - 'default' - label appears above input.
-     * - 'inline' - appears in the same line as input.
-     * @default 'default'
-     */
-    displayStyle?: "inline" | "default" | undefined;
-    /**
-     * Set display style of icon.
-     * Supported values:
-     * - 'block' - icon appears below input.
-     * - 'inline' - icon appears inside input (at the end).
-     *
-     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
-     */
-    iconDisplayStyle?: "inline" | "block" | undefined;
-} & {
-    setFocus?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;
 export default LabeledInput;

package/cjs/core/LabeledInput/LabeledInput.js

@@ -31,7 +31,6 @@ exports.LabeledInput = void 0;
 const React = __importStar(require("react"));
 const Input_js_1 = require("../Input/Input.js");
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic labeled input component
  * @example
@@ -43,7 +42,6 @@ require("@itwin/itwinui-css/css/input.css");
 exports.LabeledInput = React.forwardRef((props, ref) => {
     const uid = (0, index_js_1.useId)();
     const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Input_js_1.Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));

package/cjs/core/LabeledInput/index.d.ts

@@ -1,4 +1,3 @@
 export { LabeledInput } from './LabeledInput.js';
-export type { LabeledInputProps } from './LabeledInput.js';
 declare const _default: "./LabeledInput";
 export default _default;

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
-import type { LabeledInputProps } from '../LabeledInput/index.js';
-import '@itwin/itwinui-css/css/input.css';
+import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -31,7 +31,6 @@ exports.LabeledSelect = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../Select/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Labeled select component to select value from options.
  * @example
@@ -67,7 +66,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 const LabeledSelect = (props) => {
     const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, triggerProps, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const labelId = `${(0, index_js_2.useId)()}-label`;
     const icon = () => {
         if (svgIcon) {

package/cjs/core/LabeledSelect/index.d.ts

@@ -1,4 +1,3 @@
 export { LabeledSelect } from './LabeledSelect.js';
-export type { LabeledSelectProps } from './LabeledSelect.js';
 declare const _default: "./LabeledSelect";
 export default _default;

package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TextareaProps } from '../Textarea/Textarea.js';
-import type { LabeledInputProps } from '../LabeledInput/index.js';
-import '@itwin/itwinui-css/css/input.css';
-export declare type LabeledTextareaProps = {
+import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
+declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.
      */
@@ -45,28 +45,5 @@ export declare type LabeledTextareaProps = {
  *  status='negative'
  * />
  */
-export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
-    /**
-     * Label for the textarea.
-     */
-    label: React.ReactNode;
-    /**
-     * Message below the textarea. Does not apply to 'inline' textarea.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of text area.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom class name for textarea.
-     */
-    textareaClassName?: string | undefined;
-    /**
-     * Custom style for textarea.
-     */
-    textareaStyle?: React.CSSProperties | undefined;
-} & Pick<LabeledInputProps, "displayStyle" | "svgIcon" | "iconDisplayStyle"> & {
-    setFocus?: boolean | undefined;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const LabeledTextarea: PolymorphicForwardRefComponent<"textarea", LabeledTextareaProps>;
 export default LabeledTextarea;

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -31,7 +31,6 @@ exports.LabeledTextarea = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Textarea/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -56,7 +55,6 @@ require("@itwin/itwinui-css/css/input.css");
 exports.LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = (0, index_js_1.useId)();
     const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
-    (0, index_js_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(index_js_2.Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));

package/cjs/core/LabeledTextarea/index.d.ts

@@ -1,4 +1,3 @@
 export { LabeledTextarea } from './LabeledTextarea.js';
-export type { LabeledTextareaProps } from './LabeledTextarea.js';
 declare const _default: "./LabeledTextarea";
 export default _default;

package/cjs/core/List/List.d.ts

@@ -1,6 +1 @@
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-export declare const List: PolymorphicForwardRefComponent<"ul", ListOwnProps>;
-declare type ListOwnProps = {};
-export declare type ListProps = PolymorphicComponentProps<'ul', ListOwnProps>;
-export {};
+export declare const List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;

package/cjs/core/List/List.js

@@ -1,42 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
-exports.List = React.forwardRef((props, ref) => {
-    const { as: Element = 'ul', className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list', className), ref: ref, role: 'list', ...rest }));
-});
+exports.List = index_js_1.polymorphic.ul('iui-list', { role: 'list' });
+exports.List.displayName = 'List';

package/cjs/core/List/ListItem.d.ts

@@ -1,6 +1,6 @@
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-declare type ListItemOwnProps = {
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+export declare type ListItemOwnProps = {
     /**
      * Size of the ListItem. Can be explicitly specified to be 'large',
      * but if a description is included in addition to the label, then
@@ -28,9 +28,6 @@ declare type ListItemOwnProps = {
      */
     focused?: boolean;
 };
-declare type ListItemIconOwnProps = {};
-declare type ListItemContentOwnProps = {};
-declare type ListItemDescriptionOwnProps = {};
 /**
  * A generic ListItem component that can be used simply for displaying data, or as a base
  * for the list items in a more complex component (e.g. a custom Select).
@@ -48,7 +45,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<"div", ListItemIconOwnProps>;
+    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -57,7 +54,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<"div", ListItemContentOwnProps>;
+    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Description to be used in addition to the main label of the ListItem.
      * Should be used as a child of `ListItem.Content`.
@@ -70,10 +67,5 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<"div", ListItemDescriptionOwnProps>;
+    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
 };
-export declare type ListItemProps = PolymorphicComponentProps<'li', ListItemOwnProps>;
-export declare type ListItemIconProps = PolymorphicComponentProps<'li', ListItemIconOwnProps>;
-export declare type ListItemContentProps = PolymorphicComponentProps<'li', ListItemContentOwnProps>;
-export declare type ListItemDescriptionProps = PolymorphicComponentProps<'li', ListItemDescriptionOwnProps>;
-export {};

package/cjs/core/List/ListItem.js

@@ -34,27 +34,20 @@ exports.ListItem = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
 const ListItemComponent = React.forwardRef((props, ref) => {
-    const { as: Element = 'li', size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
+    const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
 });
+ListItemComponent.displayName = 'ListItem';
 // ----------------------------------------------------------------------------
-const ListItemIcon = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-icon', className), ref: ref, ...rest }));
-});
+const ListItemIcon = (0, index_js_1.polymorphic)('iui-list-item-icon');
+ListItemIcon.displayName = 'ListItem.Icon';
 // ----------------------------------------------------------------------------
-const ListItemContent = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-content', className), ref: ref, ...rest }));
-});
+const ListItemContent = (0, index_js_1.polymorphic)('iui-list-item-content');
+ListItemContent.displayName = 'ListItem.Content';
 // ----------------------------------------------------------------------------
-const ListItemDescription = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list-item-description', className), ref: ref, ...rest }));
-});
+const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
+ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
 // Exported compound component
 /**

package/cjs/core/List/index.d.ts

@@ -1,4 +1,2 @@
 export { List } from './List.js';
-export type { ListProps } from './List.js';
 export { ListItem } from './ListItem.js';
-export type { ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './ListItem.js';

package/cjs/core/Menu/Menu.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-export declare type MenuProps = {
-    /**
-     * ARIA role. For menu use 'menu', for select use 'listbox'.
-     * @default 'menu'
-     */
-    role?: string;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
      *
@@ -19,27 +13,9 @@ export declare type MenuProps = {
      * @default true
      */
     setFocus?: boolean;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export declare const Menu: React.ForwardRefExoticComponent<{
-    /**
-     * ARIA role. For menu use 'menu', for select use 'listbox'.
-     * @default 'menu'
-     */
-    role?: string | undefined;
-    /**
-     * Menu items. Recommended to use `MenuItem` components.
-     *
-     * If you have custom actionable items, they should have `tabIndex={-1}` for better keyboard navigation support
-     * and selected item should have `aria-selected={true}`.
-     */
-    children: React.ReactNode;
-    /**
-     * If true, the first selected or enabled menu item will be focused automatically.
-     * @default true
-     */
-    setFocus?: boolean | undefined;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLUListElement>>;
+export declare const Menu: PolymorphicForwardRefComponent<"ul", MenuProps>;
 export default Menu;

package/cjs/core/Menu/Menu.js

@@ -34,13 +34,11 @@ exports.Menu = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 exports.Menu = React.forwardRef((props, ref) => {
-    const { children, role = 'menu', setFocus = true, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { setFocus = true, className, ...rest } = props;
     const [focusedIndex, setFocusedIndex] = React.useState();
     const menuRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(menuRef, ref);
@@ -87,6 +85,6 @@ exports.Menu = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    return (React.createElement("ul", { className: (0, classnames_1.default)('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { as: 'ul', className: (0, classnames_1.default)('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
 });
 exports.default = exports.Menu;

package/cjs/core/Menu/MenuDivider.d.ts

@@ -1,7 +1,3 @@
-/// <reference types="react" />
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-export declare type MenuDividerProps = Omit<CommonProps, 'title'>;
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -17,5 +13,5 @@ export declare type MenuDividerProps = Omit<CommonProps, 'title'>;
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: (props: MenuDividerProps) => JSX.Element;
+export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
 export default MenuDivider;