@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/Popover/Popover.js

@@ -4,113 +4,67 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  useFloating,
-  useClick,
-  useDismiss,
-  useInteractions,
-  size,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  autoPlacement,
-  inline,
-  hide,
-  FloatingFocusManager,
-  useHover,
-  useFocus,
-  safePolygon,
-  useRole,
-  FloatingPortal,
-} from '@floating-ui/react';
-import {
-  Box,
-  cloneElementWithRef,
-  useControlledState,
-  useId,
-  useMergedRefs,
-} from '../utils/index.js';
+import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, } from '@floating-ui/react';
+import { Box, cloneElementWithRef, useControlledState, useId, useMergedRefs, } from '../utils/index.js';
 import { Portal } from '../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
 export const usePopover = (options) => {
-  const {
-    placement = 'bottom-start',
-    visible,
-    onVisibleChange,
-    closeOnOutsideClick,
-    autoUpdateOptions,
-    middleware = { flip: true, shift: true },
-    matchWidth,
-    trigger = { click: true, hover: false, focus: false },
-    role,
-  } = options;
-  const [open, onOpenChange] = useControlledState(
-    false,
-    visible,
-    onVisibleChange,
-  );
-  const floating = useFloating({
-    placement,
-    open,
-    onOpenChange,
-    whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
-    middleware: [
-      middleware.offset !== undefined && offset(middleware.offset),
-      middleware.flip && flip(),
-      middleware.shift && shift(),
-      matchWidth &&
-        size({
-          apply: ({ rects }) => {
-            setReferenceWidth(rects.reference.width);
-          },
+    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, middleware = { flip: true, shift: true }, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = options;
+    const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
+    const floating = useFloating({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
+        middleware: [
+            middleware.offset !== undefined && offset(middleware.offset),
+            middleware.flip && flip(),
+            middleware.shift && shift(),
+            matchWidth &&
+                size({
+                    apply: ({ rects }) => {
+                        setReferenceWidth(rects.reference.width);
+                    },
+                }),
+            middleware.autoPlacement && autoPlacement(),
+            middleware.inline && inline(),
+            middleware.hide && hide(),
+        ].filter(Boolean),
+    });
+    const interactions = useInteractions([
+        useClick(floating.context, { enabled: !!trigger.click }),
+        useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
+        useHover(floating.context, {
+            enabled: !!trigger.hover,
+            delay: 100,
+            handleClose: safePolygon({ buffer: 1 }),
         }),
-      middleware.autoPlacement && autoPlacement(),
-      middleware.inline && inline(),
-      middleware.hide && hide(),
-    ].filter(Boolean),
-  });
-  const interactions = useInteractions([
-    useClick(floating.context, { enabled: !!trigger.click }),
-    useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
-    useHover(floating.context, {
-      enabled: !!trigger.hover,
-      delay: 100,
-      handleClose: safePolygon({ buffer: 1 }),
-    }),
-    useFocus(floating.context, { enabled: !!trigger.focus }),
-    useRole(floating.context, { role: 'dialog', enabled: !!role }),
-  ]);
-  const [referenceWidth, setReferenceWidth] = React.useState();
-  const getFloatingProps = React.useCallback(
-    (userProps) =>
-      interactions.getFloatingProps({
+        useFocus(floating.context, { enabled: !!trigger.focus }),
+        useRole(floating.context, { role: 'dialog', enabled: !!role }),
+    ]);
+    const [referenceWidth, setReferenceWidth] = React.useState();
+    const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
         ...userProps,
         style: {
-          ...floating.floatingStyles,
-          zIndex: 9999,
-          ...(matchWidth && referenceWidth
-            ? {
-                minInlineSize: `${referenceWidth}px`,
-                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
-              }
-            : {}),
-          ...userProps?.style,
+            ...floating.floatingStyles,
+            zIndex: 9999,
+            ...(matchWidth && referenceWidth
+                ? {
+                    minInlineSize: `${referenceWidth}px`,
+                    maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+                }
+                : {}),
+            ...userProps?.style,
         },
-      }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
-  );
-  return React.useMemo(
-    () => ({
-      open,
-      onOpenChange,
-      ...interactions,
-      getFloatingProps,
-      ...floating,
-    }),
-    [open, onOpenChange, interactions, getFloatingProps, floating],
-  );
+    }), [floating.floatingStyles, interactions, matchWidth, referenceWidth]);
+    return React.useMemo(() => ({
+        open,
+        onOpenChange,
+        ...interactions,
+        getFloatingProps,
+        ...floating,
+    }), [open, onOpenChange, interactions, getFloatingProps, floating]);
 };
 /**
  * A utility component to help with positioning of floating content relative to a trigger.
@@ -124,82 +78,36 @@ export const usePopover = (options) => {
  * </Popover>
  */
 export const Popover = React.forwardRef((props, forwardedRef) => {
-  const {
-    portal = true,
+    const { portal = true, 
     //
     // popover options
-    visible,
-    placement = 'bottom-start',
-    onVisibleChange,
-    closeOnOutsideClick = true,
+    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, 
     //
     // dom props
-    className,
-    children,
-    content,
-    applyBackground = false,
-    ...rest
-  } = props;
-  const popover = usePopover({
-    visible,
-    placement,
-    onVisibleChange,
-    closeOnOutsideClick,
-    role: 'dialog',
-  });
-  const [popoverElement, setPopoverElement] = React.useState();
-  const popoverRef = useMergedRefs(
-    popover.refs.setFloating,
-    forwardedRef,
-    setPopoverElement,
-  );
-  const triggerId = `${useId()}-trigger`;
-  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-  return React.createElement(
-    React.Fragment,
-    null,
-    cloneElementWithRef(children, (children) => ({
-      id: children.props.id || triggerId,
-      ...popover.getReferenceProps(children.props),
-      ref: popover.refs.setReference,
-    })),
-    popover.open
-      ? React.createElement(
-          Portal,
-          { portal: portal },
-          React.createElement(
-            FloatingPortal,
-            null,
-            React.createElement(
-              ThemeProvider,
-              { portalContainer: popoverElement },
-              React.createElement(
-                FloatingFocusManager,
-                {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: popover.refs.floating,
-                },
-                React.createElement(
-                  Box,
-                  {
-                    className: cx(
-                      { 'iui-popover-surface': applyBackground },
-                      className,
-                    ),
-                    'aria-labelledby': !hasAriaLabel
-                      ? popover.refs.domReference.current?.id
-                      : undefined,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
-                  },
-                  content,
-                ),
-              ),
-            ),
-          ),
-        )
-      : null,
-  );
+    className, children, content, applyBackground = false, ...rest } = props;
+    const popover = usePopover({
+        visible,
+        placement,
+        onVisibleChange,
+        closeOnOutsideClick,
+        role: 'dialog',
+    });
+    const [popoverElement, setPopoverElement] = React.useState();
+    const popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
+    const triggerId = `${useId()}-trigger`;
+    const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+    return (React.createElement(React.Fragment, null,
+        cloneElementWithRef(children, (children) => ({
+            id: children.props.id || triggerId,
+            ...popover.getReferenceProps(children.props),
+            ref: popover.refs.setReference,
+        })),
+        popover.open ? (React.createElement(Portal, { portal: portal },
+            React.createElement(FloatingPortal, null,
+                React.createElement(ThemeProvider, { portalContainer: popoverElement },
+                    React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
+                        React.createElement(Box, { className: cx({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
+                                ? popover.refs.domReference.current?.id
+                                : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content)))))) : null));
 });
 export default Popover;

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -21,45 +21,10 @@ import { Box, getBoundedValue } from '../utils/index.js';
  * <ProgressLinear status='negative' />
  */
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
-  const {
-    value,
-    indeterminate = value === undefined,
-    labels = [],
-    isAnimated = false,
-    status,
-    className,
-    labelGroupProps,
-    ...rest
-  } = props;
-  const boundedValue = getBoundedValue(value ?? 100, 0, 100);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-progress-indicator-linear', className),
-      ref: forwardedRef,
-      'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-      'data-iui-animated': isAnimated ? 'true' : undefined,
-      style: {
-        '--iui-progress-percentage': `${boundedValue}%`,
-      },
-      ...rest,
-    },
-    labels.length > 0 &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...labelGroupProps,
-          className: cx(
-            'iui-progress-indicator-linear-label',
-            labelGroupProps?.className,
-          ),
-        },
-        labels.map((label, index) =>
-          React.createElement('span', { key: index }, label),
-        ),
-      ),
-  );
+    const { value, indeterminate = value === undefined, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
+    const boundedValue = getBoundedValue(value ?? 100, 0, 100);
+    return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
+            '--iui-progress-percentage': `${boundedValue}%`,
+        }, ...rest }, labels.length > 0 && (React.createElement(Box, { as: 'div', ...labelGroupProps, className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });
 export default ProgressLinear;

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  SvgCheckmarkSmall,
-  SvgImportantSmall,
-  Box,
-  getBoundedValue,
-} from '../utils/index.js';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../utils/index.js';
 /**
  * Circular Progress Indicator
  * @example
@@ -26,39 +21,18 @@ import {
  * <ProgressRadial size={'small'} indeterminate/>
  */
 export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
