@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/LabeledInput/LabeledInput.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledInput = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
-const InputWithDecorations_js_1 = require('../InputWithDecorations/InputWithDecorations.js');
-const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
-const Label_js_1 = require('../Label/Label.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const InputGrid_js_1 = require("../InputGrid/InputGrid.js");
+const InputWithDecorations_js_1 = require("../InputWithDecorations/InputWithDecorations.js");
+const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
+const Label_js_1 = require("../Label/Label.js");
+const Icon_js_1 = require("../Icon/Icon.js");
 /**
  * Basic labeled input component
  * @example
@@ -22,65 +22,15 @@ const Icon_js_1 = require('../Icon/Icon.js');
  * <LabeledInput status='negative' label='Negative' />
  */
 exports.LabeledInput = React.forwardRef((props, ref) => {
-  const uid = (0, index_js_1.useId)();
-  const {
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    iconProps,
-    inputWrapperProps,
-    displayStyle = 'default',
-    required = false,
-    id = uid,
-    ...rest
-  } = props;
-  const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
-  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-  return React.createElement(
-    InputGrid_js_1.InputGrid,
-    { labelPlacement: displayStyle, ...wrapperProps },
-    label &&
-      React.createElement(
-        Label_js_1.Label,
-        {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          htmlFor: id,
-          ...labelProps,
-        },
-        label,
-      ),
-    React.createElement(
-      InputWithDecorations_js_1.InputWithDecorations,
-      { status: status, isDisabled: disabled, ...inputWrapperProps },
-      React.createElement(
-        InputWithDecorations_js_1.InputWithDecorations.Input,
-        { disabled: disabled, required: required, id: id, ref: ref, ...rest },
-      ),
-      shouldShowIcon &&
-        React.createElement(
-          Icon_js_1.Icon,
-          { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
-          icon,
-        ),
-    ),
-    typeof message === 'string'
-      ? React.createElement(
-          StatusMessage_js_1.StatusMessage,
-          {
-            status: status,
-            iconProps: iconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
+    const uid = (0, index_js_1.useId)();
+    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, id = uid, ...rest } = props;
+    const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
+    const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
+        label && (React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label)),
+        React.createElement(InputWithDecorations_js_1.InputWithDecorations, { status: status, isDisabled: disabled, ...inputWrapperProps },
+            React.createElement(InputWithDecorations_js_1.InputWithDecorations.Input, { disabled: disabled, required: required, id: id, ref: ref, ...rest }),
+            shouldShowIcon && (React.createElement(Icon_js_1.Icon, { fill: !svgIcon ? status : undefined, padded: true, ...iconProps }, icon))),
+        typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 exports.default = exports.LabeledInput;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledSelect = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const Select_js_1 = require('../Select/Select.js');
-const index_js_1 = require('../utils/index.js');
-const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
-const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
-const Label_js_1 = require('../Label/Label.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const React = tslib_1.__importStar(require("react"));
+const Select_js_1 = require("../Select/Select.js");
+const index_js_1 = require("../utils/index.js");
+const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
+const InputGrid_js_1 = require("../InputGrid/InputGrid.js");
+const Label_js_1 = require("../Label/Label.js");
+const Icon_js_1 = require("../Icon/Icon.js");
 /**
  * Labeled select component to select value from options.
  * @example
@@ -47,72 +47,23 @@ const Icon_js_1 = require('../Icon/Icon.js');
  * />
  */
 exports.LabeledSelect = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    displayStyle = 'default',
-    style,
-    required = false,
-    triggerProps,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    messageIconProps,
-    ...rest
-  } = props;
-  const labelId = `${(0, index_js_1.useId)()}-label`;
-  const icon = () => {
-    if (svgIcon) {
-      return React.createElement(Icon_js_1.Icon, null, svgIcon);
-    }
-    if (status && message) {
-      return index_js_1.StatusIconMap[status]();
-    }
-    return undefined;
-  };
-  return React.createElement(
-    InputGrid_js_1.InputGrid,
-    { labelPlacement: displayStyle, ...wrapperProps },
-    label &&
-      React.createElement(
-        Label_js_1.Label,
-        {
-          as: 'div',
-          required: required,
-          disabled: disabled,
-          id: labelId,
-          ...labelProps,
-        },
-        label,
-      ),
-    React.createElement(Select_js_1.Select, {
-      disabled: disabled,
-      className: className,
-      style: style,
-      status: status,
-      ...rest,
-      ref: forwardedRef,
-      triggerProps: {
-        'aria-labelledby': labelId,
-        ...triggerProps,
-      },
-    }),
-    typeof message === 'string'
-      ? React.createElement(
-          StatusMessage_js_1.StatusMessage,
-          {
-            status: status,
-            startIcon: displayStyle === 'default' ? icon() : undefined,
-            iconProps: messageIconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, triggerProps, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
+    const labelId = `${(0, index_js_1.useId)()}-label`;
+    const icon = () => {
+        if (svgIcon) {
+            return React.createElement(Icon_js_1.Icon, null, svgIcon);
+        }
+        if (status && message) {
+            return index_js_1.StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
+        label && (React.createElement(Label_js_1.Label, { as: 'div', required: required, disabled: disabled, id: labelId, ...labelProps }, label)),
+        React.createElement(Select_js_1.Select, { disabled: disabled, className: className, style: style, status: status, ...rest, ref: forwardedRef, triggerProps: {
+                'aria-labelledby': labelId,
+                ...triggerProps,
+            } }),
+        typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, startIcon: displayStyle === 'default' ? icon() : undefined, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 exports.default = exports.LabeledSelect;

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -1,13 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledTextarea = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const LabeledInput_js_1 = require('../LabeledInput/LabeledInput.js');
+const React = tslib_1.__importStar(require("react"));
+const LabeledInput_js_1 = require("../LabeledInput/LabeledInput.js");
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -30,16 +30,10 @@ const LabeledInput_js_1 = require('../LabeledInput/LabeledInput.js');
  * />
  */
 exports.LabeledTextarea = React.forwardRef((props, forwardedRef) => {
-  return (
+    return (
     // ref types don't match but it's internal, so ts-ignore is ok here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    React.createElement(LabeledInput_js_1.LabeledInput, {
-      as: 'textarea',
-      rows: 3,
-      ref: forwardedRef,
-      ...props,
-    })
-  );
+    React.createElement(LabeledInput_js_1.LabeledInput, { as: 'textarea', rows: 3, ref: forwardedRef, ...props }));
 });
 exports.default = exports.LabeledTextarea;

package/cjs/core/LinkAction/LinkAction.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkBox = exports.LinkAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const polymorphic_js_1 = require('../utils/functions/polymorphic.js');
+const polymorphic_js_1 = require("../utils/functions/polymorphic.js");
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/cjs/core/List/List.js

@@ -1,10 +1,10 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 exports.List = index_js_1.polymorphic.ul('iui-list', { role: 'list' });
 exports.List.displayName = 'List';

package/cjs/core/List/ListItem.js

@@ -1,35 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 const ListItemComponent = React.forwardRef((props, ref) => {
-  const {
-    size = 'default',
-    disabled = false,
-    active = false,
-    actionable = false,
-    focused = false,
-    className,
-    ...rest
-  } = props;
-  return React.createElement(index_js_1.Box, {
-    as: 'li',
-    className: (0, classnames_1.default)('iui-list-item', className),
-    'data-iui-active': active ? 'true' : undefined,
-    'data-iui-disabled': disabled ? 'true' : undefined,
-    'data-iui-size': size === 'large' ? 'large' : undefined,
-    'data-iui-actionable': actionable ? 'true' : undefined,
-    'data-iui-focused': focused ? 'true' : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
 });
 ListItemComponent.displayName = 'ListItem';
 // ----------------------------------------------------------------------------
@@ -39,9 +21,7 @@ ListItemIcon.displayName = 'ListItem.Icon';
 const ListItemContent = (0, index_js_1.polymorphic)('iui-list-item-content');
 ListItemContent.displayName = 'ListItem.Content';
 // ----------------------------------------------------------------------------
-const ListItemDescription = (0, index_js_1.polymorphic)(
-  'iui-list-item-description',
-);
+const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
 ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
 // Exported compound component
@@ -59,30 +39,30 @@ ListItemDescription.displayName = 'ListItem.Description';
  * </List>
  */
 exports.ListItem = Object.assign(ListItemComponent, {
-  /**
-   * Icon to be placed at the beginning or end of the ListItem.
-   */
-  Icon: ListItemIcon,
-  /**
-   * Wrapper for the main content of the ListItem.
-   *
-   * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-   * - When using an end icon. The `ListItem.Content` will fill the available space
-   *   and push the icon to the end
-   * - When using `ListItem.Description`.
-   */
-  Content: ListItemContent,
-  /**
-   * Description to be used in addition to the main label of the ListItem.
-   * Should be used as a child of `ListItem.Content`.
-   *
-   * @example
-   * <ListItem>
-   *  <ListItem.Content>
-   *   <div>some list item</div>
-   *   <ListItem.Description>description for this item</ListItem.Description>
-   *  </ListItem.Content>
-   * </ListItem>
-   */
-  Description: ListItemDescription,
+    /**
+     * Icon to be placed at the beginning or end of the ListItem.
+     */
+    Icon: ListItemIcon,
+    /**
+     * Wrapper for the main content of the ListItem.
+     *
+     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+     * - When using an end icon. The `ListItem.Content` will fill the available space
+     *   and push the icon to the end
+     * - When using `ListItem.Description`.
+     */
+    Content: ListItemContent,
+    /**
+     * Description to be used in addition to the main label of the ListItem.
+     * Should be used as a child of `ListItem.Content`.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Content>
+     *   <div>some list item</div>
+     *   <ListItem.Description>description for this item</ListItem.Description>
+     *  </ListItem.Content>
+     * </ListItem>
+     */
+    Description: ListItemDescription,
 });

package/cjs/core/Menu/Menu.js

@@ -1,77 +1,64 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 exports.Menu = React.forwardRef((props, ref) => {
-  const { setFocus = true, className, ...rest } = props;
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  const menuRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(menuRef, ref);
-  const getFocusableNodes = React.useCallback(() => {
-    const focusableItems = (0, index_js_1.getFocusableElements)(
-      menuRef.current,
-    );
-    // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-    return focusableItems.filter(
-      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
-    );
-  }, []);
-  React.useEffect(() => {
-    const items = getFocusableNodes();
-    if (focusedIndex != null) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
-    const selectedIndex = items.findIndex(
-      (el) => el.getAttribute('aria-selected') === 'true',
-    );
-    if (setFocus) {
-      setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
-    }
-  }, [setFocus, focusedIndex, getFocusableNodes]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (!items?.length) {
-      return;
-    }
-    const currentIndex = focusedIndex ?? 0;
-    switch (event.key) {
-      case 'ArrowDown': {
-        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case 'ArrowUp': {
-        setFocusedIndex(Math.max(currentIndex - 1, 0));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  return React.createElement(index_js_1.Box, {
-    as: 'div',
-    className: (0, classnames_1.default)('iui-menu', className),
-    role: 'menu',
-    ref: refs,
-    ...rest,
-    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
-  });
+    const { setFocus = true, className, ...rest } = props;
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    const menuRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(menuRef, ref);
+    const getFocusableNodes = React.useCallback(() => {
+        const focusableItems = (0, index_js_1.getFocusableElements)(menuRef.current);
+        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    React.useEffect(() => {
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            items?.[focusedIndex]?.focus();
+            return;
+        }
+        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
+        if (setFocus) {
+            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+        }
+    }, [setFocus, focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!items?.length) {
+            return;
+        }
+        const currentIndex = focusedIndex ?? 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-menu', className), role: 'menu', ref: refs, ...rest, onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown) }));
 });
 exports.default = exports.Menu;

package/cjs/core/Menu/MenuDivider.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuDivider = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -22,6 +22,6 @@ const index_js_1 = require('../utils/index.js');
  * </Menu>
  */
 exports.MenuDivider = (0, index_js_1.polymorphic)('iui-menu-divider', {
-  role: 'separator',
+    role: 'separator',
 });
 exports.default = exports.MenuDivider;

package/cjs/core/Menu/MenuExtraContent.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuExtraContent = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example
@@ -27,6 +27,6 @@ const index_js_1 = require('../utils/index.js');
  * </Menu>
  */
 exports.MenuExtraContent = index_js_1.polymorphic.li('iui-menu-content', {
-  role: 'presentation',
+    role: 'presentation',
 });
 exports.default = exports.MenuExtraContent;