@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -1,33 +1,44 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { IconButton } from '../Buttons/IconButton.js';
 import { SvgCloseSmall, Box } from '../../utils/index.js';
-/**
- * Header of the InformationPanel to be passed in the `header` prop.
- *
- * @example
- * <InformationPanelHeader
- *   onClose={() => {}}
- *   actions={(
- *     <>
- *       <IconButton styleType='borderless' onClick={() => {}}><SvgEdit /></IconButton>
- *       <IconButton styleType='borderless' onClick={() => {}}><SvgDelete /></IconButton>
- *     </>
- *   )}
- * >
- *   <Text variant='subheading'>InfoPanel heading</Text>
- * </InformationPanelHeader>
- */
-export const InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
+export const InformationPanelHeader = React.forwardRef(
+  (props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    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 }))))));
-});
+    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,
+            }),
+          ),
+      ),
+    );
+  },
+);

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -1,15 +1,4 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * InformationPanelWrapper should contain the `InformationPanel`
- * and the component over which the panel will overlay.
- * @example
- * <InformationPanelWrapper>
- *   <Table ... />
- *   <InformationPanel ... />
- * </InformationPanelWrapper>
- */
-export const InformationPanelWrapper = polymorphic.div('iui-information-panel-wrapper');
+export const InformationPanelWrapper = polymorphic.div(
+  'iui-information-panel-wrapper',
+);

package/esm/core/Input/Input.js

@@ -1,19 +1,17 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { useMergedRefs, Box } from '../../utils/index.js';
-/**
- * Basic input component
- * @example
- * <Input disabled />
- * <Input size='small' />
- */
 export const Input = React.forwardRef((props, ref) => {
-    const { size, htmlSize, status, className, ...rest } = props;
-    const inputRef = React.useRef(null);
-    const refs = useMergedRefs(inputRef, ref);
-    return (React.createElement(Box, { as: 'input', className: cx('iui-input', 'iui-field', className), "data-iui-size": size, "data-iui-status": status, size: htmlSize, ref: refs, ...rest }));
+  const { size, htmlSize, status, className, ...rest } = props;
+  const inputRef = React.useRef(null);
+  const refs = useMergedRefs(inputRef, ref);
+  return React.createElement(Box, {
+    as: 'input',
+    className: cx('iui-input', 'iui-field', className),
+    'data-iui-size': size,
+    'data-iui-status': status,
+    size: htmlSize,
+    ref: refs,
+    ...rest,
+  });
 });

package/esm/core/InputGrid/InputGrid.js

@@ -1,9 +1,10 @@
-/*---------------------------------------------------------------------------------------------
- * 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, 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';
@@ -12,183 +13,162 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { ComboBox } from '../ComboBox/ComboBox.js';
 import { Select } from '../Select/Select.js';
-//-------------------------------------------------------------------------------
-/**
- * InputGrid component is used to display form fields (input, textarea, select)
- * with label and/or status message
- *
- * Form fields are automatically associated with the label and status message for
- * better accessibility.
- *
- * @example
- * <InputGrid>
- *   <Label>This is a label</Label>
- *   <Input />
- *   <StatusMessage>This is a message</StatusMessage>
- * </InputGrid>
- */
 export const InputGrid = React.forwardRef((props, ref) => {
-    const { children: childrenProp, className, labelPlacement = undefined, ...rest } = props;
-    const children = useChildrenWithIds(childrenProp);
-    return (React.createElement(Box, { className: cx('iui-input-grid', className), "data-iui-label-placement": labelPlacement, ref: ref, ...rest }, children));
+  const {
+    children: childrenProp,
+    className,
+    labelPlacement = undefined,
+    ...rest
+  } = props;
+  const children = useChildrenWithIds(childrenProp);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
-//-------------------------------------------------------------------------------
-/**
- * Ensures that label, input and message are properly associated
- * with each other, for accessibility purposes.
- *
- * - `Select` will be associated with label using `aria-labelledby`
- * - Other inputs will be associated with label using `htmlFor`
- * - Message will be associated with input/select using `aria-describedby`
- */
 const useChildrenWithIds = (children) => {
-    const { labelId, inputId, messageId } = useSetup(children);
-    return React.useMemo(() => React.Children.map(children, (child) => {
+  const { labelId, inputId, messageId } = useSetup(children);
+  return React.useMemo(
+    () =>
+      React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
-            return child;
+          return child;
         }
         if (child.type === Label || child.type === 'label') {
-            return cloneElementWithRef(child, (child) => ({
-                ...child.props,
-                htmlFor: child.props.htmlFor || inputId,
-                id: child.props.id || labelId,
-            }));
+          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,
-            }));
+          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,
-            });
+        if (
+          isInput(child) ||
+          child.type === InputWithDecorations ||
+          child.type === InputWithIcon
+        ) {
+          return handleCloningInputs(child, {
+            labelId,
+            inputId,
+            messageId,
+          });
         }
         return child;
-    }), [children, inputId, labelId, messageId]);
+      }),
+    [children, inputId, labelId, messageId],
+  );
 };
