@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -2,36 +2,62 @@ import * as React from 'react';
 import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { FloatingTree } from '@floating-ui/react';
-export const DropdownMenu = React.forwardRef((props, forwardedRef)=>React.createElement(FloatingTree, null, React.createElement(DropdownMenuContent, {
-        ref: forwardedRef,
-        ...props
-    })));
+export const DropdownMenu = React.forwardRef((props, forwardedRef) =>
+  React.createElement(
+    FloatingTree,
+    null,
+    React.createElement(DropdownMenuContent, {
+      ref: forwardedRef,
+      ...props,
+    }),
+  ),
+);
 DropdownMenu.displayName = 'DropdownMenu';
-let DropdownMenuContent = React.forwardRef((props, forwardedRef)=>{
-    let { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
-    let [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChange);
-    let menuContent = React.useMemo(()=>{
-        if ('function' == typeof menuItems) return menuItems(()=>setVisible(false));
-        return menuItems;
-    }, [
-        menuItems,
-        setVisible
-    ]);
-    return React.createElement(React.Fragment, null, React.createElement(Menu, {
+let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
+  let {
+    menuItems,
+    children,
+    role = 'menu',
+    visible: visibleProp,
+    placement = 'bottom-start',
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
+    ...rest
+  } = props;
+  let [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChange,
+  );
+  let menuContent = React.useMemo(() => {
+    if ('function' == typeof menuItems)
+      return menuItems(() => setVisible(false));
+    return menuItems;
+  }, [menuItems, setVisible]);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Menu,
+      {
         trigger: children,
-        onKeyDown: mergeEventHandlers(props.onKeyDown, (e)=>{
-            if (e.defaultPrevented) return;
-            if ('Tab' === e.key) setVisible(false);
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+          if (e.defaultPrevented) return;
+          if ('Tab' === e.key) setVisible(false);
         }),
         role: role,
         ref: forwardedRef,
         portal: portal,
         popoverProps: {
-            placement,
-            matchWidth,
-            visible,
-            onVisibleChange: setVisible
+          placement,
+          matchWidth,
+          visible,
+          onVisibleChange: setVisible,
         },
-        ...rest
-    }, menuContent));
+        ...rest,
+      },
+      menuContent,
+    ),
+  );
 });

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

@@ -1,139 +1,206 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, useId } from '../../utils/index.js';
+import {
+  StatusIconMap,
+  SvgChevronRight,
+  Box,
+  useSafeContext,
+  polymorphic,
+  mergeEventHandlers,
+  ButtonBase,
+  useId,
+} from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
 let ExpandableBlockContext = React.createContext(void 0);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
