@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -1,135 +1,175 @@
-"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.Breadcrumbs = 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 Button_js_1 = require("../Buttons/Button.js");
-const Anchor_js_1 = require("../Typography/Anchor.js");
-const logWarningInDev = (0, index_js_1.createWarningLogger)();
-/**
- * A breadcrumb trail is used as a navigational aid to help users keep track
- * of their place in the application. It is often placed before a page's main content.
- *
- * Breadcrumb items can use `Button` or `a` or any custom component (passed as `children`).
- *
- * For accessibility, make sure to provide an aria-label describing the type of navigation.
- *
- * @example
- * <Breadcrumbs aria-label='Primary'>
- *   <Button onClick={() => {}}>Root</Button>
- *   <Button onClick={() => {}}>Item 1</Button>
- *   <Button onClick={() => {}}>Item 2</Button>
- * </Breadcrumbs>
- *
- * @example
- * <Breadcrumbs aria-label='Secondary'>
- *   <a href='/'>Root</a>
- *   <a href='/level1/'>Level 1</a>
- *   <span>Current level</span>
- * </Breadcrumbs>
- */
-const BreadcrumbsComponent = React.forwardRef((props, ref) => {
-    const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items);
-    const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
-    return (React.createElement(index_js_1.Box, { as: 'nav', className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
-        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-breadcrumbs-list' },
-            visibleCount > 1 && (React.createElement(React.Fragment, null,
-                React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
-                React.createElement(Separator, { separator: separator }))),
-            items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
-                React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-item' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-breadcrumbs-content' }, "\u2026"))),
-                React.createElement(Separator, { separator: separator }))),
-            items
-                .slice(visibleCount > 1
-                ? items.length - visibleCount + 1
-                : items.length - 1)
-                .map((_, _index) => {
-                const index = visibleCount > 1
-                    ? 1 + (items.length - visibleCount) + _index
-                    : items.length - 1;
-                return (React.createElement(React.Fragment, { key: index },
-                    React.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
-                    index < items.length - 1 && (React.createElement(Separator, { separator: separator }))));
-            }))));
+Object.defineProperty(exports, 'Breadcrumbs', {
+  enumerable: true,
+  get: function () {
+    return Breadcrumbs;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _Button = require('../Buttons/Button.js');
+const _Anchor = require('../Typography/Anchor.js');
+const logWarningInDev = (0, _index.createWarningLogger)();
+const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
+  const {
+    children: items,
+    currentIndex = items.length - 1,
+    separator,
+    overflowButton,
+    className,
+    ...rest
+  } = props;
+  const [overflowRef, visibleCount] = (0, _index.useOverflow)(items);
+  const refs = (0, _index.useMergedRefs)(overflowRef, ref);
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'nav',
+      className: (0, _classnames.default)('iui-breadcrumbs', className),
+      ref: refs,
+      'aria-label': 'Breadcrumb',
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        as: 'ol',
+        className: 'iui-breadcrumbs-list',
+      },
+      visibleCount > 1 &&
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(ListItem, {
+            item: items[0],
+            isActive: currentIndex === 0,
+          }),
+          _react.createElement(Separator, {
+            separator: separator,
+          }),
+        ),
+      items.length - visibleCount > 0 &&
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'li',
+              className: 'iui-breadcrumbs-item',
+            },
+            overflowButton
+              ? overflowButton(visibleCount)
+              : _react.createElement(
+                  _index.Box,
+                  {
+                    as: 'span',
+                    className: 'iui-breadcrumbs-content',
+                  },
+                  '…',
+                ),
+          ),
+          _react.createElement(Separator, {
+            separator: separator,
+          }),
+        ),
+      items
+        .slice(
+          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+        )
+        .map((_, _index) => {
+          const index =
+            visibleCount > 1
+              ? 1 + (items.length - visibleCount) + _index
+              : items.length - 1;
+          return _react.createElement(
+            _react.Fragment,
+            {
+              key: index,
+            },
+            _react.createElement(ListItem, {
+              item: items[index],
+              isActive: currentIndex === index,
+            }),
+            index < items.length - 1 &&
+              _react.createElement(Separator, {
+                separator: separator,
+              }),
+          );
+        }),
+    ),
+  );
 });
-// ----------------------------------------------------------------------------
-const ListItem = ({ item, isActive, }) => {
-    let children = item;
-    if (children?.type === 'span' ||
-        children?.type === 'a' ||
-        children?.type === Button_js_1.Button) {
-        logWarningInDev('Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.');
-        children = React.createElement(BreadcrumbsItem, { ...children.props });
-    }
-    return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-item' }, children &&
-        React.cloneElement(children, {
-            'aria-current': children.props['aria-current'] ?? isActive ? 'location' : undefined,
-        })));
+const ListItem = ({ item, isActive }) => {
+  let children = item;
+  if (
+    children?.type === 'span' ||
+    children?.type === 'a' ||
+    children?.type === _Button.Button
+  ) {
+    logWarningInDev(
+      'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+    );
+    children = _react.createElement(BreadcrumbsItem, children.props);
+  }
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-item',
+    },
+    children &&
+      _react.cloneElement(children, {
+        'aria-current':
+          children.props['aria-current'] ?? isActive ? 'location' : undefined,
+      }),
+  );
 };
