@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Radio/Radio.js

@@ -1,26 +1,54 @@
-/*---------------------------------------------------------------------------------------------
- * 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 radio input component
- * @example
- * <Radio />
- * <Radio label='Radio' />
- * <Radio disabled={true} label='Radio' />
- * <Radio status='positive' label='Positive' />
- * <Radio status='warning' label='Warning' />
- * <Radio status='negative' label='Negative' />
- */
 export const Radio = React.forwardRef((props, ref) => {
-    const { className, disabled = false, label, status, labelProps, wrapperProps, style, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    const radio = (React.createElement(Box, { as: 'input', className: cx('iui-radio', className), style: style, disabled: disabled, type: 'radio', ref: refs, ...rest }));
-    return !label ? (radio) : (React.createElement(Box, { as: 'label', ...wrapperProps, className: cx('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, wrapperProps?.className) },
+  const {
+    className,
+    disabled = false,
+    label,
+    status,
+    labelProps,
+    wrapperProps,
+    style,
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  const radio = React.createElement(Box, {
+    as: 'input',
+    className: cx('iui-radio', className),
+    style: style,
+    disabled: disabled,
+    type: 'radio',
+    ref: refs,
+    ...rest,
+  });
+  return !label
+    ? radio
+    : React.createElement(
+        Box,
+        {
+          as: 'label',
+          ...wrapperProps,
+          className: cx(
+            'iui-radio-wrapper',
+            {
+              'iui-disabled': disabled,
+              [`iui-${status}`]: !!status,
+            },
+            wrapperProps?.className,
+          ),
+        },
         radio,
-        label && (React.createElement(Box, { as: 'span', ...labelProps, className: cx('iui-radio-label', labelProps?.className) }, label))));
+        label &&
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              ...labelProps,
+              className: cx('iui-radio-label', labelProps?.className),
+            },
+            label,
+          ),
+      );
 });

package/esm/core/RadioTiles/RadioTile.js

@@ -1,22 +1,67 @@
-/*---------------------------------------------------------------------------------------------
- * 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';
-/**
- * RadioTile component to be used in RadioTileGroup component
- * @example
- * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
- */
 export const RadioTile = React.forwardRef((props, ref) => {
-    const { icon, label, description, className, wrapperProps, iconProps, labelProps, subLabelProps, style, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    return (React.createElement(Box, { as: 'label', "data-iui-disabled": props.disabled ? 'true' : undefined, ...wrapperProps, className: cx('iui-radio-tile', wrapperProps?.className) },
-        React.createElement(Box, { as: 'input', ref: refs, className: cx('iui-radio-tile-input', className), style: style, type: 'radio', ...rest }),
-        icon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...iconProps, className: cx('iui-radio-tile-icon', iconProps?.className) }, icon)),
-        label && (React.createElement(Box, { as: 'div', ...labelProps, className: cx('iui-radio-tile-label', labelProps?.className) }, label)),
-        description && (React.createElement(Box, { as: 'div', ...subLabelProps, className: cx('iui-radio-tile-sublabel', subLabelProps?.className) }, description))));
+  const {
+    icon,
+    label,
+    description,
+    className,
+    wrapperProps,
+    iconProps,
+    labelProps,
+    subLabelProps,
+    style,
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      ...wrapperProps,
+      className: cx('iui-radio-tile', wrapperProps?.className),
+    },
+    React.createElement(Box, {
+      as: 'input',
+      ref: refs,
+      className: cx('iui-radio-tile-input', className),
+      style: style,
+      type: 'radio',
+      ...rest,
+    }),
+    icon &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...iconProps,
+          className: cx('iui-radio-tile-icon', iconProps?.className),
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...labelProps,
+          className: cx('iui-radio-tile-label', labelProps?.className),
+        },
+        label,
+      ),
+    description &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...subLabelProps,
+          className: cx('iui-radio-tile-sublabel', subLabelProps?.className),
+        },
+        description,
+      ),
+  );
 });

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -1,20 +1,21 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../../utils/index.js';
-/**
- * RadioTileGroup component to group RadioTile components together
- * @example
- * <RadioTileGroup label='My group'>
- *   <RadioTile label='First tile' icon={<SvgSmileyHappy />} />
- *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
- * </RadioTileGroup>
- */
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-    const { children, label, ...rest } = props;
-    return (React.createElement(InputGroup, { label: label, ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-radio-tile-container' }, children)));
+  const { children, label, ...rest } = props;
+  return React.createElement(
+    InputGroup,
+    {
+      label: label,
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-radio-tile-container',
+      },
+      children,
+    ),
+  );
 });

package/esm/core/SearchBox/SearchBox.js

