@itwin/itwinui-react 1.34.1 → 1.36.0

package/cjs/core/Table/columns/selectionColumn.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionColumn = exports.SELECTION_CELL_ID = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var Checkbox_1 = require("../../Checkbox");
+var cells_1 = require("../cells");
+exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+var SelectionColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var isDisabled = props.isDisabled;
+    return {
+        id: exports.SELECTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
+            var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
+            var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
+            return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
+        },
+        Cell: function (_a) {
+            var row = _a.row;
+            return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { style: {}, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
+        },
+        cellRenderer: function (props) { return (react_1.default.createElement(cells_1.DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};
+exports.SelectionColumn = SelectionColumn;

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -50,15 +50,31 @@ var DateRangeFilter = function (props) {
     (0, utils_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _h = react_1.default.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined), from = _h[0], setFrom = _h[1];
+    var onFromChange = react_1.default.useCallback(function (date) {
+        setFrom(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        });
+    }, []);
     var _j = react_1.default.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined), to = _j[0], setTo = _j[1];
+    var onToChange = react_1.default.useCallback(function (date) {
+        setTo(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        });
+    }, []);
     var onKeyDown = function (event) {
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }
     };
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: setFrom, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: setTo, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
+        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
+        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
         react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: function () { return setFilter([from, to]); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;

package/cjs/core/Table/hooks/index.d.ts

@@ -1,5 +1,5 @@
-export { EXPANDER_CELL_ID, useExpanderCell } from './useExpanderCell';
-export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
+export { useExpanderCell } from './useExpanderCell';
+export { useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';

package/cjs/core/Table/hooks/index.js

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
+exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.useExpanderCell = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var useExpanderCell_1 = require("./useExpanderCell");
-Object.defineProperty(exports, "EXPANDER_CELL_ID", { enumerable: true, get: function () { return useExpanderCell_1.EXPANDER_CELL_ID; } });
 Object.defineProperty(exports, "useExpanderCell", { enumerable: true, get: function () { return useExpanderCell_1.useExpanderCell; } });
 var useSelectionCell_1 = require("./useSelectionCell");
-Object.defineProperty(exports, "SELECTION_CELL_ID", { enumerable: true, get: function () { return useSelectionCell_1.SELECTION_CELL_ID; } });
 Object.defineProperty(exports, "useSelectionCell", { enumerable: true, get: function () { return useSelectionCell_1.useSelectionCell; } });
 var useSubRowFiltering_1 = require("./useSubRowFiltering");
 Object.defineProperty(exports, "useSubRowFiltering", { enumerable: true, get: function () { return useSubRowFiltering_1.useSubRowFiltering; } });

package/cjs/core/Table/hooks/useExpanderCell.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { CellProps, Hooks, Row } from 'react-table';
-export declare const EXPANDER_CELL_ID = "iui-table-expander";
 export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

package/cjs/core/Table/hooks/useExpanderCell.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,50 +19,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
-var react_1 = __importDefault(require("react"));
-var Buttons_1 = require("../../Buttons");
-exports.EXPANDER_CELL_ID = 'iui-table-expander';
+exports.useExpanderCell = void 0;
+var columns_1 = require("../columns");
 var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: exports.EXPANDER_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Cell: function (props) {
-                var row = props.row;
-                if (!subComponent(row)) {
-                    return null;
-                }
-                else if (expanderCell) {
-                    return expanderCell(props);
-                }
-                else {
-                    return (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
-                            e.stopPropagation();
-                            row.toggleRowExpanded();
-                        }, disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(props.row.original) }, react_1.default.createElement(ChevronRight_1.default, null)));
-                }
-            },
+    hooks.allColumns.push(function (columns) {
+        var hasExpanderColumn = columns.find(function (c) { return c.id === columns_1.EXPANDER_CELL_ID; });
+        if (hasExpanderColumn) {
+            return columns;
         }
-    ], columns, true); });
+        var expanderColumn = (0, columns_1.ExpanderColumn)({
+            subComponent: subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return __spreadArray([
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+        ], columns, true);
+    });
 }; };
 exports.useExpanderCell = useExpanderCell;

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -229,7 +229,10 @@ var useInstanceBeforeDimensions = function (instance) {
 };
 var getPreviousResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(0, headerIndex)
         .reverse()
