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

package/esm/core/InputWithDecorations/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { InputWithDecorations } from './InputWithDecorations.js';
+export default './Input';

package/esm/core/Label/Label.d.ts

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
-declare type LabelOwnProps = {
+type LabelOwnProps = {
     /**
      * Set the display style of the label.
      *   - 'block' - default, no extra spacing (label and input will be on separate lines)
@@ -13,6 +12,11 @@ declare type LabelOwnProps = {
      * This adds an asterisk next to the label text.
      */
     required?: boolean;
+    /**
+     * Adds disabled styling to a label.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * A standalone label to be used with input components (using `htmlFor`).

package/esm/core/Label/Label.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@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.
@@ -14,10 +13,31 @@ import '@itwin/itwinui-css/css/utils.css';
  * <Input id='name-input' />
  */
 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), ref: forwardedRef, ...rest }, children));
+  const {
+    displayStyle = 'block',
+    required,
+    disabled,
+    className,
+    children,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      className: cx(
+        'iui-input-label',
+        {
+          'iui-inline': displayStyle === 'inline',
+          'iui-required': required,
+        },
+        className,
+      ),
+      'data-iui-disabled': disabled ? true : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 export default Label;

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import type { InputProps } from '../Input/Input.js';
+import { Input } from '../Input/Input.js';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
-export declare type LabeledInputProps = {
+import { InputGrid } from '../InputGrid/index.js';
+import { InputWithDecorations } from '../InputWithDecorations/index.js';
+export type LabeledInputProps = {
     /**
      * Label of the input.
      */
@@ -18,15 +20,11 @@ export declare type LabeledInputProps = {
     /**
      * Custom svg icon. Will override status icon if specified.
      */
-    svgIcon?: JSX.Element;
+    svgIcon?: JSX.Element | null;
     /**
-     * Custom CSS class name for the input element.
+     * Pass props to wrapper element.
      */
-    inputClassName?: string;
-    /**
-     * Custom CSS Style for the input element.
-     */
-    inputStyle?: React.CSSProperties;
+    wrapperProps?: React.ComponentProps<typeof InputGrid>;
     /**
      * Set display style of label.
      * Supported values:
@@ -36,15 +34,22 @@ export declare type LabeledInputProps = {
      */
     displayStyle?: 'default' | 'inline';
     /**
-     * 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'.
+     * Passes properties for message content.
+     */
+    messageContentProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Passes properties for icon.
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     *  Passes properties for input wrapper.
      */
-    iconDisplayStyle?: 'block' | 'inline';
-} & InputProps;
+    inputWrapperProps?: React.ComponentProps<typeof InputWithDecorations>;
+} & React.ComponentProps<typeof Input>;
 /**
  * Basic labeled input component
  * @example

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,8 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
+import { StatusIconMap, useId, Icon } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/index.js';
+import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { Label } from '../Label/Label.js';
 /**
  * Basic labeled input component
  * @example
@@ -15,10 +18,68 @@ import '@itwin/itwinui-css/css/input.css';
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 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;
-    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 })));
+  const uid = useId();
+  const {
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
+    displayStyle = 'default',
+    required = false,
+    id = uid,
+    ...rest
+  } = props;
+  const icon = svgIcon ?? (status && StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+  return React.createElement(
+    InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          htmlFor: id,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(
+      InputWithDecorations,
+      { status: status, isDisabled: disabled, ...inputWrapperProps },
+      React.createElement(InputWithDecorations.Input, {
+        disabled: disabled,
+        required: required,
+        id: id,
+        ref: ref,
+        ...rest,
+      }),
+      shouldShowIcon &&
+        React.createElement(
+          Icon,
+          { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
+          icon,
+        ),
+    ),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage,
+          {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 });
 export default LabeledInput;

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
+import { Icon } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import '@itwin/itwinui-css/css/input.css';
-export declare type LabeledSelectProps<T> = {
+import { InputGrid } from '../InputGrid/InputGrid.js';
+export type LabeledSelectProps<T> = {
     /**
      * Label of the select.
      */
@@ -21,18 +22,26 @@ export declare type LabeledSelectProps<T> = {
      */
     svgIcon?: JSX.Element;
     /**
-     * Custom CSS class name for the select element.
+     * If true, shows a red asterisk but does not prevent form submission.
+     * @default false
      */
-    selectClassName?: string;
+    required?: boolean;
     /**
-     * Custom CSS Style for the select element.
+     * Pass props to wrapper element.
      */
-    selectStyle?: React.CSSProperties;
+    wrapperProps?: React.ComponentProps<typeof InputGrid>;
     /**
-     * If true, shows a red asterisk but does not prevent form submission.
-     * @default false
+     * Passes properties for label.
      */
-    required?: boolean;
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Passes properties for message icon.
+     */
+    messageIconProps?: React.ComponentProps<typeof Icon>;
 } & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T>;
 /**
  * Labeled select component to select value from options.

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,8 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '../Select/index.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
+import { StatusIconMap, useId, Icon } from '../utils/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
 /**
  * Labeled select component to select value from options.
  * @example
@@ -40,21 +42,71 @@ 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;
-    const labelId = `${useId()}-label`;
-    const icon = () => {
-        if (svgIcon) {
-            return React.cloneElement(svgIcon, { 'aria-hidden': true });
-        }
-        if (status && message) {
-            return StatusIconMap[status]();
-        }
-        return undefined;
-    };
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style, labelId: labelId },
-        React.createElement(Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest, triggerProps: {
-                'aria-labelledby': labelId,
-                ...triggerProps,
-            } })));
+  const {
+    className,
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    displayStyle = 'default',
+    style,
+    required = false,
+    triggerProps,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    messageIconProps,
+    ...rest
+  } = props;
+  const labelId = `${useId()}-label`;
+  const icon = () => {
+    if (svgIcon) {
+      return React.createElement(Icon, null, svgIcon);
+    }
+    if (status && message) {
+      return StatusIconMap[status]();
+    }
+    return undefined;
+  };
+  return React.createElement(
+    InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: 'div',
+          required: required,
+          disabled: disabled,
+          id: labelId,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(Select, {
+      disabled: disabled,
+      className: className,
+      style: style,
+      status: status,
+      ...rest,
+      triggerProps: {
+        'aria-labelledby': labelId,
+        ...triggerProps,
+      },
+    }),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage,
+          {
+            status: status,
+            startIcon: displayStyle === 'default' ? icon() : undefined,
+            iconProps: messageIconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 };
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { TextareaProps } from '../Textarea/Textarea.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import '@itwin/itwinui-css/css/input.css';
-declare type LabeledTextareaProps = {
+import { InputGrid } from '../InputGrid/InputGrid.js';
+type LabeledTextareaProps = {
     /**
      * Label for the textarea.
      */
@@ -17,14 +17,22 @@ declare type LabeledTextareaProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom class name for textarea.
+     * Pass props to wrapper element.
      */
-    textareaClassName?: string;
+    wrapperProps?: React.ComponentProps<typeof InputGrid>;
     /**
-     * Custom style for textarea.
+     * Passes properties for label.
      */
-    textareaStyle?: React.CSSProperties;
-} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'> & TextareaProps;
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Passes properties for svgIcon.
+     */
+    iconProps?: React.ComponentProps<typeof Icon>;
+} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle'>;
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import { Textarea } from '../Textarea/index.js';
-import '@itwin/itwinui-css/css/input.css';
+import { Icon } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { LabeledInput } from '../LabeledInput/index.js';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -27,11 +27,17 @@ import '@itwin/itwinui-css/css/input.css';
  *  status='negative'
  * />
  */
