@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/Table/hooks/useSelectionCell.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSelectionCell", {
+    enumerable: true,
+    get: function() {
+        return useSelectionCell;
+    }
+});
+const _index = require("../columns/index.js");
+const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default')=>(hooks)=>{
+        if (!isSelectable) return;
+        hooks.allColumns.push((columns)=>'single' === selectionMode || columns.find((c)=>c.id === _index.SELECTION_CELL_ID) ? columns : [
+                (0, _index.SelectionColumn)({
+                    isDisabled: isRowDisabled,
+                    density: density
+                }),
+                ...columns
+            ]);
+    };

package/DEV-cjs/core/Table/hooks/useStickyColumns.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useStickyColumns", {
+    enumerable: true,
+    get: function() {
+        return useStickyColumns;
+    }
+});
+const _reacttable = require("react-table");
+_reacttable.actions.setScrolledLeft = 'setScrolledLeft';
+_reacttable.actions.setScrolledRight = 'setScrolledRight';
+const useStickyColumns = (hooks)=>{
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+};
+const reducer = (newState, action)=>{
+    if (action.type === _reacttable.actions.init) return {
+        ...newState,
+        sticky: {}
+    };
+    if (action.type === _reacttable.actions.setScrolledLeft && newState.sticky?.isScrolledToLeft !== action.value) return {
+        ...newState,
+        sticky: {
+            ...newState.sticky,
+            isScrolledToLeft: action.value
+        }
+    };
+    if (action.type === _reacttable.actions.setScrolledRight && newState.sticky?.isScrolledToRight !== action.value) return {
+        ...newState,
+        sticky: {
+            ...newState.sticky,
+            isScrolledToRight: action.value
+        }
+    };
+    return newState;
+};
+const useInstance = (instance)=>{
+    let { flatHeaders } = instance;
+    flatHeaders.forEach((header)=>{
+        if (!header.originalSticky) header.originalSticky = header.sticky ?? 'none';
+        header.sticky = 'none' === header.originalSticky ? void 0 : header.originalSticky;
+    });
+    let hasLeftStickyColumn = false;
+    [
+        ...flatHeaders
+    ].reverse().forEach((header)=>{
+        if ('left' === header.sticky) hasLeftStickyColumn = true;
+        if (hasLeftStickyColumn) header.sticky = 'left';
+    });
+    let hasRightStickyColumn = false;
+    flatHeaders.forEach((header)=>{
+        if ('right' === header.sticky) hasRightStickyColumn = true;
+        if (hasRightStickyColumn) header.sticky = 'right';
+    });
+};

