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

package/esm/core/InputGrid/InputGrid.d.ts

@@ -0,0 +1,25 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type InputGridOwnProps = {
+    /**
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
+     * @default 'default'
+     */
+    labelPlacement?: 'default' | 'inline';
+};
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export declare const InputGrid: PolymorphicForwardRefComponent<"div", InputGridOwnProps>;
+export default InputGrid;

package/esm/core/InputGrid/InputGrid.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Box } from '../utils/index.js';
+import cx from 'classnames';
+//-------------------------------------------------------------------------------
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export const InputGrid = React.forwardRef((props, ref) => {
+  const { children, className, labelPlacement = undefined, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+//-------------------------------------------------------------------------------
+export default InputGrid;

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

@@ -0,0 +1,3 @@
+export { InputGrid } from './InputGrid.js';
+declare const _default: "./InputGrid";
+export default _default;

package/esm/core/InputGrid/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 { InputGrid } from './InputGrid.js';
+export default './InputGrid';

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
 type InputGroupProps = {
     /**
      * Label of the group.
@@ -36,6 +37,18 @@ type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for message.
+     */
+    messageProps?: Pick<React.ComponentProps<typeof StatusMessage>, 'iconProps' | 'contentProps'>;
+    /**
+     * Passes properties for inner input group element.
+     */
+    innerProps?: React.ComponentProps<'div'>;
 };
 /**
  * Group Checkbox/Radio components together

package/esm/core/InputGroup/InputGroup.js

@@ -3,7 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
+import cx from 'classnames';
+import { StatusIconMap, Box } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/index.js';
+import { Label } from '../Label/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -21,6 +25,7 @@ import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
   const {
+    className,
     children,
     disabled = false,
     displayStyle = 'default',
@@ -29,6 +34,9 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     status,
     svgIcon,
     required = false,
+    labelProps,
+    messageProps,
+    innerProps,
     ...rest
   } = props;
   const icon = () => {
@@ -43,19 +51,35 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     return undefined;
   };
   return React.createElement(
-    InputContainer,
+    InputGrid,
     {
-      label: label,
-      disabled: disabled,
-      required: required,
-      status: status,
-      message: message,
-      icon: icon(),
-      isLabelInline: displayStyle === 'inline',
       ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: cx('iui-input-group-wrapper', className),
       ...rest,
     },
-    React.createElement(Box, { className: 'iui-input-group' }, children),
+    label &&
+      React.createElement(
+        Label,
+        { as: 'label', required: required, disabled: disabled, ...labelProps },
+        label,
+      ),
+    React.createElement(
+      Box,
+      {
+        as: 'div',
+        ...innerProps,
+        className: cx('iui-input-group', innerProps?.className),
+      },
+      children,
+    ),
+    (message || status || svgIcon) &&
+      React.createElement(
+        StatusMessage,
+        { startIcon: icon(), status: status, ...messageProps },
+        displayStyle !== 'inline' && message,
+      ),
   );
 });
 export default InputGroup;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { InputProps } from '../Input/Input.js';
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "as" | keyof import("../utils/index.js").InputFlexContainerProps> & import("../utils/index.js").InputFlexContainerProps & {
+    as?: "div" | undefined;
+}> & {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: PolymorphicForwardRefComponent<"input", InputProps>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+        isActive?: boolean | undefined;
+        label?: React.ReactNode;
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        as?: "button" | undefined;
+    }>;
+};

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
+import { IconButton } from '../Buttons/index.js';
+const InputWithDecorationsContext = React.createContext(undefined);
+const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  const { children, size, isDisabled, ...rest } = props;
+  return React.createElement(
+    InputWithDecorationsContext.Provider,
+    { value: { size, isDisabled } },
+    React.createElement(
+      InputFlexContainer,
+      { isDisabled: isDisabled, size: size, ref: ref, ...rest },
+      children,
+    ),
+  );
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(Box, {
+    as: 'input',
+    ref: ref,
+    'data-iui-size': size ?? contextSize,
+    disabled: localDisabled ?? isDisabled,
+    id: idProp,
+    ...rest,
+  });
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  const { children, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(
+    IconButton,
+    {
+      ref: ref,
+      size: size ?? contextSize,
+      styleType: 'borderless',
+      disabled: localDisabled ?? isDisabled,
+      ...rest,
+    },
+    children,
+  );
+});
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export const InputWithDecorations = Object.assign(
+  InputWithDecorationsComponent,
+  {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: InputWithDecorationsInput,
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: InputWithDecorationsButton,
+  },
+);

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

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

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

@@ -12,6 +12,11 @@ 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

@@ -16,6 +16,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
   const {
     displayStyle = 'block',
     required,
+    disabled,
     className,
     children,
     ...rest
@@ -32,6 +33,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
         },
         className,
       ),
+      'data-iui-disabled': disabled ? true : undefined,
       ref: forwardedRef,
       ...rest,
     },

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

@@ -4,7 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
+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
@@ -16,46 +20,66 @@ import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 export const LabeledInput = React.forwardRef((props, ref) => {
   const uid = 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 && StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
   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,
-    }),
+    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,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/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,7 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '../Select/index.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
+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
@@ -48,16 +51,18 @@ export const LabeledSelect = (props) => {
     svgIcon,
     displayStyle = 'default',
     style,
-    selectClassName,
-    selectStyle,
     required = false,
     triggerProps,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    messageIconProps,
     ...rest
   } = props;
   const labelId = `${useId()}-label`;
   const icon = () => {
     if (svgIcon) {
-      return React.cloneElement(svgIcon, { 'aria-hidden': true });
+      return React.createElement(Icon, null, svgIcon);
     }
     if (status && message) {
       return StatusIconMap[status]();
@@ -65,29 +70,43 @@ export const LabeledSelect = (props) => {
     return undefined;
   };
   return React.createElement(
-    InputContainer,
-    {
-      label: label,
+    InputGrid,
+    { labelPlacement: displayStyle, ...wrapperProps },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: 'div',
+          required: required,
+          disabled: disabled,
+          id: labelId,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(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(Select, {
-      disabled: disabled,
-      className: selectClassName,
-      style: selectStyle,
+      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;