-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;
-    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 })));
+export const LabeledTextarea = React.forwardRef((props, forwardedRef) => {
+  return (
+    // ref types don't match but it's internal, so ts-ignore is ok here
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    React.createElement(LabeledInput, {
+      as: 'textarea',
+      rows: 3,
+      ref: forwardedRef,
+      ...props,
+    })
+  );
 });
 export default LabeledTextarea;

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

@@ -1,2 +1 @@
-import '@itwin/itwinui-css/css/menu.css';
 export declare const List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;

package/esm/core/List/List.js

@@ -3,6 +3,5 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 export const List = polymorphic.ul('iui-list', { role: 'list' });
 List.displayName = 'List';

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-export declare type ListItemOwnProps = {
+export 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
@@ -46,7 +45,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Icon: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -55,7 +54,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Content: PolymorphicForwardRefComponent<NonNullable<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`.
@@ -68,5 +67,5 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };

package/esm/core/List/ListItem.js

@@ -5,10 +5,27 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 const ListItemComponent = React.forwardRef((props, ref) => {
-    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 }));
+  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';
 // ----------------------------------------------------------------------------
@@ -36,30 +53,30 @@ ListItemDescription.displayName = 'ListItem.Description';
  * </List>
  */
 export const ListItem = Object.assign(ListItemComponent, {
-    /**
-     * Icon to be placed at the beginning or end of the ListItem.
-     */
-    Icon: ListItemIcon,
-    /**
-     * Wrapper for the main content of the ListItem.
-     *
-     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-     * - When using an end icon. The `ListItem.Content` will fill the available space
-     *   and push the icon to the end
-     * - When using `ListItem.Description`.
-     */
-    Content: ListItemContent,
-    /**
-     * Description to be used in addition to the main label of the ListItem.
-     * Should be used as a child of `ListItem.Content`.
-     *
-     * @example
-     * <ListItem>
-     *  <ListItem.Content>
-     *   <div>some list item</div>
-     *   <ListItem.Description>description for this item</ListItem.Description>
-     *  </ListItem.Content>
-     * </ListItem>
-     */
-    Description: ListItemDescription,
+  /**
+   * Icon to be placed at the beginning or end of the ListItem.
+   */
+  Icon: ListItemIcon,
+  /**
+   * Wrapper for the main content of the ListItem.
+   *
+   * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+   * - When using an end icon. The `ListItem.Content` will fill the available space
+   *   and push the icon to the end
+   * - When using `ListItem.Description`.
+   */
+  Content: ListItemContent,
+  /**
+   * Description to be used in addition to the main label of the ListItem.
+   * Should be used as a child of `ListItem.Content`.
+   *
+   * @example
+   * <ListItem>
+   *  <ListItem.Content>
+   *   <div>some list item</div>
+   *   <ListItem.Description>description for this item</ListItem.Description>
+   *  </ListItem.Content>
+   * </ListItem>
+   */
+  Description: ListItemDescription,
 });

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
-declare type MenuProps = {
+type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
      *
@@ -18,5 +17,5 @@ declare type MenuProps = {
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export declare const Menu: PolymorphicForwardRefComponent<"ul", MenuProps>;
+export declare const Menu: PolymorphicForwardRefComponent<"div", MenuProps>;
 export default Menu;