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

package/cjs/core/Toast/Toast.js

@@ -1,241 +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, {
-  Toast: function () {
-    return Toast;
-  },
-  ToastPresentation: function () {
-    return ToastPresentation;
-  },
-});
-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 _reacttransitiongroup = require('react-transition-group');
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const _Toaster = require('./Toaster.js');
-const Toast = (props) => {
-  let {
-    content,
-    category,
-    type = 'temporary',
-    isVisible: isVisibleProp,
-    link,
-    duration = 7000,
-    hasCloseButton,
-    onRemove,
-    animateOutTo,
-    domProps,
-  } = props;
-  let closeTimeout = _react.useRef(0);
-  let { placement } = (0, _index.useSafeContext)(
-    _Toaster.ToasterStateContext,
-  ).settings;
-  let placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-  let [visible, setVisible] = _react.useState(isVisibleProp ?? true);
-  let isVisible = isVisibleProp ?? visible;
-  let [height, setHeight] = _react.useState(0);
-  let thisElement = _react.useRef(null);
-  let [margin, setMargin] = _react.useState(0);
-  let motionOk = (0, _index.useMediaQuery)(
-    '(prefers-reduced-motion: no-preference)',
-  );
-  let marginStyle = () => {
-    if ('top' === placementPosition)
-      return {
-        marginBlockEnd: margin,
-      };
-    return {
-      marginBlockStart: margin,
-    };
-  };
-  _react.useEffect(() => {
-    if ('temporary' === type) setCloseTimeout(duration);
-    return () => {
-      clearCloseTimeout();
-    };
-  }, [duration, type]);
-  _react.useEffect(() => {
-    if (!isVisible && !animateOutTo) setMargin(-height);
-  }, [isVisible, animateOutTo, setMargin, height]);
-  let close = () => {
-    clearCloseTimeout();
-    setMargin(-height);
-    setVisible(false);
-  };
-  let setCloseTimeout = (timeout) => {
-    let definedWindow = (0, _index.getWindow)();
-    if (!definedWindow) return;
-    closeTimeout.current = definedWindow.setTimeout(() => {
-      close();
-    }, timeout);
-  };
-  let clearCloseTimeout = () => {
-    (0, _index.getWindow)()?.clearTimeout(closeTimeout.current);
-  };
-  let onRef = (ref) => {
-    if (ref) {
-      let { height } = ref.getBoundingClientRect();
-      setHeight(height);
-    }
-  };
-  let calculateOutAnimation = (node) => {
-    let translateX = 0;
-    let translateY = 0;
-    if (animateOutTo && node) {
-      let { x: startX, y: startY } = node.getBoundingClientRect();
-      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
-      translateX = endX - startX;
-      translateY = endY - startY;
-    }
-    return {
-      translateX,
-      translateY,
-    };
-  };
-  return _react.createElement(
-    _reacttransitiongroup.Transition,
-    {
-      timeout: {
-        enter: 240,
-        exit: animateOutTo ? 400 : 120,
-      },
-      in: isVisible,
-      appear: true,
-      unmountOnExit: true,
-      onEnter: (node) => {
-        if (motionOk) {
-          node.style.transform = 'translateY(15%)';
-          node.style.transitionTimingFunction = 'ease';
-        }
-      },
-      onEntered: (node) => {
-        if (motionOk) node.style.transform = 'translateY(0)';
-      },
-      onExiting: (node) => {
-        if (motionOk) {
-          let { translateX, translateY } = calculateOutAnimation(node);
-          node.style.transform = animateOutTo
-            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : 'scale(0.9)';
-          node.style.opacity = '0';
-          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
-        }
-      },
-      onExited: onRemove,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      _react.createElement(
-        'div',
-        {
-          ref: onRef,
-        },
-        _react.createElement(ToastPresentation, {
-          as: 'div',
-          category: category,
-          content: content,
-          link: link,
-          type: type,
-          hasCloseButton: hasCloseButton,
-          onClose: close,
-          ...domProps?.toastProps,
-          contentProps: domProps?.contentProps,
-        }),
-      ),
-    ),
-  );
-};
-const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
-  let {
-    content,
-    category,
-    type = 'temporary',
-    link,
-    hasCloseButton,
-    onClose,
-    className,
-    contentProps,
-    ...rest
-  } = props;
-  let StatusIcon = _index.StatusIconMap[category];
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        `iui-toast iui-${category}`,
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        className: 'iui-status-area',
-      },
-      _react.createElement(StatusIcon, {
-        className: 'iui-icon',
-      }),
-    ),
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'div',
-        ...contentProps,
-        className: (0, _classnames.default)(
-          'iui-message',
-          contentProps?.className,
-        ),
-      },
-      content,
-    ),
-    link &&
-      _react.createElement(
-        _index.ButtonBase,
-        {
-          ...link,
-          className: (0, _classnames.default)(
-            'iui-anchor',
-            'iui-toast-anchor',
-            link.className,
-          ),
-          title: void 0,
-          'data-iui-status': category,
-          'data-iui-underline': true,
-        },
-        link.title,
-      ),
-    ('persisting' === type || hasCloseButton) &&
-      _react.createElement(
-        _IconButton.IconButton,
-        {
-          size: 'small',
-          styleType: 'borderless',
-          onClick: onClose,
-          'aria-label': 'Close',
-        },
-        _react.createElement(_index.SvgCloseSmall, null),
-      ),
-  );
-});