-// ----------------------------------------------------------------------------
-const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
-// ----------------------------------------------------------------------------
-const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { as: asProp, ...rest } = props;
-    const commonProps = {
-        ...rest,
-        className: (0, classnames_1.default)('iui-breadcrumbs-content', props.className),
-        ref: forwardedRef,
-    };
-    if (String(asProp) === 'span' ||
-        (props.href == null && props.onClick == null && asProp == null)) {
-        return React.createElement(index_js_1.Box, { as: 'span', ...commonProps });
-    }
-    return (React.createElement(Button_js_1.Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
-            ? Anchor_js_1.Anchor
-            : asProp), styleType: 'borderless', ...commonProps }));
+const Separator = ({ separator }) =>
+  _react.createElement(
+    _index.Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-separator',
+      'aria-hidden': true,
+    },
+    separator ?? _react.createElement(_index.SvgChevronRight, null),
+  );
+const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
+  const { as: asProp, ...rest } = props;
+  const commonProps = {
+    ...rest,
+    className: (0, _classnames.default)(
+      'iui-breadcrumbs-content',
+      props.className,
+    ),
+    ref: forwardedRef,
+  };
+  if (
+    String(asProp) === 'span' ||
+    (props.href == null && props.onClick == null && asProp == null)
+  ) {
+    return _react.createElement(_index.Box, {
+      as: 'span',
+      ...commonProps,
+    });
+  }
+  return _react.createElement(_Button.Button, {
+    as:
+      asProp === 'a' || (asProp == null && !!props.href)
+        ? _Anchor.Anchor
+        : asProp,
+    styleType: 'borderless',
+    ...commonProps,
+  });
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
-// ----------------------------------------------------------------------------
-exports.Breadcrumbs = Object.assign(BreadcrumbsComponent, {
-    /**
-     * Breadcrumbs item subcomponent
-     *
-     * @example
-     * <Breadcrumbs.Item>Breadcrumb Item Title</Breadcrumbs.Item>
-     *
-     * @example
-     * <Breadcrumbs.Item href='https://www.example.com/'>Breadcrumb Anchor Title</Breadcrumbs.Item>
-     *
-     * @example
-     * <Breadcrumbs.Item onClick={() => {}}><SvgCalendar /></Breadcrumbs.Item>
-     */
-    Item: BreadcrumbsItem,
+const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
+  Item: BreadcrumbsItem,
 });

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -1,112 +1,157 @@
-"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,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ButtonGroup: function () {
+    return ButtonGroup;
+  },
+  ButtonGroupContext: function () {
+    return ButtonGroupContext;
+  },
 });
