@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/FileUpload/FileUploadCard.js

@@ -0,0 +1,153 @@
+"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, {
+    FileUploadCard: function() {
+        return FileUploadCard;
+    },
+    FileUploadCardContext: function() {
+        return FileUploadCardContext;
+    }
+});
+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 _index = require("../../utils/index.js");
+const _classnames = _interop_require_default._(require("classnames"));
+const _FileEmptyCard = require("./FileEmptyCard.js");
+const _Anchor = require("../Typography/Anchor.js");
+const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden.js");
+const toBytes = (bytes)=>{
+    let units = [
+        ' bytes',
+        'KB',
+        'MB',
+        'GB',
+        'TB'
+    ];
+    let i = 0;
+    while(bytes >= 1024 && ++i)bytes /= 1024;
+    return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
+};
+const toDate = (dateNumber)=>{
+    let date = new Date(dateNumber);
+    return date.toDateString() + ' ' + date.toLocaleTimeString();
+};
+const FileUploadCardIcon = _index.polymorphic.span('iui-file-card-icon', {
+    children: _react.createElement(_index.SvgDocument, null)
+});
+FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
+const FileUploadCardInfo = _index.polymorphic.span('iui-file-card-text');
+FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+const FileUploadCardTitle = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
+    let title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-file-card-title', className),
+        ref: ref,
+        ...rest
+    }, children ?? title);
+});
+FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+const FileUploadCardDescription = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
+    let description = files.length > 1 ? files[0].name + ', ' + files[1].name : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
+    if (files.length > 2) description += ', and ' + (files.length - 2) + ' others';
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-file-card-description', className),
+        ref: ref,
+        ...rest
+    }, children ?? description);
+});
+FileUploadCardDescription.displayName = 'FileUploadCard.Description';
+const FileUploadCardAction = _index.polymorphic.div('iui-file-card-action');
+FileUploadCardAction.displayName = 'FileUploadCard.Action';
+const FileUploadCardInputLabel = _react.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { inputId } = (0, _index.useSafeContext)(FileUploadCardContext);
+    return _react.createElement(_Anchor.Anchor, {
+        as: "label",
+        ref: ref,
+        htmlFor: inputId,
+        ...rest
+    }, children);
+});
+FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+const FileUploadCardInput = _react.forwardRef((props, ref)=>{
+    let { children, onChange, id, ...rest } = props;
+    let { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, _index.useSafeContext)(FileUploadCardContext);
+    let setNativeFilesRef = _react.useCallback((node)=>{
+        if (!node || !(0, _index.getWindow)()?.DataTransfer) return;
+        let dataTransfer = new DataTransfer();
+        dataTransfer.items.clear();
+        Array.from(files).forEach((file)=>dataTransfer.items.add(file));
+        node.files = dataTransfer.files;
+    }, [
+        files
+    ]);
+    let refs = (0, _index.useMergedRefs)(ref, setNativeFilesRef);
+    _react.useEffect(()=>{
+        if (id && id !== inputId) setInputId(id);
+    }, [
+        id,
+        inputId,
+        setInputId
+    ]);
+    return _react.createElement(_react.Fragment, null, _react.createElement(_VisuallyHidden.VisuallyHidden, {
+        as: "input",
+        type: "file",
+        unhideOnFocus: false,
+        onChange: (0, _index.mergeEventHandlers)(onChange, (e)=>{
+            let _files = Array.from(e.currentTarget.files || []);
+            onFilesChange?.(_files);
+            setInternalFiles(_files);
+        }),
+        ref: refs,
+        id: id ?? inputId,
+        ...rest
+    }), children);
+});
+FileUploadCardInput.displayName = 'FileUploadCard.Input';
+const FileUploadCardComponent = _react.forwardRef((props, ref)=>{
+    let { className, children, files: filesProp, onFilesChange, emptyCard = _react.createElement(_FileEmptyCard.FileEmptyCard, null), input, ...rest } = props;
+    let [internalFiles, setInternalFiles] = _react.useState();
+    let uid = (0, _index.useId)();
+    let [inputId, setInputId] = _react.useState(uid);
+    let files = filesProp ?? internalFiles ?? [];
+    return _react.createElement(FileUploadCardContext.Provider, {
+        value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId
+        }
+    }, files?.length ? _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-file-card', className),
+        ref: ref,
+        ...rest
+    }, children ?? _react.createElement(_react.Fragment, null, _react.createElement(FileUploadCard.Icon, null), _react.createElement(FileUploadCard.Info, null, _react.createElement(FileUploadCard.Title, null), _react.createElement(FileUploadCard.Description, null)), _react.createElement(FileUploadCard.Action, null, _react.createElement(FileUploadCard.InputLabel, null, "Replace")))) : emptyCard, input ?? _react.createElement(FileUploadCard.Input, null));
+});
+const FileUploadCard = Object.assign(FileUploadCardComponent, {
+    Icon: FileUploadCardIcon,
+    Info: FileUploadCardInfo,
+    Title: FileUploadCardTitle,
+    Description: FileUploadCardDescription,
+    Action: FileUploadCardAction,
+    InputLabel: FileUploadCardInputLabel,
+    Input: FileUploadCardInput
+});
+FileUploadCard.displayName = 'FileUploadCard';
+const FileUploadCardContext = _react.createContext(void 0);
+FileUploadCardContext.displayName = 'FileUploadCardContext';

