@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

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

@@ -1,14 +0,0 @@
-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/utils/components/ButtonBase.js

@@ -1,44 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'ButtonBase', {
-  enumerable: true,
-  get: function () {
-    return ButtonBase;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _Box = require('./Box.js');
-const _useIsClient = require('../hooks/useIsClient.js');
-const ButtonBase = _react.forwardRef((props, forwardedRef) => {
-  let {
-    as: asProp = 'button',
-    disabled: disabledProp,
-    htmlDisabled,
-    ...rest
-  } = props;
-  let isClient = (0, _useIsClient.useIsClient)();
-  let ariaDisabled =
-    disabledProp && !htmlDisabled && isClient && 'button' === asProp;
-  let handleIfEnabled = (handler) => (e) => {
-    if (disabledProp) return;
-    handler?.(e);
-  };
-  return _react.createElement(_Box.Box, {
-    as: asProp,
-    type: 'button' === asProp ? 'button' : void 0,
-    ref: forwardedRef,
-    'aria-disabled': ariaDisabled ? 'true' : void 0,
-    'data-iui-disabled': disabledProp ? 'true' : void 0,
-    disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
-    ...rest,
-    className: (0, _classnames.default)('iui-button-base', props.className),
-    onClick: handleIfEnabled(props.onClick),
-    onPointerDown: handleIfEnabled(props.onPointerDown),
-    onPointerUp: handleIfEnabled(props.onPointerUp),
-  });
-});

package/cjs/utils/components/FieldsetBase.d.ts

@@ -1,6 +0,0 @@
-/**
- * Thin wrapper over the `<fieldset>` element that removes its default styles.
- *
- * @private
- */
-export declare const FieldsetBase: import("../props.js").PolymorphicForwardRefComponent<"fieldset", {}>;

package/cjs/utils/components/FieldsetBase.js

@@ -1,12 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'FieldsetBase', {
-  enumerable: true,
-  get: function () {
-    return FieldsetBase;
-  },
-});
-const _polymorphic = require('../functions/polymorphic.js');
-const FieldsetBase = _polymorphic.polymorphic.fieldset('iui-fieldset-base');

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

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

package/cjs/utils/components/FocusTrap.js

@@ -1,51 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'FocusTrap', {
-  enumerable: true,
-  get: function () {
-    return FocusTrap;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _focusable = require('../functions/focusable.js');
-const _useMergedRefs = require('../hooks/useMergedRefs.js');
-const FocusTrap = (props) => {
-  let { children } = props;
-  let childRef = _react.useRef();
-  let getFirstLastFocusables = () => {
-    let elements = (0, _focusable.getTabbableElements)(childRef.current);
-    let firstElement = elements[0];
-    let lastElement = elements[(elements.length || 1) - 1];
-    return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [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.mergeRefs)(children.ref, childRef),
-    }),
-    _react.createElement('div', {
-      tabIndex: 0,
-      onFocus: onLastFocus,
-      'aria-hidden': true,
-    }),
-  );
-};

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../props.js';
-export type InputContainerProps = {
-    label?: React.ReactNode;
-    disabled?: boolean;
-    required?: boolean;
-    status?: 'positive' | 'warning' | 'negative';
-    message?: React.ReactNode;
-    icon?: JSX.Element;
-    isLabelInline?: boolean;
-    statusMessage?: React.ReactNode;
-    inputId?: string;
-    labelId?: string;
-};
-/**
- * Input container to wrap inputs with label, and add optional message and icon.
- * @private
- */
-export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

package/cjs/utils/components/InputContainer.js

@@ -1,70 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InputContainer', {
-  enumerable: true,
-  get: function () {
-    return InputContainer;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _Box = require('./Box.js');
-const _Label = require('../../core/Label/Label.js');
-const _StatusMessage = require('../../core/StatusMessage/StatusMessage.js');
-const InputContainer = _react.forwardRef((props, forwardedRef) => {
-  let {
-    label,
-    disabled,
-    required,
-    status,
-    message,
-    icon,
-    isLabelInline,
-    children,
-    className,
-    style,
-    statusMessage,
-    inputId,
-    labelId,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _Box.Box,
-    {
-      className: (0, _classnames.default)('iui-input-grid', className),
-      'data-iui-status': status,
-      'data-iui-label-placement': isLabelInline ? 'inline' : void 0,
-      style: style,
-      ref: forwardedRef,
-      ...rest,
-    },
-    label &&
-      _react.createElement(
-        _Label.Label,
-        {
-          as: inputId && 'label' !== props.as ? 'label' : 'div',
-          required: required,
-          disabled: disabled,
-          htmlFor: inputId,
-          id: labelId,
-        },
-        label,
-      ),
-    children,
-    statusMessage
-      ? statusMessage
-      : message &&
-          _react.createElement(
-            _StatusMessage.StatusMessage,
-            {
-              startIcon: icon,
-              status: status,
-            },
-            message,
-          ),
-  );
-});

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

@@ -1,36 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../props.js';
-import type { IconProps } from '../../core/Icon/Icon.js';
-import type { IconButtonProps } from '../../core/Buttons/IconButton.js';
-export type InputFlexContainerProps = {
-    isDisabled?: boolean;
-    status?: 'positive' | 'warning' | 'negative';
-    size?: 'small' | 'large';
-};
-/**
- * Utility component for input container with display flex abilities.
- * @private
- */
-export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerProps>;
-/**
- * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
- * @private
- */
-export declare const InputFlexContainerButton: PolymorphicForwardRefComponent<"button", Omit<IconButtonProps, "styleType"> & {
-    /**
-     * Style of the button.
-     * Use 'borderless' to hide outline.
-     * @default 'borderless'
-     */
-    styleType?: IconButtonProps["styleType"];
-}>;
-/**
- * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
- * @private
- */
-export declare const InputFlexContainerIcon: PolymorphicForwardRefComponent<"span", Omit<IconProps, "padded"> & {
-    /**
-     * Option to add padding to the icon.
-     * @default true
-     */
-    padded?: IconProps["padded"];
-}>;

package/cjs/utils/components/InputFlexContainer.js

@@ -1,72 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  InputFlexContainer: function () {
-    return InputFlexContainer;
-  },
-  InputFlexContainerButton: function () {
-    return InputFlexContainerButton;
-  },
-  InputFlexContainerIcon: function () {
-    return InputFlexContainerIcon;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _Box = require('./Box.js');
-const _Icon = require('../../core/Icon/Icon.js');
-const _IconButton = require('../../core/Buttons/IconButton.js');
-const InputFlexContainer = _react.forwardRef((props, ref) => {
-  let { isDisabled, status, children, className, size, style, ...rest } = props;
-  return _react.createElement(
-    _Box.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-input-flex-container',
-        className,
-      ),
-      'data-iui-status': status,
-      'data-iui-size': size,
-      'data-iui-disabled': isDisabled ? 'true' : void 0,
-      ref: ref,
-      style: style,
-      ...rest,
-    },
-    children,
-  );
-});
-const InputFlexContainerButton = _react.forwardRef((props, ref) => {
-  let { className, ...rest } = props;
-  return _react.createElement(_IconButton.IconButton, {
-    ref: ref,
-    className: (0, _classnames.default)(
-      'iui-input-flex-container-icon',
-      className,
-    ),
-    styleType: 'borderless',
-    ...rest,
-  });
-});
-const InputFlexContainerIcon = _react.forwardRef((props, ref) => {
-  let { className, ...rest } = props;
-  return _react.createElement(_Icon.Icon, {
-    ref: ref,
-    className: (0, _classnames.default)(
-      'iui-input-flex-container-icon',
-      className,
-    ),
-    padded: true,
-    ...rest,
-  });
-});

package/cjs/utils/components/InputWithIcon.d.ts

@@ -1,2 +0,0 @@
-/** @private */
-export declare const InputWithIcon: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/utils/components/InputWithIcon.js

@@ -1,12 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InputWithIcon', {
-  enumerable: true,
-  get: function () {
-    return InputWithIcon;
-  },
-});
-const _polymorphic = require('../functions/polymorphic.js');
-const InputWithIcon = _polymorphic.polymorphic.div('iui-input-with-icon');

