@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

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

@@ -1,6 +1,9 @@
 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 { InputGrid } from '../InputGrid/index.js';
+import { InputWithDecorations } from '../InputWithDecorations/index.js';
 export type LabeledInputProps = {
     /**
      * Label of the input.
@@ -17,15 +20,11 @@ export 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:
@@ -35,15 +34,22 @@ export 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/cjs/core/LabeledInput/LabeledInput.js

@@ -7,8 +7,11 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const Input_js_1 = require('../Input/Input.js');
 const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../InputGrid/index.js');
+const index_js_3 = require('../InputWithDecorations/index.js');
+const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
+const Label_js_1 = require('../Label/Label.js');
 /**
  * Basic labeled input component
  * @example
@@ -20,46 +23,66 @@ const index_js_1 = require('../utils/index.js');
 exports.LabeledInput = React.forwardRef((props, ref) => {
   const uid = (0, index_js_1.useId)();
   const {
-    className,
     disabled = false,
     label,
     message,
     status,
     svgIcon,
-    style,
-    inputClassName,
-    inputStyle,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
     displayStyle = 'default',
-    iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline',
     required = false,
     id = uid,
     ...rest
   } = props;
   const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
   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,
-    }),
+    index_js_2.InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label_js_1.Label,
+        {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          htmlFor: id,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(
+      index_js_3.InputWithDecorations,
+      { status: status, isDisabled: disabled, ...inputWrapperProps },
+      React.createElement(index_js_3.InputWithDecorations.Input, {
+        disabled: disabled,
+        required: required,
+        id: id,
+        ref: ref,
+        ...rest,
+      }),
+      shouldShowIcon &&
+        React.createElement(
+          index_js_1.Icon,
+          { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
+          icon,
+        ),
+    ),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage_js_1.StatusMessage,
+          {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
   );
 });
 exports.default = exports.LabeledInput;

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

@@ -1,6 +1,8 @@
 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 { InputGrid } from '../InputGrid/InputGrid.js';
 export type LabeledSelectProps<T> = {
     /**
      * Label of the select.
@@ -20,18 +22,26 @@ export 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/cjs/core/LabeledSelect/LabeledSelect.js

@@ -9,6 +9,9 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../Select/index.js');
 const index_js_2 = require('../utils/index.js');
+const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
+const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
+const Label_js_1 = require('../Label/Label.js');
 /**
  * Labeled select component to select value from options.
  * @example
@@ -52,16 +55,18 @@ const LabeledSelect = (props) => {
     svgIcon,
     displayStyle = 'default',
     style,
-    selectClassName,
-    selectStyle,
     required = false,
     triggerProps,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    messageIconProps,
     ...rest
   } = props;
   const labelId = `${(0, index_js_2.useId)()}-label`;
   const icon = () => {
     if (svgIcon) {
-      return React.cloneElement(svgIcon, { 'aria-hidden': true });
+      return React.createElement(index_js_2.Icon, null, svgIcon);
     }
     if (status && message) {
       return index_js_2.StatusIconMap[status]();
@@ -69,29 +74,43 @@ const LabeledSelect = (props) => {
     return undefined;
   };
   return React.createElement(
-    index_js_2.InputContainer,
-    {
-      label: label,
+    InputGrid_js_1.InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label_js_1.Label,
+        {
+          as: 'div',
+          required: required,
+          disabled: disabled,
+          id: labelId,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(index_js_1.Select, {
       disabled: disabled,
-      required: required,
-      status: status,
-      message: message,
-      icon: displayStyle === 'default' ? icon() : undefined,
-      isLabelInline: displayStyle === 'inline',
       className: className,
       style: style,
-      labelId: labelId,
-    },
-    React.createElement(index_js_1.Select, {
-      disabled: disabled,
-      className: selectClassName,
-      style: selectStyle,
+      status: status,
       ...rest,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
       },
     }),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage_js_1.StatusMessage,
+          {
+            status: status,
+            startIcon: displayStyle === 'default' ? icon() : undefined,
+            iconProps: messageIconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
   );
 };
 exports.LabeledSelect = LabeledSelect;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
 type LabeledTextareaProps = {
     /**
      * Label for the textarea.
@@ -15,14 +17,22 @@ 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'>;
+    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/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -7,8 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Textarea/index.js');
+const index_js_1 = require('../LabeledInput/index.js');
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -30,49 +29,17 @@ const index_js_2 = require('../Textarea/index.js');
  *  status='negative'
  * />
  */
-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;
-  const icon = 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,
-    }),
+exports.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(index_js_1.LabeledInput, {
+      as: 'textarea',
+      rows: 3,
+      ref: forwardedRef,
+      ...props,
+    })
   );
 });
 exports.default = exports.LabeledTextarea;

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

@@ -17,5 +17,5 @@ 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;

package/cjs/core/Menu/Menu.js

@@ -66,7 +66,7 @@ exports.Menu = React.forwardRef((props, ref) => {
     }
   };
   return React.createElement(index_js_1.Box, {
-    as: 'ul',
+    as: 'div',
     className: (0, classnames_1.default)('iui-menu', className),
     role: 'menu',
     onKeyDown: onKeyDown,

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -13,5 +14,5 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 export default MenuDivider;

package/cjs/core/Menu/MenuDivider.js

@@ -21,7 +21,7 @@ const index_js_1 = require('../utils/index.js');
  *   ]}
  * </Menu>
  */