@@ -237,7 +240,10 @@ var getPreviousResizableHeader = function (headerColumn, instance) {
 };
 var getNextResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(headerIndex + 1)
         .find(function (h) { return !h.disableResizing; });

package/cjs/core/Table/hooks/useSelectionCell.d.ts

@@ -1,3 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -19,52 +8,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectionCell = exports.SELECTION_CELL_ID = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var Checkbox_1 = require("../../Checkbox");
-exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+exports.useSelectionCell = void 0;
+var columns_1 = require("../columns");
 var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
     if (!isSelectable) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: exports.SELECTION_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Header: function (_a) {
-                var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
-                var disabled = rows.every(function (row) { return isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original); });
-                var checked = initialRows.every(function (row) {
-                    return state.selectedRowIds[row.id] || (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original));
-                });
-                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
-            },
-            Cell: function (_a) {
-                var row = _a.row;
-                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
-            },
-        }
-    ], columns, true); });
-    hooks.useInstanceBeforeDimensions.push(function (_a) {
-        var headerGroups = _a.headerGroups;
-        // Fix the parent group of the selection button to not be resizable
-        var selectionGroupHeader = headerGroups[0].headers[0];
-        selectionGroupHeader.canResize = false;
+    hooks.allColumns.push(function (columns) {
+        return columns.find(function (c) { return c.id === columns_1.SELECTION_CELL_ID; })
+            ? columns
+            : __spreadArray([(0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled })], columns, true);
     });
 }; };
 exports.useSelectionCell = useSelectionCell;

package/cjs/core/Table/index.d.ts

@@ -6,5 +6,6 @@ export { DefaultCell, EditableCell } from './cells';
 export type { DefaultCellProps, EditableCellProps } from './cells';
 export { TablePaginator } from './TablePaginator';
 export type { TablePaginatorProps } from './TablePaginator';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns';
 declare const _default: "./Table";
 export default _default;

package/cjs/core/Table/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.tableFilters = exports.FilterButtonBar = exports.BaseFilter = exports.Table = void 0;
+exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.tableFilters = exports.FilterButtonBar = exports.BaseFilter = exports.Table = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -16,4 +16,8 @@ Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return cells_1.EditableCell; } });
 var TablePaginator_1 = require("./TablePaginator");
 Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return TablePaginator_1.TablePaginator; } });
+var columns_1 = require("./columns");
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return columns_1.ActionColumn; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return columns_1.ExpanderColumn; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return columns_1.SelectionColumn; } });
 exports.default = './Table';

package/cjs/core/Table/utils.js

@@ -9,7 +9,7 @@ var getCellStyle = function (column, isTableResizing) {
         style.width = width;
         // This allows flexbox to handle the width of the column on table resize
         if (isTableResizing && column.canResize) {
-            style.flex = Number(column.width) + " 1 " + width;
+            style.flex = Number(column.width) + " " + Number(column.width) + " " + width;
         }
         else {
             style.flex = "0 0 " + width;

package/cjs/core/Toast/Toast.js

@@ -143,7 +143,7 @@ var ToastPresentation = function (props) {
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-" + category, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-status-area' }, react_1.default.createElement(StatusIcon, { className: 'iui-icon' })),
         react_1.default.createElement("div", { className: 'iui-message' }, content),
-        link && (react_1.default.createElement("a", { className: 'iui-anchor', onClick: link.onClick }, link.title)),
+        link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             react_1.default.createElement(CloseSmall_1.default, null)))));
 };

package/cjs/core/Typography/Anchor/Anchor.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/anchor.css';
 export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/cjs/core/Typography/Anchor/Anchor.js