-  const {
-    value,
-    indeterminate = value === undefined,
-    status,
-    size,
-    className,
-    style,
-    children,
-    ...rest
-  } = props;
-  const statusMap = {
-    negative: React.createElement(SvgImportantSmall, { 'aria-hidden': true }),
-    positive: React.createElement(SvgCheckmarkSmall, { 'aria-hidden': true }),
-  };
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-progress-indicator-radial', className),
-      'data-iui-size': size,
-      'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-      ref: forwardedRef,
-      style: {
-        ...(value !== undefined && {
-          '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
-        }),
-        ...style,
-      },
-      ...rest,
-    },
-    size !== 'x-small'
-      ? children ?? (!!status ? statusMap[status] : null)
-      : null,
-  );
+    const { value, indeterminate = value === undefined, status, size, className, style, children, ...rest } = props;
+    const statusMap = {
+        negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
+        positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
+    };
+    return (React.createElement(Box, { className: cx('iui-progress-indicator-radial', className), "data-iui-size": size, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, ref: forwardedRef, style: {
+            ...(value !== undefined && {
+                '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
+            }),
+            ...style,
+        }, ...rest }, size !== 'x-small'
+        ? children ?? (!!status ? statusMap[status] : null)
+        : null));
 });
 export default ProgressRadial;

package/esm/core/Radio/Radio.js

@@ -16,51 +16,12 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <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))));
 });
 export default Radio;

package/esm/core/RadioTiles/RadioTile.js

@@ -11,67 +11,13 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <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))));
 });
 export default RadioTile;

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -14,15 +14,8 @@ import { Box } from '../utils/index.js';
  * </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)));
 });
 export default RadioTileGroup;