package/cjs/core/Toast/Toaster.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import type { ToastProps } from './Toast.js';
-export type ToasterSettings = {
-    /**
-     * Order of toasts.
-     * When set to 'descending', most recent toasts are on top. When set to 'ascending', most recent toasts are on bottom.
-     *
-     * When set to `auto`, it will behave like 'descending' when `placement` is set to a top value, otherwise 'ascending'.
-     *
-     * @default 'auto'
-     */
-    order: 'descending' | 'ascending' | 'auto';
-    /**
-     * Placement of toasts.
-     * Changes placement of toasts. Start indicates left side of viewport. End - right side of viewport.
-     * @default 'top'
-     */
-    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-};
-export type ToastOptions = Omit<ToastProps, 'category' | 'isVisible' | 'id' | 'content'>;
-export declare const useToaster: () => {
-    positive: (content: React.ReactNode, options?: ToastOptions) => {
-        close: () => void;
-    };
-    informational: (content: React.ReactNode, options?: ToastOptions) => {
-        close: () => void;
-    };
-    negative: (content: React.ReactNode, options?: ToastOptions) => {
-        close: () => void;
-    };
-    warning: (content: React.ReactNode, options?: ToastOptions) => {
-        close: () => void;
-    };
-    closeAll: () => void;
-    setSettings: (settings: Partial<ToasterSettings>) => void;
-};
-export declare const Toaster: () => React.JSX.Element;
-export declare const ToastProvider: ({ children, inherit, }: {
-    children: React.ReactNode;
-    inherit?: boolean;
-}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
-export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
-type ToasterState = {
-    toasts: ToastProps[];
-    settings: ToasterSettings;
-};
-export {};

package/cjs/core/Toast/Toaster.js

@@ -1,158 +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, {
-  ToastProvider: function () {
-    return ToastProvider;
-  },
-  Toaster: function () {
-    return Toaster;
-  },
-  ToasterStateContext: function () {
-    return ToasterStateContext;
-  },
-  useToaster: function () {
-    return useToaster;
-  },
-});
-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 _index = require('../../utils/index.js');
-const _Toast = require('./Toast.js');
-const useToaster = () => {
-  let dispatch = (0, _index.useSafeContext)(ToasterDispatchContext);
-  return _react.useMemo(() => {
-    let showToast = (category) => (content, options) => {
-      let id = nextId();
-      dispatch({
-        type: 'add',
-        toast: {
-          ...options,
-          id,
-          content,
-          category,
-        },
-      });
-      return {
-        close: () =>
-          dispatch({
-            type: 'remove',
-            id,
-          }),
-      };
-    };
-    return {
-      positive: showToast('positive'),
-      informational: showToast('informational'),
-      negative: showToast('negative'),
-      warning: showToast('warning'),
-      closeAll: () => {
-        dispatch({
-          type: 'close-all',
-        });
-      },
-      setSettings: (settings) => {
-        dispatch({
-          type: 'settings',
-          settings,
-        });
-      },
-    };
-  }, [dispatch]);
-};
-const Toaster = () => {
-  let { toasts, settings } = (0, _index.useSafeContext)(ToasterStateContext);
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-toast-wrapper',
-        `iui-placement-${settings.placement}`,
-      ),
-    },
-    toasts.map((toastProps) =>
-      _react.createElement(_Toast.Toast, {
-        key: toastProps.id,
-        ...toastProps,
-      }),
-    ),
-  );
-};
-const ToastProvider = ({ children, inherit = false }) => {
-  let [toasterState, dispatch] = _react.useReducer(toastReducer, {
-    toasts: [],
-    settings: {
-      order: 'auto',
-      placement: 'top',
-    },
-  });
-  if (_react.useContext(ToasterStateContext) && inherit) return children;
-  return _react.createElement(
-    ToasterDispatchContext.Provider,
-    {
-      value: dispatch,
-    },
-    _react.createElement(
-      ToasterStateContext.Provider,
-      {
-        value: toasterState,
-      },
-      children,
-    ),
-  );
-};
-const toastReducer = (state, action) => {
-  if ('add' === action.type) {
-    let order = state.settings.order;
-    if ('auto' === order)
-      order = state.settings.placement.startsWith('top')
-        ? 'descending'
-        : 'ascending';
-    return {
-      ...state,
-      toasts: [
-        ...('ascending' === order ? state.toasts : []),
-        action.toast,
-        ...('descending' === order ? state.toasts : []),
-      ],
-    };
-  }
-  if ('remove' === action.type)
-    return {
-      ...state,
-      toasts: state.toasts.filter((toast) => toast.id !== action.id),
-    };
-  if ('close-all' === action.type)
-    return {
-      ...state,
-      toasts: state.toasts.map((toast) => ({
-        ...toast,
-        isVisible: false,
-      })),
-    };
-  if ('settings' === action.type)
-    return {
-      ...state,
-      settings: {
-        ...state.settings,
-        ...action.settings,
-      },
-    };
-  return state;
-};
-const ToasterStateContext = _react.createContext(void 0);
-const ToasterDispatchContext = _react.createContext(void 0);
-const nextId = (() => {
-  let count = 0;
-  return () => ++count;
-})();

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ToggleSwitchProps = {
-    /**
-     * Label for the toggle switch.
-     */
-    label?: React.ReactNode;
-    /**
-     * Passes properties for ToggleSwitch label.
-     */
-    labelProps?: React.ComponentProps<'span'>;
-    /**
-     * Position of the label.
-     * @default 'right'
-     */
-    labelPosition?: 'left' | 'right';
-} & ({
-    /**
-     * Size of the toggle switch.
-     *  @default 'default'
-     */
-    size?: 'default';
-    /**
-     * Custom icon inside the toggle switch. Shown only when toggle is checked and size is not small.
-     *
-     * Will override the default checkmark icon.
-     */
-    icon?: JSX.Element | null;
-} | {
-    size: 'small';
-    icon?: never;
-});
-/**
- * A switch for turning on and off.
- * @example
- * <caption>Basic toggle</caption>
- * <ToggleSwitch onChange={(e) => console.log(e.target.checked)} defaultChecked />
- * @example
- * <caption>Disabled toggle</caption>
- * <ToggleSwitch disabled />
- * @example
- * <caption>Right labeled toggle</caption>
- * <ToggleSwitch defaultChecked label='Right labeled' />
- * @example
- * <caption>Left labeled toggle</caption>
- * <ToggleSwitch defaultChecked label='Left labeled' labelPosition='left' />
- * @example
- * <caption>Toggle with icon</caption>
- * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
- */
-export declare const ToggleSwitch: PolymorphicForwardRefComponent<"input", ToggleSwitchProps>;
-export {};

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -1,79 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'ToggleSwitch', {
-  enumerable: true,
-  get: function () {
-    return ToggleSwitch;
-  },
-});
-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 _index = require('../../utils/index.js');
-const ToggleSwitch = _react.forwardRef((props, ref) => {
-  let {
-    disabled = false,
-    labelPosition = 'right',
-    label,
-    className,
-    style,
-    size = 'default',
-    labelProps = {},
-    icon: iconProp,
-    ...rest
-  } = props;
-  let shouldShowIcon =
-    void 0 === iconProp || (null !== iconProp && 'small' !== size);
-  return _react.createElement(
-    _index.Box,
-    {
-      as: label ? 'label' : 'div',
-      className: (0, _classnames.default)(
-        'iui-toggle-switch-wrapper',
-        {
-          'iui-disabled': disabled,
-          'iui-label-on-right': label && 'right' === labelPosition,
-          'iui-label-on-left': label && 'left' === labelPosition,
-        },
-        className,
-      ),
-      'data-iui-size': size,
-      style: style,
-    },
-    _react.createElement(_index.Box, {
-      as: 'input',
-      className: 'iui-toggle-switch',
-      type: 'checkbox',
-      role: 'switch',
-      disabled: disabled,
-      ref: ref,
-      ...rest,
-    }),
-    shouldShowIcon &&
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'span',
-          className: 'iui-toggle-switch-icon',
-          'aria-hidden': true,
-        },
-        iconProp || _react.createElement(_index.SvgCheckmark, null),
-      ),
-    label &&
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'span',
-          ...labelProps,
-          className: (0, _classnames.default)(
-            'iui-toggle-switch-label',
-            labelProps?.className,
-          ),
-        },
-        label,
-      ),
-  );
-});

