@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -1,60 +1,22 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledTextarea = 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 React = __importStar(require("react"));
-const LabeledInput_js_1 = require("../LabeledInput/LabeledInput.js");
-/**
- * Textarea wrapper that allows for additional styling and labelling
- * @example
- * <LabeledTextarea
- *  label='Textarea Label'
- *  message='Help Message'
- *  placeholder='This is a textarea'
- * />
- * <LabeledTextarea
- *  label='Disabled Textarea Label'
- *  message='Help Message'
- *  placeholder='This is a textarea'
- *  disabled={true}
- * />
- * <LabeledTextarea
- *  label='Textarea Label'
- *  message='Negative Message'
- *  placeholder='This is a textarea'
- *  status='negative'
- * />
- */
-exports.LabeledTextarea = React.forwardRef((props, forwardedRef) => {
-    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 }));
+Object.defineProperty(exports, 'LabeledTextarea', {
+  enumerable: true,
+  get: function () {
+    return LabeledTextarea;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _LabeledInput = require('../LabeledInput/LabeledInput.js');
+const LabeledTextarea = _react.forwardRef((props, forwardedRef) => {
+  return (0, _jsxruntime.jsx)(_LabeledInput.LabeledInput, {
+    as: 'textarea',
+    rows: 3,
+    ref: forwardedRef,
+    ...props,
+  });
 });

package/cjs/core/LinkAction/LinkAction.d.ts

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: PolymorphicForwardRefComponent<"a", {}>;
+export declare const LinkAction: PolymorphicForwardRefComponent<"a">;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.

package/cjs/core/LinkAction/LinkAction.js

@@ -1,65 +1,38 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-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 React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const polymorphic_js_1 = require("../../utils/functions/polymorphic.js");
-const index_js_1 = require("../../utils/components/index.js");
-/**
- * Polymorphic link action component.
- * It is rendered as `a` by default.
- * @example
- * <LinkBox>
- *   <Surface>
- *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
- *   </Surface>
- * </LinkBox>
- */
-exports.LinkAction = React.forwardRef((props, forwardedRef) => {
-    const { as: asProp = (!!props.href ? 'a' : 'button') } = props;
-    return (React.createElement(index_js_1.Box, { ...props, as: asProp, className: (0, classnames_1.default)('iui-link-action', props.className), ref: forwardedRef }));
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  LinkAction: function () {
+    return LinkAction;
+  },
+  LinkBox: function () {
+    return LinkBox;
+  },
 });
-exports.LinkAction.displayName = 'LinkAction';
-/**
- * Polymorphic link box component.
- * Used to wrap around your component to use LinkAction.
- * Rendered as `div` by default
- * @example
- * <LinkBox>
- *   <Surface>
- *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
- *   </Surface>
- * </LinkBox>
- */
-exports.LinkBox = polymorphic_js_1.polymorphic.div('iui-link-box');
-exports.LinkBox.displayName = 'LinkBox';
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _polymorphic = require('../../utils/functions/polymorphic.js');
+const _index = require('../../utils/components/index.js');
+const LinkAction = _react.forwardRef((props, forwardedRef) => {
+  const { as: asProp = !!props.href ? 'a' : 'button' } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    ...props,
+    as: asProp,
+    className: (0, _classnames.default)('iui-link-action', props.className),
+    ref: forwardedRef,
+  });
+});
+LinkAction.displayName = 'LinkAction';
+const LinkBox = _polymorphic.polymorphic.div('iui-link-box');
+LinkBox.displayName = 'LinkBox';

package/cjs/core/List/List.js

@@ -1,10 +1,15 @@
-"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");
-exports.List = index_js_1.polymorphic.ul('iui-list', { role: 'list' });
-exports.List.displayName = 'List';
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'List', {
+  enumerable: true,
+  get: function () {
+    return List;
+  },
+});
+const _index = require('../../utils/index.js');
+const List = _index.polymorphic.ul('iui-list', {
+  role: 'list',
+});
+List.displayName = 'List';

package/cjs/core/List/ListItem.d.ts

