@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/InputGrid/InputGrid.js

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { Box, InputWithIcon, cloneElementWithRef, useId } from '../../utils/index.js';
+import {
+  Box,
+  InputWithIcon,
+  cloneElementWithRef,
+  useId,
+} from '../../utils/index.js';
 import cx from 'classnames';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
@@ -8,106 +13,131 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { ComboBox } from '../ComboBox/ComboBox.js';
 import { Select } from '../Select/Select.js';
-export const InputGrid = React.forwardRef((props, ref)=>{
-    let { children: childrenProp, className, labelPlacement, ...rest } = props;
-    let children = useChildrenWithIds(childrenProp);
-    return React.createElement(Box, {
-        className: cx('iui-input-grid', className),
-        "data-iui-label-placement": labelPlacement,
-        ref: ref,
-        ...rest
-    }, children);
+export const InputGrid = React.forwardRef((props, ref) => {
+  let { children: childrenProp, className, labelPlacement, ...rest } = props;
+  let children = useChildrenWithIds(childrenProp);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 InputGrid.displayName = 'InputGrid';
-let useChildrenWithIds = (children)=>{
-    let { labelId, inputId, messageId } = useSetup(children);
-    return React.useMemo(()=>React.Children.map(children, (child)=>{
-            if (!React.isValidElement(child)) return child;
-            if (child.type === Label || 'label' === child.type) return cloneElementWithRef(child, (child)=>({
-                    ...child.props,
-                    htmlFor: child.props.htmlFor || inputId,
-                    id: child.props.id || labelId
-                }));
-            if (child.type === StatusMessage) return cloneElementWithRef(child, (child)=>({
-                    ...child.props,
-                    id: child.props.id || messageId
-                }));
-            if (isInput(child) || child.type === InputWithDecorations || child.type === InputWithIcon) return handleCloningInputs(child, {
-                labelId,
-                inputId,
-                messageId
-            });
-            return child;
-        }), [
-        children,
-        inputId,
-        labelId,
-        messageId
-    ]);
+let useChildrenWithIds = (children) => {
+  let { labelId, inputId, messageId } = useSetup(children);
+  return React.useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child;
+        if (child.type === Label || 'label' === child.type)
+          return cloneElementWithRef(child, (child) => ({
+            ...child.props,
+            htmlFor: child.props.htmlFor || inputId,
+            id: child.props.id || labelId,
+          }));
+        if (child.type === StatusMessage)
+          return cloneElementWithRef(child, (child) => ({
+            ...child.props,
+            id: child.props.id || messageId,
+          }));
+        if (
+          isInput(child) ||
+          child.type === InputWithDecorations ||
+          child.type === InputWithIcon
+        )
+          return handleCloningInputs(child, {
+            labelId,
+            inputId,
+            messageId,
+          });
+        return child;
+      }),
+    [children, inputId, labelId, messageId],
+  );
 };
-let useSetup = (children)=>{
-    let idPrefix = useId();
-    let labelId;
-    let inputId;
-    let messageId;
-    let hasLabel = false;
-    let hasSelect = false;
-    let findInputId = (child)=>{
-        if (!React.isValidElement(child)) return;
-        if (child.type === ComboBox) return child.props.inputProps?.id || `${idPrefix}--input`;
-        if (child.type !== Select) return child.props.id || `${idPrefix}--input`;
-    };
-    React.Children.forEach(children, (child)=>{
-        if (!React.isValidElement(child)) return;
-        if (child.type === Label || 'label' === child.type) {
-            hasLabel = true;
-            labelId || (labelId = child.props.id || `${idPrefix}--label`);
-        }
-        if (child.type === StatusMessage) messageId || (messageId = child.props.id || `${idPrefix}--message`);
-        if (child.type === InputWithDecorations || child.type === InputWithIcon) React.Children.forEach(child.props.children, (child)=>{
-            if (isInput(child)) inputId || (inputId = findInputId(child));
-        });
-        else if (isInput(child)) inputId || (inputId = findInputId(child));
-        if (child.type === Select) hasSelect = true;
-    });
-    return {
-        labelId: hasSelect ? labelId : void 0,
-        inputId: hasLabel && !hasSelect ? inputId : void 0,
-        messageId
-    };
+let useSetup = (children) => {
+  let idPrefix = useId();
+  let labelId;
+  let inputId;
+  let messageId;
+  let hasLabel = false;
+  let hasSelect = false;
+  let findInputId = (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === ComboBox)
+      return child.props.inputProps?.id || `${idPrefix}--input`;
+    if (child.type !== Select) return child.props.id || `${idPrefix}--input`;
+  };
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === Label || 'label' === child.type) {
+      hasLabel = true;
+      labelId || (labelId = child.props.id || `${idPrefix}--label`);
+    }
+    if (child.type === StatusMessage)
+      messageId || (messageId = child.props.id || `${idPrefix}--message`);
+    if (child.type === InputWithDecorations || child.type === InputWithIcon)
+      React.Children.forEach(child.props.children, (child) => {
+        if (isInput(child)) inputId || (inputId = findInputId(child));
+      });
+    else if (isInput(child)) inputId || (inputId = findInputId(child));
+    if (child.type === Select) hasSelect = true;
+  });
+  return {
+    labelId: hasSelect ? labelId : void 0,
+    inputId: hasLabel && !hasSelect ? inputId : void 0,
+    messageId,
+  };
 };