package/cjs/core/Tooltip/Tooltip.d.ts

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-type TooltipOptions = {
-    /**
-     * Placement of the Tooltip
-     * @default 'top'
-     */
-    placement?: Placement;
-    /**
-     * Property for manual visibility control
-     */
-    visible?: boolean;
-    /**
-     * Callback invoked every time the tooltip visibility changes as a result
-     * of internal logic. Should be used alongside `visible` prop.
-     */
-    onVisibleChange?: (visible: boolean) => void;
-    /**
-     * autoUpdate options that recalculates position
-     * to ensure the floating element remains anchored
-     * to its reference element, such as when scrolling
-     * and resizing the screen.
-     *
-     * @see [floating-ui docs](https://floating-ui.com/docs/autoUpdate#options)
-     */
-    autoUpdateOptions?: {
-        ancestorScroll?: boolean;
-        ancestorResize?: boolean;
-        elementResize?: boolean;
-        /**
-         * Use this if you want Tooltip to follow moving trigger element
-         */
-        animationFrame?: boolean;
-        layoutShift?: boolean;
-    };
-    /**
-     * Tooltip middleware options.
-     *
-     * @see [floating-ui docs](https://floating-ui.com/docs/middleware)
-     */
-    middleware?: {
-        offset?: number;
-        flip?: boolean;
-        shift?: boolean;
-        size?: boolean;
-        autoPlacement?: boolean;
-        hide?: boolean;
-        inline?: boolean;
-    };
-    /**
-     * Sets reference point to user provided element.
-     * @example
-     * const [trigger, setTrigger] = React.useState(null);
-     * ...
-     * <Button ref={setTrigger} />
-     * <Tooltip content='tooltip text' reference={trigger} />
-     */
-    reference?: HTMLElement | null;
-    /**
-     * By default, the tooltip will be associated with the reference element
-     * using `aria-describedby`.
-     *
-     * Pass "label" if you want to use `aria-labelledby` instead, or pass "none"
-     * if you don't want any association.
-     *
-     * @default 'description'
-     */
-    ariaStrategy?: 'description' | 'label' | 'none';
-    id?: string;
-};
-type TooltipOwnProps = {
-    /**
-     * Content of the tooltip.
-     */
-    content: React.ReactNode;
-    /**
-     * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
-     * If not specified, the `reference` prop should be used instead.
-     */
-    children?: React.ReactNode;
-} & PortalProps;
-/**
- * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses [FloatingUI](https://floating-ui.com/).
- * @example
- * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
- * @example
- * const [trigger, setTrigger] = React.useState(null);
- * ...
- * <Button ref={setTrigger} />
- * <Tooltip content='tooltip text' reference={trigger} />
- */
-export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
-export {};