@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/cjs/utils/providers/HydrationProvider.js

@@ -1,58 +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, {
-  HydrationProvider: function () {
-    return HydrationProvider;
-  },
-  useHydration: function () {
-    return useHydration;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../hooks/index.js');
-const HydrationContext = _react.createContext(false);
-const noopSubscribe = () => () => {};
-const isServer = 'undefined' == typeof window;
-const useHydration = () => {
-  let hydrating = (0, _index.useSyncExternalStore)(
-    noopSubscribe,
-    () => false,
-    () => !isServer,
-  );
-  let hydrated = _react.useContext(HydrationContext);
-  let hydratedFallback = (0, _index.useIsClient)();
-  if (hydrated || hydratedFallback) return 'hydrated';
-  if (hydrating) return 'hydrating';
-};
-const HydrationProvider = ({ children }) => {
-  let [isHydrated, setIsHydrated] = _react.useState(
-    _react.useContext(HydrationContext),
-  );
-  let onHydrate = _react.useCallback(() => setIsHydrated(true), []);
-  return _react.createElement(
-    HydrationContext.Provider,
-    {
-      value: isHydrated,
-    },
-    isHydrated
-      ? null
-      : _react.createElement(HydrationCheck, {
-          onHydrate: onHydrate,
-        }),
-    children,
-  );
-};
-const HydrationCheck = ({ onHydrate }) => {
-  _react.useEffect(() => void onHydrate(), [onHydrate]);
-  return null;
-};

package/cjs/utils/providers/ScopeProvider.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { Atom, WritableAtom } from 'jotai';
-/**
- * Provider that creates a fresh, isolated jotai store for its children.
- *
- * Should be used with `useScopedAtom` and/or `useScopedSetAtom`.
- *
- * @private
- */
-export declare const ScopeProvider: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
-/**
- * Wrapper over `useAtom` that uses the store from the nearest `ScopeProvider`.
- *
- * If the atom is not set in the current store, it will recursively look in the parent store(s).
- * This is only useful for initial values. Future updates to the parent will not be reflected.
- *
- * @private
- */
-export declare const useScopedAtom: <T>(atom: Atom<T>) => readonly [Awaited<T>, (...args: unknown[]) => unknown];
-/**
- * Wrapper over `useSetAtom` that uses the store from the nearest `ScopeProvider`.
- * @private
- */
-export declare const useScopedSetAtom: <T>(atom: WritableAtom<T, unknown[], unknown>) => (...args: unknown[]) => unknown;

package/cjs/utils/providers/ScopeProvider.js

@@ -1,66 +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, {
-  ScopeProvider: function () {
-    return ScopeProvider;
-  },
-  useScopedAtom: function () {
-    return useScopedAtom;
-  },
-  useScopedSetAtom: function () {
-    return useScopedSetAtom;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _jotai = require('jotai');
-const ScopeContext = _react.createContext({
-  store: (0, _jotai.createStore)(),
-  parentStore: null,
-});
-const ScopeProvider = ({ children }) => {
-  let store = _react.useMemo(() => (0, _jotai.createStore)(), []);
-  let parentStore = _react.useContext(ScopeContext).store;
-  return _react.createElement(
-    ScopeContext.Provider,
-    {
-      value: _react.useMemo(
-        () => ({
-          store,
-          parentStore,
-        }),
-        [store, parentStore],
-      ),
-    },
-    children,
-  );
-};
-const useScopedAtom = (atom) => {
-  let { store, parentStore } = _react.useContext(ScopeContext);
-  let setAtom = useScopedSetAtom(atom);
-  let value = (0, _jotai.useAtomValue)(atom, {
-    store,
-  });
-  let inheritedValue = (0, _jotai.useAtomValue)(atom, {
-    store: parentStore || store,
-  });
-  _react.useEffect(() => {
-    if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
-  });
-  return [value, setAtom];
-};
-const useScopedSetAtom = (atom) => {
-  let { store } = _react.useContext(ScopeContext);
-  return (0, _jotai.useSetAtom)(atom, {
-    store,
-  });
-};

package/cjs/utils/providers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/cjs/utils/providers/index.js

@@ -1,7 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-const _export_star = require('@swc/helpers/_/_export_star');
-_export_star._(require('./HydrationProvider.js'), exports);
-_export_star._(require('./ScopeProvider.js'), exports);

package/cjs/utils/types.d.ts

@@ -1,5 +0,0 @@
-/**
- * This allows custom strings and keeps intellisense for string unions.
- * See https://github.com/Microsoft/TypeScript/issues/29729
- */
-export type AnyString = string & {};

package/cjs/utils/types.js

@@ -1,4 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});

package/esm/core/Alert/Alert.d.ts

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type AlertOwnProps = {
-    /**
-     * Type of the alert.
-     * @default 'informational'
-     */
-    type?: 'positive' | 'warning' | 'negative' | 'informational';
-    /**
-     * Stick the alert to the top.
-     * @default false
-     */
-    isSticky?: boolean;
-};
-type AlertLegacyProps = {
-    /** @deprecated Use `Alert.Action` subcomponent. */
-    clickableText?: React.ReactNode;
-    /** @deprecated Use `Alert.Action` subcomponent. */
-    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
-    /** @deprecated Use `Alert.CloseButton` subcomponent. */
-    onClose?: () => void;
-};
-/**
- * A small box to quickly grab user attention and communicate a brief message
- * @example
- * <Alert>This is an alert.</Alert>
- * @example
- * <Alert.Wrapper type='informational'>
- *  <Alert.Icon />
- *  <Alert.Message>This is an informational alert.</Alert.Message>
- *  <Alert.CloseButton onClick={() => {}} />
- * </Alert.Wrapper>
- * @example
- * <Alert.Wrapper type='positive'>
- *  <Alert.Icon>
- *    <SvgSmileyHappy />
- *  </Alert.Icon>
- *  <Alert.Message>
- *    This is an alert.
- *    <Alert.Action>This is clickable text.</Alert.Action>
- *  </Alert.Message>
- *  <Alert.CloseButton onClick={() => {}}>
- *    <SvgCollapse />
- *  </Alert.CloseButton>
- * </Alert.Wrapper>
- */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
-    /**
-     *  Alert wrapper subcomponent
-     */
-    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
-    /**
-     * 	Alert icon subcomponent
-     */
-    Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
-        fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
-        padded?: boolean;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        as?: "span" | undefined;
-    }>;
-    /**
-     * 	Alert message subcomponent
-     */
-    Message: PolymorphicForwardRefComponent<"span", {}>;
-    /**
-     * 	Alert action subcomponent for the link you want to provide.
-     */
-    Action: PolymorphicForwardRefComponent<"a", {}>;
-    /**
-     * 	Alert close button subcomponent
-     */
-    CloseButton: PolymorphicForwardRefComponent<"button", {}>;
-};
-export {};