package/DEV-cjs/core/Table/hooks/useSubRowFiltering.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSubRowFiltering", {
+    enumerable: true,
+    get: function() {
+        return useSubRowFiltering;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _defaultFilterFunctions = require("../filters/defaultFilterFunctions.js");
+const useSubRowFiltering = (hasAnySubRows)=>(hooks)=>{
+        hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
+    };
+const useInstance = (hasAnySubRows, instance)=>{
+    let setInitialSubRows = (rows)=>{
+        rows.forEach((row)=>{
+            if (!row.initialSubRows) row.initialSubRows = row.subRows;
+            setInitialSubRows(row.subRows);
+        });
+    };
+    setInitialSubRows(instance.initialRows);
+    let { filteredRows = instance.filteredRows, filteredFlatRows = instance.filteredFlatRows, filteredRowsById = instance.filteredRowsById } = _react.useMemo(()=>{
+        if (!hasAnySubRows) return {};
+        let setSubRows = (rows)=>{
+            rows.forEach((row)=>{
+                row.subRows = row.initialSubRows ?? [];
+                setSubRows(row.subRows);
+            });
+        };
+        setSubRows(instance.initialRows);
+        let currentlyFilteredRows = [
+            ...instance.initialRows
+        ];
+        instance.state.filters.forEach(({ id: columnId, value: filterValue })=>{
+            let column = instance.allColumns.find((c)=>c.id === columnId);
+            if (!column) return;
+            let filterTypes = {
+                ..._defaultFilterFunctions.defaultFilterFunctions,
+                ...instance.filterTypes
+            };
+            let filterFn = 'function' == typeof column.filter ? column.filter : filterTypes[column.filter ?? 'text'];
+            currentlyFilteredRows = currentlyFilteredRows.filter((row)=>handleRowFiltering(row, filterFn, columnId, filterValue));
+        });
+        let filteredRows = [];
+        let filteredFlatRows = [];
+        let filteredRowsById = {};
+        let populateRows = (row)=>{
+            if (0 === row.depth) filteredRows.push(row);
+            filteredFlatRows.push(row);
+            filteredRowsById[row.id] = row;
+            if (row.subRows.length) row.subRows.forEach((r)=>populateRows(r));
+        };
+        currentlyFilteredRows.forEach((row)=>populateRows(row));
+        return {
+            filteredRows,
+            filteredFlatRows,
+            filteredRowsById
+        };
+    }, [
+        instance.allColumns,
+        instance.filterTypes,
+        instance.initialRows,
+        instance.state.filters,
+        hasAnySubRows
+    ]);
+    Object.assign(instance, {
+        filteredRows,
+        filteredFlatRows,
+        filteredRowsById,
+        rows: filteredRows,
+        flatRows: filteredFlatRows,
+        rowsById: filteredRowsById
+    });
+};
+const handleRowFiltering = (row, filterFn, columnId, filterValue)=>{
+    let hasFilteredSubRows = false;
+    row.subRows = row.initialSubRows.filter((subRow)=>{
+        let result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
+        if (result) hasFilteredSubRows = true;
+        return result;
+    });
+    if (hasFilteredSubRows) return true;
+    let result = filterFn([
+        row
+    ], [
+        columnId
+    ], filterValue);
+    return !!result.length;
+};

package/DEV-cjs/core/Table/hooks/useSubRowSelection.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSubRowSelection", {
+    enumerable: true,
+    get: function() {
+        return useSubRowSelection;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const useSubRowSelection = (hooks)=>{
+    hooks.useInstance.push(useInstance);
+};
+const useInstance = (instance)=>{
+    let selectedFlatRows = _react.useMemo(()=>{
+        let selectedFlatRows = [];
+        let setSelectionState = (row, selectedRowIds)=>{
+            let isSomeSubRowsSelected = false;
+            row.initialSubRows.forEach((subRow)=>{
+                setSelectionState(subRow, selectedRowIds);
+                if (subRow.isSelected || subRow.isSomeSelected) isSomeSubRowsSelected = true;
+            });
+            if (selectedRowIds[row.id]) {
+                row.isSelected = true;
+                row.isSomeSelected = false;
+                selectedFlatRows.push(row);
+            } else {
+                row.isSelected = false;
+                row.isSomeSelected = isSomeSubRowsSelected;
+            }
+        };
+        instance.rows.forEach((row)=>setSelectionState(row, instance.state.selectedRowIds));
+        return selectedFlatRows;
+    }, [
+        instance.rows,
+        instance.state.selectedRowIds
+    ]);
+    Object.assign(instance, {
+        selectedFlatRows
+    });
+};

package/DEV-cjs/core/Table/index.js

@@ -0,0 +1,47 @@
+"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, {
+    ActionColumn: function() {
+        return _index2.ActionColumn;
+    },
+    BaseFilter: function() {
+        return _index.BaseFilter;
+    },
+    DefaultCell: function() {
+        return _index1.DefaultCell;
+    },
+    EditableCell: function() {
+        return _index1.EditableCell;
+    },
+    ExpanderColumn: function() {
+        return _index2.ExpanderColumn;
+    },
+    FilterButtonBar: function() {
+        return _index.FilterButtonBar;
+    },
+    SelectionColumn: function() {
+        return _index2.SelectionColumn;
+    },
+    Table: function() {
+        return _Table.Table;
+    },
+    TablePaginator: function() {
+        return _TablePaginator.TablePaginator;
+    },
+    tableFilters: function() {
+        return _index.tableFilters;
+    }
+});
+const _Table = require("./Table.js");
+const _index = require("./filters/index.js");
+const _index1 = require("./cells/index.js");
+const _TablePaginator = require("./TablePaginator.js");
+const _index2 = require("./columns/index.js");

package/DEV-cjs/core/Table/utils.js