-let ExpandableBlockComponent = React.forwardRef((props, forwardedRef)=>{
-    let { children, title, caption, endIcon, ...rest } = props;
-    return React.createElement(ExpandableBlock.Wrapper, {
-        ...rest,
-        ref: forwardedRef
-    }, React.createElement(ExpandableBlock.Trigger, {
-        label: title,
-        caption: caption,
-        endIcon: endIcon
-    }), React.createElement(ExpandableBlock.Content, null, children));
+let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
+  let { children, title, caption, endIcon, ...rest } = props;
+  return React.createElement(
+    ExpandableBlock.Wrapper,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    React.createElement(ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(ExpandableBlock.Content, null, children),
+  );
 });
 ExpandableBlockComponent.displayName = 'ExpandableBlock';
-let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef)=>{
-    let { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
-    let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-    let expanded = isExpanded ?? expandedState;
-    let [descriptionId, setDescriptionId] = React.useState(void 0);
-    return React.createElement(ExpandableBlockContext.Provider, {
-        value: {
-            status,
-            isExpanded: expanded,
-            onToggle,
-            size,
-            styleType,
-            disabled,
-            setExpanded,
-            children,
-            descriptionId,
-            setDescriptionId
-        }
-    }, React.createElement(Box, {
+let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
+  let {
+    children,
+    className,
+    onToggle,
+    style,
+    isExpanded,
+    status,
+    size = 'default',
+    styleType = 'default',
+    disabled = false,
+    ...rest
+  } = props;
+  let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+  let expanded = isExpanded ?? expandedState;
+  let [descriptionId, setDescriptionId] = React.useState(void 0);
+  return React.createElement(
+    ExpandableBlockContext.Provider,
+    {
+      value: {
+        status,
+        isExpanded: expanded,
+        onToggle,
+        size,
+        styleType,
+        disabled,
+        setExpanded,
+        children,
+        descriptionId,
+        setDescriptionId,
+      },
+    },
+    React.createElement(
+      Box,
+      {
         className: cx('iui-expandable-block', className),
-        "data-iui-expanded": expanded,
-        "data-iui-size": size,
-        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        'data-iui-expanded': expanded,
+        'data-iui-size': size,
+        'data-iui-variant': 'default' !== styleType ? styleType : void 0,
         style: style,
         ref: forwardedRef,
-        ...rest
-    }, children));
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
-let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, label, caption, expandIcon, endIcon, ...rest } = props;
-    let { disabled, status } = useSafeContext(ExpandableBlockContext);
-    return React.createElement(LinkBox, {
-        className: cx('iui-expandable-header', className),
-        "data-iui-disabled": disabled ? 'true' : void 0,
-        ref: forwardedRef,
-        ...rest
-    }, children ?? React.createElement(React.Fragment, null, expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null), React.createElement(ExpandableBlock.LabelArea, null, React.createElement(ExpandableBlock.Title, null, label), caption && React.createElement(ExpandableBlock.Caption, null, caption)), endIcon || status ? React.createElement(ExpandableBlock.EndIcon, null, endIcon) : null));
+let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
+  let { className, children, label, caption, expandIcon, endIcon, ...rest } =
+    props;
+  let { disabled, status } = useSafeContext(ExpandableBlockContext);
+  return React.createElement(
+    LinkBox,
+    {
+      className: cx('iui-expandable-header', className),
+      'data-iui-disabled': disabled ? 'true' : void 0,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
+        React.createElement(
+          ExpandableBlock.LabelArea,
+          null,
+          React.createElement(ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(ExpandableBlock.Caption, null, caption),
+        ),
+        endIcon || status
+          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+          : null,
+      ),
+  );
 });
 ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
-let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, ...rest } = props;
-    return React.createElement(Icon, {
-        className: cx('iui-expandable-block-icon', className),
-        ref: forwardedRef,
-        ...rest
-    }, children ?? React.createElement(SvgChevronRight, {
-        "aria-hidden": true
-    }));
+let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
+  let { className, children, ...rest } = props;
+  return React.createElement(
+    Icon,
+    {
+      className: cx('iui-expandable-block-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(SvgChevronRight, {
+        'aria-hidden': true,
+      }),
+  );
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
 ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
-let ExpandableBlockTitle = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, onClick: onClickProp, ...rest } = props;
-    let { isExpanded, setExpanded, disabled, onToggle, descriptionId } = useSafeContext(ExpandableBlockContext);
-    return React.createElement(ButtonBase, {
-        className: cx('iui-expandable-block-title', 'iui-link-action', className),
-        "aria-expanded": isExpanded,
-        "aria-disabled": disabled,
-        onClick: mergeEventHandlers(onClickProp, ()=>{
-            if (disabled) return;
-            setExpanded(!isExpanded);
-            onToggle?.(!isExpanded);
-        }),
-        ref: forwardedRef,
-        "aria-describedby": descriptionId,
-        ...rest
-    }, children);
+let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
+  let { className, children, onClick: onClickProp, ...rest } = props;
+  let { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
+    useSafeContext(ExpandableBlockContext);
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-expandable-block-title', 'iui-link-action', className),
+      'aria-expanded': isExpanded,
+      'aria-disabled': disabled,
+      onClick: mergeEventHandlers(onClickProp, () => {
+        if (disabled) return;
+        setExpanded(!isExpanded);
+        onToggle?.(!isExpanded);
+      }),
+      ref: forwardedRef,
+      'aria-describedby': descriptionId,
+      ...rest,
+    },
+    children,
+  );
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
-let ExpandableBlockCaption = React.forwardRef((props, forwardedRef)=>{
-    let fallbackId = useId();
-    let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
-    React.useEffect(()=>{
-        setDescriptionId(props.id || fallbackId);
-        return ()=>setDescriptionId(void 0);
-    }, [
-        props.id,
-        fallbackId,
-        setDescriptionId
-    ]);
-    return React.createElement(Box, {
-        ref: forwardedRef,
-        id: fallbackId,
-        ...props,
-        className: cx('iui-expandable-block-caption', props?.className)
-    });
+let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
+  let fallbackId = useId();
+  let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
+  React.useEffect(() => {
+    setDescriptionId(props.id || fallbackId);
+    return () => setDescriptionId(void 0);
+  }, [props.id, fallbackId, setDescriptionId]);
+  return React.createElement(Box, {
+    ref: forwardedRef,
+    id: fallbackId,
+    ...props,
+    className: cx('iui-expandable-block-caption', props?.className),
+  });
 });
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
-let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef)=>{
-    let { children, ...rest } = props;
-    let { status } = useSafeContext(ExpandableBlockContext);
-    let icon = children ?? (status && StatusIconMap[status]());
-    return React.createElement(Icon, {
-        fill: status,
-        ref: forwardedRef,
-        ...rest
-    }, icon);
+let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
+  let { children, ...rest } = props;
+  let { status } = useSafeContext(ExpandableBlockContext);
+  let icon = children ?? (status && StatusIconMap[status]());
+  return React.createElement(
+    Icon,
+    {
+      fill: status,
+      ref: forwardedRef,
+      ...rest,
+    },
+    icon,
+  );
 });
 ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