package/esm/core/Alert/Alert.js

@@ -1,127 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import {
-  useSafeContext,
-  polymorphic,
-  StatusIconMap,
-  SvgCloseSmall,
-  Box,
-} from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { Icon } from '../Icon/Icon.js';
-import { Anchor } from '../Typography/Anchor.js';
-let AlertContext = React.createContext(void 0);
-let AlertComponent = React.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    type = 'informational',
-    isSticky = false,
-    clickableText,
-    clickableTextProps,
-    onClose,
-    ...rest
-  } = props;
-  return React.createElement(
-    Alert.Wrapper,
-    {
-      type: type,
-      isSticky: isSticky,
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(Alert.Icon, null),
-    React.createElement(
-      Alert.Message,
-      null,
-      children,
-      clickableText
-        ? React.createElement(Alert.Action, clickableTextProps, clickableText)
-        : null,
-    ),
-    onClose
-      ? React.createElement(Alert.CloseButton, {
-          onClick: onClose,
-        })
-      : null,
-  );
-});
-let AlertWrapper = React.forwardRef((props, ref) => {
-  let {
-    children,
-    className,
-    type = 'informational',
-    isSticky = false,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-alert', className),
-      'data-iui-status': type,
-      'data-iui-variant': isSticky ? 'sticky' : void 0,
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(
-      AlertContext.Provider,
-      {
-        value: {
-          type,
-        },
-      },
-      children,
-    ),
-  );
-});
-let AlertIcon = React.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  let { type } = useSafeContext(AlertContext);
-  let StatusIcon = StatusIconMap[type];
-  return React.createElement(
-    Icon,
-    {
-      fill: type,
-      ref: ref,
-      ...rest,
-    },
-    children ?? React.createElement(StatusIcon, null),
-  );
-});
-let AlertMessage = polymorphic.span('iui-alert-message');
-let AlertAction = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { type } = useSafeContext(AlertContext);
-  return React.createElement(
-    Anchor,
-    {
-      as: props.href ? 'a' : 'button',
-      className: cx('iui-button-base', 'iui-alert-link', className),
-      underline: true,
-      'data-iui-status': type,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-let AlertCloseButton = React.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  return React.createElement(
-    IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      'aria-label': 'Close',
-      ref: ref,
-      ...rest,
-    },
-    children ?? React.createElement(SvgCloseSmall, null),
-  );
-});
-export const Alert = Object.assign(AlertComponent, {
-  Wrapper: AlertWrapper,
-  Icon: AlertIcon,
-  Message: AlertMessage,
-  Action: AlertAction,
-  CloseButton: AlertCloseButton,
-});