@@ -44,7 +44,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -53,7 +53,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Content: PolymorphicForwardRefComponent<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`.
@@ -66,7 +66,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
      * This ensures that clicking anywhere on the ListItem will trigger the link.

package/cjs/core/List/ListItem.js

@@ -1,107 +1,56 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-exports.ListItem = 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 React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const LinkAction_js_1 = require("../LinkAction/LinkAction.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 }));
+Object.defineProperty(exports, 'ListItem', {
+  enumerable: true,
+  get: function () {
+    return ListItem;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _LinkAction = require('../LinkAction/LinkAction.js');
+const ListItemComponent = _react.forwardRef((props, ref) => {
+  const {
+    size = 'default',
+    disabled = false,
+    active = false,
+    actionable = false,
+    focused = false,
+    className,
+    ...rest
+  } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    as: 'li',
+    className: (0, _classnames.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';
-// ----------------------------------------------------------------------------
-const ListItemIcon = (0, index_js_1.polymorphic)('iui-list-item-icon');
+const ListItemIcon = (0, _index.polymorphic)('iui-list-item-icon');
 ListItemIcon.displayName = 'ListItem.Icon';
-// ----------------------------------------------------------------------------
-const ListItemContent = (0, index_js_1.polymorphic)('iui-list-item-content');
+const ListItemContent = (0, _index.polymorphic)('iui-list-item-content');
 ListItemContent.displayName = 'ListItem.Content';
-// ----------------------------------------------------------------------------
-const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
+const ListItemDescription = (0, _index.polymorphic)(
+  'iui-list-item-description',
+);
 ListItemDescription.displayName = 'ListItem.Description';
-// ----------------------------------------------------------------------------
-const ListItemAction = LinkAction_js_1.LinkAction;
+const ListItemAction = _LinkAction.LinkAction;
 ListItemAction.displayName = 'ListItem.Action';
-// ----------------------------------------------------------------------------
-// Exported compound component
-/**
- * A generic ListItem component that can be used simply for displaying data, or as a base
- * for the list items in a more complex component (e.g. a custom Select).
- *
- * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
- *
- * @example
- * <List>
- *   <ListItem>item 1</ListItem>
- *   <ListItem>item 2</ListItem>
- *   <ListItem>item 3</ListItem>
- * </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,
-    /**
-     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
-     * This ensures that clicking anywhere on the ListItem will trigger the link.
-     *
-     * @example
-     * <ListItem>
-     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
-     * </ListItem>
-     */
-    Action: ListItemAction,
+const ListItem = Object.assign(ListItemComponent, {
+  Icon: ListItemIcon,
+  Content: ListItemContent,
+  Description: ListItemDescription,
+  Action: ListItemAction,
 });

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
+import { useInteractions, type UseListNavigationProps } from '@floating-ui/react';
+type UsePopoverProps = Parameters<typeof usePopover>[0];
 type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
@@ -9,13 +12,84 @@ type MenuProps = {
      */
     children: React.ReactNode;
     /**
-     * If true, the first selected or enabled menu item will be focused automatically.
-     * @default true
+     * The trigger that opens the menu.
      */
-    setFocus?: boolean;
-};
+    trigger: React.ReactNode;
+    /**
+     * You can use this optional prop when the position reference is not the trigger.
+     * (Equivalent to using FloatingUI's `floating.refs.setPositionReference`)
+     */
+    positionReference?: Parameters<ReturnType<typeof usePopover>['refs']['setPositionReference']>[0];
+    /**
+     * Use this prop to override the default props passed to `usePopover` and `useListNavigation`.
+     */
+    popoverProps?: Omit<UsePopoverProps, 'interactions'> & {
+        interactions?: UsePopoverProps['interactions'] & {
+            listNavigation?: Partial<UseListNavigationProps>;
+        };
+    };
+} & Pick<PortalProps, 'portal'>;
 /**
- * Basic menu component. Can be used for select or dropdown components.
+ * @private
+ *
+ * Used for dropdown components. E.g. `DropdownMenu`, `SplitButton`.
+ *
+ * What needs to be handled **manually**:
+ * - Menu items need to spread `MenuContext.popover.getItemProps()`.
+ * - Menu items need to focus itself on hover.
+ *
+ * What is handled automatically:
+ * - the portaling: use the optional `portal` prop for more customization
+ * - conditional rendering based on the popover's open state
+ * - spreading the popover props `getFloatingProps` and `getReferenceProps`.
+ *   - As mentioned above, `getItemProps` need to be spread **manually** in the menu item.
+ * - setting the refs: use the optional`positionReference` prop to set the position reference
+ * - keyboard navigation: use the `interactions.listNavigation` prop for more customization
+ * - registering a `FloatingNode` in the `FloatingTree` if an ancestral `FloatingTree` is found
+ * - focus management:
+ *   - focuses items on hover.
+ *   - if *not* in a `FloatingTree`, focus moves to the trigger when the menu is closed.
+ *     If in a `FloatingTree`, focus does not move back to the trigger since menu items handle the focus.
+ * - setting `aria-expanded` accordingly depending on the menu open state
+ *
+ * All `Menu` popover interactions are identical to `usePopover`'s interactions. Exception:
+ * - `hover`: When the `Menu` is within a `FloatingTree`, if a submenu has focus, the hover interaction is automatically
+ * disabled. This helps to keep the last hovered/focused submenu open even upon hovering out.
+ *
+ * @example
+ * const trigger = <Button>Menu</Button>;
+ * const [positionReference, setPositionReference] = React.useState<HTMLDivElement | null>(null);
+ * const popoverProps = { matchWidth: true };
+ * const nodeId = useFloatingNodeId();
+ *
+ * return (
+ *   <Box ref={setPositionReference}>
+ *     <Menu
+ *       trigger={trigger}
+ *       positionReference={positionReference}
+ *       nodeId={nodeId}
+ *       popoverProps={popoverProps}
+ *     >
+ *       <MenuItem>Item 1</MenuItem>
+ *       <MenuItem>Item 2</MenuItem>
+ *     </Menu>
+ *   </Box>
+ * );
  */
 export declare const Menu: PolymorphicForwardRefComponent<"div", MenuProps>;
+export type TreeEvent = {
+    nodeId: string;
+    parentId: string | null;
+};
+type PopoverGetItemProps = ({ focusableItemIndex, userProps, }: {
+    /**
+     * Index of this item out of all the focusable items in the parent `Menu`
+     */
+    focusableItemIndex: number | undefined;
+    userProps?: Parameters<NonNullable<ReturnType<typeof useInteractions>['getItemProps']>>[0];
+}) => ReturnType<ReturnType<typeof useInteractions>['getItemProps']>;
+export declare const MenuContext: React.Context<{
+    popoverGetItemProps: PopoverGetItemProps;
+    focusableElements: HTMLElement[];
+} | undefined>;
 export {};