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

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
-declare type NonIdealStateProps = {
+type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.
      *
@@ -35,6 +34,22 @@ declare type NonIdealStateProps = {
      * />
      */
     actions?: React.ReactNode;
+    /**
+     *  Allows props to be passed for non-ideal-state-illustration
+     */
+    illustrationProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-title
+     */
+    titleProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-description
+     */
+    descriptionProps?: React.ComponentProps<'div'>;
+    /**
+     *  Allows props to be passed for non-ideal-state-action
+     */
+    actionsProps?: React.ComponentProps<'div'>;
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.

package/cjs/core/NonIdealState/NonIdealState.js

@@ -1,40 +1,14 @@
-"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.NonIdealState = 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 index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/non-ideal-state.css");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.
@@ -43,11 +17,76 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
 exports.NonIdealState = React.forwardRef((props, forwardedRef) => {
-    const { className, svg, heading, description, actions, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-non-ideal-state', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-illustration' }, svg),
-        heading && React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-title' }, heading),
-        description && (React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-description' }, description)),
-        actions && React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-actions' }, actions)));
+  const {
+    className,
+    svg,
+    heading,
+    description,
+    actions,
+    illustrationProps,
+    titleProps,
+    descriptionProps,
+    actionsProps,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-non-ideal-state', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_1.Box,
+      {
+        as: 'div',
+        ...illustrationProps,
+        className: (0, classnames_1.default)(
+          'iui-non-ideal-state-illustration',
+          illustrationProps?.className,
+        ),
+      },
+      svg,
+    ),
+    heading &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...titleProps,
+          className: (0, classnames_1.default)(
+            'iui-non-ideal-state-title',
+            titleProps?.className,
+          ),
+        },
+        heading,
+      ),
+    description &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...descriptionProps,
+          className: (0, classnames_1.default)(
+            'iui-non-ideal-state-description',
+            descriptionProps?.className,
+          ),
+        },
+        description,
+      ),
+    actions &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...actionsProps,
+          className: (0, classnames_1.default)(
+            'iui-non-ideal-state-actions',
+            actionsProps?.className,
+          ),
+        },
+        actions,
+      ),
+  );
 });
 exports.default = exports.NonIdealState;

package/cjs/core/NonIdealState/index.js

@@ -1,12 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.NonIdealState = exports.ErrorPage = 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 ErrorPage_js_1 = require("./ErrorPage.js");
-Object.defineProperty(exports, "ErrorPage", { enumerable: true, get: function () { return ErrorPage_js_1.ErrorPage; } });
-var NonIdealState_js_1 = require("./NonIdealState.js");
-Object.defineProperty(exports, "NonIdealState", { enumerable: true, get: function () { return NonIdealState_js_1.NonIdealState; } });
+var ErrorPage_js_1 = require('./ErrorPage.js');
+Object.defineProperty(exports, 'ErrorPage', {
+  enumerable: true,
+  get: function () {
+    return ErrorPage_js_1.ErrorPage;
+  },
+});
+var NonIdealState_js_1 = require('./NonIdealState.js');
+Object.defineProperty(exports, 'NonIdealState', {
+  enumerable: true,
+  get: function () {
+    return NonIdealState_js_1.NonIdealState;
+  },
+});
 exports.default = './NonIdealState';

