@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

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.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type ListItemOwnProps = {
+export type ListItemOwnProps = {
     /**
      * Size of the ListItem. Can be explicitly specified to be 'large',
      * but if a description is included in addition to the label, then
@@ -45,7 +45,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Icon: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -54,7 +54,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Content: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**
      * Description to be used in addition to the main label of the ListItem.
      * Should be used as a child of `ListItem.Content`.
@@ -67,5 +67,5 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };

package/cjs/core/List/ListItem.js

@@ -1,42 +1,35 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ListItem = void 0;
+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 = __importStar(require("react"));
-const classnames_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';
 // ----------------------------------------------------------------------------
@@ -46,7 +39,9 @@ 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
@@ -64,30 +59,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/List/index.js

@@ -1,11 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ListItem = 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.
  *--------------------------------------------------------------------------------------------*/
-var List_js_1 = require("./List.js");
-Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_js_1.List; } });
-var ListItem_js_1 = require("./ListItem.js");
-Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_js_1.ListItem; } });
+var List_js_1 = require('./List.js');
+Object.defineProperty(exports, 'List', {
+  enumerable: true,
+  get: function () {
+    return List_js_1.List;
+  },
+});
+var ListItem_js_1 = require('./ListItem.js');
+Object.defineProperty(exports, 'ListItem', {
+  enumerable: true,
+  get: function () {
+    return ListItem_js_1.ListItem;
+  },
+});

package/cjs/core/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type MenuProps = {
+type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
      *

package/cjs/core/Menu/Menu.js

@@ -1,89 +1,77 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Menu = void 0;
+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 = __importStar(require("react"));
-const classnames_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: 'ul', className: (0, classnames_1.default)('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
+  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: 'ul',
+    className: (0, classnames_1.default)('iui-menu', className),
+    role: 'menu',
+    onKeyDown: onKeyDown,
+    ref: refs,
+    ...rest,
+  });
 });
 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 = index_js_1.polymorphic.li('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;

package/cjs/core/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { ListItemOwnProps } from '../List/ListItem.js';
-export declare type MenuItemProps = {
+export type MenuItemProps = {
     /**
      * Item is selected.
      */