-let handleCloningInputs = (child, { labelId, inputId, messageId })=>{
-    let inputProps = (props = {})=>{
-        let ariaDescribedBy = [
-            props['aria-describedby'],
-            messageId
-        ].filter(Boolean).join(' ');
-        return {
-            ...props,
-            ...child.type !== Select && {
-                id: props.id || inputId
-            },
-            'aria-describedby': ariaDescribedBy?.trim() || void 0
-        };
-    };
-    let cloneInput = (child)=>{
-        if (child.type === ComboBox) return cloneElementWithRef(child, (child)=>({
-                inputProps: inputProps(child.props.inputProps)
-            }));
-        if (child.type === Select) return cloneElementWithRef(child, (child)=>({
-                triggerProps: {
-                    'aria-labelledby': labelId,
-                    ...inputProps(child.props.triggerProps)
-                }
-            }));
-        return cloneElementWithRef(child, (child)=>inputProps(child.props));
+let handleCloningInputs = (child, { labelId, inputId, messageId }) => {
+  let inputProps = (props = {}) => {
+    let ariaDescribedBy = [props['aria-describedby'], messageId]
+      .filter(Boolean)
+      .join(' ');
+    return {
+      ...props,
+      ...(child.type !== Select && {
+        id: props.id || inputId,
+      }),
+      'aria-describedby': ariaDescribedBy?.trim() || void 0,
     };
-    if (child.type === InputWithDecorations || child.type === InputWithIcon) return cloneElementWithRef(child, (child)=>({
-            children: React.Children.map(child.props.children, (child)=>{
-                if (React.isValidElement(child) && isInput(child)) return cloneInput(child);
-                return child;
-            })
-        }));
-    return cloneInput(child);
+  };
+  let cloneInput = (child) => {
+    if (child.type === ComboBox)
+      return cloneElementWithRef(child, (child) => ({
+        inputProps: inputProps(child.props.inputProps),
+      }));
+    if (child.type === Select)
+      return cloneElementWithRef(child, (child) => ({
+        triggerProps: {
+          'aria-labelledby': labelId,
+          ...inputProps(child.props.triggerProps),
+        },
+      }));
+    return cloneElementWithRef(child, (child) => inputProps(child.props));
+  };
+  if (child.type === InputWithDecorations || child.type === InputWithIcon)
+    return cloneElementWithRef(child, (child) => ({
+      children: React.Children.map(child.props.children, (child) => {
+        if (React.isValidElement(child) && isInput(child))
+          return cloneInput(child);
+        return child;
+      }),
+    }));
+  return cloneInput(child);
 };
-let isInput = (child)=>React.isValidElement(child) && ('input' === child.type || 'textarea' === child.type || 'select' === child.type || child.type === Input || child.type === Textarea || child.type === InputWithDecorations.Input || child.type === Select || child.type === ComboBox);
+let isInput = (child) =>
+  React.isValidElement(child) &&
+  ('input' === child.type ||
+    'textarea' === child.type ||
+    'select' === child.type ||
+    child.type === Input ||
+    child.type === Textarea ||
+    child.type === InputWithDecorations.Input ||
+    child.type === Select ||
+    child.type === ComboBox);

package/DEV-esm/core/InputGroup/InputGroup.js

@@ -4,43 +4,77 @@ import { Box } from '../../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
-export const InputGroup = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props;
-    return React.createElement(InputGrid, {
-        ref: forwardedRef,
-        as: "div",
-        labelPlacement: displayStyle,
-        className: cx('iui-input-group-wrapper', className),
-        "data-iui-status": status,
-        ...rest
-    }, label && React.createElement(Label, {
-        as: "label",
-        required: required,
-        disabled: disabled,
-        ...labelProps
-    }, label), React.createElement(Box, {
-        as: "div",
+export const InputGroup = React.forwardRef((props, forwardedRef) => {
+  let {
+    className,
+    children,
+    disabled = false,
+    displayStyle = 'default',
+    label,
+    status,
+    required = false,
+    labelProps,
+    innerProps,
+    message,
+    svgIcon,
+    messageProps,
+    ...rest
+  } = props;
+  return React.createElement(
+    InputGrid,
+    {
+      ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: cx('iui-input-group-wrapper', className),
+      'data-iui-status': status,
+      ...rest,
+    },
+    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), React.createElement(BottomMessage, {
-        message: message,
-        status: status,
-        svgIcon: svgIcon,
-        displayStyle: displayStyle,
-        messageProps: messageProps
-    }));
+        className: cx('iui-input-group', innerProps?.className),
+      },
+      children,
+    ),
+    React.createElement(BottomMessage, {
+      message: message,
+      status: status,
+      svgIcon: svgIcon,
+      displayStyle: displayStyle,
+      messageProps: messageProps,
+    }),
+  );
 });
 InputGroup.displayName = 'InputGroup';
-let BottomMessage = (props)=>{
-    let { message, status, svgIcon, displayStyle, messageProps } = props;
-    if (message && 'string' != typeof message) return message;
-    if (message || status || svgIcon) return React.createElement(StatusMessage, {
+let BottomMessage = (props) => {
+  let { message, status, svgIcon, displayStyle, messageProps } = props;
+  if (message && 'string' != typeof message) return message;
+  if (message || status || svgIcon)
+    return React.createElement(
+      StatusMessage,
+      {
         iconProps: {
-            'aria-hidden': true
+          'aria-hidden': true,
         },
         startIcon: svgIcon,
         status: status,
-        ...messageProps
-    }, 'inline' !== displayStyle && message);
-    return null;
+        ...messageProps,
+      },
+      'inline' !== displayStyle && message,
+    );
+  return null;
 };

package/DEV-esm/core/InputWithDecorations/InputWithDecorations.js

@@ -1,50 +1,75 @@
 import * as React from 'react';
-import { Box, InputFlexContainer, InputFlexContainerButton, InputFlexContainerIcon, useSafeContext } from '../../utils/index.js';
+import {
+  Box,
+  InputFlexContainer,
+  InputFlexContainerButton,
+  InputFlexContainerIcon,
+  useSafeContext,
+} from '../../utils/index.js';
 let InputWithDecorationsContext = React.createContext(void 0);
 InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
-let InputWithDecorationsComponent = React.forwardRef((props, ref)=>{
-    let { children, size, isDisabled, ...rest } = props;
-    return React.createElement(InputWithDecorationsContext.Provider, {
-        value: {
-            size,
-            isDisabled
-        }
-    }, React.createElement(InputFlexContainer, {
+let InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  let { children, size, isDisabled, ...rest } = props;
+  return React.createElement(
+    InputWithDecorationsContext.Provider,
+    {
+      value: {
+        size,
+        isDisabled,
+      },
+    },
+    React.createElement(
+      InputFlexContainer,
+      {
         isDisabled: isDisabled,
         size: size,
         ref: ref,
-        ...rest
-    }, children));
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 InputWithDecorationsComponent.displayName = 'InputWithDecorations';
-let InputWithDecorationsInput = React.forwardRef((props, ref)=>{
-    let { id: idProp, size, disabled: localDisabled, ...rest } = props;
-    let { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
-    return React.createElement(Box, {
-        as: "input",
-        ref: ref,
-        "data-iui-size": size ?? contextSize,
-        disabled: localDisabled ?? isDisabled,
-        id: idProp,
-        ...rest
-    });
+let InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  let { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  let { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(Box, {
+    as: 'input',
+    ref: ref,
+    'data-iui-size': size ?? contextSize,
+    disabled: localDisabled ?? isDisabled,
+    id: idProp,
+    ...rest,
+  });
 });
 InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
-let InputWithDecorationsButton = React.forwardRef((props, ref)=>{
-    let { children, size, disabled: localDisabled, ...rest } = props;
-    let { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
-    return React.createElement(InputFlexContainerButton, {
-        ref: ref,
-        size: size ?? contextSize,
-        disabled: localDisabled ?? isDisabled,
-        ...rest
-    }, children);
+let InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  let { children, size, disabled: localDisabled, ...rest } = props;
+  let { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(
+    InputFlexContainerButton,
+    {
+      ref: ref,
+      size: size ?? contextSize,
+      disabled: localDisabled ?? isDisabled,
+      ...rest,
+    },
+    children,
+  );
 });
 InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
 let InputWithDecorationsIcon = InputFlexContainerIcon;
 InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
-export const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
+export const InputWithDecorations = Object.assign(
+  InputWithDecorationsComponent,
+  {
     Input: InputWithDecorationsInput,
     Button: InputWithDecorationsButton,
-    Icon: InputWithDecorationsIcon
-});
+    Icon: InputWithDecorationsIcon,
+  },
+);

package/DEV-esm/core/Label/Label.js

@@ -1,17 +1,32 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-export const Label = React.forwardRef((props, forwardedRef)=>{
-    let { displayStyle = 'block', required, disabled, className, children, ...rest } = props;
-    return React.createElement(Box, {
-        as: "label",
-        className: cx('iui-input-label', {
-            'iui-inline': 'inline' === displayStyle,
-            'iui-required': required
-        }, className),
-        "data-iui-disabled": !!disabled || void 0,
-        ref: forwardedRef,
-        ...rest
-    }, children);
+export const Label = React.forwardRef((props, forwardedRef) => {
+  let {
+    displayStyle = 'block',
+    required,
+    disabled,
+    className,
+    children,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      className: cx(
+        'iui-input-label',
+        {
+          'iui-inline': 'inline' === displayStyle,
+          'iui-required': required,
+        },
+        className,
+      ),
+      'data-iui-disabled': !!disabled || void 0,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 Label.displayName = 'Label';

package/DEV-esm/core/LabeledInput/LabeledInput.js

@@ -6,32 +6,73 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
 import cx from 'classnames';
-export const LabeledInput = React.forwardRef((props, ref)=>{
-    let { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
-    let icon = svgIcon ?? (status && StatusIconMap[status]());
-    let shouldShowIcon = null !== svgIcon && (svgIcon || status && !message);
-    return React.createElement(InputGrid, {
-        labelPlacement: displayStyle,
-        "data-iui-status": status,
-        ...wrapperProps
-    }, label && React.createElement(Label, {
-        as: "label",
-        required: required,
-        disabled: disabled,
-        ...labelProps
-    }, label), React.createElement(InputWithIcon, inputWrapperProps, React.createElement(Input, {
+export const LabeledInput = React.forwardRef((props, ref) => {
+  let {
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
+    displayStyle = 'default',
+    required = false,
+    ...rest
+  } = props;
+  let icon = svgIcon ?? (status && StatusIconMap[status]());
+  let shouldShowIcon = null !== svgIcon && (svgIcon || (status && !message));
+  return React.createElement(
+    InputGrid,
+    {
+      labelPlacement: displayStyle,
+      'data-iui-status': status,
+      ...wrapperProps,
+    },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(
+      InputWithIcon,
+      inputWrapperProps,
+      React.createElement(Input, {
         disabled: disabled,
         required: required,
         ref: ref,
-        ...rest
-    }), shouldShowIcon && React.createElement(Icon, {
-        fill: status,
-        ...iconProps,
-        className: cx('iui-end-icon', iconProps?.className)
-    }, icon)), 'string' == typeof message ? React.createElement(StatusMessage, {
-        status: status,
-        iconProps: iconProps,
-        contentProps: messageContentProps
-    }, message) : message);
+        ...rest,
+      }),
+      shouldShowIcon &&
+        React.createElement(
+          Icon,
+          {
+            fill: status,
+            ...iconProps,
+            className: cx('iui-end-icon', iconProps?.className),
+          },
+          icon,
+        ),
+    ),
+    'string' == typeof message
+      ? React.createElement(
+          StatusMessage,
+          {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 });
 LabeledInput.displayName = 'LabeledInput';