package/cjs/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
-declare type NotificationMarkerProps = {
+type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.
      */

package/cjs/core/NotificationMarker/NotificationMarker.js

@@ -1,40 +1,14 @@
-"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.NotificationMarker = 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 index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
@@ -48,7 +22,28 @@ require("@itwin/itwinui-css/css/utils.css");
  * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
  */
 exports.NotificationMarker = React.forwardRef((props, ref) => {
-    const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'span', ref: ref, className: (0, classnames_1.default)({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+  const {
+    className,
+    children,
+    status = 'primary',
+    pulsing = false,
+    enabled = true,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'span',
+      ref: ref,
+      className: (0, classnames_1.default)(
+        { 'iui-notification-marker': enabled },
+        className,
+      ),
+      'data-iui-variant': enabled ? status : null,
+      'data-iui-urgent': enabled ? pulsing : null,
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.NotificationMarker;

package/cjs/core/NotificationMarker/index.js

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

package/cjs/core/Overlay/Overlay.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type OverlayComponentProps = {
+    /**
+     * The sub-component elements of Overlay.
+     */
+    children?: React.ReactNode;
+    /**
+     * Placeholder for Progress Indicator in Overlay
+     */
+    content?: React.ReactNode;
+};
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
+    /**
+     *
+     * The main component is a wrapper to hold the
+     * Overlay HiddenContent and Overlay Message.
+     */
+    Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * HiddenContent houses page elements that are blurred by the
+     * Overlay.
+     */
+    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
+    /**
+     *  Message contains the progress indicator and loading message
+     *  for the Overlay. It sits on top of the HiddenContent.
+     */
+    Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+};
+export {};

package/cjs/core/Overlay/Overlay.js

@@ -0,0 +1,96 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Overlay = 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_1 = tslib_1.__importDefault(require('react'));
+const index_js_1 = require('../utils/index.js');
+// --------------------------------------------------------------------------------
+const OverlayComponent = react_1.default.forwardRef((props, forwardedRef) => {
+  const { content, children, ...rest } = props;
+  return react_1.default.createElement(
+    OverlayWrapper,
+    { ref: forwardedRef, ...rest },
+    react_1.default.createElement(OverlayMessage, null, content),
+    react_1.default.createElement(OverlayHiddenContent, null, children),
+  );
+});
+OverlayComponent.displayName = 'Overlay';
+// --------------------------------------------------------------------------------
+const OverlayHiddenContent = react_1.default.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  useInertPolyfill();
+  return react_1.default.createElement(
+    index_js_1.Box,
+    { inert: '', ref: ref, ...rest },
+    children,
+  );
+});
+OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+// --------------------------------------------------------------------------------
+const OverlayMessage = (0, index_js_1.polymorphic)('iui-overlay');
+OverlayMessage.displayName = 'Overlay.Overlay';
+// --------------------------------------------------------------------------------
+const OverlayWrapper = (0, index_js_1.polymorphic)('iui-overlay-wrapper');
+OverlayWrapper.displayName = 'Overlay.Wrapper';
+// --------------------------------------------------------------------------------
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+exports.Overlay = Object.assign(OverlayComponent, {
+  /**
+   *
+   * The main component is a wrapper to hold the
+   * Overlay HiddenContent and Overlay Message.
+   */
+  Wrapper: OverlayWrapper,
+  /**
+   * HiddenContent houses page elements that are blurred by the
+   * Overlay.
+   */
+  HiddenContent: OverlayHiddenContent,
+  /**
+   *  Message contains the progress indicator and loading message
+   *  for the Overlay. It sits on top of the HiddenContent.
+   */
+  Overlay: OverlayMessage,
+});
+const useInertPolyfill = () => {
+  const loaded = react_1.default.useRef(false);
+  const modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  react_1.default.useEffect(() => {
+    async () => {
+      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
+        await (0, index_js_1.dynamicImport)(modulePath);
+        loaded.current = true;
+      }
+    };
+  }, []);
+};

package/cjs/core/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { Overlay } from './Overlay.js';

package/cjs/core/{ProgressIndicators/ProgressRadial → Overlay}/index.js

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

package/{esm/core/ProgressIndicators/ProgressLinear → cjs/core/ProgressIndicators}/ProgressLinear.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-declare type ProgressLinearProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
-     * Progress variant. If true, value will be ignored.
-     * @default false
+     * Progress variant. If true, `value` will be ignored.
+     *
+     * Defaults to true if `value` is passed, otherwise false.
      */
     indeterminate?: boolean;
     /**
@@ -22,9 +21,13 @@ declare type ProgressLinearProps = {
      */
     isAnimated?: boolean;
     /**
-     * Status of progress. Positive status always has 100% value.
+     * Status of progress.
      */
     status?: 'positive' | 'negative';
+    /**
+     * Pass props to ProgressLinear label group.
+     */
+    labelGroupProps?: React.ComponentProps<'div'>;
 };
 /**
  * Shows progress on a linear bar

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -0,0 +1,72 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ProgressLinear = 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 = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+/**
+ * Shows progress on a linear bar
+ * @example
+ * Determinate
+ * <ProgressLinear value={25}/>
+ * Indeterminate
+ * <ProgressLinear indeterminate={true}/>
+ * Labeled - Center
+ * <ProgressLinear value={50} labels={['Centered Label']} />
+ * Labeled - Left & Right
+ * <ProgressLinear value={50} labels={['Loading...', '50%']} />
+ * Positive / Negative.
+ * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * <ProgressLinear status='negative' />
+ */
+exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    labelGroupProps,
+    ...rest
+  } = props;
+  const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-progress-indicator-linear',
+        className,
+      ),
+      ref: forwardedRef,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      'data-iui-animated': isAnimated ? 'true' : undefined,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
+    },
+    labels.length > 0 &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...labelGroupProps,
+          className: (0, classnames_1.default)(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
+        },
+        labels.map((label, index) =>
+          React.createElement('span', { key: index }, label),
+        ),
+      ),
+  );
+});
+exports.default = exports.ProgressLinear;

package/cjs/core/ProgressIndicators/{ProgressRadial/ProgressRadial.d.ts → ProgressRadial.d.ts}

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-declare type ProgressRadialProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
      * Progress variant. If true, value will be ignored.
-     * @default false
+     *
+     * @default false if value is provided, true otherwise
      */
     indeterminate?: boolean;
     /**