package/cjs/utils/components/LineClamp.d.ts

@@ -1,5 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../props.js';
-/** @private */
-export declare const LineClamp: PolymorphicForwardRefComponent<"div", {
-    lines?: number;
-}>;

package/cjs/utils/components/LineClamp.js

@@ -1,44 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'LineClamp', {
-  enumerable: true,
-  get: function () {
-    return LineClamp;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _Box = require('./Box.js');
-const _ShadowRoot = require('./ShadowRoot.js');
-const LineClamp = _react.forwardRef((props, forwardedRef) => {
-  let { lines, children, ...rest } = props;
-  return _react.createElement(
-    _Box.Box,
-    {
-      ref: forwardedRef,
-      ...rest,
-      style: {
-        '--_iui-line-clamp': lines,
-        ...props.style,
-      },
-    },
-    _react.createElement(
-      _ShadowRoot.ShadowRoot,
-      {
-        css: css,
-      },
-      _react.createElement('slot', null),
-    ),
-    children,
-  );
-});
-const css = `
-  :host {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: var(--_iui-line-clamp, 3);
-    -webkit-box-orient: vertical;
-  }
-`;

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../props.js';
-type MiddleTextTruncationProps = {
-    /**
-     * Text to truncate.
-     */
-    text: string;
-    /**
-     * Number of characters to leave at the end.
-     * @default 6
-     */
-    endCharsCount?: number;
-    /**
-     * Custom renderer for the truncated text.
-     */
-    textRenderer?: (truncatedText: string, originalText: string) => React.ReactNode;
-};
-/**
- * Truncates text with the ellipsis in the middle,
- * leaving defined number of chars at the end.
- * @example
- * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
- * @example
- * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
- * @example
- * <MiddleTextTruncation
- *   text='ThisIsMyVeryLongFileName.dgn'
- *   textRenderer={React.useCallback(
- *     (truncatedText) => <b>{truncatedText}</b>,
- *     []
- *   )}
- * />
- */
-export declare const MiddleTextTruncation: PolymorphicForwardRefComponent<"span", MiddleTextTruncationProps>;
-export {};

package/cjs/utils/components/MiddleTextTruncation.js

@@ -1,64 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'MiddleTextTruncation', {
-  enumerable: true,
-  get: function () {
-    return MiddleTextTruncation;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _OverflowContainer = require('./OverflowContainer.js');
-const _VisuallyHidden = require('../../core/VisuallyHidden/VisuallyHidden.js');
-const _ShadowRoot = require('./ShadowRoot.js');
-const ELLIPSIS_CHAR = '…';
-const MiddleTextTruncation = _react.forwardRef((props, forwardedRef) => {
-  let { text, endCharsCount, textRenderer, style, ...rest } = props;
-  return _react.createElement(
-    _OverflowContainer.OverflowContainer,
-    {
-      as: 'span',
-      style: {
-        display: 'flex',
-        minWidth: 0,
-        flexGrow: 1,
-        whiteSpace: 'nowrap',
-        ...style,
-      },
-      itemsCount: text.length,
-      ...rest,
-      ref: forwardedRef,
-    },
-    _react.createElement(
-      _ShadowRoot.ShadowRoot,
-      null,
-      _react.createElement(_VisuallyHidden.VisuallyHidden, null, text),
-      _react.createElement('slot', {
-        'aria-hidden': true,
-        style: {
-          pointerEvents: 'none',
-        },
-      }),
-    ),
-    _react.createElement(MiddleTextTruncationContent, {
-      text: text,
-      endCharsCount: endCharsCount,
-      textRenderer: textRenderer,
-    }),
-  );
-});
-const MiddleTextTruncationContent = (props) => {
-  let { text, endCharsCount = 6, textRenderer } = props;
-  let { visibleCount } = _OverflowContainer.OverflowContainer.useContext();
-  let truncatedText = _react.useMemo(() => {
-    if (visibleCount < text.length)
-      return `${text.substring(
-        0,
-        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
-      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-    return text;
-  }, [endCharsCount, text, visibleCount]);
-  return textRenderer?.(truncatedText, text) ?? truncatedText;
-};

package/cjs/utils/components/OverflowContainer.d.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import type { PolymorphicForwardRefComponent } from '../props.js';
-type OverflowContainerProps = {
-    /**
-     * The orientation of the overflow in container.
-     * @default 'horizontal'
-     */
-    overflowOrientation?: 'horizontal' | 'vertical';
-    /**
-     * Count of the *original* items (i.e. when sufficient space is available).
-     */
-    itemsCount: number;
-};
-type OverflowContainerOverflowNodeProps = {
-    children: React.ReactNode;
-};
-/**
- * @private
- * Wrapper over `useOverflow`.
- *
- * - Use `OverflowContainer.useContext()` to get overflow related properties.
- * - Wrap overflow content in `OverflowContainer.OverflowNode` to conditionally render it when overflowing.
- */
-export declare const OverflowContainer: PolymorphicForwardRefComponent<"div", OverflowContainerProps> & {
-    /**
-     * Wrap overflow content in this component to conditionally render it when overflowing.
-     */
-    OverflowNode: (props: OverflowContainerOverflowNodeProps) => React.ReactNode;
-    /**
-     * Get overflow related properties of the nearest `OverflowContainer` ancestor.
-     */
-    useContext: typeof useOverflowContainerContext;
-};
-declare function useOverflowContainerContext(): {
-    visibleCount: number;
-    itemsCount: number;
-};
-export {};