package/esm/core/Avatar/Avatar.d.ts

@@ -1,55 +0,0 @@
-import { SoftBackgrounds } from '../../utils/index.js';
-import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-type StatusTitles = {
-    [key in Exclude<AvatarStatus, ''>]: string;
-};
-type AvatarProps = {
-    /**
-     * Size of an avatar.
-     * @default 'small'
-     */
-    size?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * Status/Availability of a user.
-     */
-    status?: AvatarStatus;
-    /**
-     * Text which will appear when hovering over the icon.
-     */
-    title?: string;
-    /**
-     * Abbreviation to be displayed.
-     */
-    abbreviation?: string;
-    /**
-     * User image to be displayed. Can be `<img>` or `<svg>` or anything else.
-     */
-    image?: JSX.Element;
-    /**
-     * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
-     */
-    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
-    /**
-     * Translated status messages shown on hover.
-     */
-    translatedStatusTitles?: StatusTitles;
-};
-export declare const defaultStatusTitles: StatusTitles;
-/**
- * Basic avatar component
- * @example
- * <caption>Small icon with abbreviation</caption>
- * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
- * @example
- * <caption>Medium icon with image</caption>
- * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- * @example
- * <caption>Large icon with status</caption>
- * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
- * @example
- * <caption>X-large icon with image</caption>
- * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- */
-export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
-export {};

package/esm/core/Avatar/Avatar.js

