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

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

@@ -1,73 +1,60 @@
-"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.FocusTrap = 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 focusable_js_1 = require("../functions/focusable.js");
-const useMergedRefs_js_1 = require("../hooks/useMergedRefs.js");
+const React = tslib_1.__importStar(require('react'));
+const focusable_js_1 = require('../functions/focusable.js');
+const useMergedRefs_js_1 = require('../hooks/useMergedRefs.js');
 /**
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
 const FocusTrap = (props) => {
-    const { children } = props;
-    const childRef = React.useRef();
-    const getFirstLastFocusables = () => {
-        const elements = (0, focusable_js_1.getTabbableElements)(childRef.current);
-        const firstElement = elements[0];
-        const lastElement = elements[(elements.length || 1) - 1];
-        return [firstElement, lastElement];
-    };
-    const onFirstFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === firstElement) {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
-        }
-        else {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-        }
-    };
-    const onLastFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === lastElement) {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-        }
-        else {
-            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
-        React.cloneElement(children, {
-            ref: (0, useMergedRefs_js_1.mergeRefs)(children.ref, childRef),
-        }),
-        React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
+  const { children } = props;
+  const childRef = React.useRef();
+  const getFirstLastFocusables = () => {
+    const elements = (0, focusable_js_1.getTabbableElements)(childRef.current);
+    const firstElement = elements[0];
+    const lastElement = elements[(elements.length || 1) - 1];
+    return [firstElement, lastElement];
+  };
+  const onFirstFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === firstElement) {
+      lastElement?.focus();
+    } else {
+      firstElement?.focus();
+    }
+  };
+  const onLastFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === lastElement) {
+      firstElement?.focus();
+    } else {
+      lastElement?.focus();
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onFirstFocus,
+      'aria-hidden': true,
+    }),
+    React.cloneElement(children, {
+      ref: (0, useMergedRefs_js_1.mergeRefs)(children.ref, childRef),
+    }),
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onLastFocus,
+      'aria-hidden': true,
+    }),
+  );
 };
 exports.FocusTrap = FocusTrap;
 exports.default = exports.FocusTrap;

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type IconProps = {
+export type IconProps = {
     /**
      * Size of the svg.
      *  - 'medium': works well with most text
@@ -25,6 +24,11 @@ export declare type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+    /**
+     * Option to add padding to the icon.
+     * @default false
+     */
+    padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.

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

@@ -1,51 +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.Icon = 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');
 const getSizeValue = (size) => {
-    switch (size) {
-        case 'small':
-            return 's';
-        case 'medium':
-            return 'm';
-        case 'large':
-            return 'l';
-        default:
-            return size;
-    }
+  switch (size) {
+    case 'small':
+      return 's';
+    case 'medium':
+      return 'm';
+    case 'large':
+      return 'l';
+    default:
+      return size;
+  }
 };
 /**
  * A utility component to provide size and fill to svgs.
@@ -62,7 +36,21 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 exports.Icon = React.forwardRef((props, ref) => {
-    const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
+  return React.createElement(Box_js_1.Box, {
+    as: 'span',
+    className: (0, classnames_1.default)('iui-svg-icon', className),
+    'data-iui-icon-size': getSizeValue(size),
+    'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 exports.default = exports.Icon;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
-export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -9,13 +8,12 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     message?: React.ReactNode;
     icon?: JSX.Element;
     isLabelInline?: boolean;
-    isIconInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

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

@@ -1,59 +1,71 @@
-"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.InputContainer = 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');
+const index_js_1 = require('../../Label/index.js');
+const index_js_2 = require('../../StatusMessage/index.js');
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-const InputContainer = (props) => {
-    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-container', {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-inline-label': isLabelInline,
-            'iui-inline-icon': isIconInline,
-            'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        }, className), style: style, ...rest },
-        label && (React.createElement(Box_js_1.Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: (0, classnames_1.default)('iui-label', {
-                'iui-required': required,
-            }), htmlFor: inputId, id: labelId }, label)),
-        children,
-        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon && (React.createElement(Box_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
-            message && !isLabelInline && (React.createElement(Box_js_1.Box, { className: 'iui-message' }, message))))));
-};
-exports.InputContainer = InputContainer;
+exports.InputContainer = React.forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    disabled,
+    required,
+    status,
+    message,
+    icon,
+    isLabelInline,
+    children,
+    className,
+    style,
+    statusMessage,
+    inputId,
+    labelId,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
+      style: style,
+      ref: forwardedRef,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        index_js_1.Label,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          as: inputId && props.as !== 'label' ? 'label' : 'div',
+          required: required,
+          disabled: disabled,
+          htmlFor: inputId,
+          id: labelId,
+        },
+        label,
+      ),
+    children,
+    statusMessage
+      ? statusMessage
+      : message &&
+          React.createElement(
+            index_js_2.StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
+  );
+});

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

@@ -1,8 +1,8 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/input-container.css';
-export declare type InputFlexContainerProps = {
+export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

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

@@ -1,22 +1,35 @@
-"use strict";
-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.InputFlexContainer = 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 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/input-container.css");
-const Box_js_1 = require("./Box.js");
+const react_1 = tslib_1.__importDefault(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-    const { isDisabled, status, children, className, style, ...rest } = props;
-    return (react_1.default.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
+  return react_1.default.createElement(
+    Box_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-input-flex-container',
+        className,
+      ),
+      'data-iui-status': status,
+      'data-iui-size': size,
+      'data-iui-disabled': isDisabled ? 'true' : undefined,
+      ref: ref,
+      style: style,
+      ...rest,
+    },
+    children,
+  );
 });

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

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

@@ -1,12 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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.
  *--------------------------------------------------------------------------------------------*/
-require("@itwin/itwinui-css/css/utils.css");
-const polymorphic_js_1 = require("../functions/polymorphic.js");
+const polymorphic_js_1 = require('../functions/polymorphic.js');
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../props.js';
-export declare type MiddleTextTruncationProps = {
+export type MiddleTextTruncationProps = {
     /**
      * Text to truncate.
      */
@@ -31,5 +31,5 @@ export declare type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
 export default MiddleTextTruncation;

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

@@ -1,35 +1,13 @@
-"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.MiddleTextTruncation = 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 useOverflow_js_1 = require("../hooks/useOverflow.js");
+const React = tslib_1.__importStar(require('react'));
+const useOverflow_js_1 = require('../hooks/useOverflow.js');
 const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
@@ -48,24 +26,33 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 const MiddleTextTruncation = (props) => {
-    var _a;
-    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
-    const truncatedText = React.useMemo(() => {
-        if (visibleCount < text.length) {
-            return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        }
-        else {
-            return text;
-        }
-    }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", { style: {
-            display: 'flex',
-            minWidth: 0,
-            flexGrow: 1,
-            whiteSpace: 'nowrap',
-            ...style,
-        }, ref: ref, ...rest }, (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
+  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
+  const truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length) {
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    } else {
+      return text;
+    }
+  }, [endCharsCount, text, visibleCount]);
+  return React.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
+    },
+    textRenderer?.(truncatedText, text) ?? truncatedText,
+  );
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;