@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Select/Select.types-test.js

@@ -1,86 +1,111 @@
 import { useRef } from 'react';
 import { Select } from './Select.js';
-()=>{
-    let ref = useRef(null);
-    return React.createElement(React.Fragment, null, React.createElement(Select, {
-        options: [
-            {
-                value: 1,
-                label: 'Option 1'
-            },
-            {
-                value: 2,
-                label: 'Option 2'
-            },
-            {
-                value: 3,
-                label: 'Option 3'
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
+() => {
+  let ref = useRef(null);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
         },
-        ref: ref
-    }));
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        let returnValue = value;
+        return returnValue;
+      },
+      ref: ref,
+    }),
+  );
 };
-()=>React.createElement(React.Fragment, null, React.createElement(Select, {
-        options: [
-            {
-                value: 1,
-                label: 'Option 1'
-            },
-            {
-                value: 2,
-                label: 'Option 2'
-            },
-            {
-                value: 3,
-                label: 'Option 3'
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    }));
-()=>React.createElement(React.Fragment, null, React.createElement(Select, {
-        options: [
-            {
-                value: '1',
-                label: 'Option 1'
-            },
-            {
-                value: '2',
-                label: 'Option 2'
-            },
-            {
-                value: '3',
-                label: 'Option 3'
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    }));
-()=>React.createElement(React.Fragment, null, React.createElement(Select, {
-        label: "Select Label",
-        options: [
-            {
-                value: 1,
-                label: 'Item #1'
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    }));
-()=>React.createElement(React.Fragment, null, React.createElement(Select, {
-        styleType: 'borderless',
-        options: []
-    }), React.createElement(Select, {
-        styleType: 'default',
-        options: []
-    }));
+() =>
+  React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
+        },
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        let returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+() =>
+  React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      options: [
+        {
+          value: '1',
+          label: 'Option 1',
+        },
+        {
+          value: '2',
+          label: 'Option 2',
+        },
+        {
+          value: '3',
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        let returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+() =>
+  React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      label: 'Select Label',
+      options: [
+        {
+          value: 1,
+          label: 'Item #1',
+        },
+      ],
+      onChange: (value) => {
+        let returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+() =>
+  React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      styleType: 'borderless',
+      options: [],
+    }),
+    React.createElement(Select, {
+      styleType: 'default',
+      options: [],
+    }),
+  );

package/DEV-esm/core/Select/SelectTag.js

@@ -1,15 +1,23 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-export const SelectTag = React.forwardRef((props, forwardedRef)=>{
-    let { className, label, ...rest } = props;
-    return React.createElement(Box, {
-        as: "span",
-        className: cx('iui-select-tag', className),
-        ref: forwardedRef,
-        ...rest
-    }, React.createElement(Box, {
-        as: "span",
-        className: "iui-select-tag-label"
-    }, label));
+export const SelectTag = React.forwardRef((props, forwardedRef) => {
+  let { className, label, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-select-tag', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'span',
+        className: 'iui-select-tag-label',
+      },
+      label,
+    ),
+  );
 });

package/DEV-esm/core/Select/SelectTagContainer.js

@@ -2,15 +2,25 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
-export const SelectTagContainer = React.forwardRef((props, ref)=>{
-    let { tags, className, ...rest } = props;
-    let [containerRef, visibleCount] = useOverflow(tags);
-    let refs = useMergedRefs(ref, containerRef);
-    return React.createElement(Box, {
-        className: cx('iui-select-tag-container', className),
-        ref: refs,
-        ...rest
-    }, React.createElement(React.Fragment, null, visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags, visibleCount < tags.length && React.createElement(SelectTag, {
-        label: `+${tags.length - visibleCount + 1} item(s)`
-    })));
+export const SelectTagContainer = React.forwardRef((props, ref) => {
+  let { tags, className, ...rest } = props;
+  let [containerRef, visibleCount] = useOverflow(tags);
+  let refs = useMergedRefs(ref, containerRef);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-select-tag-container', className),
+      ref: refs,
+      ...rest,
+    },
+    React.createElement(
+      React.Fragment,
+      null,
+      visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
+      visibleCount < tags.length &&
+        React.createElement(SelectTag, {
+          label: `+${tags.length - visibleCount + 1} item(s)`,
+        }),
+    ),
+  );
 });

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

@@ -1,54 +1,111 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { WithCSSTransition, SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
+import {
+  WithCSSTransition,
+  SvgChevronRight,
+  Box,
+  useControlledState,
+} from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 export const SidenavExpandedContext = React.createContext(void 0);
-export const SideNavigation = React.forwardRef((props, forwardedRef)=>{
-    let { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    let [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
-    let ExpandButton = React.createElement(IconButton, {
-        label: "Toggle icon labels",
-        "aria-expanded": isExpanded,
-        className: "iui-sidenav-button iui-expand",
-        size: "small",
-        onClick: React.useCallback(()=>{
-            setIsExpanded((expanded)=>!expanded);
-            onExpanderClick?.();
-        }, [
-            onExpanderClick,
-            setIsExpanded
-        ])
-    }, React.createElement(SvgChevronRight, null));
-    return React.createElement(SidenavExpandedContext.Provider, {
-        value: isExpanded
-    }, React.createElement(Box, {
+export const SideNavigation = React.forwardRef((props, forwardedRef) => {
+  let {
+    items,
+    secondaryItems,
+    expanderPlacement = 'top',
+    className,
+    isExpanded: isExpandedProp,
+    onExpanderClick,
+    submenu,
+    isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
+    ...rest
+  } = props;
+  let [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
+  let ExpandButton = React.createElement(
+    IconButton,
+    {
+      label: 'Toggle icon labels',
+      'aria-expanded': isExpanded,
+      className: 'iui-sidenav-button iui-expand',
+      size: 'small',
+      onClick: React.useCallback(() => {
+        setIsExpanded((expanded) => !expanded);
+        onExpanderClick?.();
+      }, [onExpanderClick, setIsExpanded]),
+    },
+    React.createElement(SvgChevronRight, null),
+  );
+  return React.createElement(
+    SidenavExpandedContext.Provider,
+    {
+      value: isExpanded,
+    },
+    React.createElement(
+      Box,
+      {
         ...wrapperProps,
         className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
-        ref: forwardedRef
-    }, React.createElement(Box, {
-        as: "div",
-        className: cx('iui-side-navigation', {
-            'iui-expanded': isExpanded,
-            'iui-collapsed': !isExpanded
-        }, className),
-        ...rest
-    }, 'top' === expanderPlacement && ExpandButton, React.createElement(Box, {
-        as: "div",
-        ...contentProps,
-        className: cx('iui-sidenav-content', contentProps?.className)
-    }, React.createElement(Box, {
-        as: "div",
-        ...topProps,
-        className: cx('iui-top', topProps?.className)
-    }, items), React.createElement(Box, {
-        as: "div",
-        ...bottomProps,
-        className: cx('iui-bottom', bottomProps?.className)
-    }, secondaryItems)), 'bottom' === expanderPlacement && ExpandButton), submenu && React.createElement(WithCSSTransition, {
-        in: isSubmenuOpen,
-        dimension: "width",
-        timeout: 200,
-        classNames: "iui"
-    }, submenu)));
+        ref: forwardedRef,
+      },
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          className: cx(
+            'iui-side-navigation',
+            {
+              'iui-expanded': isExpanded,
+              'iui-collapsed': !isExpanded,
+            },
+            className,
+          ),
+          ...rest,
+        },
+        'top' === expanderPlacement && ExpandButton,
+        React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-sidenav-content', contentProps?.className),
+          },
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...topProps,
+              className: cx('iui-top', topProps?.className),
+            },
+            items,
+          ),
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...bottomProps,
+              className: cx('iui-bottom', bottomProps?.className),
+            },
+            secondaryItems,
+          ),
+        ),
+        'bottom' === expanderPlacement && ExpandButton,
+      ),
+      submenu &&
+        React.createElement(
+          WithCSSTransition,
+          {
+            in: isSubmenuOpen,
+            dimension: 'width',
+            timeout: 200,
+            classNames: 'iui',
+          },
+          submenu,
+        ),
+    ),
+  );
 });
 SideNavigation.displayName = 'SideNavigation';

package/DEV-esm/core/SideNavigation/SidenavButton.js

@@ -3,23 +3,44 @@ import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { SidenavExpandedContext } from './SideNavigation.js';
-export const SidenavButton = React.forwardRef((props, ref)=>{
-    let { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    let isExpanded = true === React.useContext(SidenavExpandedContext);
-    let sidenavButton = React.createElement(Button, {
-        className: cx('iui-sidenav-button', {
-            'iui-submenu-open': isSubmenuOpen
-        }, className),
-        "data-iui-active": isActive,
-        size: "large",
-        disabled: disabled,
-        ref: ref,
-        ...rest
-    }, children);
-    return isExpanded ? sidenavButton : React.createElement(Tooltip, {
-        content: children,
-        placement: "right",
-        ariaStrategy: "none"
-    }, sidenavButton);
+export const SidenavButton = React.forwardRef((props, ref) => {
+  let {
+    className,
+    children,
+    isActive = false,
+    disabled = false,
+    isSubmenuOpen = false,
+    ...rest
+  } = props;
+  let isExpanded = true === React.useContext(SidenavExpandedContext);
+  let sidenavButton = React.createElement(
+    Button,
+    {
+      className: cx(
+        'iui-sidenav-button',
+        {
+          'iui-submenu-open': isSubmenuOpen,
+        },
+        className,
+      ),
+      'data-iui-active': isActive,
+      size: 'large',
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+  return isExpanded
+    ? sidenavButton
+    : React.createElement(
+        Tooltip,
+        {
+          content: children,
+          placement: 'right',
+          ariaStrategy: 'none',
+        },
+        sidenavButton,
+      );
 });
 SidenavButton.displayName = 'SidenavButton';

package/DEV-esm/core/SideNavigation/SidenavSubmenu.js

@@ -1,14 +1,22 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-export const SidenavSubmenu = React.forwardRef((props, ref)=>{
-    let { children, className, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-side-navigation-submenu', className),
-        ref: ref,
-        ...rest
-    }, React.createElement(Box, {
-        className: "iui-side-navigation-submenu-content"
-    }, children));
+export const SidenavSubmenu = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-side-navigation-submenu', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-side-navigation-submenu-content',
+      },
+      children,
+    ),
+  );
 });
 SidenavSubmenu.displayName = 'SidenavSubmenu';

package/DEV-esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -1,16 +1,30 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef)=>{
-    let { children, actions, className, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-side-navigation-submenu-header', className),
-        ref: forwardedRef,
-        ...rest
-    }, React.createElement(Box, {
-        className: "iui-side-navigation-submenu-header-label"
-    }, children), actions && React.createElement(Box, {
-        className: "iui-side-navigation-submenu-header-actions"
-    }, actions));
+export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
+  let { children, actions, className, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-side-navigation-submenu-header', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-side-navigation-submenu-header-label',
+      },
+      children,
+    ),
+    actions &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-side-navigation-submenu-header-actions',
+        },
+        actions,
+      ),
+  );
 });
 SidenavSubmenuHeader.displayName = 'SidenavSubmenuHeader';

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

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-export const SkipToContentLink = React.forwardRef((props, ref)=>{
-    let { children = 'Skip to main content', className, ...rest } = props;
-    return React.createElement(Box, {
-        as: "a",
-        ref: ref,
-        className: cx('iui-skip-to-content-link', className),
-        ...rest
-    }, children);
+export const SkipToContentLink = React.forwardRef((props, ref) => {
+  let { children = 'Skip to main content', className, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'a',
+      ref: ref,
+      className: cx('iui-skip-to-content-link', className),
+      ...rest,
+    },
+    children,
+  );
 });
 SkipToContentLink.displayName = 'SkipToContentLink';