package/DEV-cjs/core/FileUpload/FileUploadTemplate.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FileUploadTemplate", {
+    enumerable: true,
+    get: function() {
+        return FileUploadTemplate;
+    }
+});
+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 _Anchor = require("../Typography/Anchor.js");
+const FileUploadTemplate = _react.forwardRef((props, ref)=>{
+    let { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-file-upload-template', className),
+        ref: ref,
+        ...rest
+    }, _react.createElement(_index.SvgUpload, {
+        className: "iui-template-icon",
+        "aria-hidden": true
+    }), _react.createElement(_index.Box, {
+        className: "iui-template-text"
+    }, _react.createElement(_Anchor.Anchor, {
+        as: "label"
+    }, _react.createElement(_index.Box, {
+        as: "input",
+        className: "iui-browse-input",
+        type: "file",
+        onChange: onChange,
+        multiple: acceptMultiple,
+        accept: acceptType
+    }), label), _react.createElement("div", null, subtitle), children));
+});
+FileUploadTemplate.displayName = 'FileUploadTemplate';

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Flex", {
+    enumerable: true,
+    get: function() {
+        return Flex;
+    }
+});
+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("../../utils/components/Box.js");
+const sizeTokens = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl'
+];
+const getValueForToken = (token)=>{
+    if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
+    return token;
+};
+const FlexComponent = _react.forwardRef((props, ref)=>{
+    let { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return _react.createElement(_Box.Box, {
+        className: (0, _classnames.default)('iui-flex', className),
+        style: {
+            '--iui-flex-display': display,
+            '--iui-flex-direction': flexDirection,
+            '--iui-flex-justify': justifyContent,
+            '--iui-flex-align': alignItems,
+            '--iui-flex-gap': getValueForToken(gap),
+            '--iui-flex-wrap': flexWrap,
+            ...style
+        },
+        ref: ref,
+        ...rest
+    });
+});
+FlexComponent.displayName = 'Flex';
+const FlexSpacer = _react.forwardRef((props, ref)=>{
+    let { flex, className, style, ...rest } = props;
+    return _react.createElement(_Box.Box, {
+        className: (0, _classnames.default)('iui-flex-spacer', className),
+        style: {
+            '--iui-flex-spacer-flex': flex,
+            ...style
+        },
+        ref: ref,
+        ...rest
+    });
+});
+FlexSpacer.displayName = 'Flex.Spacer';
+const FlexItem = _react.forwardRef((props, ref)=>{
+    let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    let _style = {
+        '--iui-flex-item-flex': flex,
+        '--iui-flex-item-align': alignSelf,
+        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+        ...void 0 !== gapBefore && {
+            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)'
+        },
+        ...void 0 !== gapAfter && {
+            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)'
+        },
+        ...style
+    };
+    return _react.createElement(_Box.Box, {
+        className: (0, _classnames.default)('iui-flex-item', className),
+        ref: ref,
+        style: _style,
+        ...rest
+    });
+});
+FlexItem.displayName = 'Flex.Item';
+const Flex = Object.assign(FlexComponent, {
+    Item: FlexItem,
+    Spacer: FlexSpacer
+});

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