-exports.MenuDivider = index_js_1.polymorphic.li('iui-menu-divider', {
+exports.MenuDivider = (0, index_js_1.polymorphic)('iui-menu-divider', {
   role: 'separator',
 });
 exports.default = exports.MenuDivider;

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

@@ -64,5 +64,5 @@ export type MenuItemProps = {
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export declare const MenuItem: PolymorphicForwardRefComponent<"li", MenuItemProps>;
+export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
 export default MenuItem;

package/cjs/core/Menu/MenuItem.js

@@ -74,6 +74,7 @@ exports.MenuItem = React.forwardRef((props, ref) => {
   const listItem = React.createElement(
     ListItem_js_1.ListItem,
     {
+      as: 'div',
       actionable: true,
       size: size,
       active: isSelected,

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

@@ -26,5 +26,5 @@ type MenuItemSkeletonProps = {
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -25,7 +25,6 @@ exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'li',
       className: (0, classnames_1.default)('iui-menu-item-skeleton', className),
       'data-iui-size': hasSublabel && 'large',
       style: {

package/cjs/core/ProgressIndicators/ProgressLinear.d.ts

@@ -24,6 +24,10 @@ type ProgressLinearProps = {
      * Status of progress.
      */
     status?: 'positive' | 'negative';
+    /**
+     * Pass props to ProgressLinear label group.
+     */
+    labelGroupProps?: React.ComponentProps<'div'>;
 };
 /**
  * Shows progress on a linear bar

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -32,6 +32,7 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     isAnimated = false,
     status,
     className,
+    labelGroupProps,
     ...rest
   } = props;
   const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
@@ -54,7 +55,14 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     labels.length > 0 &&
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-progress-indicator-linear-label' },
+        {
+          as: 'div',
+          ...labelGroupProps,
+          className: (0, classnames_1.default)(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
+        },
         labels.map((label, index) =>
           React.createElement('span', { key: index }, label),
         ),

package/cjs/core/SearchBox/SearchBox.js

@@ -65,7 +65,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
           { 'iui-expandable-searchbox': expandable },
           className,
         ),
-        'data-iui-size': size,
+        size: size,
         isDisabled: isDisabled,
         'data-iui-expanded': isExpanded,
         ...rest,

package/cjs/core/Select/Select.d.ts

@@ -93,6 +93,10 @@ export type SelectProps<T> = {
      * Modify size of select.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of select.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */

package/cjs/core/Select/Select.js

@@ -90,6 +90,7 @@ const Select = (props) => {
     popoverProps,
     multiple = false,
     triggerProps,
+    status,
     ...rest
   } = props;
   const [isOpenState, setIsOpen] = React.useState(false);
@@ -97,7 +98,6 @@ const Select = (props) => {
   const [minWidth, setMinWidth] = React.useState(0);
   const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
   const selectRef = React.useRef(null);
-  const toggleButtonRef = React.useRef(null);
   const onShowHandler = React.useCallback(
     (instance) => {
       setIsOpen(true);
@@ -148,6 +148,11 @@ const Select = (props) => {
         key: `${label}-${index}`,
         isSelected,
         startIcon: startIcon,
+        endIcon: isSelected
+          ? React.createElement(index_js_2.SvgCheckmark, {
+              'aria-hidden': true,
+            })
+          : null,
         onClick: () => {
           if (option.disabled) {
             return;
@@ -214,8 +219,8 @@ const Select = (props) => {
             role: 'listbox',
             className: (0, classnames_1.default)('iui-scroll', menuClassName),
             style: {
-              minWidth,
-              maxWidth: `min(${minWidth * 2}px, 90vw)`,
+              minInlineSize: minWidth,
+              maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
               ...menuStyle,
             },
             id: `${uid}-menu`,
@@ -229,10 +234,8 @@ const Select = (props) => {
         onHide: onHideHandler,
         ...popoverProps,
         visible: isOpen,
-        onClickOutside: (_, { target }) => {
-          if (!toggleButtonRef.current?.contains(target)) {
-            setIsOpen(false);
-          }
+        onClickOutside: () => {
+          setIsOpen(false);
         },
       },
       React.createElement(
@@ -242,6 +245,7 @@ const Select = (props) => {
           role: 'combobox',
           ref: selectRef,
           'data-iui-size': size,
+          'data-iui-status': status,
           onClick: () => !disabled && setIsOpen((o) => !o),
           onKeyDown: (e) => !disabled && onKeyDown(e),
           'aria-disabled': disabled,
@@ -279,17 +283,14 @@ const Select = (props) => {
       ),
     ),
     React.createElement(
-      index_js_2.Box,
+      index_js_2.Icon,
       {
         as: 'span',
         'aria-hidden': true,
-        ref: toggleButtonRef,
         className: (0, classnames_1.default)('iui-end-icon', {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         }),
-        onClick: () => !disabled && setIsOpen((o) => !o),
       },
       React.createElement(index_js_2.SvgCaretDownSmall, null),
     ),

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -48,6 +48,22 @@ type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
+    /**
+     * Passes props for SideNav wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav top.
+     */
+    topProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav bottom.
+     */
+    bottomProps?: React.ComponentProps<'div'>;
 };
 /**
  * Left side navigation menu component.