@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/Tag/TagContainer.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagContainer", {
+    enumerable: true,
+    get: function() {
+        return TagContainer;
+    }
+});
+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 TagContainer = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children, overflow, background = 'none', ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tag-container', {
+            [`iui-${overflow}`]: !!overflow,
+            'iui-visible': 'none' !== background
+        }, className),
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+TagContainer.displayName = 'TagContainer';

package/DEV-cjs/core/Textarea/Textarea.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Textarea", {
+    enumerable: true,
+    get: function() {
+        return Textarea;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Input = require("../Input/Input.js");
+const Textarea = _react.forwardRef((props, forwardedRef)=>_react.createElement(_Input.Input, {
+        as: "textarea",
+        rows: 3,
+        ref: forwardedRef,
+        ...props
+    }));
+Textarea.displayName = 'Textarea';

package/DEV-cjs/core/ThemeProvider/ThemeContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThemeContext", {
+    enumerable: true,
+    get: function() {
+        return ThemeContext;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const ThemeContext = _react.createContext(void 0);

package/DEV-cjs/core/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThemeProvider", {
+    enumerable: true,
+    get: function() {
+        return ThemeProvider;
+    }
+});
+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 _reactdom = _interop_require_wildcard._(require("react-dom"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _ThemeContext = require("./ThemeContext.js");
+const _Toaster = require("../Toast/Toaster.js");
+const _jotai = require("jotai");
+const _meta = require("../../utils/meta.js");
+const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
+const ownerDocumentAtom = (0, _jotai.atom)(void 0);
+const ThemeProvider = _react.forwardRef((props, forwardedRef)=>{
+    var _themeOptions, _themeOptions1;
+    let { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = 'inherit' === themeProp, ...rest } = props;
+    let [rootElement, setRootElement] = _react.useState(null);
+    let parent = useParentThemeAndContext(rootElement);
+    let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
+    (_themeOptions = themeOptions).applyBackground ?? (_themeOptions.applyBackground = !parent.theme);
+    (_themeOptions1 = themeOptions).highContrast ?? (_themeOptions1.highContrast = 'inherit' === themeProp ? parent.highContrast : void 0);
+    let [portalContainerFromParent] = (0, _index.useScopedAtom)(_index.portalContainerAtom);
+    let contextValue = _react.useMemo(()=>({
+            theme,
+            themeOptions
+        }), [
+        theme,
+        JSON.stringify(themeOptions)
+    ]);
+    return _react.createElement(_index.ScopeProvider, null, _react.createElement(_index.HydrationProvider, null, _react.createElement(_ThemeContext.ThemeContext.Provider, {
+        value: contextValue
+    }, _react.createElement(_Toaster.ToastProvider, null, includeCss && rootElement ? _react.createElement(FallbackStyles, {
+        root: rootElement
+    }) : null, _react.createElement(Root, {
+        theme: theme,
+        themeOptions: themeOptions,
+        ref: (0, _index.useMergedRefs)(forwardedRef, setRootElement, useIuiDebugRef),
+        ...rest
+    }, children, _react.createElement(PortalContainer, {
+        portalContainerProp: portalContainerProp,
+        portalContainerFromParent: portalContainerFromParent,
+        isInheritingTheme: 'inherit' === themeProp
+    }))))));
+});
+ThemeProvider.displayName = 'ThemeProvider';
+const Root = _react.forwardRef((props, forwardedRef)=>{
+    let { theme, children, themeOptions, className, ...rest } = props;
+    let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
+    let prefersHighContrast = (0, _index.useMediaQuery)('(prefers-contrast: more)');
+    let shouldApplyDark = 'dark' === theme || 'os' === theme && prefersDark;
+    let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+    let shouldApplyBackground = themeOptions?.applyBackground;
+    let [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
+    let findOwnerDocumentFromRef = _react.useCallback((el)=>{
+        if (el && el.ownerDocument !== ownerDocument) setOwnerDocument(el.ownerDocument);
+    }, [
+        ownerDocument,
+        setOwnerDocument
+    ]);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-root', {
+            'iui-root-background': shouldApplyBackground
+        }, className),
+        "data-iui-theme": shouldApplyDark ? 'dark' : 'light',
+        "data-iui-contrast": shouldApplyHC ? 'high' : 'default',
+        ref: (0, _index.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef),
+        ...rest
+    }, children);
+});
+const useParentThemeAndContext = (rootElement)=>{
+    let parentContext = _react.useContext(_ThemeContext.ThemeContext);
+    let [parentThemeState, setParentTheme] = _react.useState(parentContext?.theme);
+    let [parentHighContrastState, setParentHighContrastState] = _react.useState(parentContext?.themeOptions?.highContrast);
+    let parentThemeRef = (0, _index.useLatestRef)(parentContext?.theme);
+    (0, _index.useLayoutEffect)(()=>{
+        if (parentThemeRef.current) return;
+        let closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+        if (!closestRoot) return;
+        let synchronizeTheme = ()=>{
+            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
+        };
+        synchronizeTheme();
+        let observer = new MutationObserver(()=>synchronizeTheme());
+        observer.observe(closestRoot, {
+            attributes: true,
+            attributeFilter: [
+                'data-iui-theme',
+                'data-iui-contrast'
+            ]
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        rootElement,
+        parentThemeRef
+    ]);
+    return {
+        theme: parentContext?.theme ?? parentThemeState,
+        highContrast: parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
+        context: parentContext
+    };
+};
+const PortalContainer = _react.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme })=>{
+    let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
+    let setPortalContainer = (0, _index.useScopedSetAtom)(_index.portalContainerAtom);
+    let id = (0, _index.useId)();
+    let isHydrated = 'hydrated' === (0, _index.useHydration)();
+    if (!isHydrated) return null;
+    if (portalContainerProp) return _react.createElement(PortaledToaster, {
+        target: portalContainerProp
+    });
+    if (!isInheritingTheme || !portalContainerFromParent || !!ownerDocument && portalContainerFromParent.ownerDocument !== ownerDocument) return _react.createElement("div", {
+        style: {
+            display: 'contents'
+        },
+        ref: setPortalContainer,
+        id: id
+    }, _react.createElement(_Toaster.Toaster, null));
+    return _react.createElement(PortaledToaster, {
+        target: portalContainerFromParent
+    });
+});
+const PortaledToaster = ({ target })=>{
+    let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(_index.portalContainerAtom);
+    _react.useEffect(()=>{
+        if (target && target !== portalContainer) setPortalContainer(target);
+    });
+    return target ? _reactdom.createPortal(_react.createElement(_Toaster.Toaster, null), target) : null;
+};
+const FallbackStyles = ({ root })=>{
+    (0, _index.useLayoutEffect)(()=>{
+        if ('yes' === getComputedStyle(root).getPropertyValue(`--_iui-v${versionWithoutDots}`)) return;
+        if (_index.isUnitTest) return;
+        (async ()=>{
+            try {
+                await Promise.resolve().then(()=>_interop_require_wildcard._(require("../../../styles.css")));
+            } catch (error) {
+                console.log('Error loading styles.css locally', error);
+                let css = await (0, _index.importCss)('https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css');
+                document.adoptedStyleSheets = [
+                    ...document.adoptedStyleSheets,
+                    css.default
+                ];
+            }
+        })();
+    }, [
+        root
+    ]);
+    return _react.createElement(_react.Fragment, null);
+};
+const useIuiDebugRef = ()=>{
+    var _globalThis;
+    let _globalThis1 = globalThis;
+    (_globalThis = _globalThis1).__iui || (_globalThis.__iui = {
+        versions: new Set()
+    });
+    if (!_index.isUnitTest) _globalThis1.__iui.versions.add = (version)=>{
+        Set.prototype.add.call(_globalThis1.__iui.versions, version);
+        if (_globalThis1.__iui.versions.size > 1) {
+            _globalThis1.__iui._shouldWarn = true;
+            if (_globalThis1.__iui._warnTimeout) clearTimeout(_globalThis1.__iui._warnTimeout);
+            _globalThis1.__iui._warnTimeout = setTimeout(()=>{
+                if (_globalThis1.__iui._shouldWarn) {
+                    console.warn("Multiple versions of iTwinUI were detected on this page. This can lead to unexpected behavior and duplicated code in the bundle. Make sure you're using a single iTwinUI instance across your app. https://github.com/iTwin/iTwinUI/wiki/Version-conflicts");
+                    console.groupCollapsed('iTwinUI versions detected:');
+                    let versionsTable = [];
+                    _globalThis1.__iui.versions.forEach((version)=>{
+                        versionsTable.push(JSON.parse(version));
+                    });
+                    console.table(versionsTable);
+                    console.groupEnd();
+                    _globalThis1.__iui._shouldWarn = false;
+                }
+            }, 3000);
+        }
+    };
+    _globalThis1.__iui.versions.add(JSON.stringify(_meta.meta));
+};