@@ -1,155 +1,230 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { InputFlexContainer, SvgSearch, SvgCloseSmall, useSafeContext, useId, useMergedRefs, mergeEventHandlers, Box, InputFlexContainerIcon, InputFlexContainerButton, } from '../../utils/index.js';
+import {
+  InputFlexContainer,
+  SvgSearch,
+  SvgCloseSmall,
+  useSafeContext,
+  useId,
+  useMergedRefs,
+  mergeEventHandlers,
+  Box,
+  InputFlexContainerIcon,
+  InputFlexContainerButton,
+} from '../../utils/index.js';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
-    const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
-    const uid = useId();
-    const [inputId, setInputId] = React.useState(uid);
-    const inputRef = React.useRef(null);
-    const openButtonRef = React.useRef(null);
-    const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-    const isExpanded = isExpandedProp ?? localExpanded;
-    const onCollapse = () => {
-        setLocalExpanded(false);
-        onCollapseProp?.();
-        queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
-    };
-    const onExpand = () => {
-        setLocalExpanded(true);
-        onExpandProp?.();
-        queueMicrotask(() => inputRef.current?.focus({ preventScroll: true }));
-    };
-    return (React.createElement(SearchBoxContext.Provider, { value: {
-            size,
-            isDisabled,
-            onCollapse,
-            onExpand,
-            inputRef,
-            inputId,
-            setInputId,
-            openButtonRef,
-            isExpanded,
-            expandable,
-        } },
-        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), size: size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children ?? (React.createElement(React.Fragment, null,
-            React.createElement(SearchBoxCollapsedState, null,
-                React.createElement(SearchBoxExpandButton, null)),
-            React.createElement(SearchBoxExpandedState, null,
-                React.createElement(SearchBoxIcon, null),
-                React.createElement(SearchBoxInput, { ...inputProps }),
-                expandable ? React.createElement(SearchBoxCollapseButton, null) : null))))));
+  const {
+    size,
+    expandable = false,
+    isDisabled = false,
+    onCollapse: onCollapseProp,
+    onExpand: onExpandProp,
+    isExpanded: isExpandedProp,
+    children,
+    inputProps,
+    className,
+    ...rest
+  } = props;
+  const uid = useId();
+  const [inputId, setInputId] = React.useState(uid);
+  const inputRef = React.useRef(null);
+  const openButtonRef = React.useRef(null);
+  const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+  const isExpanded = isExpandedProp ?? localExpanded;
+  const onCollapse = () => {
+    setLocalExpanded(false);
+    onCollapseProp?.();
+    queueMicrotask(() =>
+      openButtonRef.current?.focus({
+        preventScroll: true,
+      }),
+    );
+  };
+  const onExpand = () => {
+    setLocalExpanded(true);
+    onExpandProp?.();
+    queueMicrotask(() =>
+      inputRef.current?.focus({
+        preventScroll: true,
+      }),
+    );
+  };
+  return React.createElement(
+    SearchBoxContext.Provider,
+    {
+      value: {
+        size,
+        isDisabled,
+        onCollapse,
+        onExpand,
+        inputRef,
+        inputId,
+        setInputId,
+        openButtonRef,
+        isExpanded,
+        expandable,
+      },
+    },
+    React.createElement(
+      InputFlexContainer,
+      {
+        ref: ref,
+        className: cx(
+          'iui-searchbox',
+          {
+            'iui-expandable-searchbox': expandable,
+          },
+          className,
+        ),
+        size: size,
+        isDisabled: isDisabled,
+        'data-iui-expanded': isExpanded,
+        ...rest,
+      },
+      children ??
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(
+            SearchBoxCollapsedState,
+            null,
+            React.createElement(SearchBoxExpandButton, null),
+          ),
+          React.createElement(
+            SearchBoxExpandedState,
+            null,
+            React.createElement(SearchBoxIcon, null),
+            React.createElement(SearchBoxInput, inputProps),
+            expandable
+              ? React.createElement(SearchBoxCollapseButton, null)
+              : null,
+          ),
+        ),
+    ),
+  );
 });
-// ----------------------------------------------------------------------------
-const SearchBoxCollapsedState = ({ children, }) => {
-    const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-    if (!expandable || isExpanded) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children ?? React.createElement(SearchBoxExpandButton, null));
+const SearchBoxCollapsedState = ({ children }) => {
+  const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+  if (!expandable || isExpanded) {
+    return null;
+  }
+  return React.createElement(
+    React.Fragment,
+    null,
+    children ?? React.createElement(SearchBoxExpandButton, null),
+  );
 };
 SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
-// ----------------------------------------------------------------------------
-const SearchBoxExpandedState = ({ children, }) => {
-    const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-    if (expandable && !isExpanded) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children);
+const SearchBoxExpandedState = ({ children }) => {
+  const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+  if (expandable && !isExpanded) {
+    return null;
+  }
+  return React.createElement(React.Fragment, null, children);
 };
 SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
-// ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(InputFlexContainerIcon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(SvgSearch, null)));
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    InputFlexContainerIcon,
+    {
+      'aria-hidden': true,
+      className: cx('iui-search-icon', className),
+      ref: ref,
+      ...rest,
+    },
+    children ?? React.createElement(SvgSearch, null),
+  );
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
-// ----------------------------------------------------------------------------
 const SearchBoxInput = React.forwardRef((props, ref) => {
-    const { className, id: idProp, ...rest } = props;
-    const { inputId, setInputId, isDisabled, inputRef } = useSafeContext(SearchBoxContext);
-    React.useEffect(() => {
-        if (idProp && idProp !== inputId) {
-            setInputId(idProp);
-        }
-    }, [idProp, inputId, setInputId]);
-    return (React.createElement(Box, { as: 'input', id: idProp ?? inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+  const { className, id: idProp, ...rest } = props;
+  const { inputId, setInputId, isDisabled, inputRef } =
+    useSafeContext(SearchBoxContext);
+  React.useEffect(() => {
+    if (idProp && idProp !== inputId) {
+      setInputId(idProp);
+    }
+  }, [idProp, inputId, setInputId]);
+  return React.createElement(Box, {
+    as: 'input',
+    id: idProp ?? inputId,
+    ref: useMergedRefs(ref, inputRef),
+    role: 'searchbox',
+    type: 'text',
+    className: cx('iui-search-input', className),
+    disabled: isDisabled,
+    ...rest,
+  });
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
-// ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
-    return (React.createElement(InputFlexContainerButton, { size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(SvgSearch, null)));
+  const { children, ...rest } = props;
+  const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
+  return React.createElement(
+    InputFlexContainerButton,
+    {
+      size: sizeContext,
+      ref: ref,
+      disabled: isDisabled,
+      ...rest,
+    },
+    children ?? React.createElement(SvgSearch, null),
+  );
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
-// ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
-    const { children, onClick: onClickProp, ...rest } = props;
-    const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children ?? React.createElement(SvgCloseSmall, null)));
+  const { children, onClick: onClickProp, ...rest } = props;
+  const {
+    onCollapse,
+    size: sizeContext,
+    isDisabled,
+  } = useSafeContext(SearchBoxContext);
+  return React.createElement(
+    SearchBoxButton,
+    {
+      ref: ref,
+      'aria-label': 'Close searchbox',
+      size: sizeContext,
+      disabled: isDisabled,
+      onClick: mergeEventHandlers(onClickProp, onCollapse),
+      ...rest,
+    },
+    children ?? React.createElement(SvgCloseSmall, null),
+  );
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
-// ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-    const { children, onClick: onClickProp, ...rest } = props;
-    const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), styleType: 'default', ...rest }, children ?? React.createElement(SvgSearch, null)));
+  const { children, onClick: onClickProp, ...rest } = props;
+  const {
+    onExpand,
+    size: sizeContext,
+    isDisabled,
+    openButtonRef,
+  } = useSafeContext(SearchBoxContext);
+  return React.createElement(
+    SearchBoxButton,
+    {
+      ref: useMergedRefs(ref, openButtonRef),
+      'aria-label': 'Expand searchbox',
+      size: sizeContext,
+      disabled: isDisabled,
+      onClick: mergeEventHandlers(onClickProp, onExpand),
+      styleType: 'default',
+      ...rest,
+    },
+    children ?? React.createElement(SvgSearch, null),
+  );
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
-// ----------------------------------------------------------------------------
-/**
- * SearchBox component.
- * Can be used to implement search functionality for pages, tables and more.
- * @example
- *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
- *
- * @example
- * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
- *
- * @example
- * <SearchBox>
- *   <SearchBox.CollapsedState />
- *   <SearchBox.ExpandedState>
- *     <SearchBox.Icon />
- *     <SearchBox.Input />
- *     <SearchBox.CollapseButton />
- *   </SearchBox.ExpandedState>
- * </SearchBox>
- */
 export const SearchBox = Object.assign(SearchBoxComponent, {
-    /**
-     * Icon to be placed within SearchBox.
-     * @default Looking glass icon
-     */
-    Icon: SearchBoxIcon,
-    /**
-     * Input to be placed within SearchBox
-     */
-    Input: SearchBoxInput,
-    /**
-     * Button to be placed within SearchBox. Default has looking glass icon.
-     */
-    Button: SearchBoxButton,
-    /**
-     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
-     */
-    CollapseButton: SearchBoxCollapseButton,
-    /**
-     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
-     */
-    ExpandButton: SearchBoxExpandButton,
-    /**
-     * Subcomponent to customise expanded state of the SearchBox
-     */
-    ExpandedState: SearchBoxExpandedState,
-    /**
-     * Subcomponent to customise collapsed state.
-     */
-    CollapsedState: SearchBoxCollapsedState,
+  Icon: SearchBoxIcon,
+  Input: SearchBoxInput,
+  Button: SearchBoxButton,
+  CollapseButton: SearchBoxCollapseButton,
+  ExpandButton: SearchBoxExpandButton,
+  ExpandedState: SearchBoxExpandedState,
+  CollapsedState: SearchBoxCollapsedState,
 });
 SearchBox.displayName = 'SearchBox';

package/esm/core/Select/Select.d.ts

@@ -67,7 +67,7 @@ import { usePopover } from '../Popover/Popover.js';
  * />
  */
 export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
+    ref?: React.ForwardedRef<HTMLElement>;
 }) => JSX.Element;
 export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
     /**