@@ -33,6 +33,7 @@ exports.Anchor = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../../utils");
+require("@itwin/itwinui-css/css/anchor.css");
 exports.Anchor = react_1.default.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     (0, utils_1.useTheme)();

package/cjs/core/index.d.ts

@@ -8,6 +8,8 @@ export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from '.
 export type { ButtonProps, DropdownButtonProps, IconButtonProps, IdeasButtonProps, SplitButtonProps, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
@@ -48,8 +50,8 @@ export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
-export type { ModalProps, ModalButtonBarProps } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';
@@ -64,7 +66,7 @@ export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export type { TagProps, TagContainerProps } from './Tag';

package/cjs/core/index.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -23,6 +24,8 @@ Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function
 Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return Buttons_1.SplitButton; } });
 var ButtonGroup_1 = require("./ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var ColorPicker_1 = require("./ColorPicker");
@@ -85,6 +88,7 @@ Object.defineProperty(exports, "MenuExtraContent", { enumerable: true, get: func
 var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return Modal_1.ModalButtonBar; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return Modal_1.ModalContent; } });
 var ProgressIndicators_1 = require("./ProgressIndicators");
 Object.defineProperty(exports, "ProgressLinear", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressLinear; } });
 Object.defineProperty(exports, "ProgressRadial", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressRadial; } });
@@ -111,6 +115,9 @@ Object.defineProperty(exports, "FilterButtonBar", { enumerable: true, get: funct
 Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return Table_1.DefaultCell; } });
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return Table_1.EditableCell; } });
 Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return Table_1.TablePaginator; } });
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return Table_1.ActionColumn; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return Table_1.ExpanderColumn; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return Table_1.SelectionColumn; } });
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 Object.defineProperty(exports, "TagContainer", { enumerable: true, get: function () { return Tag_1.TagContainer; } });

package/cjs/core/utils/components/Popover.js

@@ -78,7 +78,19 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
         };
     }
     else {
-        computedProps.content = mounted ? props.content : '';
+        // Fixing issue where elements below Popover gets click events.
+        // Tippy uses react Portal, which propagates events by react tree, not dom tree.
+        // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+        var clonedContent = react_1.default.isValidElement(props.content)
+            ? react_1.default.cloneElement(props.content, {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.stopPropagation();
+                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            })
+            : props.content;
+        computedProps.content = mounted ? clonedContent : '';
     }
     return react_1.default.createElement(react_2.default, __assign({}, computedProps, { ref: refs }));
 });

package/cjs/core/utils/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useResizeObserver';
 export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
+export * from './useMediaQuery';

package/cjs/core/utils/hooks/index.js

@@ -21,3 +21,4 @@ __exportStar(require("./useResizeObserver"), exports);
 __exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
+__exportStar(require("./useMediaQuery"), exports);

package/cjs/core/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (queryString: string) => boolean;
+export default useMediaQuery;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var functions_1 = require("../functions");
+var useMediaQuery = function (queryString) {
+    var _a = react_1.default.useState(), matches = _a[0], setMatches = _a[1];
+    react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        var handleChange = function (_a) {
+            var matches = _a.matches;
+            return setMatches(matches);
+        };
+        if (mediaQueryList != undefined) {
+            setMatches(mediaQueryList.matches);
+            try {
+                mediaQueryList.addEventListener('change', handleChange);
+            }
+            catch (_d) {
+                // Safari 13 fallback
+                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+            }
+        }
+        return function () {
+            var _a;
+            try {
+                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+            }
+            catch (_b) {
+                // Safari 13 fallback
+                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+            }
+        };
+    }, [queryString]);
+    return !!matches;
+};
+exports.useMediaQuery = useMediaQuery;
+exports.default = exports.useMediaQuery;

package/cjs/core/utils/hooks/useTheme.d.ts

@@ -6,6 +6,11 @@ export declare type ThemeOptions = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Whether to apply high-contrast versions of light and dark themes.
+     * Will default to user preference if browser supports it.
+     */
+    highContrast?: boolean;
 };
 export declare type ThemeType = 'light' | 'dark' | 'os';
 /**