@@ -1,53 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-let getBackground = (color) => {
-  if (!color) return '';
-  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
-};
-export const defaultStatusTitles = {
-  away: 'Away',
-  busy: 'Busy',
-  offline: 'Offline',
-  online: 'Online',
-};
-export const Avatar = React.forwardRef((props, ref) => {
-  let {
-    size = 'small',
-    status,
-    abbreviation,
-    image,
-    backgroundColor,
-    title,
-    translatedStatusTitles,
-    className,
-    style,
-    ...rest
-  } = props;
-  let statusTitles = {
-    ...defaultStatusTitles,
-    ...translatedStatusTitles,
-  };
-  return React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-avatar', className),
-      'data-iui-size': 'medium' !== size ? size : void 0,
-      'data-iui-status': status,
-      title: title,
-      style: {
-        backgroundColor: getBackground(backgroundColor),
-        ...style,
-      },
-      ref: ref,
-      ...rest,
-    },
-    image ? null : abbreviation?.substring(0, 2),
-    image,
-    status
-      ? React.createElement(VisuallyHidden, null, statusTitles[status])
-      : null,
-  );
-});

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type AvatarGroupProps = {
-    /**
-     * Max number of avatars unstacked.
-     * @default 5
-     */
-    maxIcons?: number;
-    /**
-     * If true, group will be stacked to take less space.
-     * @default true
-     */
-    stacked?: boolean;
-    /**
-     * If true, group will be animated on hover.
-     * @default false
-     */
-    animated?: boolean;
-    /**
-     * Size of avatars and count avatars.
-     * @default 'small'
-     */
-    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * Avatars in the group.
-     */
-    children: React.ReactNode;
-    /**
-     * Count Avatar props.
-     */
-    countIconProps?: React.ComponentPropsWithRef<'div'>;
-};
-/**
- * Group Avatars together.
- *
- * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
- * this component will show 5 Avatars and Count Avatar with "3" in it.
- *
- * You can add custom Count Avatar behavior by using `countAvatarProps`.
- *
- * @example
- * <AvatarGroup iconSize='medium'>
- *  <Avatar
- *    abbreviation="TR"
- *    backgroundColor={getUserColor("Terry Rivers")}
- *    title="Terry Rivers"
- *  />
- *  <Avatar
- *    abbreviation="RM"
- *    backgroundColor={getUserColor("Robin Mercer")}
- *    title="Robin Mercer"
- *  />
- *  <Avatar
- *    abbreviation="JM"
- *    backgroundColor={getUserColor("Jean Mullins")}
- *    title="Jean Mullins"
- *  />
- * </AvatarGroup>
- */
-export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-export {};

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-export const AvatarGroup = React.forwardRef((props, ref) => {
-  let maxLength = 99;
-  let {
-    children,
-    animated = false,
-    stacked = true,
-    maxIcons = 5,
-    iconSize = 'small',
-    countIconProps,
-    className,
-    ...rest
-  } = props;
-  let childrenArray = React.Children.toArray(children);
-  let childrenLength = childrenArray.length;
-  let getAvatarList = (count) =>
-    childrenArray.slice(0, count).map((child) =>
-      React.cloneElement(child, {
-        status: void 0,
-        size: iconSize,
-      }),
-    );
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-avatar-list',
-        {
-          'iui-animated': animated,
-          'iui-stacked': stacked,
-        },
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-    childrenArray.length > maxIcons + 1 &&
-      React.createElement(
-        React.Fragment,
-        null,
-        getAvatarList(maxIcons),
-        React.createElement(
-          Box,
-          {
-            ...countIconProps,
-            className: cx(
-              'iui-avatar',
-              'iui-avatar-count',
-              countIconProps?.className,
-            ),
-            'data-iui-size': 'medium' !== iconSize ? iconSize : void 0,
-          },
-          childrenLength <= maxLength
-            ? `${childrenLength - maxIcons}`
-            : `${maxLength}+`,
-        ),
-      ),
-  );
-});

package/esm/core/Backdrop/Backdrop.d.ts

@@ -1,9 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type BackdropProps = {
-    /**
-     * Flag whether backdrop should be shown.
-     * @default true
-     */
-    isVisible?: boolean;
-};
-export declare const Backdrop: PolymorphicForwardRefComponent<"div", BackdropProps>;

package/esm/core/Backdrop/Backdrop.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-export const Backdrop = React.forwardRef((props, ref) => {
-  let { isVisible = true, className, ...rest } = props;
-  return React.createElement(Box, {
-    className: cx(
-      'iui-backdrop',
-      {
-        'iui-backdrop-visible': isVisible,
-      },
-      className,
-    ),
-    ref: ref,
-    ...rest,
-  });
-});

package/esm/core/Badge/Badge.d.ts

@@ -1,26 +0,0 @@
-import { SoftBackgrounds } from '../../utils/index.js';
-import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
-type BadgeProps = {
-    /**
-     * Background color of the badge.
-     *
-     * Recommended to use one of the preset colors for statuses and soft backgrounds.
-     *
-     * If not specified, a default neutral background will be used.
-     */
-    backgroundColor?: 'primary' | 'informational' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
-    /**
-     * Badge label.
-     * Always gets converted to uppercase, and truncated if too long.
-     */
-    children: string;
-};
-/**
- * A colorful visual indicator for categorizing items.
- * @example
- * <Badge>Label</Badge>
- * <Badge backgroundColor="sunglow">Label</Badge>
- * <Badge backgroundColor="positive">Label</Badge>
- */
-export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
-export {};