@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/Backdrop/Backdrop.js

@@ -1,41 +1,23 @@
-"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.Backdrop = 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");
-require("@itwin/itwinui-css/css/backdrop.css");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 exports.Backdrop = React.forwardRef((props, ref) => {
-    const { isVisible = true, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+  const { isVisible = true, className, ...rest } = props;
+  return React.createElement(index_js_1.Box, {
+    className: (0, classnames_1.default)(
+      'iui-backdrop',
+      { 'iui-backdrop-visible': isVisible },
+      className,
+    ),
+    ref: ref,
+    ...rest,
+  });
 });

package/cjs/core/Backdrop/index.js

@@ -1,9 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Backdrop = 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 Backdrop_js_1 = require("./Backdrop.js");
-Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_js_1.Backdrop; } });
+var Backdrop_js_1 = require('./Backdrop.js');
+Object.defineProperty(exports, 'Backdrop', {
+  enumerable: true,
+  get: function () {
+    return Backdrop_js_1.Backdrop;
+  },
+});

package/cjs/core/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
-declare type BadgeProps = {
+type BadgeProps = {
     /**
      * Background color of the badge.
      *

package/cjs/core/Badge/Badge.js

@@ -1,55 +1,31 @@
-"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.Badge = 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");
-require("@itwin/itwinui-css/css/badge.css");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Helper function that returns one of the preset badge color values.
  */
 const getBadgeColorValue = (color) => {
-    if (!color) {
-        return '';
-    }
-    return (0, index_js_1.isSoftBackground)(color) ? index_js_1.SoftBackgrounds[color] : color;
+  if (!color) {
+    return '';
+  }
+  return (0, index_js_1.isSoftBackground)(color)
+    ? index_js_1.SoftBackgrounds[color]
+    : color;
 };
 /**
  * Helper function that returns one of the preset badge status values.
  */
 const getStatusValue = (color) => {
-    const statuses = ['positive', 'negative', 'warning', 'informational'];
-    return color && statuses.includes(color) ? color : undefined;
+  const statuses = ['positive', 'negative', 'warning', 'informational'];
+  return color && statuses.includes(color) ? color : undefined;
 };
 /**
  * A colorful visual indicator for categorizing items.
@@ -59,16 +35,31 @@ const getStatusValue = (color) => {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 exports.Badge = React.forwardRef((props, forwardedRef) => {
-    const { backgroundColor, style, className, children, ...rest } = props;
-    // choosing 'primary' status should result in data-iui-status equaling 'informational'
-    const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
-    const statusValue = getStatusValue(reducedBackgroundColor);
-    const _style = reducedBackgroundColor && !statusValue
-        ? {
-            '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
-            ...style,
+  const { backgroundColor, style, className, children, ...rest } = props;
+  // choosing 'primary' status should result in data-iui-status equaling 'informational'
+  const reducedBackgroundColor =
+    backgroundColor === 'primary' ? 'informational' : backgroundColor;
+  const statusValue = getStatusValue(reducedBackgroundColor);
+  const _style =
+    reducedBackgroundColor && !statusValue
+      ? {
+          '--iui-badge-background-color': getBadgeColorValue(
+            reducedBackgroundColor,
+          ),
+          ...style,
         }
-        : { ...style };
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
+      : { ...style };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'span',
+      className: (0, classnames_1.default)('iui-badge', className),
+      style: _style,
+      'data-iui-status': statusValue,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.Badge;

package/cjs/core/Badge/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Badge = 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 Badge_js_1 = require("./Badge.js");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_js_1.Badge; } });
+var Badge_js_1 = require('./Badge.js');
+Object.defineProperty(exports, 'Badge', {
+  enumerable: true,
+  get: function () {
+    return Badge_js_1.Badge;
+  },
+});
 exports.default = './Badge';

package/cjs/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
-declare type BreadcrumbsProps = {
+type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.
      * Defaults to the index of the last breadcrumb item.
@@ -75,27 +74,19 @@ declare type BreadcrumbsProps = {
      */
     overflowButton?: (visibleCount: number) => React.ReactNode;
 };
-/**
- * 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>
- */
-export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps>;
+export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps> & {
+    /**
+     * 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: PolymorphicForwardRefComponent<"a", {}>;
+};
 export default Breadcrumbs;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -1,40 +1,16 @@
-"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.Breadcrumbs = 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");
-require("@itwin/itwinui-css/css/breadcrumbs.css");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../Buttons/Button/index.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.
@@ -57,38 +33,147 @@ require("@itwin/itwinui-css/css/breadcrumbs.css");
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-exports.Breadcrumbs = 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 iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-breadcrumbs-text' }, "\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 }))));
-            }))));
+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 }),
+          );
+        }),
+    ),
+  );
 });
-const ListItem = ({ item, isActive, }) => {
-    var _a;
-    return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
-        ? React.cloneElement(item, {
-            'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
-        })
-        : item));
+// ----------------------------------------------------------------------------
+const ListItem = ({ item, isActive }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let children = item;
+  if (
+    children?.type === 'span' ||
+    children?.type === 'a' ||
+    children?.type === index_js_2.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 Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(index_js_1.SvgChevronRight, null)));
+// ----------------------------------------------------------------------------
+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 { children: childrenProp, className, ...rest } = props;
+  const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+  const children =
+    defaultAs === 'button'
+      ? React.createElement('span', null, childrenProp)
+      : childrenProp;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: defaultAs,
+      className: (0, classnames_1.default)(
+        'iui-breadcrumbs-content',
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+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,
+});
 exports.default = exports.Breadcrumbs;

package/cjs/core/Breadcrumbs/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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.
  *--------------------------------------------------------------------------------------------*/
-var Breadcrumbs_js_1 = require("./Breadcrumbs.js");
-Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_js_1.Breadcrumbs; } });
+var Breadcrumbs_js_1 = require('./Breadcrumbs.js');
+Object.defineProperty(exports, 'Breadcrumbs', {
+  enumerable: true,
+  get: function () {
+    return Breadcrumbs_js_1.Breadcrumbs;
+  },
+});
 exports.default = './Breadcrumbs';

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-declare type ButtonGroupProps = {
+type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.
      */