@itwin/itwinui-react 2.11.4 → 3.0.0-dev.0

package/esm/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelHeaderProps = {
+declare type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *
@@ -23,7 +23,7 @@ export declare type InformationPanelHeaderProps = {
      * Content of the panel header.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -40,5 +40,5 @@ export declare type InformationPanelHeaderProps = {
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-export declare const InformationPanelHeader: (props: InformationPanelHeaderProps) => JSX.Element;
+export declare const InformationPanelHeader: PolymorphicForwardRefComponent<"div", InformationPanelHeaderProps>;
 export default InformationPanelHeader;

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
-import { useTheme, SvgCloseSmall } from '../utils/index.js';
+import { SvgCloseSmall, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
@@ -23,14 +23,13 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-export const InformationPanelHeader = (props) => {
+export const InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-information-header', className), ...rest },
-        React.createElement("span", { className: 'iui-information-header-label' }, children),
-        React.createElement("div", { className: 'iui-information-header-actions' },
+    return (React.createElement(Box, { className: cx('iui-information-header', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'span', className: 'iui-information-header-label' }, children),
+        React.createElement(Box, { className: 'iui-information-header-actions' },
             actions,
             onClose && (React.createElement(IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
                 React.createElement(SvgCloseSmall, { "aria-hidden": true }))))));
-};
+});
 export default InformationPanelHeader;

package/esm/core/InformationPanel/InformationPanelWrapper.d.ts

@@ -1,9 +1,4 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelWrapperProps = {
-    children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.
@@ -13,5 +8,5 @@ export declare type InformationPanelWrapperProps = {
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-export declare const InformationPanelWrapper: (props: InformationPanelWrapperProps) => JSX.Element;
+export declare const InformationPanelWrapper: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default InformationPanelWrapper;

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -2,9 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
-import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
@@ -15,9 +13,5 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-export const InformationPanelWrapper = (props) => {
-    const { className, children, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-information-panel-wrapper', className), ...rest }, children));
-};
+export const InformationPanelWrapper = polymorphic.div('iui-information-panel-wrapper');
 export default InformationPanelWrapper;

package/esm/core/InformationPanel/index.d.ts

@@ -1,12 +1,7 @@
 export { InformationPanel } from './InformationPanel.js';
-export type { InformationPanelProps } from './InformationPanel.js';
 declare const _default: "./InformationPanel";
 export default _default;
 export { InformationPanelWrapper } from './InformationPanelWrapper.js';
-export type { InformationPanelWrapperProps } from './InformationPanelWrapper.js';
 export { InformationPanelHeader } from './InformationPanelHeader.js';
-export type { InformationPanelHeaderProps } from './InformationPanelHeader.js';
 export { InformationPanelBody } from './InformationPanelBody.js';
-export type { InformationPanelBodyProps } from './InformationPanelBody.js';
 export { InformationPanelContent } from './InformationPanelContent.js';
-export type { InformationPanelContentProps } from './InformationPanelContent.js';

package/esm/core/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
@@ -10,7 +10,7 @@ export declare type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+};
 /**
  * Basic input component
  * @example
@@ -18,15 +18,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/esm/core/Input/Input.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, useTheme } from '../utils/index.js';
+import { useMergedRefs, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic input component
@@ -15,7 +15,6 @@ import '@itwin/itwinui-css/css/input.css';
  */
 export const Input = React.forwardRef((props, ref) => {
     const { setFocus = false, size, className, ...rest } = props;
-    useTheme();
     const inputRef = React.useRef(null);
     const refs = useMergedRefs(inputRef, ref);
     React.useEffect(() => {
@@ -23,6 +22,6 @@ export const Input = React.forwardRef((props, ref) => {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", { className: cx('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
+    return (React.createElement(Box, { as: 'input', className: cx('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
 });
 export default Input;

package/esm/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/esm/core/InputGroup/InputGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
-export declare type InputGroupProps = {
+declare type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -37,7 +37,7 @@ export declare type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -53,5 +53,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/esm/core/InputGroup/InputGroup.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, useTheme, InputContainer } from '../utils/index.js';
+import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
 /**
  * Group Checkbox/Radio components together
@@ -20,9 +20,8 @@ import '@itwin/itwinui-css/css/utils.css';
  *  <Radio />
  * </InputGroup>
  */
-export const InputGroup = (props) => {
-    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, className, style, required = false, ...rest } = props;
-    useTheme();
+export const 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 });
@@ -34,7 +33,7 @@ export const InputGroup = (props) => {
         }
         return undefined;
     };
-    return (React.createElement(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)));
-};
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-input-group' }, children)));
+});
 export default InputGroup;

package/esm/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/esm/core/Label/Label.d.ts

@@ -1,11 +1,6 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 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;
+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 +14,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 +21,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/esm/core/Label/Label.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
 /**
  * A standalone label to be used with input components (using `htmlFor`).
@@ -13,12 +13,11 @@ import '@itwin/itwinui-css/css/utils.css';
  * <Label htmlFor='name-input'>Name</Label>
  * <Input id='name-input' />
  */
-export const Label = (props) => {
-    const { as: Element = 'label', displayStyle = 'block', required, className, children, ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { className: cx('iui-input-label', {
+export const Label = React.forwardRef((props, forwardedRef) => {
+    const { displayStyle = 'block', required, className, children, ...rest } = props;
+    return (React.createElement(Box, { as: 'label', className: cx('iui-input-label', {
             'iui-inline': displayStyle === 'inline',
             'iui-required': required,
-        }, className), ...rest }, children));
-};
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 export default Label;

package/esm/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/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { InputProps } from '../Input/Input.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
@@ -52,50 +53,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/esm/core/LabeledInput/LabeledInput.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useTheme, InputContainer, useId, } from '../utils/index.js';
+import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic labeled input component
@@ -17,7 +17,6 @@ import '@itwin/itwinui-css/css/input.css';
 export const LabeledInput = React.forwardRef((props, ref) => {
     const uid = 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;
-    useTheme();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
     return (React.createElement(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, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));

package/esm/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/esm/core/LabeledSelect/LabeledSelect.d.ts

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

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '../Select/index.js';
-import { StatusIconMap, useTheme, InputContainer, useId, } from '../utils/index.js';
+import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Labeled select component to select value from options.
@@ -41,7 +41,6 @@ import '@itwin/itwinui-css/css/input.css';
  */
 export const LabeledSelect = (props) => {
     const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, triggerProps, ...rest } = props;
-    useTheme();
     const labelId = `${useId()}-label`;
     const icon = () => {
         if (svgIcon) {

package/esm/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/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,8 +1,9 @@
 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 type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import '@itwin/itwinui-css/css/input.css';
-export declare type LabeledTextareaProps = {
+declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.
      */
@@ -45,28 +46,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/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, useTheme, InputContainer, useId, } from '../utils/index.js';
+import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 import { Textarea } from '../Textarea/index.js';
 import '@itwin/itwinui-css/css/input.css';
 /**
@@ -30,7 +30,6 @@ import '@itwin/itwinui-css/css/input.css';
 export const LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = 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;
-    useTheme();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
     return (React.createElement(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(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));

package/esm/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/esm/core/List/List.d.ts

@@ -1,6 +1,2 @@
-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/esm/core/List/List.js

@@ -2,12 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-export const List = React.forwardRef((props, ref) => {
-    const { as: Element = 'ul', className, ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { className: cx('iui-list', className), ref: ref, role: 'list', ...rest }));
-});
+export const List = polymorphic.ul('iui-list', { role: 'list' });
+List.displayName = 'List';

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

@@ -1,6 +1,7 @@
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-declare type ListItemOwnProps = {
+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 +29,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 +46,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 +55,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 +68,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/esm/core/List/ListItem.js

@@ -4,28 +4,22 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic, Box } from '../utils/index.js';
 import '@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;
-    useTheme();
-    return (React.createElement(Element, { className: cx('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(Box, { as: 'li', className: cx('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: cx('iui-list-item-icon', className), ref: ref, ...rest }));
-});
+const ListItemIcon = 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: cx('iui-list-item-content', className), ref: ref, ...rest }));
-});
+const ListItemContent = 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: cx('iui-list-item-description', className), ref: ref, ...rest }));
-});
+const ListItemDescription = polymorphic('iui-list-item-description');
+ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
 // Exported compound component
 /**

package/esm/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';