@@ -0,0 +1,74 @@
+"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, {
+    TableColumnsContext: function() {
+        return TableColumnsContext;
+    },
+    getCellStyle: function() {
+        return getCellStyle;
+    },
+    getStickyStyle: function() {
+        return getStickyStyle;
+    },
+    getSubRowStyle: function() {
+        return getSubRowStyle;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const getCellStyle = (column, isTableResizing)=>{
+    let style = {};
+    style.flex = "1 1 145px";
+    if (column.width) {
+        let width = 'string' == typeof column.width ? column.width : `${column.width}px`;
+        style.width = width;
+        if (isTableResizing && column.canResize) style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
+        else style.flex = `0 0 ${width}`;
+    }
+    if (column.maxWidth) style.maxWidth = `${column.maxWidth}px`;
+    if (column.minWidth) style.minWidth = `${column.minWidth}px`;
+    return style;
+};
+const getStickyStyle = (column, columnList)=>{
+    if (!column.sticky) return {};
+    let left = 0;
+    for (let col of columnList){
+        if (col.id === column.id) break;
+        left += Number(col.width || col.resizeWidth || 0);
+    }
+    let right = 0;
+    for (let col of [
+        ...columnList
+    ].reverse()){
+        if (col.id === column.id) break;
+        right += Number(col.width || col.resizeWidth || 0);
+    }
+    return {
+        '--iui-table-sticky-left': 'left' === column.sticky ? `${left}px` : void 0,
+        '--iui-table-sticky-right': 'right' === column.sticky ? `${right}px` : void 0
+    };
+};
+const getSubRowStyle = ({ density = 'default', depth = 1 })=>{
+    let cellPadding = 16;
+    let expanderMargin = 8;
+    if ('condensed' === density) {
+        cellPadding = 12;
+        expanderMargin = 4;
+    } else if ('extra-condensed' === density) {
+        cellPadding = 8;
+        expanderMargin = 4;
+    }
+    let multiplier = 26 + expanderMargin;
+    return {
+        paddingInlineStart: cellPadding + depth * multiplier
+    };
+};
+const TableColumnsContext = _react.createContext([]);

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

@@ -0,0 +1,300 @@
+"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, {
+    Tab: function() {
+        return LegacyTab;
+    },
+    Tabs: function() {
+        return Tabs;
+    }
+});
+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 _Icon = require("../Icon/Icon.js");
+const TabsWrapper = _react.forwardRef((props, ref)=>{
+    let { className, children, orientation = 'horizontal', type = 'default', focusActivationMode = 'auto', color = 'blue', defaultValue, value: activeValueProp, onValueChange, ...rest } = props;
+    let [activeValue, setActiveValue] = (0, _index.useControlledState)(defaultValue, activeValueProp, onValueChange);
+    let [stripeProperties, setStripeProperties] = _react.useState({});
+    let [hasSublabel, setHasSublabel] = _react.useState(false);
+    let idPrefix = (0, _index.useId)();
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tabs-wrapper', `iui-${orientation}`, className),
+        ...rest,
+        style: {
+            ...stripeProperties,
+            ...props?.style
+        },
+        ref: ref
+    }, _react.createElement(TabsContext.Provider, {
+        value: {
+            orientation,
+            type,
+            activeValue,
+            setActiveValue,
+            setStripeProperties,
+            idPrefix,
+            focusActivationMode,
+            hasSublabel,
+            setHasSublabel,
+            color
+        }
+    }, children));
+});
+TabsWrapper.displayName = 'Tabs.Wrapper';
+const TabList = _react.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    let { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
+    let isClient = (0, _index.useIsClient)();
+    let tablistRef = _react.useRef(null);
+    let [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)('default' !== type);
+    let refs = (0, _index.useMergedRefs)(ref, tablistRef, tablistSizeRef, useScrollbarGutter());
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tabs', `iui-${type}`, {
+            'iui-green': 'green' === color,
+            'iui-animated': 'default' !== type && isClient,
+            'iui-not-animated': 'default' !== type && !isClient,
+            'iui-large': hasSublabel
+        }, className),
+        role: "tablist",
+        ref: refs,
+        ...rest
+    }, _react.createElement(TabListContext.Provider, {
+        value: {
+            tabsWidth,
+            tablistRef
+        }
+    }, children));
+});
+TabList.displayName = 'Tabs.TabList';
+const Tab = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children, value, label, ...rest } = props;
+    let { orientation, activeValue, setActiveValue, type, setStripeProperties, idPrefix, focusActivationMode } = (0, _index.useSafeContext)(TabsContext);
+    let { tabsWidth, tablistRef } = (0, _index.useSafeContext)(TabListContext);
+    let tabRef = _react.useRef();
+    let isActive = activeValue === value;
+    let isActiveRef = (0, _index.useLatestRef)(isActive);
+    (0, _index.useLayoutEffect)(()=>{
+        if (isActiveRef.current) tabRef.current?.parentElement?.scrollTo({
+            ['horizontal' === orientation ? 'left' : 'top']: tabRef.current?.['horizontal' === orientation ? 'offsetLeft' : 'offsetTop'] - 4,
+            behavior: 'instant'
+        });
+    }, [
+        isActiveRef,
+        orientation
+    ]);
+    (0, _index.useLayoutEffect)(()=>{
+        let updateStripe = ()=>{
+            let currentTabRect = tabRef.current?.getBoundingClientRect();
+            let tabslistRect = tablistRef.current?.getBoundingClientRect();
+            let tabsStripePosition = null != currentTabRect && null != tabslistRect ? {
+                horizontal: currentTabRect.x - tabslistRect.x,
+                vertical: currentTabRect.y - tabslistRect.y
+            } : {
+                horizontal: 0,
+                vertical: 0
+            };
+            setStripeProperties({
+                '--iui-tabs-stripe-size': 'horizontal' === orientation ? `${currentTabRect?.width}px` : `${currentTabRect?.height}px`,
+                '--iui-tabs-stripe-position': 'horizontal' === orientation ? `${tabsStripePosition.horizontal}px` : `${tabsStripePosition.vertical}px`
+            });
+        };
+        if ('default' !== type && isActive) updateStripe();
+    }, [
+        type,
+        orientation,
+        isActive,
+        tabsWidth,
+        setStripeProperties,
+        tablistRef
+    ]);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);
+        let nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
+        let previousTab = tabRef.current?.previousElementSibling ?? allTabs.at(-1);
+        switch(event.key){
+            case 'ArrowDown':
+                if ('vertical' === orientation) {
+                    nextTab?.focus();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowRight':
+                if ('horizontal' === orientation) {
+                    nextTab?.focus();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowUp':
+                if ('vertical' === orientation) {
+                    previousTab?.focus();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowLeft':
+                if ('horizontal' === orientation) {
+                    previousTab?.focus();
+                    event.preventDefault();
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    let setInitialActiveRef = _react.useCallback((element)=>{
+        if (void 0 !== activeValue) return;
+        if (element?.matches(':first-of-type')) setActiveValue(value);
+    }, [
+        activeValue,
+        setActiveValue,
+        value
+    ]);
+    return _react.createElement(_index.ButtonBase, {
+        className: (0, _classnames.default)('iui-tab', className),
+        role: "tab",
+        tabIndex: isActive ? 0 : -1,
+        "aria-selected": isActive,
+        "aria-controls": `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+        ref: (0, _index.useMergedRefs)(tabRef, forwardedRef, setInitialActiveRef),
+        ...rest,
+        id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+        onClick: (0, _index.mergeEventHandlers)(props.onClick, ()=>setActiveValue(value)),
+        onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, onKeyDown),
+        onFocus: (0, _index.mergeEventHandlers)(props.onFocus, ()=>{
+            tabRef.current?.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+            });
+            if ('auto' === focusActivationMode && !props.disabled) setActiveValue(value);
+        })
+    }, label ? _react.createElement(Tabs.TabLabel, null, label) : children);
+});
+Tab.displayName = 'Tabs.Tab';
+const TabIcon = _react.forwardRef((props, ref)=>_react.createElement(_Icon.Icon, {
+        ...props,
+        className: (0, _classnames.default)('iui-tab-icon', props?.className),
+        ref: ref
+    }));
+TabIcon.displayName = 'Tabs.TabIcon';
+const TabLabel = _index.polymorphic.span('iui-tab-label');
+TabLabel.displayName = 'Tabs.TabLabel';
+const TabDescription = _react.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    let { hasSublabel, setHasSublabel } = (0, _index.useSafeContext)(TabsContext);
+    (0, _index.useLayoutEffect)(()=>{
+        if (!hasSublabel) setHasSublabel(true);
+    }, [
+        hasSublabel,
+        setHasSublabel
+    ]);
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-tab-description', className),
+        ref: ref,
+        ...rest
+    }, children);
+});
+TabDescription.displayName = 'Tabs.TabDescription';
+const TabsActions = _react.forwardRef((props, ref)=>{
+    let { wrapperProps, className, children, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        ...wrapperProps,
+        className: (0, _classnames.default)('iui-tabs-actions-wrapper', wrapperProps?.className)
+    }, _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tabs-actions', className),
+        ref: ref,
+        ...rest
+    }, children));
+});
+TabsActions.displayName = 'Tabs.Actions';
+const TabsPanel = _react.forwardRef((props, ref)=>{
+    let { value, className, children, ...rest } = props;
+    let { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tabs-content', className),
+        "aria-labelledby": `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+        role: "tabpanel",
+        hidden: activeValue !== value || void 0,
+        ref: ref,
+        ...rest,
+        id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`
+    }, children);
+});
+TabsPanel.displayName = 'Tabs.Panel';
+const LegacyTabsComponent = _react.forwardRef((props, forwardedRef)=>{
+    let actions;
+    if ('pill' !== props.type && props.actions) {
+        actions = props.actions;
+        props = {
+            ...props
+        };
+        delete props.actions;
+    }
+    let { labels, onTabSelected, focusActivationMode, color, activeIndex: activeIndexProp, tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
+    let [activeIndex, setActiveIndex] = (0, _index.useControlledState)(0, activeIndexProp, onTabSelected);
+    return _react.createElement(TabsWrapper, {
+        className: wrapperClassName,
+        focusActivationMode: focusActivationMode,
+        color: color,
+        value: `${activeIndex}`,
+        onValueChange: (value)=>setActiveIndex(Number(value)),
+        ...rest
+    }, _react.createElement(TabList, {
+        className: tabsClassName,
+        ref: forwardedRef
+    }, labels.map((label, index)=>{
+        let tabValue = `${index}`;
+        return _react.isValidElement(label) ? _react.cloneElement(label, {
+            value: tabValue
+        }) : _react.createElement(LegacyTab, {
+            key: index,
+            value: tabValue,
+            label: label
+        });
+    })), actions && _react.createElement(TabsActions, null, actions), children && _react.createElement(TabsPanel, {
+        value: `${activeIndex}`,
+        className: contentClassName
+    }, children));
+});
+LegacyTabsComponent.displayName = 'Tabs';
+const LegacyTab = _react.forwardRef((props, forwardedRef)=>{
+    let { label, sublabel, startIcon, children, value, ...rest } = props;
+    return _react.createElement(_react.Fragment, null, _react.createElement(Tab, {
+        ...rest,
+        value: value,
+        ref: forwardedRef
+    }, startIcon && _react.createElement(TabIcon, null, startIcon), _react.createElement(TabLabel, null, label), sublabel && _react.createElement(TabDescription, null, sublabel), children));
+});
+const Tabs = Object.assign(LegacyTabsComponent, {
+    Wrapper: TabsWrapper,
+    TabList: TabList,
+    Tab: Tab,
+    TabIcon: TabIcon,
+    TabLabel: TabLabel,
+    TabDescription: TabDescription,
+    Actions: TabsActions,
+    Panel: TabsPanel
+});
+const TabsContext = _react.createContext(void 0);
+TabsContext.displayName = 'TabsContext';
+const TabListContext = _react.createContext(void 0);
+TabListContext.displayName = 'TabListContext';
+const useScrollbarGutter = ()=>_react.useCallback((element)=>{
+        if (element) {
+            if (element.scrollHeight > element.clientHeight) {
+                element.style.scrollbarGutter = 'stable';
+                if (!CSS.supports('scrollbar-gutter: stable')) element.style.overflowY = 'scroll';
+            }
+        }
+    }, []);

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tag", {
+    enumerable: true,
+    get: function() {
+        return Tag;
+    }
+});
+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 _IconButton = require("../Buttons/IconButton.js");
+const _LinkAction = require("../LinkAction/LinkAction.js");
+const Tag = _react.forwardRef((props, forwardedRef)=>{
+    let { className, variant = 'default', children, onRemove, onClick, labelProps, removeButtonProps, ...rest } = props;
+    let shouldUseLinkAction = !!onClick && !!onRemove;
+    return _react.createElement(_index.Box, {
+        as: shouldUseLinkAction ? _LinkAction.LinkBox : onClick ? _index.ButtonBase : 'span',
+        className: (0, _classnames.default)({
+            'iui-tag-basic': 'basic' === variant,
+            'iui-tag': 'default' === variant
+        }, className),
+        ref: forwardedRef,
+        onClick: shouldUseLinkAction ? void 0 : onClick,
+        ...rest
+    }, 'default' === variant ? _react.createElement(_index.Box, {
+        as: shouldUseLinkAction ? _LinkAction.LinkAction : 'span',
+        onClick: shouldUseLinkAction ? onClick : void 0,
+        ...labelProps,
+        className: (0, _classnames.default)('iui-tag-label', labelProps?.className)
+    }, children) : children, onRemove && _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        size: "small",
+        onClick: onRemove,
+        "aria-label": "Delete tag",
+        ...removeButtonProps,
+        className: (0, _classnames.default)('iui-tag-button', removeButtonProps?.className)
+    }, _react.createElement(_index.SvgCloseSmall, {
+        "aria-hidden": true
+    })));
+});
+Tag.displayName = 'Tag';