-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.ButtonGroup = exports.ButtonGroupContext = 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 react_1 = require("@floating-ui/react");
-// ----------------------------------------------------------------------------
-/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
-exports.ButtonGroupContext = React.createContext(undefined);
-exports.ButtonGroupContext.displayName = 'ButtonGroupContext';
-/**
- * Group buttons together for common actions.
- * Handles responsive overflow when the `overflowButton` prop is specified.
- *
- * @example
- * <ButtonGroup role="toolbar">
- *   <IconButton>
- *     <SvgAdd />
- *   </IconButton>
- *   <IconButton>
- *     <SvgEdit />
- *   </IconButton>
- * </ButtonGroup>
- *
- * @example
- * const buttons = [...Array(10)].map((_, index) => <IconButton><SvgPlaceholder /></IconButton>);
- * <ButtonGroup
- *   overflowButton={(overflowStart) => <DropdownMenu menuItems={(close) =>
- *     [...Array(buttons.length - overflowStart + 1)].map((_, index) => (
- *       <MenuItem icon={<SvgPlaceholder />} onClick={close}>Button #{overflowStart + index}</MenuItem>
- *     ))
- *   }>
- *     <IconButton><SvgMore /></IconButton>
- *   </DropdownMenu>}
- * >
- *   {buttons}
- * </ButtonGroup>
- */
-exports.ButtonGroup = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const children = React.useMemo(() => {
-        if (props.role !== 'toolbar') {
-            return childrenProp;
-        }
-        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(react_1.CompositeItem, { key: index, render: child })) : (child));
-    }, [childrenProp, props.role]);
-    const node = overflowButton ? (React.createElement(OverflowGroup, { orientation: orientation, overflowButton: overflowButton, overflowPlacement: overflowPlacement, ref: forwardedRef, ...rest }, children)) : (React.createElement(BaseGroup, { orientation: orientation, ref: forwardedRef, ...rest }, children));
-    return (React.createElement(react_1.FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(exports.ButtonGroupContext.Provider, { value: orientation }, props.role === 'toolbar' ? (React.createElement(react_1.Composite, { orientation: orientation, render: node })) : (node))));
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _react1 = require('@floating-ui/react');
+const ButtonGroupContext = _react.createContext(undefined);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
+  const {
+    children: childrenProp,
+    overflowButton,
+    overflowPlacement = 'end',
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  const children = _react.useMemo(() => {
+    if (props.role !== 'toolbar') {
+      return childrenProp;
+    }
+    return _react.Children.map(childrenProp, (child, index) =>
+      _react.isValidElement(child)
+        ? _react.createElement(_react1.CompositeItem, {
+            key: index,
+            render: child,
+          })
+        : child,
+    );
+  }, [childrenProp, props.role]);
+  const node = overflowButton
+    ? _react.createElement(
+        OverflowGroup,
+        {
+          orientation: orientation,
+          overflowButton: overflowButton,
+          overflowPlacement: overflowPlacement,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      )
+    : _react.createElement(
+        BaseGroup,
+        {
+          orientation: orientation,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      );
+  return _react.createElement(
+    _react1.FloatingDelayGroup,
+    {
+      delay: {
+        open: 50,
+        close: 250,
+      },
+    },
+    _react.createElement(
+      ButtonGroupContext.Provider,
+      {
+        value: orientation,
+      },
+      props.role === 'toolbar'
+        ? _react.createElement(_react1.Composite, {
+            orientation: orientation,
+            render: node,
+            disabledIndices: [],
+          })
+        : node,
+    ),
+  );
 });
-// ----------------------------------------------------------------------------
-const BaseGroup = React.forwardRef((props, forwardedRef) => {
-    const { orientation, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: forwardedRef, ...rest }));
+const BaseGroup = _react.forwardRef((props, forwardedRef) => {
+  const { orientation, className, ...rest } = props;
+  return _react.createElement(_index.Box, {
+    className: (0, _classnames.default)('iui-button-group', className),
+    'data-iui-orientation':
+      orientation === 'vertical' ? orientation : undefined,
+    ref: forwardedRef,
+    ...rest,
+  });
 });
-// ----------------------------------------------------------------------------
-const OverflowGroup = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
-    const items = React.useMemo(() => React.Children.toArray(childrenProp).filter(Boolean), [childrenProp]);
-    const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
-    return (React.createElement(BaseGroup, { orientation: orientation, ...rest, className: (0, classnames_1.default)({
-            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, props.className), ref: (0, index_js_1.useMergedRefs)(forwardedRef, overflowRef) }, (() => {
-        if (!(visibleCount < items.length)) {
-            return items;
-        }
-        const overflowStart = overflowPlacement === 'start'
-            ? items.length - visibleCount
-            : visibleCount - 1;
-        return (React.createElement(React.Fragment, null,
-            overflowButton &&
-                overflowPlacement === 'start' &&
-                overflowButton(overflowStart),
-            overflowPlacement === 'start'
-                ? items.slice(overflowStart + 1)
-                : items.slice(0, Math.max(0, overflowStart)),
-            overflowButton &&
-                overflowPlacement === 'end' &&
-                overflowButton(overflowStart)));
-    })()));
+const OverflowGroup = _react.forwardRef((props, forwardedRef) => {
+  const {
+    children: childrenProp,
+    orientation,
+    overflowButton,
+    overflowPlacement,
+    ...rest
+  } = props;
+  const items = _react.useMemo(
+    () => _react.Children.toArray(childrenProp).filter(Boolean),
+    [childrenProp],
+  );
+  const [overflowRef, visibleCount] = (0, _index.useOverflow)(
+    items,
+    !overflowButton,
+    orientation,
+  );
+  return _react.createElement(
+    BaseGroup,
+    {
+      orientation: orientation,
+      ...rest,
+      className: (0, _classnames.default)(
+        {
+          'iui-button-group-overflow-x':
+            !!overflowButton && orientation === 'horizontal',
+        },
+        props.className,
+      ),
+      ref: (0, _index.useMergedRefs)(forwardedRef, overflowRef),
+    },
+    (() => {
+      if (!(visibleCount < items.length)) {
+        return items;
+      }
+      const overflowStart =
+        overflowPlacement === 'start'
+          ? items.length - visibleCount
+          : visibleCount - 1;
+      return _react.createElement(
+        _react.Fragment,
+        null,
+        overflowButton &&
+          overflowPlacement === 'start' &&
+          overflowButton(overflowStart),
+        overflowPlacement === 'start'
+          ? items.slice(overflowStart + 1)
+          : items.slice(0, Math.max(0, overflowStart)),
+        overflowButton &&
+          overflowPlacement === 'end' &&
+          overflowButton(overflowStart),
+      );
+    })(),
+  );
 });