-//-------------------------------------------------------------------------------
-/**
- * Setup/prerequisite for `useChildrenWithIds` to gather information from children.
- *
- * @returns the following ids (prefers id from props, otherwise generates one)
- *  - `labelId`
- *  - `inputId`
- *  - `messageId`
- */
 const useSetup = (children) => {
-    const idPrefix = useId();
-    let labelId;
-    let inputId;
-    let messageId;
-    let hasLabel = false;
-    let hasSelect = false;
-    const findInputId = (child) => {
-        if (!React.isValidElement(child)) {
-            return;
-        }
-        // ComboBox input id is passed through `inputProps`
-        if (child.type === ComboBox) {
-            return child.props.inputProps?.id || `${idPrefix}--input`;
-        }
-        // Select input id would be passed through `triggerProps`, but we don't even
-        // need it because, unlike other inputs, it gets labelled using `aria-labelledby`
-        else if (child.type !== Select) {
-            return child.props.id || `${idPrefix}--input`;
-        }
-    };
-    React.Children.forEach(children, (child) => {
-        if (!React.isValidElement(child)) {
-            return;
-        }
-        if (child.type === Label || child.type === 'label') {
-            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;
+  const idPrefix = useId();
+  let labelId;
+  let inputId;
+  let messageId;
+  let hasLabel = false;
+  let hasSelect = false;
+  const findInputId = (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === ComboBox) {
+      return child.props.inputProps?.id || `${idPrefix}--input`;
+    } else if (child.type !== Select) {
+      return child.props.id || `${idPrefix}--input`;
+    }
+  };
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === Label || child.type === 'label') {
+      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));
         }
-    });
-    return {
-        labelId: hasSelect ? labelId : undefined,
-        inputId: hasLabel && !hasSelect ? inputId : undefined,
-        messageId,
-    };
+      });
+    } else if (isInput(child)) {
+      inputId || (inputId = findInputId(child));
+    }
+    if (child.type === Select) {
+      hasSelect = true;
+    }
+  });
+  return {
+    labelId: hasSelect ? labelId : undefined,
+    inputId: hasLabel && !hasSelect ? inputId : undefined,
+    messageId,
+  };
 };