@@ -0,0 +1,103 @@
+"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, {
+    Footer: function() {
+        return Footer;
+    },
+    defaultFooterElements: function() {
+        return defaultFooterElements;
+    }
+});
+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 _FooterItem = require("./FooterItem.js");
+const _FooterSeparator = require("./FooterSeparator.js");
+const _FooterList = require("./FooterList.js");
+const _Anchor = require("../Typography/Anchor.js");
+const footerTranslations = {
+    cookies: 'Cookies',
+    legalNotices: 'Legal notices',
+    privacy: 'Privacy',
+    termsOfService: 'Terms of service',
+    termsOfUse: 'Terms of use'
+};
+const defaultFooterElements = [
+    {
+        key: 'copyright',
+        title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`
+    },
+    {
+        key: 'termsOfService',
+        title: footerTranslations.termsOfService,
+        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect'
+    },
+    {
+        key: 'privacy',
+        title: footerTranslations.privacy,
+        url: 'https://www.bentley.com/en/privacy-policy'
+    },
+    {
+        key: 'termsOfUse',
+        title: footerTranslations.termsOfUse,
+        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement'
+    },
+    {
+        key: 'cookies',
+        title: footerTranslations.cookies,
+        url: 'https://www.bentley.com/en/cookie-policy'
+    },
+    {
+        key: 'legalNotices',
+        title: footerTranslations.legalNotices,
+        url: 'https://connect.bentley.com/Legal'
+    }
+];
+const Footer = Object.assign((props)=>{
+    let { children, customElements, translatedTitles, className, ...rest } = props;
+    let titles = {
+        ...footerTranslations,
+        ...translatedTitles
+    };
+    let translatedElements = defaultFooterElements.map((element)=>{
+        if (element.key && titles.hasOwnProperty(element.key)) {
+            let key = element.key;
+            return {
+                ...element,
+                title: titles[key]
+            };
+        }
+        return element;
+    });
+    let elements = translatedElements;
+    if (customElements) elements = 'function' == typeof customElements ? customElements(translatedElements) : [
+        ...translatedElements,
+        ...customElements
+    ];
+    return _react.createElement(_index.Box, {
+        as: "footer",
+        className: (0, _classnames.default)('iui-legal-footer', className),
+        ...rest
+    }, children ? children : _react.createElement(_FooterList.FooterList, null, elements.map((element, index)=>_react.createElement(_react.Fragment, {
+            key: element.key || `${element.title}-${index}`
+        }, index > 0 && _react.createElement(_FooterSeparator.FooterSeparator, null), _react.createElement(_FooterItem.FooterItem, null, element.url ? _react.createElement(_Anchor.Anchor, {
+            href: element.url,
+            target: "_blank",
+            rel: "noreferrer"
+        }, element.title) : element.title)))));
+}, {
+    List: _FooterList.FooterList,
+    Item: _FooterItem.FooterItem,
+    Separator: _FooterSeparator.FooterSeparator
+});
+Footer.displayName = 'Footer';

package/DEV-cjs/core/Footer/FooterItem.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FooterItem", {
+    enumerable: true,
+    get: function() {
+        return FooterItem;
+    }
+});
+const _index = require("../../utils/index.js");
+const FooterItem = _index.polymorphic.li('iui-legal-footer-item');
+FooterItem.displayName = 'Footer.Item';

package/DEV-cjs/core/Footer/FooterList.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FooterList", {
+    enumerable: true,
+    get: function() {
+        return FooterList;
+    }
+});
+const _index = require("../../utils/index.js");
+const FooterList = _index.polymorphic.ul('iui-legal-footer-list');
+FooterList.displayName = 'Footer.List';

package/DEV-cjs/core/Footer/FooterSeparator.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FooterSeparator", {
+    enumerable: true,
+    get: function() {
+        return FooterSeparator;
+    }
+});
+const _index = require("../../utils/index.js");
+const FooterSeparator = _index.polymorphic.li('iui-legal-footer-separator', {
+    'aria-hidden': true
+});
+FooterSeparator.displayName = 'Footer.Separator';

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Header", {
+    enumerable: true,
+    get: function() {
+        return Header;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _IconButton = require("../Buttons/IconButton.js");
+const _index = require("../../utils/index.js");
+const _DropdownMenu = require("../DropdownMenu/DropdownMenu.js");
+const defaultTranslations = {
+    moreOptions: 'More options'
+};
+const Header = _react.forwardRef((props, forwardedRef)=>{
+    let { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
+    let headerTranslations = {
+        ...defaultTranslations,
+        ...translatedStrings
+    };
+    return _react.createElement(_index.Box, {
+        as: "header",
+        className: (0, _classnames.default)('iui-page-header', className),
+        "data-iui-size": isSlim ? 'slim' : void 0,
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        className: "iui-page-header-left"
+    }, appLogo, breadcrumbs && _react.createElement(_index.Box, {
+        className: "iui-page-header-divider"
+    }), breadcrumbs), children && _react.createElement(_index.Box, {
+        className: "iui-page-header-center"
+    }, children), _react.createElement(_index.Box, {
+        className: "iui-page-header-right"
+    }, actions, menuItems && _react.createElement(_DropdownMenu.DropdownMenu, {
+        menuItems: menuItems
+    }, _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        "aria-label": headerTranslations.moreOptions
+    }, _react.createElement(_index.SvgMoreVertical, {
+        "aria-hidden": true
+    })))));
+});
+Header.displayName = 'Header';

package/DEV-cjs/core/Header/HeaderBasicButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeaderBasicButton", {
+    enumerable: true,
+    get: function() {
+        return HeaderBasicButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const HeaderBasicButton = _react.forwardRef((props, ref)=>{
+    let { className, children, startIcon, endIcon, styleType, size, ...rest } = props;
+    return _react.createElement(_index.ButtonBase, {
+        className: (0, _classnames.default)('iui-header-breadcrumb-button', className),
+        ref: ref,
+        ...rest
+    }, startIcon, children, endIcon);
+});

package/DEV-cjs/core/Header/HeaderBreadcrumbs.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeaderBreadcrumbs", {
+    enumerable: true,
+    get: function() {
+        return HeaderBreadcrumbs;
+    }
+});
+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 HeaderBreadcrumbs = _react.forwardRef((props, forwardedRef)=>{
+    let { className, items, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "nav",
+        "aria-label": "breadcrumbs",
+        className: (0, _classnames.default)('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "ol",
+        className: (0, _classnames.default)('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list')
+    }, items.reduce((previous, current, index)=>[
+            ...previous,
+            current,
+            index !== items.length - 1 && _react.createElement(_index.Box, {
+                as: "li",
+                className: "iui-breadcrumbs-separator",
+                key: index
+            }, _react.createElement(_index.SvgChevronRight, {
+                key: `chevron${index}`,
+                "aria-hidden": true,
+                className: "iui-chevron"
+            }))
+        ], [])));
+});
+HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';

package/DEV-cjs/core/Header/HeaderButton.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeaderButton", {
+    enumerable: true,
+    get: function() {
+        return HeaderButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _HeaderSplitButton = require("./HeaderSplitButton.js");
+const _HeaderDropdownButton = require("./HeaderDropdownButton.js");
+const _HeaderBasicButton = require("./HeaderBasicButton.js");
+const HeaderButton = _react.forwardRef((props, ref)=>{
+    let { name, description, htmlName, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
+    let buttonProps = {
+        startIcon: startIcon ? _react.createElement(_index.Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-icon",
+            "aria-hidden": true
+        }, startIcon) : null,
+        children: _react.createElement(_index.Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text"
+        }, _react.createElement(_index.Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text-label"
+        }, name), description && _react.createElement(_index.Box, {
+            as: "span",
+            className: "iui-header-breadcrumb-button-text-sublabel"
+        }, description)),
+        ref: ref,
+        disabled: disabled,
+        name: htmlName,
+        ...!!menuItems && {
+            menuItems
+        },
+        ...rest
+    };
+    let headerButton = props.menuItems && props.onClick ? _react.createElement(_HeaderSplitButton.HeaderSplitButton, buttonProps) : props.menuItems ? _react.createElement(_HeaderDropdownButton.HeaderDropdownButton, buttonProps) : _react.createElement(_HeaderBasicButton.HeaderBasicButton, buttonProps);
+    return _react.createElement(_index.Box, {
+        as: "li",
+        className: "iui-header-breadcrumb-item",
+        "aria-current": isActive ? 'location' : void 0,
+        "aria-disabled": disabled ? 'true' : void 0
+    }, headerButton);
+});
+HeaderButton.displayName = 'HeaderButton';

package/DEV-cjs/core/Header/HeaderDropdownButton.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeaderDropdownButton", {
+    enumerable: true,
+    get: function() {
+        return HeaderDropdownButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _DropdownMenu = require("../DropdownMenu/DropdownMenu.js");
+const _index = require("../../utils/index.js");
+const _HeaderBasicButton = require("./HeaderBasicButton.js");
+const HeaderDropdownButton = _react.forwardRef((props, ref)=>{
+    let { menuItems, className, children, ...rest } = props;
+    let [isMenuOpen, setIsMenuOpen] = _react.useState(false);
+    let [menuWidth, setMenuWidth] = _react.useState(0);
+    let buttonRef = _react.useRef(null);
+    let refs = (0, _index.useMergedRefs)(ref, buttonRef);
+    _react.useEffect(()=>{
+        if (buttonRef.current) setMenuWidth(buttonRef.current.offsetWidth);
+    }, [
+        children
+    ]);
+    return _react.createElement(_DropdownMenu.DropdownMenu, {
+        menuItems: menuItems,
+        style: {
+            minInlineSize: menuWidth
+        },
+        onVisibleChange: (open)=>setIsMenuOpen(open)
+    }, _react.createElement(_HeaderBasicButton.HeaderBasicButton, {
+        className: (0, _classnames.default)('iui-header-breadcrumb-button', className),
+        ref: refs,
+        "aria-label": "Dropdown",
+        endIcon: isMenuOpen ? _react.createElement(_index.SvgCaretUpSmall, {
+            className: "iui-header-breadcrumb-button-dropdown-icon",
+            "aria-hidden": true
+        }) : _react.createElement(_index.SvgCaretDownSmall, {
+            className: "iui-header-breadcrumb-button-dropdown-icon",
+            "aria-hidden": true
+        }),
+        ...rest
+    }, children));
+});