@itwin/itwinui-react 3.12.1 → 3.13.0

package/esm/core/Flex/Flex.js

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
-const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
-const getValueForToken = (token) => {
-  if (sizeTokens.includes(token)) {
-    return `var(--iui-size-${token})`;
-  }
+let sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
+let getValueForToken = (token) => {
+  if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
   return token;
 };
-const FlexComponent = React.forwardRef((props, ref) => {
-  const {
+let FlexComponent = React.forwardRef((props, ref) => {
+  let {
     display,
     flexDirection,
     justifyContent,
@@ -35,9 +33,8 @@ const FlexComponent = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexComponent.displayName = 'Flex';
-const FlexSpacer = React.forwardRef((props, ref) => {
-  const { flex, className, style, ...rest } = props;
+let FlexSpacer = React.forwardRef((props, ref) => {
+  let { flex, className, style, ...rest } = props;
   return React.createElement(Box, {
     className: cx('iui-flex-spacer', className),
     style: {
@@ -48,19 +45,18 @@ const FlexSpacer = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexSpacer.displayName = 'Flex.Spacer';
-const FlexItem = React.forwardRef((props, ref) => {
-  const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
+let FlexItem = React.forwardRef((props, ref) => {
+  let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
     props;
-  const _style = {
+  let _style = {
     '--iui-flex-item-flex': flex,
     '--iui-flex-item-align': alignSelf,
     '--iui-flex-item-gap-before': getValueForToken(gapBefore),
     '--iui-flex-item-gap-after': getValueForToken(gapAfter),
-    ...(gapBefore !== undefined && {
+    ...(void 0 !== gapBefore && {
       '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
     }),
-    ...(gapAfter !== undefined && {
+    ...(void 0 !== gapAfter && {
       '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
     }),
     ...style,
@@ -72,7 +68,6 @@ const FlexItem = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexItem.displayName = 'Flex.Item';
 export const Flex = Object.assign(FlexComponent, {
   Item: FlexItem,
   Spacer: FlexSpacer,

package/esm/core/Footer/Footer.js

@@ -5,7 +5,7 @@ import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 import { Anchor } from '../Typography/Anchor.js';
-const footerTranslations = {
+let footerTranslations = {
   cookies: 'Cookies',
   legalNotices: 'Legal notices',
   privacy: 'Privacy',
@@ -45,15 +45,15 @@ export const defaultFooterElements = [
 ];
 export const Footer = Object.assign(
   (props) => {
-    const { children, customElements, translatedTitles, className, ...rest } =
+    let { children, customElements, translatedTitles, className, ...rest } =
       props;
-    const titles = {
+    let titles = {
       ...footerTranslations,
       ...translatedTitles,
     };
-    const translatedElements = defaultFooterElements.map((element) => {
+    let translatedElements = defaultFooterElements.map((element) => {
       if (element.key && titles.hasOwnProperty(element.key)) {
-        const key = element.key;
+        let key = element.key;
         return {
           ...element,
           title: titles[key],
@@ -62,12 +62,11 @@ export const Footer = Object.assign(
       return element;
     });
     let elements = translatedElements;
-    if (customElements) {
+    if (customElements)
       elements =
-        typeof customElements === 'function'
+        'function' == typeof customElements
           ? customElements(translatedElements)
           : [...translatedElements, ...customElements];
-    }
     return React.createElement(
       Box,
       {
@@ -80,8 +79,8 @@ export const Footer = Object.assign(
         : React.createElement(
             FooterList,
             null,
-            elements.map((element, index) => {
-              return React.createElement(
+            elements.map((element, index) =>
+              React.createElement(
                 React.Fragment,
                 {
                   key: element.key || `${element.title}-${index}`,
@@ -102,8 +101,8 @@ export const Footer = Object.assign(
                       )
                     : element.title,
                 ),
-              );
-            }),
+              ),
+            ),
           ),
     );
   },

package/esm/core/Header/Header.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { IconButton } from '../Buttons/IconButton.js';
 import { SvgMoreVertical, Box } from '../../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-const defaultTranslations = {
+let defaultTranslations = {
   moreOptions: 'More options',
 };
 export const Header = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     appLogo,
     breadcrumbs,
     isSlim = false,
@@ -18,7 +18,7 @@ export const Header = React.forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const headerTranslations = {
+  let headerTranslations = {
     ...defaultTranslations,
     ...translatedStrings,
   };
@@ -27,7 +27,7 @@ export const Header = React.forwardRef((props, forwardedRef) => {
     {
       as: 'header',
       className: cx('iui-page-header', className),
-      'data-iui-size': isSlim ? 'slim' : undefined,
+      'data-iui-size': isSlim ? 'slim' : void 0,
       ref: forwardedRef,
       ...rest,
     },

package/esm/core/Header/HeaderBasicButton.js

@@ -2,10 +2,8 @@ import cx from 'classnames';
 import * as React from 'react';
 import { ButtonBase } from '../../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+  let { className, children, startIcon, endIcon, styleType, size, ...rest } =
     props;
-  styleType;
-  size;
   return React.createElement(
     ButtonBase,
     {

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box } from '../../utils/index.js';
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-  const { className, items, ...rest } = props;
+  let { className, items, ...rest } = props;
   return React.createElement(
     Box,
     {

package/esm/core/Header/HeaderButton.js

@@ -4,7 +4,7 @@ import { HeaderSplitButton } from './HeaderSplitButton.js';
 import { HeaderDropdownButton } from './HeaderDropdownButton.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderButton = React.forwardRef((props, ref) => {
-  const {
+  let {
     name,
     description,
     htmlName,
@@ -14,7 +14,7 @@ export const HeaderButton = React.forwardRef((props, ref) => {
     disabled,
     ...rest
   } = props;
-  const buttonProps = {
+  let buttonProps = {
     startIcon: startIcon
       ? React.createElement(
           Box,
@@ -58,10 +58,10 @@ export const HeaderButton = React.forwardRef((props, ref) => {
     }),
     ...rest,
   };
-  const headerButton =
-    !!props.menuItems && !!props.onClick
+  let headerButton =
+    props.menuItems && props.onClick
       ? React.createElement(HeaderSplitButton, buttonProps)
-      : !!props.menuItems
+      : props.menuItems
         ? React.createElement(HeaderDropdownButton, buttonProps)
         : React.createElement(HeaderBasicButton, buttonProps);
   return React.createElement(
@@ -69,8 +69,8 @@ export const HeaderButton = React.forwardRef((props, ref) => {
     {
       as: 'li',
       className: 'iui-header-breadcrumb-item',
-      'aria-current': isActive ? 'location' : undefined,
-      'aria-disabled': disabled ? 'true' : undefined,
+      'aria-current': isActive ? 'location' : void 0,
+      'aria-disabled': disabled ? 'true' : void 0,
     },
     headerButton,
   );

package/esm/core/Header/HeaderDropdownButton.js

@@ -8,15 +8,13 @@ import {
 } from '../../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderDropdownButton = React.forwardRef((props, ref) => {
-  const { menuItems, className, children, ...rest } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const buttonRef = React.useRef(null);
-  const refs = useMergedRefs(ref, buttonRef);
+  let { menuItems, className, children, ...rest } = props;
+  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  let [menuWidth, setMenuWidth] = React.useState(0);
+  let buttonRef = React.useRef(null);
+  let refs = useMergedRefs(ref, buttonRef);
   React.useEffect(() => {
-    if (buttonRef.current) {
-      setMenuWidth(buttonRef.current.offsetWidth);
-    }
+    if (buttonRef.current) setMenuWidth(buttonRef.current.offsetWidth);
   }, [children]);
   return React.createElement(
     DropdownMenu,

package/esm/core/Header/HeaderLogo.js

@@ -2,12 +2,12 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const HeaderLogo = React.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     children,
     logo,
     onClick,
-    as = !!onClick ? 'button' : 'div',
+    as = onClick ? 'button' : 'div',
     ...rest
   } = props;
   return React.createElement(
@@ -15,7 +15,7 @@ export const HeaderLogo = React.forwardRef((props, ref) => {
     {
       className: cx('iui-header-brand', className),
       as: as,
-      type: as === 'button' ? 'button' : undefined,
+      type: 'button' === as ? 'button' : void 0,
       onClick: onClick,
       ref: ref,
       ...rest,

package/esm/core/Header/HeaderSplitButton.js

@@ -9,7 +9,7 @@ import {
 } from '../../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     menuItems,
     className,
     menuPlacement = 'bottom-end',
@@ -17,13 +17,11 @@ export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
     disabled,
     ...rest
   } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const ref = React.useRef(null);
+  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  let [menuWidth, setMenuWidth] = React.useState(0);
+  let ref = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current) {
-      setMenuWidth(ref.current.offsetWidth);
-    }
+    if (ref.current) setMenuWidth(ref.current.offsetWidth);
   }, [children]);
   return React.createElement(
     Box,

package/esm/core/Icon/Icon.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
-const getSizeValue = (size) => {
+let getSizeValue = (size) => {
   switch (size) {
     case 'small':
       return 's';
@@ -14,7 +14,7 @@ const getSizeValue = (size) => {
   }
 };
 export const Icon = React.forwardRef((props, ref) => {
-  const {
+  let {
     size = 'medium',
     fill = 'default',
     className,
@@ -26,7 +26,7 @@ export const Icon = React.forwardRef((props, ref) => {
     className: cx('iui-svg-icon', className),
     'data-iui-icon-size': getSizeValue(size),
     'data-iui-icon-color': fill,
-    'data-iui-padded': padded ? 'true' : undefined,
+    'data-iui-padded': padded ? 'true' : void 0,
     ref: ref,
     ...rest,
   });

package/esm/core/InformationPanel/InformationPanel.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../../utils/index.js';
 export const InformationPanel = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     isOpen = false,
     orientation = 'vertical',
@@ -10,19 +10,15 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const [infoPanelSize, setInfoPanelSize] = React.useState({
-    width: undefined,
-    height: undefined,
+  let [infoPanelSize, setInfoPanelSize] = React.useState({
+    width: void 0,
+    height: void 0,
   });
-  const infoPanelRef = React.useRef(null);
-  const refs = useMergedRefs(forwardedRef, infoPanelRef);
-  const startResize = (e) => {
-    if (!infoPanelRef.current) {
-      return;
-    }
-    if (e.button != undefined && e.button !== 0) {
-      return;
-    }
+  let infoPanelRef = React.useRef(null);
+  let refs = useMergedRefs(forwardedRef, infoPanelRef);
+  let startResize = (e) => {
+    if (!infoPanelRef.current) return;
+    if (void 0 != e.button && 0 !== e.button) return;
     e.preventDefault();
     e.stopPropagation();
     infoPanelRef.current.ownerDocument.addEventListener(
@@ -41,24 +37,20 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
       },
     );
   };
-  const onResize = React.useCallback(
+  let onResize = React.useCallback(
     (e) => {
       e.preventDefault();
-      if (!infoPanelRef.current) {
-        return;
-      }
-      const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
-      if (orientation === 'vertical') {
-        setInfoPanelSize({
-          width: right - e.clientX,
-          height: undefined,
-        });
-      } else {
-        setInfoPanelSize({
-          height: bottom - e.clientY,
-          width: undefined,
-        });
-      }
+      if (!infoPanelRef.current) return;
+      let { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+      'vertical' === orientation
+        ? setInfoPanelSize({
+            width: right - e.clientX,
+            height: void 0,
+          })
+        : setInfoPanelSize({
+            height: bottom - e.clientY,
+            width: void 0,
+          });
     },
     [orientation],
   );
@@ -68,8 +60,8 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
       className: cx(
         'iui-information-panel',
         {
-          'iui-right': orientation === 'vertical',
-          'iui-bottom': orientation === 'horizontal',
+          'iui-right': 'vertical' === orientation,
+          'iui-bottom': 'horizontal' === orientation,
           'iui-visible': isOpen,
         },
         className,
@@ -77,8 +69,8 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
       ref: refs,
       ...rest,
       style: {
-        width: orientation === 'vertical' ? infoPanelSize.width : undefined,
-        height: orientation === 'horizontal' ? infoPanelSize.height : undefined,
+        width: 'vertical' === orientation ? infoPanelSize.width : void 0,
+        height: 'horizontal' === orientation ? infoPanelSize.height : void 0,
         ...props.style,
       },
     },

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -3,14 +3,14 @@ import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const InformationPanelContent = React.forwardRef(
   (props, forwardedRef) => {
-    const { className, displayStyle = 'default', children, ...rest } = props;
+    let { className, displayStyle = 'default', children, ...rest } = props;
     return React.createElement(
       Box,
       {
         className: cx(
           'iui-information-body-content',
           {
-            'iui-inline': displayStyle === 'inline',
+            'iui-inline': 'inline' === displayStyle,
           },
           className,
         ),

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -4,7 +4,7 @@ import { IconButton } from '../Buttons/IconButton.js';
 import { SvgCloseSmall, Box } from '../../utils/index.js';
 export const InformationPanelHeader = React.forwardRef(
   (props, forwardedRef) => {
-    const { children, onClose, actions, className, ...rest } = props;
+    let { children, onClose, actions, className, ...rest } = props;
     return React.createElement(
       Box,
       {

package/esm/core/Input/Input.js

@@ -2,9 +2,9 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../../utils/index.js';
 export const Input = React.forwardRef((props, ref) => {
-  const { size, htmlSize, status, className, ...rest } = props;
-  const inputRef = React.useRef(null);
-  const refs = useMergedRefs(inputRef, ref);
+  let { size, htmlSize, status, className, ...rest } = props;
+  let inputRef = React.useRef(null);
+  let refs = useMergedRefs(inputRef, ref);
   return React.createElement(Box, {
     as: 'input',
     className: cx('iui-input', 'iui-field', className),

package/esm/core/InputGrid/InputGrid.js

@@ -14,13 +14,8 @@ import { InputWithDecorations } from '../InputWithDecorations/InputWithDecoratio
 import { ComboBox } from '../ComboBox/ComboBox.js';
 import { Select } from '../Select/Select.js';
 export const InputGrid = React.forwardRef((props, ref) => {
-  const {
-    children: childrenProp,
-    className,
-    labelPlacement = undefined,
-    ...rest
-  } = props;
-  const children = useChildrenWithIds(childrenProp);
+  let { children: childrenProp, className, labelPlacement, ...rest } = props;
+  let children = useChildrenWithIds(childrenProp);
   return React.createElement(
     Box,
     {
@@ -32,93 +27,75 @@ export const InputGrid = React.forwardRef((props, ref) => {
     children,
   );
 });
-const useChildrenWithIds = (children) => {
-  const { labelId, inputId, messageId } = useSetup(children);
+let useChildrenWithIds = (children) => {
+  let { labelId, inputId, messageId } = useSetup(children);
   return React.useMemo(
     () =>
       React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return child;
-        }
-        if (child.type === Label || child.type === 'label') {
+        if (!React.isValidElement(child)) return child;
+        if (child.type === Label || 'label' === child.type)
           return cloneElementWithRef(child, (child) => ({
             ...child.props,
             htmlFor: child.props.htmlFor || inputId,
             id: child.props.id || labelId,
           }));
-        }
-        if (child.type === StatusMessage) {
+        if (child.type === StatusMessage)
           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,
           });
-        }
         return child;
       }),
     [children, inputId, labelId, messageId],
   );
 };
-const useSetup = (children) => {
-  const idPrefix = useId();
+let useSetup = (children) => {
+  let 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) {
+  let 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`;
-    }
+    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') {
+    if (!React.isValidElement(child)) return;
+    if (child.type === Label || 'label' === child.type) {
       hasLabel = true;
       labelId || (labelId = child.props.id || `${idPrefix}--label`);
     }
-    if (child.type === StatusMessage) {
+    if (child.type === StatusMessage)
       messageId || (messageId = child.props.id || `${idPrefix}--message`);
-    }
-    if (child.type === InputWithDecorations || child.type === InputWithIcon) {
+    if (child.type === InputWithDecorations || child.type === InputWithIcon)
       React.Children.forEach(child.props.children, (child) => {
-        if (isInput(child)) {
-          inputId || (inputId = findInputId(child));
-        }
+        if (isInput(child)) inputId || (inputId = findInputId(child));
       });
-    } else if (isInput(child)) {
-      inputId || (inputId = findInputId(child));
-    }
-    if (child.type === Select) {
-      hasSelect = true;
-    }
+    else if (isInput(child)) inputId || (inputId = findInputId(child));
+    if (child.type === Select) hasSelect = true;
   });
   return {
-    labelId: hasSelect ? labelId : undefined,
-    inputId: hasLabel && !hasSelect ? inputId : undefined,
+    labelId: hasSelect ? labelId : void 0,
+    inputId: hasLabel && !hasSelect ? inputId : void 0,
     messageId,
   };
 };
-const handleCloningInputs = (child, { labelId, inputId, messageId }) => {
-  const inputProps = (props = {}) => {
-    const ariaDescribedBy = [props['aria-describedby'], messageId]
+let handleCloningInputs = (child, { labelId, inputId, messageId }) => {
+  let inputProps = (props = {}) => {
+    let ariaDescribedBy = [props['aria-describedby'], messageId]
       .filter(Boolean)
       .join(' ');
     return {
@@ -126,49 +103,40 @@ const handleCloningInputs = (child, { labelId, inputId, messageId }) => {
       ...(child.type !== Select && {
         id: props.id || inputId,
       }),
-      'aria-describedby': ariaDescribedBy?.trim() || undefined,
+      'aria-describedby': ariaDescribedBy?.trim() || void 0,
     };
   };
-  const cloneInput = (child) => {
-    if (child.type === ComboBox) {
+  let cloneInput = (child) => {
+    if (child.type === ComboBox)
       return cloneElementWithRef(child, (child) => ({
         inputProps: inputProps(child.props.inputProps),
       }));
-    }
-    if (child.type === Select) {
+    if (child.type === Select)
       return cloneElementWithRef(child, (child) => ({
         triggerProps: {
-          ...{
-            'aria-labelledby': labelId,
-          },
+          'aria-labelledby': labelId,
           ...inputProps(child.props.triggerProps),
         },
       }));
-    }
     return cloneElementWithRef(child, (child) => inputProps(child.props));
   };
-  if (child.type === InputWithDecorations || child.type === InputWithIcon) {
+  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)) {
+        if (React.isValidElement(child) && isInput(child))
           return cloneInput(child);
-        }
         return child;
       }),
     }));
-  }
   return cloneInput(child);
 };
-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 ||
-      child.type === ComboBox)
-  );
-};
+let isInput = (child) =>
+  React.isValidElement(child) &&
+  ('input' === child.type ||
+    'textarea' === child.type ||
+    'select' === child.type ||
+    child.type === Input ||
+    child.type === Textarea ||
+    child.type === InputWithDecorations.Input ||
+    child.type === Select ||
+    child.type === ComboBox);