package/DEV-cjs/core/Tile/Tile.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tile", {
+    enumerable: true,
+    get: function() {
+        return Tile;
+    }
+});
+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 _DropdownMenu = require("../DropdownMenu/DropdownMenu.js");
+const _IconButton = require("../Buttons/IconButton.js");
+const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
+const _LinkAction = require("../LinkAction/LinkAction.js");
+const TileContext = _react.createContext(void 0);
+TileContext.displayName = 'TileContext';
+const TileWrapper = _react.forwardRef((props, forwardedRef)=>{
+    let { className, status, variant, isNew, isSelected, isLoading, isDisabled, ...rest } = props;
+    let [localActionable, setLocalActionable] = _react.useState(false);
+    let isActionable = localActionable;
+    return _react.createElement(TileContext.Provider, {
+        value: {
+            status,
+            variant,
+            isNew,
+            isSelected,
+            isLoading,
+            isActionable,
+            isDisabled,
+            setActionable: setLocalActionable
+        }
+    }, _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tile', {
+            'iui-folder': 'folder' === variant,
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading
+        }, className),
+        "aria-disabled": isDisabled,
+        ref: forwardedRef,
+        ...rest
+    }));
+});
+TileWrapper.displayName = 'Tile.Wrapper';
+const TileAction = _react.forwardRef((props, forwardedRef)=>{
+    let { onClick, children, href, ...rest } = props;
+    let { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
+    _react.useEffect(()=>{
+        if (!(0, _index.supportsHas)()) setActionable(true);
+    }, [
+        setActionable
+    ]);
+    return _react.createElement(_LinkAction.LinkAction, {
+        as: props.href ? 'a' : 'button',
+        href: href,
+        onClick: isDisabled ? void 0 : onClick,
+        "aria-disabled": isDisabled,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+TileAction.displayName = 'Tile.Action';
+const TileThumbnailArea = (0, _index.polymorphic)('iui-tile-thumbnail');
+TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
+const TileThumbnailPicture = _react.forwardRef((props, forwardedRef)=>{
+    let { className, url, children, ...rest } = props;
+    if (url) return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tile-thumbnail-picture', className),
+        style: {
+            backgroundImage: 'string' == typeof url ? `url(${url})` : void 0
+        },
+        ref: forwardedRef,
+        ...rest
+    });
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-thumbnail-icon', className),
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
+const TileQuickAction = (0, _index.polymorphic)('iui-tile-thumbnail-quick-action');
+TileQuickAction.displayName = 'Tile.QuickAction';
+const TileTypeIndicator = (0, _index.polymorphic)('iui-tile-thumbnail-type-indicator');
+TileTypeIndicator.displayName = 'Tile.TypeIndicator';
+const TileIconButton = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children, ...rest } = props;
+    return _react.createElement(_IconButton.IconButton, {
+        className: (0, _classnames.default)('iui-tile-thumbnail-button', className),
+        styleType: "borderless",
+        size: "small",
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+TileIconButton.displayName = 'Tile.IconButton';
+const TileBadgeContainer = (0, _index.polymorphic)('iui-tile-thumbnail-badge-container');
+TileBadgeContainer.displayName = 'Tile.BadgeContainer';
+const TileName = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children, name, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tile-name', className),
+        ref: forwardedRef,
+        ...rest
+    }, children ?? name);
+});
+TileBadgeContainer.displayName = 'Tile.Name';
+const TileNameIcon = _react.forwardRef((props, forwardedRef)=>{
+    let { children, className, ...rest } = props;
+    let { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(TileContext);
+    let StatusIcon = !!status && _index.StatusIconMap[status];
+    let icon;
+    if (StatusIcon) icon = _react.createElement(StatusIcon, {
+        "aria-hidden": true
+    });
+    if (isLoading) icon = _react.createElement(_ProgressRadial.ProgressRadial, {
+        size: "x-small",
+        "aria-hidden": true,
+        indeterminate: true
+    });
+    if (isSelected) icon = _react.createElement(_index.SvgCheckmark, {
+        "aria-hidden": true
+    });
+    if (isNew) icon = _react.createElement(_index.SvgNew, {
+        "aria-hidden": true
+    });
+    return children || icon ? _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tile-status-icon', className),
+        ref: forwardedRef,
+        ...rest
+    }, children ?? icon) : null;
+});
+TileNameIcon.displayName = 'Tile.NameIcon';
+const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
+TileNameLabel.displayName = 'Tile.NameLabel';
+const TileContentArea = (0, _index.polymorphic)('iui-tile-content');
+TileContentArea.displayName = 'Tile.ContentArea';
+const TileDescription = (0, _index.polymorphic)('iui-tile-description');
+TileDescription.displayName = 'Tile.Description';
+const TileMetadata = (0, _index.polymorphic)('iui-tile-metadata');
+TileMetadata.displayName = 'Tile.Metadata';
+const TileMoreOptions = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children = [], buttonProps, ...rest } = props;
+    let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tile-more-options', {
+            'iui-visible': isMenuVisible
+        }, className),
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_DropdownMenu.DropdownMenu, {
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close)=>children?.map((option)=>_react.cloneElement(option, {
+                    onClick: (value)=>{
+                        close();
+                        option.props.onClick?.(value);
+                    }
+                }))
+    }, _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        size: "small",
+        "aria-label": "More options",
+        ...buttonProps
+    }, _react.createElement(_index.SvgMore, null))));
+});
+TileMoreOptions.displayName = 'Tile.MoreOptions';
+const TileButtons = (0, _index.polymorphic)('iui-tile-buttons');
+TileButtons.displayName = 'Tile.Buttons';
+const TileComponent = _react.forwardRef((props, forwardedRef)=>{
+    let { name, description, status, isNew, isLoading, isSelected, thumbnail, badge, leftIcon, rightIcon, buttons, metadata, moreOptions, children, isActionable, isDisabled, onClick, ...rest } = props;
+    return _react.createElement(TileWrapper, {
+        ref: forwardedRef,
+        isNew: isNew,
+        isSelected: isSelected,
+        isLoading: isLoading,
+        status: status,
+        isDisabled: isDisabled,
+        ...rest
+    }, _react.createElement(TileName, null, (status || isNew || isLoading || isSelected) && _react.createElement(TileNameIcon, null), _react.createElement(TileNameLabel, null, isActionable ? _react.createElement(TileAction, {
+        onClick: isDisabled ? void 0 : onClick,
+        "aria-disabled": isDisabled
+    }, name) : name)), thumbnail && _react.createElement(TileThumbnailArea, null, 'string' != typeof thumbnail ? _react.createElement(TileThumbnailPicture, null, thumbnail) : _react.createElement(TileThumbnailPicture, {
+        url: thumbnail
+    }), badge && _react.createElement(TileBadgeContainer, null, badge), leftIcon && _react.createElement(TileTypeIndicator, null, leftIcon), rightIcon && _react.createElement(TileQuickAction, null, rightIcon)), _react.createElement(TileContentArea, null, description && _react.createElement(TileDescription, null, description), moreOptions && _react.createElement(TileMoreOptions, null, moreOptions), metadata && _react.createElement(TileMetadata, null, metadata), children), buttons && _react.createElement(TileButtons, null, buttons));
+});
+TileComponent.displayName = 'Tile';
+const Tile = Object.assign(TileComponent, {
+    Wrapper: TileWrapper,
+    ThumbnailArea: TileThumbnailArea,
+    ThumbnailPicture: TileThumbnailPicture,
+    QuickAction: TileQuickAction,
+    TypeIndicator: TileTypeIndicator,
+    BadgeContainer: TileBadgeContainer,
+    IconButton: TileIconButton,
+    Name: TileName,
+    NameIcon: TileNameIcon,
+    NameLabel: TileNameLabel,
+    Action: TileAction,
+    ContentArea: TileContentArea,
+    Description: TileDescription,
+    Metadata: TileMetadata,
+    MoreOptions: TileMoreOptions,
+    Buttons: TileButtons
+});