-//-------------------------------------------------------------------------------
-/**
- * Handles regular inputs, plus `InputWithDecorations`, `InputWithIcon`, `ComboBox` and `Select`.
- */
-const handleCloningInputs = (child, { labelId, inputId, messageId, }) => {
-    const inputProps = (props = {}) => {
-        // Concatenate aria-describedby from props and from StatusMessage
-        const ariaDescribedBy = [props['aria-describedby'], messageId]
-            .filter(Boolean)
-            .join(' ');
-        return {
-            ...props,
-            ...(child.type !== Select && { id: props.id || inputId }),
-            'aria-describedby': ariaDescribedBy?.trim() || undefined,
-        };
-    };
-    const 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));
+const handleCloningInputs = (child, { labelId, inputId, messageId }) => {
+  const inputProps = (props = {}) => {
+    const ariaDescribedBy = [props['aria-describedby'], messageId]
+      .filter(Boolean)
+      .join(' ');
+    return {
+      ...props,
+      ...(child.type !== Select && {
+        id: props.id || inputId,
+      }),
+      'aria-describedby': ariaDescribedBy?.trim() || undefined,
     };
-    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;
-            }),
-        }));
+  };
+  const cloneInput = (child) => {
+    if (child.type === ComboBox) {
+      return cloneElementWithRef(child, (child) => ({
+        inputProps: inputProps(child.props.inputProps),
+      }));
     }
-    return cloneInput(child);
+    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);
 };
-//-------------------------------------------------------------------------------
-/** @returns true if `child` is a form element that can be associated with a label using id  */
 const isInput = (child) => {
-    return (React.isValidElement(child) &&
-        (child.type === 'input' ||
-            child.type === 'textarea' ||
-            child.type === 'select' ||
-            child.type === Input ||
-            child.type === Textarea ||
-            child.type === InputWithDecorations.Input ||
-            child.type === Select || // contains Select.triggerProps
-            child.type === ComboBox) // contains ComboBox.inputProps
-    );
+  return (
+    React.isValidElement(child) &&
+    (child.type === 'input' ||
+      child.type === 'textarea' ||
+      child.type === 'select' ||
+      child.type === Input ||
+      child.type === Textarea ||
+      child.type === InputWithDecorations.Input ||
+      child.type === Select ||
+      child.type === ComboBox)
+  );
 };
-//-------------------------------------------------------------------------------

package/esm/core/InputGroup/InputGroup.js

@@ -1,50 +1,82 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { Box } from '../../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
-/**
- * Group Checkbox/Radio components together
- * @example
- * <caption>Group checkboxes</caption>
- * <InputGroup label='Checkbox group'>
- *  <Checkbox />
- *  <Checkbox />
- * </InputGroup>
- * @example
- * <caption>Group radios</caption>
- * <InputGroup label='Radio group'>
- *  <Radio />
- *  <Radio />
- * </InputGroup>
- */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { 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 })));
+  const {
+    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,
+    }),
+  );
 });
-// ------------------------------------------------------------------------------------------------
-/**
- * @private
- * - When `typeof message !== 'string'`, `message` is returned as-is (e.g. when `message=<StatusMessage />`).
- * - Else, it is wrapped in a `<StatusMessage />`.
- */
 const BottomMessage = (props) => {
-    const { message, status, svgIcon, displayStyle, messageProps } = props;
-    if (message && typeof message !== 'string') {
-        return message;
-    }
-    if (message || status || svgIcon) {
-        return (React.createElement(StatusMessage, { iconProps: {
-                'aria-hidden': true,
-            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message));
-    }
-    return null;
+  const { message, status, svgIcon, displayStyle, messageProps } = props;
+  if (message && typeof message !== 'string') {
+    return message;
+  }
+  if (message || status || svgIcon) {
+    return React.createElement(
+      StatusMessage,
+      {
+        iconProps: {
+          'aria-hidden': true,
+        },
+        startIcon: svgIcon,
+        status: status,
+        ...messageProps,
+      },
+      displayStyle !== 'inline' && message,
+    );
+  }
+  return null;
 };

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

@@ -33,7 +33,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
-        styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
+        styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;
     }>;
@@ -44,6 +44,6 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      * in `InputWithDecorations`.
      */
     Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
-        padded?: boolean | undefined;
+        padded?: import("../Icon/Icon.js").IconProps["padded"];
     }>;
 };