-let ExpandableBlockContent = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, innerProps, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-expandable-content', className),
-        ref: forwardedRef,
-        ...rest
-    }, React.createElement(Box, innerProps, children));
+let ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
+  let { className, children, innerProps, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-expandable-content', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(Box, innerProps, children),
+  );
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
-    Wrapper: ExpandableBlockWrapper,
-    Trigger: ExpandableBlockTrigger,
-    ExpandIcon: ExpandableBlockExpandIcon,
-    LabelArea: ExpandableBlockLabelArea,
-    Title: ExpandableBlockTitle,
-    Caption: ExpandableBlockCaption,
-    EndIcon: ExpandableBlockEndIcon,
-    Content: ExpandableBlockContent
+  Wrapper: ExpandableBlockWrapper,
+  Trigger: ExpandableBlockTrigger,
+  ExpandIcon: ExpandableBlockExpandIcon,
+  LabelArea: ExpandableBlockLabelArea,
+  Title: ExpandableBlockTitle,
+  Caption: ExpandableBlockCaption,
+  EndIcon: ExpandableBlockEndIcon,
+  Content: ExpandableBlockContent,
 });

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

@@ -1,15 +1,26 @@
 import * as React from 'react';
 import { FieldsetBase } from '../../utils/index.js';
 import cx from 'classnames';
-export const Fieldset = React.forwardRef((props, ref)=>{
-    let { children, className, disabled, legend, ...rest } = props;
-    return React.createElement(FieldsetBase, {
-        className: cx('iui-fieldset', className),
-        disabled: disabled,
-        ref: ref,
-        ...rest
-    }, legend && React.createElement("legend", null, legend), disabled ? React.Children.map(children, (child)=>React.isValidElement(child) ? React.cloneElement(child, {
-            disabled: true
-        }) : child) : children);
+export const Fieldset = React.forwardRef((props, ref) => {
+  let { children, className, disabled, legend, ...rest } = props;
+  return React.createElement(
+    FieldsetBase,
+    {
+      className: cx('iui-fieldset', className),
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    legend && React.createElement('legend', null, legend),
+    disabled
+      ? React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, {
+                disabled: true,
+              })
+            : child,
+        )
+      : children,
+  );
 });
 Fieldset.displayName = 'Fieldset';

package/DEV-esm/core/FileUpload/FileEmptyCard.js

@@ -3,21 +3,36 @@ import { Box, polymorphic, SvgUpload } from '../../utils/index.js';
 import cx from 'classnames';
 import { FileUploadCard } from './FileUploadCard.js';
 let FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
-    children: React.createElement(SvgUpload, null)
+  children: React.createElement(SvgUpload, null),
 });
 FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
 let FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
 FileEmptyCardText.displayName = 'FileEmptyCard.Text';
