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

package/cjs/core/utils/color/index.js

@@ -1,21 +1,8 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+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.
  *--------------------------------------------------------------------------------------------*/
-__exportStar(require("./ColorValue.js"), exports);
+tslib_1.__exportStar(require('./ColorValue.js'), exports);

package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -9,4 +9,4 @@
  */
 export declare const AutoclearingHiddenLiveRegion: ({ text }: {
     text?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,36 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.AutoclearingHiddenLiveRegion = 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 VisuallyHidden_js_1 = require("./VisuallyHidden.js");
-const index_js_1 = require("../functions/index.js");
+const React = tslib_1.__importStar(require('react'));
+const VisuallyHidden_js_1 = require('./VisuallyHidden.js');
+const index_js_1 = require('../functions/index.js');
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -40,13 +18,19 @@ const index_js_1 = require("../functions/index.js");
  * @private
  */
 const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-    const [maybeText, setMaybeText] = React.useState(text);
-    React.useEffect(() => {
-        var _a;
-        setMaybeText(text);
-        const timeout = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => setMaybeText(''), 5000);
-        return () => { var _a; return void ((_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(timeout)); };
-    }, [text]);
-    return (React.createElement(VisuallyHidden_js_1.VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
+  const [maybeText, setMaybeText] = React.useState(text);
+  React.useEffect(() => {
+    setMaybeText(text);
+    const timeout = (0, index_js_1.getWindow)()?.setTimeout(
+      () => setMaybeText(''),
+      5000,
+    );
+    return () => void (0, index_js_1.getWindow)()?.clearTimeout(timeout);
+  }, [text]);
+  return React.createElement(
+    VisuallyHidden_js_1.VisuallyHidden,
+    { as: 'div', 'aria-live': 'polite', 'aria-atomic': 'true' },
+    maybeText,
+  );
 };
 exports.AutoclearingHiddenLiveRegion = AutoclearingHiddenLiveRegion;

package/cjs/core/utils/components/Box.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Box = 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 polymorphic_js_1 = require("../functions/polymorphic.js");
+const polymorphic_js_1 = require('../functions/polymorphic.js');
 /**
  * Polymorphic component that renders a div element by default.
  * Intended to be used as a base for other components.

package/cjs/core/utils/components/ButtonBase.d.ts

@@ -0,0 +1,14 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export declare const ButtonBase: PolymorphicForwardRefComponent<"button", ButtonBaseProps>;
+type ButtonBaseProps = {
+    /**
+     * Custom `disabled` prop that keeps the button focusable, prevents
+     * clicks, applied disabled styling, and adds `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Built-in html `disabled` attribute
+     */
+    htmlDisabled?: boolean;
+};
+export {};

package/cjs/core/utils/components/ButtonBase.js

@@ -0,0 +1,46 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ButtonBase = 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 Box_js_1 = require('./Box.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+exports.ButtonBase = React.forwardRef((props, forwardedRef) => {
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = (0, useIsClient_js_1.useIsClient)();
+  const ariaDisabled =
+    disabledProp &&
+    !htmlDisabled && // htmlDisabled prop takes preference
+    isClient && // progressively enhance after first render
+    asProp === 'button'; // ignore if not button, e.g. links
+  const handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) {
+      return;
+    }
+    handler?.(e);
+  };
+  return React.createElement(Box_js_1.Box, {
+    as: asProp,
+    type: asProp === 'button' ? 'button' : undefined,
+    ref: forwardedRef,
+    'aria-disabled': ariaDisabled ? 'true' : undefined,
+    'data-iui-disabled': disabledProp ? 'true' : undefined,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined,
+    ...rest,
+    className: (0, classnames_1.default)('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
+});
+exports.ButtonBase.displayName = 'ButtonBase';

package/cjs/core/utils/components/Divider.d.ts

@@ -1,6 +1,5 @@
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-declare type DividerProps = {
+type DividerProps = {
     /**
      * Sets the orientation of the divider
      * @default 'horizontal'

package/cjs/core/utils/components/Divider.js

@@ -1,45 +1,25 @@
-"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.Divider = 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"));
-require("@itwin/itwinui-css/css/utils.css");
-const Box_js_1 = require("./Box.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
 /**
  * Shows a divider
  */
 exports.Divider = React.forwardRef((props, ref) => {
-    const { className, orientation = 'horizontal', ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { as: 'hr', className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+  const { className, orientation = 'horizontal', ...rest } = props;
+  return React.createElement(Box_js_1.Box, {
+    as: 'hr',
+    className: (0, classnames_1.default)('iui-divider', className),
+    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 exports.default = exports.Divider;

package/cjs/core/utils/components/Flex.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
  */
-declare type SizeToken = typeof sizeTokens[number];
-declare type FlexOwnProps = {
+type SizeToken = (typeof sizeTokens)[number];
+type FlexOwnProps = {
     /**
      * Value of the `display` property.
      * @default 'flex'
@@ -46,7 +45,7 @@ declare type FlexOwnProps = {
      */
     flexWrap?: React.CSSProperties['flexWrap'];
 };
-declare type FlexSpacerOwnProps = {
+type FlexSpacerOwnProps = {
     /**
      * Value of the `flex` css property.
      *
@@ -57,7 +56,7 @@ declare type FlexSpacerOwnProps = {
      */
     flex?: React.CSSProperties['flex'];
 };
-declare type FlexItemOwnProps = {
+type FlexItemOwnProps = {
     /**
      * Gap before the flex item, if different from the `gap` set on `Flex` component.
      */

package/cjs/core/utils/components/Flex.js

@@ -1,97 +1,87 @@
-"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.Flex = 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"));
-require("@itwin/itwinui-css/css/utils.css");
-const Box_js_1 = require("./Box.js");
-const sizeTokens = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-];
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
+const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
-    if (sizeTokens.includes(token)) {
-        return `var(--iui-size-${token})`;
-    }
-    return token;
+  if (sizeTokens.includes(token)) {
+    return `var(--iui-size-${token})`;
+  }
+  return token;
 };
 // ----------------------------------------------------------------------------
 // Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
-    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex', className), style: {
-            '--iui-flex-display': display,
-            '--iui-flex-direction': flexDirection,
-            '--iui-flex-justify': justifyContent,
-            '--iui-flex-align': alignItems,
-            '--iui-flex-gap': getValueForToken(gap),
-            '--iui-flex-wrap': flexWrap,
-            ...style,
-        }, ref: ref, ...rest }));
+  const {
+    display,
+    flexDirection,
+    justifyContent,
+    alignItems,
+    gap,
+    flexWrap,
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(Box_js_1.Box, {
+    className: (0, classnames_1.default)('iui-flex', className),
+    style: {
+      '--iui-flex-display': display,
+      '--iui-flex-direction': flexDirection,
+      '--iui-flex-justify': justifyContent,
+      '--iui-flex-align': alignItems,
+      '--iui-flex-gap': getValueForToken(gap),
+      '--iui-flex-wrap': flexWrap,
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexComponent.displayName = 'Flex';
 // ----------------------------------------------------------------------------
 // Flex.Spacer component
 const FlexSpacer = React.forwardRef((props, ref) => {
-    const { flex, className, style, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+  const { flex, className, style, ...rest } = props;
+  return React.createElement(Box_js_1.Box, {
+    className: (0, classnames_1.default)('iui-flex-spacer', className),
+    style: { '--iui-flex-spacer-flex': flex, ...style },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexSpacer.displayName = 'Flex.Spacer';
 // ----------------------------------------------------------------------------
 // Flex.Item subcomponent
 const FlexItem = React.forwardRef((props, ref) => {
-    const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
-    const _style = {
-        '--iui-flex-item-flex': flex,
-        '--iui-flex-item-align': alignSelf,
-        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
-        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
-        ...(gapBefore !== undefined && {
-            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
-        }),
-        ...(gapAfter !== undefined && {
-            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
-        }),
-        ...style,
-    };
-    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+  const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
+    props;
+  const _style = {
+    '--iui-flex-item-flex': flex,
+    '--iui-flex-item-align': alignSelf,
+    '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+    '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+    ...(gapBefore !== undefined && {
+      '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+    }),
+    ...(gapAfter !== undefined && {
+      '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+    }),
+    ...style,
+  };
+  return React.createElement(Box_js_1.Box, {
+    className: (0, classnames_1.default)('iui-flex-item', className),
+    ref: ref,
+    style: _style,
+    ...rest,
+  });
 });
 FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
@@ -125,34 +115,34 @@ FlexItem.displayName = 'Flex.Item';
  * </Flex>
  */
 exports.Flex = Object.assign(FlexComponent, {
-    /**
-     * Subcomponent that allows customizing flex items through the
-     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
-     *
-     * The `gapBefore`/`gapAfter` props can used to override the gap at an
-     * individual level, for when you need a different gap than the one
-     * set in the parent `Flex`.
-     *
-     * @example
-     * <Flex gap='l'>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item gapBefore='s'>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     * </Flex>
-     */
-    Item: FlexItem,
-    /**
-     * Subcomponent that fills up the available space using a really large `flex` value.
-     * Useful when you want to push certain items to one edge.
-     *
-     * @example
-     * <Flex>
-     *   <div>this stays on the left</div>
-     *   <Flex.Spacer /> // this fills up the available empty space
-     *   <div>this gets pushed all the way to the end</div>
-     * </Flex>
-     */
-    Spacer: FlexSpacer,
+  /**
+   * Subcomponent that allows customizing flex items through the
+   * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+   *
+   * The `gapBefore`/`gapAfter` props can used to override the gap at an
+   * individual level, for when you need a different gap than the one
+   * set in the parent `Flex`.
+   *
+   * @example
+   * <Flex gap='l'>
+   *   <Flex.Item>...</Flex.Item>
+   *   <Flex.Item>...</Flex.Item>
+   *   <Flex.Item gapBefore='s'>...</Flex.Item>
+   *   <Flex.Item>...</Flex.Item>
+   * </Flex>
+   */
+  Item: FlexItem,
+  /**
+   * Subcomponent that fills up the available space using a really large `flex` value.
+   * Useful when you want to push certain items to one edge.
+   *
+   * @example
+   * <Flex>
+   *   <div>this stays on the left</div>
+   *   <Flex.Spacer /> // this fills up the available empty space
+   *   <div>this gets pushed all the way to the end</div>
+   * </Flex>
+   */
+  Spacer: FlexSpacer,
 });
 exports.default = exports.Flex;

package/cjs/core/utils/components/FocusTrap.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type FocusTrapProps = {
+import * as React from 'react';
+export type FocusTrapProps = {
     /**
      * A single child element to trap focus in.
      */
@@ -9,5 +9,5 @@ export declare type FocusTrapProps = {
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
-export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;
+export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;
 export default FocusTrap;