-let FileEmptyCardComponent = React.forwardRef((props, ref)=>{
-    let { children, className, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-file-card-empty', className),
-        ref: ref,
-        ...rest
-    }, children ?? React.createElement(React.Fragment, null, React.createElement(FileEmptyCard.Icon, null), React.createElement(FileEmptyCard.Text, null, React.createElement(FileUploadCard.InputLabel, null, "Choose a file"), React.createElement("div", null, "to upload."))));
+let FileEmptyCardComponent = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-file-card-empty', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(FileEmptyCard.Icon, null),
+        React.createElement(
+          FileEmptyCard.Text,
+          null,
+          React.createElement(FileUploadCard.InputLabel, null, 'Choose a file'),
+          React.createElement('div', null, 'to upload.'),
+        ),
+      ),
+  );
 });
 FileEmptyCardComponent.displayName = 'FileEmptyCard';
 export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-    Icon: FileEmptyCardIcon,
-    Text: FileEmptyCardText
+  Icon: FileEmptyCardIcon,
+  Text: FileEmptyCardText,
 });

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

@@ -1,49 +1,71 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, mergeEventHandlers } from '../../utils/index.js';
-export const FileUpload = React.forwardRef((props, forwardedRef)=>{
-    let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
-    let [isDragActive, setIsDragActive] = React.useState(false);
-    let onDragOverHandler = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    let onDragEnterHandler = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') setIsDragActive(true);
-    };
-    let onDragLeaveHandler = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) setIsDragActive(false);
-    };
-    let onDropHandler = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDragActive) {
-            setIsDragActive(false);
-            onFileDropped(e.dataTransfer?.files, e);
-        }
-    };
-    return React.createElement(Box, {
-        ...rest,
-        className: cx('iui-file-upload', {
-            'iui-drag': isDragActive
-        }, props?.className),
-        ref: forwardedRef,
-        onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
-        onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
-        onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
-        onDrop: mergeEventHandlers(props.onDrop, onDropHandler)
-    }, dragContent ? children : React.createElement(Box, {
-        as: "div",
-        ...contentProps,
-        className: cx('iui-content', contentProps?.className)
-    }, children), dragContent && React.createElement(Box, {
-        as: "div",
-        ...contentProps,
-        className: cx('iui-content', contentProps?.className)
-    }, dragContent));
+export const FileUpload = React.forwardRef((props, forwardedRef) => {
+  let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
+  let [isDragActive, setIsDragActive] = React.useState(false);
+  let onDragOverHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  let onDragEnterHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file')
+      setIsDragActive(true);
+  };
+  let onDragLeaveHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget))
+      setIsDragActive(false);
+  };
+  let onDropHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragActive) {
+      setIsDragActive(false);
+      onFileDropped(e.dataTransfer?.files, e);
+    }
+  };
+  return React.createElement(
+    Box,
+    {
+      ...rest,
+      className: cx(
+        'iui-file-upload',
+        {
+          'iui-drag': isDragActive,
+        },
+        props?.className,
+      ),
+      ref: forwardedRef,
+      onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
+      onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
+      onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
+      onDrop: mergeEventHandlers(props.onDrop, onDropHandler),
+    },
+    dragContent
+      ? children
+      : React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-content', contentProps?.className),
+          },
+          children,
+        ),
+    dragContent &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-content', contentProps?.className),
+        },
+        dragContent,
+      ),
+  );
 });
 FileUpload.displayName = 'FileUpload';