@itwin/itwinui-react 1.36.0 → 1.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/cjs/core/Header/HeaderButton.js +1 -0
  3. package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts +33 -0
  4. package/cjs/core/SkipToContentLink/SkipToContentLink.js +50 -0
  5. package/cjs/core/SkipToContentLink/index.d.ts +4 -0
  6. package/cjs/core/SkipToContentLink/index.js +10 -0
  7. package/cjs/core/Surface/Surface.d.ts +32 -0
  8. package/cjs/core/Surface/Surface.js +70 -0
  9. package/cjs/core/Surface/index.d.ts +4 -0
  10. package/cjs/core/Surface/index.js +10 -0
  11. package/cjs/core/Table/Table.d.ts +6 -0
  12. package/cjs/core/Table/Table.js +19 -9
  13. package/cjs/core/Table/hooks/useSelectionCell.d.ts +1 -1
  14. package/cjs/core/Table/hooks/useSelectionCell.js +3 -2
  15. package/cjs/core/Tag/Tag.js +6 -3
  16. package/cjs/core/Tile/Tile.d.ts +6 -2
  17. package/cjs/core/Tile/Tile.js +7 -2
  18. package/cjs/core/index.d.ts +4 -0
  19. package/cjs/core/index.js +6 -2
  20. package/esm/core/Header/HeaderButton.js +1 -0
  21. package/esm/core/SkipToContentLink/SkipToContentLink.d.ts +33 -0
  22. package/esm/core/SkipToContentLink/SkipToContentLink.js +44 -0
  23. package/esm/core/SkipToContentLink/index.d.ts +4 -0
  24. package/esm/core/SkipToContentLink/index.js +6 -0
  25. package/esm/core/Surface/Surface.d.ts +32 -0
  26. package/esm/core/Surface/Surface.js +64 -0
  27. package/esm/core/Surface/index.d.ts +4 -0
  28. package/esm/core/Surface/index.js +6 -0
  29. package/esm/core/Table/Table.d.ts +6 -0
  30. package/esm/core/Table/Table.js +19 -9
  31. package/esm/core/Table/hooks/useSelectionCell.d.ts +1 -1
  32. package/esm/core/Table/hooks/useSelectionCell.js +3 -2
  33. package/esm/core/Tag/Tag.js +6 -3
  34. package/esm/core/Tile/Tile.d.ts +6 -2
  35. package/esm/core/Tile/Tile.js +7 -2
  36. package/esm/core/index.d.ts +4 -0
  37. package/esm/core/index.js +2 -0
  38. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.37.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.36.0...v1.37.0) (2022-04-21)
4
+
5
+ ### What's new
6
+
7
+ * **SkipToContent:** Add `SkipToContent` Component ([#618](https://www.github.com/iTwin/iTwinUI-react/issues/618)) ([5d56809](https://www.github.com/iTwin/iTwinUI-react/commit/5d56809c46ad312402669f9cb2dbf6c8d3c733ad))
8
+ * **Surface:** Add `Surface` component ([#624](https://www.github.com/iTwin/iTwinUI-react/issues/624)) ([aa8f992](https://www.github.com/iTwin/iTwinUI-react/commit/aa8f99228cd4069bcba237c4a599d4735beccd0e))
9
+ * **Table:** Single selection of rows ([#628](https://www.github.com/iTwin/iTwinUI-react/issues/628)) ([b8e0bf6](https://www.github.com/iTwin/iTwinUI-react/commit/b8e0bf63cbb07d8bd21fc165a505af1388e57a98))
10
+ * **Tile:** Add `isActionable` prop to use for interactive tile ([#631](https://www.github.com/iTwin/iTwinUI-react/issues/631)) ([abfb807](https://www.github.com/iTwin/iTwinUI-react/commit/abfb8073c129c06488be276e4d301b89bf4588d5))
11
+
12
+ ### Fixes
13
+
14
+ * **Table:** Add support for `preventDefault` in row click events ([#629](https://www.github.com/iTwin/iTwinUI-react/issues/629)) ([997897d](https://www.github.com/iTwin/iTwinUI-react/commit/997897d438ff00ed9d63da1745c81f37957c14ba))
15
+ * **Header:** Fix `HeaderButton` spacing through css package update ([4094a3b](https://www.github.com/iTwin/iTwinUI-react/commit/4094a3bc94c8e589b4dbc6a2fd68f4f00389d941))
16
+
3
17
  ## [1.36.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.35.0...v1.36.0) (2022-04-15)
4
18
 
5
19
  ### What's new
package/cjs/core/Header/HeaderButton.js CHANGED
@@ -61,6 +61,7 @@ exports.HeaderButton = react_1.default.forwardRef(function (props, ref) {
61
61
  : undefined, styleType: 'borderless', className: (0, classnames_1.default)({
62
62
  'iui-header-button': !isSplitButton(props),
63
63
  'iui-header-split-button': isSplitButton(props),
64
+ 'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
64
65
  'iui-active': isActive,
65
66
  }, className), 'aria-current': isActive ? 'location' : undefined, children: (react_1.default.createElement(react_1.default.Fragment, null,
66
67
  react_1.default.createElement("div", null, name),
package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import '@itwin/itwinui-css/css/skip-to-content.css';
3
+ export declare type SkipToContentLinkProps = {
4
+ /**
5
+ * The id of the main content that the link directs to. Don't forget the #!
6
+ */
7
+ href: string;
8
+ /**
9
+ * Localize 'Skip to main content' label.
10
+ * @default 'Skip to main content'
11
+ */
12
+ children?: React.ReactNode;
13
+ } & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
14
+ /**
15
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
16
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
17
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
18
+ * @example
19
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
20
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
21
+ */
22
+ export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
23
+ /**
24
+ * The id of the main content that the link directs to. Don't forget the #!
25
+ */
26
+ href: string;
27
+ /**
28
+ * Localize 'Skip to main content' label.
29
+ * @default 'Skip to main content'
30
+ */
31
+ children?: React.ReactNode;
32
+ } & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
33
+ export default SkipToContentLink;
package/cjs/core/SkipToContentLink/SkipToContentLink.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ exports.SkipToContentLink = void 0;
29
+ /*---------------------------------------------------------------------------------------------
30
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
31
+ * See LICENSE.md in the project root for license terms and full copyright notice.
32
+ *--------------------------------------------------------------------------------------------*/
33
+ var react_1 = __importDefault(require("react"));
34
+ var classnames_1 = __importDefault(require("classnames"));
35
+ var utils_1 = require("../utils");
36
+ require("@itwin/itwinui-css/css/skip-to-content.css");
37
+ /**
38
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
39
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
40
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
41
+ * @example
42
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
43
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
44
+ */
45
+ exports.SkipToContentLink = react_1.default.forwardRef(function (props, ref) {
46
+ var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
47
+ (0, utils_1.useTheme)();
48
+ return (react_1.default.createElement("a", __assign({ ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className) }, rest), children));
49
+ });
50
+ exports.default = exports.SkipToContentLink;
package/cjs/core/SkipToContentLink/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { SkipToContentLink } from './SkipToContentLink';
2
+ export type { SkipToContentLinkProps } from './SkipToContentLink';
3
+ declare const _default: "./SkipToContentLink";
4
+ export default _default;
package/cjs/core/SkipToContentLink/index.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SkipToContentLink = void 0;
4
+ /*---------------------------------------------------------------------------------------------
5
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
6
+ * See LICENSE.md in the project root for license terms and full copyright notice.
7
+ *--------------------------------------------------------------------------------------------*/
8
+ var SkipToContentLink_1 = require("./SkipToContentLink");
9
+ Object.defineProperty(exports, "SkipToContentLink", { enumerable: true, get: function () { return SkipToContentLink_1.SkipToContentLink; } });
10
+ exports.default = './SkipToContentLink';
package/cjs/core/Surface/Surface.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { CommonProps } from '../utils';
3
+ import '@itwin/itwinui-css/css/surface.css';
4
+ export declare type SurfaceProps = {
5
+ /**
6
+ * Sets the elevation of the surface
7
+ * @default 0
8
+ */
9
+ elevation?: 0 | 1 | 2 | 3 | 4 | 5;
10
+ /**
11
+ * Content in the surface.
12
+ */
13
+ children: React.ReactNode;
14
+ } & Omit<CommonProps, 'title'>;
15
+ /**
16
+ * The Surface container allows content to appear elevated through the use of a drop shadow
17
+ * @example
18
+ * <Surface>Surface Content</Surface>
19
+ * <Surface elevation={2}>Surface Content</Surface>
20
+ */
21
+ export declare const Surface: React.ForwardRefExoticComponent<{
22
+ /**
23
+ * Sets the elevation of the surface
24
+ * @default 0
25
+ */
26
+ elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
27
+ /**
28
+ * Content in the surface.
29
+ */
30
+ children: React.ReactNode;
31
+ } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
32
+ export default Surface;
package/cjs/core/Surface/Surface.js ADDED
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ exports.Surface = void 0;
29
+ /*---------------------------------------------------------------------------------------------
30
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
31
+ * See LICENSE.md in the project root for license terms and full copyright notice.
32
+ *--------------------------------------------------------------------------------------------*/
33
+ var react_1 = __importDefault(require("react"));
34
+ var classnames_1 = __importDefault(require("classnames"));
35
+ var utils_1 = require("../utils");
36
+ require("@itwin/itwinui-css/css/surface.css");
37
+ /**
38
+ * Helper function that returns one of the preset surface elevation values.
39
+ */
40
+ var getSurfaceElevationValue = function (elevation) {
41
+ switch (elevation) {
42
+ case 1:
43
+ return '0 1px 5px rgba(0, 0, 0, 0.25)';
44
+ case 2:
45
+ return '0 1px 10px rgba(0, 0, 0, 0.25)';
46
+ case 3:
47
+ return '0 3px 14px rgba(0, 0, 0, 0.25)';
48
+ case 4:
49
+ return '0 6px 30px rgba(0, 0, 0, 0.25)';
50
+ case 5:
51
+ return '0 9px 46px rgba(0, 0, 0, 0.25)';
52
+ default:
53
+ return 'none';
54
+ }
55
+ };
56
+ /**
57
+ * The Surface container allows content to appear elevated through the use of a drop shadow
58
+ * @example
59
+ * <Surface>Surface Content</Surface>
60
+ * <Surface elevation={2}>Surface Content</Surface>
61
+ */
62
+ exports.Surface = react_1.default.forwardRef(function (props, ref) {
63
+ var _a, _b, _c;
64
+ var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
65
+ (0, utils_1.useTheme)();
66
+ var _style = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
67
+ ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
68
+ return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref }, rest), children));
69
+ });
70
+ exports.default = exports.Surface;
package/cjs/core/Surface/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Surface } from './Surface';
2
+ export type { SurfaceProps } from './Surface';
3
+ declare const _default: "./Surface";
4
+ export default _default;
package/cjs/core/Surface/index.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Surface = void 0;
4
+ /*---------------------------------------------------------------------------------------------
5
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
6
+ * See LICENSE.md in the project root for license terms and full copyright notice.
7
+ *--------------------------------------------------------------------------------------------*/
8
+ var Surface_1 = require("./Surface");
9
+ Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return Surface_1.Surface; } });
10
+ exports.default = './Surface';
package/cjs/core/Table/Table.d.ts CHANGED
@@ -64,6 +64,12 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
64
64
  * Handler for when a row is clicked. Must be memoized.
65
65
  */
66
66
  onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
67
+ /**
68
+ * Modify the selection mode of the table.
69
+ * The column with checkboxes will not be present with 'single' selection mode.
70
+ * @default 'multi'
71
+ */
72
+ selectionMode?: 'multi' | 'single';
67
73
  /**
68
74
  * Flag whether table columns can be sortable.
69
75
  * @default false
package/cjs/core/Table/Table.js CHANGED
@@ -94,9 +94,9 @@ var tableResizeEndAction = 'tableResizeEnd';
94
94
  var Table = function (props) {
95
95
  var _a;
96
96
  var _b;
97
- var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
97
+ var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
98
98
  (0, utils_1.useTheme)();
99
- var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
99
+ var _r = react_1.default.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
100
100
  var defaultColumn = react_1.default.useMemo(function () { return ({
101
101
  maxWidth: 0,
102
102
  minWidth: 0,
@@ -165,7 +165,7 @@ var Table = function (props) {
165
165
  return getSubRows ? getSubRows(item, index) : item.subRows;
166
166
  });
167
167
  }, [data, getSubRows]);
168
- var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
168
+ var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering));
169
169
  var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
170
170
  var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
171
171
  var key = _a[0], value = _a[1];
@@ -177,8 +177,14 @@ var Table = function (props) {
177
177
  var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
178
178
  var onRowClickHandler = react_1.default.useCallback(function (event, row) {
179
179
  var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
180
- if (isSelectable && !isDisabled && selectRowOnClick) {
181
- if (!row.isSelected && !event.ctrlKey) {
180
+ if (!isDisabled) {
181
+ onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
182
+ }
183
+ if (isSelectable &&
184
+ !isDisabled &&
185
+ selectRowOnClick &&
186
+ !event.isDefaultPrevented()) {
187
+ if (!row.isSelected && (selectionMode === 'single' || !event.ctrlKey)) {
182
188
  dispatch({
183
189
  type: singleRowSelectedAction,
184
190
  id: row.id,
@@ -188,10 +194,14 @@ var Table = function (props) {
188
194
  row.toggleRowSelected(!row.isSelected);
189
195
  }
190
196
  }
191
- if (!isDisabled) {
192
- onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
193
- }
194
- }, [isRowDisabled, isSelectable, selectRowOnClick, dispatch, onRowClick]);
197
+ }, [
198
+ isRowDisabled,
199
+ isSelectable,
200
+ selectRowOnClick,
201
+ selectionMode,
202
+ dispatch,
203
+ onRowClick,
204
+ ]);
195
205
  react_1.default.useEffect(function () {
196
206
  setPageSize(pageSize);
197
207
  }, [pageSize, setPageSize]);
package/cjs/core/Table/hooks/useSelectionCell.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { Hooks } from 'react-table';
2
- export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
2
+ export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
package/cjs/core/Table/hooks/useSelectionCell.js CHANGED
@@ -11,12 +11,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.useSelectionCell = void 0;
13
13
  var columns_1 = require("../columns");
14
- var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
14
+ var useSelectionCell = function (isSelectable, selectionMode, isRowDisabled) { return function (hooks) {
15
15
  if (!isSelectable) {
16
16
  return;
17
17
  }
18
18
  hooks.allColumns.push(function (columns) {
19
- return columns.find(function (c) { return c.id === columns_1.SELECTION_CELL_ID; })
19
+ return selectionMode === 'single' ||
20
+ columns.find(function (c) { return c.id === columns_1.SELECTION_CELL_ID; })
20
21
  ? columns
21
22
  : __spreadArray([(0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled })], columns, true);
22
23
  });
package/cjs/core/Tag/Tag.js CHANGED
@@ -45,9 +45,12 @@ var Buttons_1 = require("../Buttons");
45
45
  var Tag = function (props) {
46
46
  var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
47
47
  (0, utils_1.useTheme)();
48
- return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
49
- react_1.default.createElement("span", { className: 'iui-label' }, children),
50
- onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },
48
+ return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)({
49
+ 'iui-tag-basic': variant === 'basic',
50
+ 'iui-tag': variant === 'default',
51
+ }, className) }, rest),
52
+ variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
53
+ onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
51
54
  react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));
52
55
  };
53
56
  exports.Tag = Tag;
package/cjs/core/Tile/Tile.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import { CommonProps } from '../utils';
3
2
  import '@itwin/itwinui-css/css/tile.css';
4
3
  export declare type TileProps = {
5
4
  /**
@@ -80,7 +79,12 @@ export declare type TileProps = {
80
79
  * Any custom nodes that will be appended to the tile's main content.
81
80
  */
82
81
  children?: React.ReactNode;
83
- } & Omit<CommonProps, 'title'>;
82
+ /**
83
+ * Whether the tile is expected to be interactable (i.e. `onClick`).
84
+ * It becomes focusable and gets on hover styling.
85
+ */
86
+ isActionable?: boolean;
87
+ } & React.ComponentPropsWithoutRef<'div'>;
84
88
  /**
85
89
  * Tile component that displays content and actions in a card-like format.
86
90
  * @example
package/cjs/core/Tile/Tile.js CHANGED
@@ -57,12 +57,17 @@ var Buttons_1 = require("../Buttons");
57
57
  * />
58
58
  */
59
59
  var Tile = function (props) {
60
- var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children"]);
60
+ var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, isActionable = props.isActionable, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable"]);
61
61
  (0, utils_1.useTheme)();
62
62
  var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
63
63
  var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
64
64
  var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
65
- return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
65
+ return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', {
66
+ 'iui-folder': variant === 'folder',
67
+ 'iui-new': isNew,
68
+ 'iui-selected': isSelected,
69
+ 'iui-actionable': isActionable,
70
+ }, className), tabIndex: isActionable ? 0 : undefined }, rest),
66
71
  thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
67
72
  typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
68
73
  className: 'iui-tile-thumbnail-picture',
package/cjs/core/index.d.ts CHANGED
@@ -62,10 +62,14 @@ export { Select } from './Select';
62
62
  export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
63
63
  export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
64
64
  export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
65
+ export { SkipToContentLink } from './SkipToContentLink';
66
+ export type { SkipToContentLinkProps } from './SkipToContentLink';
65
67
  export { Slider } from './Slider';
66
68
  export type { SliderProps } from './Slider';
67
69
  export { StatusMessage } from './StatusMessage';
68
70
  export type { StatusMessageProps } from './StatusMessage';
71
+ export { Surface } from './Surface';
72
+ export type { SurfaceProps } from './Surface';
69
73
  export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
70
74
  export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
71
75
  export { Tag, TagContainer } from './Tag';
package/cjs/core/index.js CHANGED
@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  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;
7
- 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;
8
- exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = void 0;
7
+ 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.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = 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;
8
+ exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = void 0;
9
9
  /*---------------------------------------------------------------------------------------------
10
10
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
11
11
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -104,10 +104,14 @@ Object.defineProperty(exports, "SideNavigation", { enumerable: true, get: functi
104
104
  Object.defineProperty(exports, "SidenavButton", { enumerable: true, get: function () { return SideNavigation_1.SidenavButton; } });
105
105
  Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenu; } });
106
106
  Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenuHeader; } });
107
+ var SkipToContentLink_1 = require("./SkipToContentLink");
108
+ Object.defineProperty(exports, "SkipToContentLink", { enumerable: true, get: function () { return SkipToContentLink_1.SkipToContentLink; } });
107
109
  var Slider_1 = require("./Slider");
108
110
  Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
109
111
  var StatusMessage_1 = require("./StatusMessage");
110
112
  Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
113
+ var Surface_1 = require("./Surface");
114
+ Object.defineProperty(exports, "Surface", { enumerable: true, get: function () { return Surface_1.Surface; } });
111
115
  var Table_1 = require("./Table");
112
116
  Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
113
117
  Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return Table_1.tableFilters; } });
package/esm/core/Header/HeaderButton.js CHANGED
@@ -55,6 +55,7 @@ export var HeaderButton = React.forwardRef(function (props, ref) {
55
55
  : undefined, styleType: 'borderless', className: cx({
56
56
  'iui-header-button': !isSplitButton(props),
57
57
  'iui-header-split-button': isSplitButton(props),
58
+ 'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
58
59
  'iui-active': isActive,
59
60
  }, className), 'aria-current': isActive ? 'location' : undefined, children: (React.createElement(React.Fragment, null,
60
61
  React.createElement("div", null, name),
package/esm/core/SkipToContentLink/SkipToContentLink.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import '@itwin/itwinui-css/css/skip-to-content.css';
3
+ export declare type SkipToContentLinkProps = {
4
+ /**
5
+ * The id of the main content that the link directs to. Don't forget the #!
6
+ */
7
+ href: string;
8
+ /**
9
+ * Localize 'Skip to main content' label.
10
+ * @default 'Skip to main content'
11
+ */
12
+ children?: React.ReactNode;
13
+ } & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
14
+ /**
15
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
16
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
17
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
18
+ * @example
19
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
20
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
21
+ */
22
+ export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
23
+ /**
24
+ * The id of the main content that the link directs to. Don't forget the #!
25
+ */
26
+ href: string;
27
+ /**
28
+ * Localize 'Skip to main content' label.
29
+ * @default 'Skip to main content'
30
+ */
31
+ children?: React.ReactNode;
32
+ } & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
33
+ export default SkipToContentLink;
package/esm/core/SkipToContentLink/SkipToContentLink.js ADDED
@@ -0,0 +1,44 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ /*---------------------------------------------------------------------------------------------
24
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
25
+ * See LICENSE.md in the project root for license terms and full copyright notice.
26
+ *--------------------------------------------------------------------------------------------*/
27
+ import React from 'react';
28
+ import cx from 'classnames';
29
+ import { useTheme } from '../utils';
30
+ import '@itwin/itwinui-css/css/skip-to-content.css';
31
+ /**
32
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
33
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
34
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
35
+ * @example
36
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
37
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
38
+ */
39
+ export var SkipToContentLink = React.forwardRef(function (props, ref) {
40
+ var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
41
+ useTheme();
42
+ return (React.createElement("a", __assign({ ref: ref, className: cx('iui-skip-to-content-link', className) }, rest), children));
43
+ });
44
+ export default SkipToContentLink;
package/esm/core/SkipToContentLink/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { SkipToContentLink } from './SkipToContentLink';
2
+ export type { SkipToContentLinkProps } from './SkipToContentLink';
3
+ declare const _default: "./SkipToContentLink";
4
+ export default _default;
package/esm/core/SkipToContentLink/index.js ADDED
@@ -0,0 +1,6 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ export { SkipToContentLink } from './SkipToContentLink';
6
+ export default './SkipToContentLink';
package/esm/core/Surface/Surface.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { CommonProps } from '../utils';
3
+ import '@itwin/itwinui-css/css/surface.css';
4
+ export declare type SurfaceProps = {
5
+ /**
6
+ * Sets the elevation of the surface
7
+ * @default 0
8
+ */
9
+ elevation?: 0 | 1 | 2 | 3 | 4 | 5;
10
+ /**
11
+ * Content in the surface.
12
+ */
13
+ children: React.ReactNode;
14
+ } & Omit<CommonProps, 'title'>;
15
+ /**
16
+ * The Surface container allows content to appear elevated through the use of a drop shadow
17
+ * @example
18
+ * <Surface>Surface Content</Surface>
19
+ * <Surface elevation={2}>Surface Content</Surface>
20
+ */
21
+ export declare const Surface: React.ForwardRefExoticComponent<{
22
+ /**
23
+ * Sets the elevation of the surface
24
+ * @default 0
25
+ */
26
+ elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
27
+ /**
28
+ * Content in the surface.
29
+ */
30
+ children: React.ReactNode;
31
+ } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
32
+ export default Surface;
package/esm/core/Surface/Surface.js ADDED
@@ -0,0 +1,64 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ /*---------------------------------------------------------------------------------------------
24
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
25
+ * See LICENSE.md in the project root for license terms and full copyright notice.
26
+ *--------------------------------------------------------------------------------------------*/
27
+ import React from 'react';
28
+ import cx from 'classnames';
29
+ import { useTheme, getWindow } from '../utils';
30
+ import '@itwin/itwinui-css/css/surface.css';
31
+ /**
32
+ * Helper function that returns one of the preset surface elevation values.
33
+ */
34
+ var getSurfaceElevationValue = function (elevation) {
35
+ switch (elevation) {
36
+ case 1:
37
+ return '0 1px 5px rgba(0, 0, 0, 0.25)';
38
+ case 2:
39
+ return '0 1px 10px rgba(0, 0, 0, 0.25)';
40
+ case 3:
41
+ return '0 3px 14px rgba(0, 0, 0, 0.25)';
42
+ case 4:
43
+ return '0 6px 30px rgba(0, 0, 0, 0.25)';
44
+ case 5:
45
+ return '0 9px 46px rgba(0, 0, 0, 0.25)';
46
+ default:
47
+ return 'none';
48
+ }
49
+ };
50
+ /**
51
+ * The Surface container allows content to appear elevated through the use of a drop shadow
52
+ * @example
53
+ * <Surface>Surface Content</Surface>
54
+ * <Surface elevation={2}>Surface Content</Surface>
55
+ */
56
+ export var Surface = React.forwardRef(function (props, ref) {
57
+ var _a, _b, _c;
58
+ var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
59
+ useTheme();
60
+ var _style = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
61
+ ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
62
+ return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
63
+ });
64
+ export default Surface;
package/esm/core/Surface/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Surface } from './Surface';
2
+ export type { SurfaceProps } from './Surface';
3
+ declare const _default: "./Surface";
4
+ export default _default;
package/esm/core/Surface/index.js ADDED
@@ -0,0 +1,6 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ export { Surface } from './Surface';
6
+ export default './Surface';
package/esm/core/Table/Table.d.ts CHANGED
@@ -64,6 +64,12 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
64
64
  * Handler for when a row is clicked. Must be memoized.
65
65
  */
66
66
  onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
67
+ /**
68
+ * Modify the selection mode of the table.
69
+ * The column with checkboxes will not be present with 'single' selection mode.
70
+ * @default 'multi'
71
+ */
72
+ selectionMode?: 'multi' | 'single';
67
73
  /**
68
74
  * Flag whether table columns can be sortable.
69
75
  * @default false
package/esm/core/Table/Table.js CHANGED
@@ -88,9 +88,9 @@ var tableResizeEndAction = 'tableResizeEnd';
88
88
  export var Table = function (props) {
89
89
  var _a;
90
90
  var _b;
91
- var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
91
+ var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
92
92
  useTheme();
93
- var _q = React.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
93
+ var _r = React.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
94
94
  var defaultColumn = React.useMemo(function () { return ({
95
95
  maxWidth: 0,
96
96
  minWidth: 0,
@@ -159,7 +159,7 @@ export var Table = function (props) {
159
159
  return getSubRows ? getSubRows(item, index) : item.subRows;
160
160
  });
161
161
  }, [data, getSubRows]);
162
- var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
162
+ var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
163
163
  var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
164
164
  var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
165
165
  var key = _a[0], value = _a[1];
@@ -171,8 +171,14 @@ export var Table = function (props) {
171
171
  var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
172
172
  var onRowClickHandler = React.useCallback(function (event, row) {
173
173
  var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
174
- if (isSelectable && !isDisabled && selectRowOnClick) {
175
- if (!row.isSelected && !event.ctrlKey) {
174
+ if (!isDisabled) {
175
+ onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
176
+ }
177
+ if (isSelectable &&
178
+ !isDisabled &&
179
+ selectRowOnClick &&
180
+ !event.isDefaultPrevented()) {
181
+ if (!row.isSelected && (selectionMode === 'single' || !event.ctrlKey)) {
176
182
  dispatch({
177
183
  type: singleRowSelectedAction,
178
184
  id: row.id,
@@ -182,10 +188,14 @@ export var Table = function (props) {
182
188
  row.toggleRowSelected(!row.isSelected);
183
189
  }
184
190
  }
185
- if (!isDisabled) {
186
- onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
187
- }
188
- }, [isRowDisabled, isSelectable, selectRowOnClick, dispatch, onRowClick]);
191
+ }, [
192
+ isRowDisabled,
193
+ isSelectable,
194
+ selectRowOnClick,
195
+ selectionMode,
196
+ dispatch,
197
+ onRowClick,
198
+ ]);
189
199
  React.useEffect(function () {
190
200
  setPageSize(pageSize);
191
201
  }, [pageSize, setPageSize]);
package/esm/core/Table/hooks/useSelectionCell.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { Hooks } from 'react-table';
2
- export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
2
+ export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
package/esm/core/Table/hooks/useSelectionCell.js CHANGED
@@ -8,12 +8,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
8
8
  return to.concat(ar || Array.prototype.slice.call(from));
9
9
  };
10
10
  import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
11
- export var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
11
+ export var useSelectionCell = function (isSelectable, selectionMode, isRowDisabled) { return function (hooks) {
12
12
  if (!isSelectable) {
13
13
  return;
14
14
  }
15
15
  hooks.allColumns.push(function (columns) {
16
- return columns.find(function (c) { return c.id === SELECTION_CELL_ID; })
16
+ return selectionMode === 'single' ||
17
+ columns.find(function (c) { return c.id === SELECTION_CELL_ID; })
17
18
  ? columns
18
19
  : __spreadArray([SelectionColumn({ isDisabled: isRowDisabled })], columns, true);
19
20
  });
package/esm/core/Tag/Tag.js CHANGED
@@ -39,9 +39,12 @@ import { IconButton } from '../Buttons';
39
39
  export var Tag = function (props) {
40
40
  var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
41
41
  useTheme();
42
- return (React.createElement("span", __assign({ className: cx('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
43
- React.createElement("span", { className: 'iui-label' }, children),
44
- onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },
42
+ return (React.createElement("span", __assign({ className: cx({
43
+ 'iui-tag-basic': variant === 'basic',
44
+ 'iui-tag': variant === 'default',
45
+ }, className) }, rest),
46
+ variant === 'default' ? (React.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
47
+ onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
45
48
  React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
46
49
  };
47
50
  export default Tag;
package/esm/core/Tile/Tile.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import { CommonProps } from '../utils';
3
2
  import '@itwin/itwinui-css/css/tile.css';
4
3
  export declare type TileProps = {
5
4
  /**
@@ -80,7 +79,12 @@ export declare type TileProps = {
80
79
  * Any custom nodes that will be appended to the tile's main content.
81
80
  */
82
81
  children?: React.ReactNode;
83
- } & Omit<CommonProps, 'title'>;
82
+ /**
83
+ * Whether the tile is expected to be interactable (i.e. `onClick`).
84
+ * It becomes focusable and gets on hover styling.
85
+ */
86
+ isActionable?: boolean;
87
+ } & React.ComponentPropsWithoutRef<'div'>;
84
88
  /**
85
89
  * Tile component that displays content and actions in a card-like format.
86
90
  * @example
package/esm/core/Tile/Tile.js CHANGED
@@ -51,12 +51,17 @@ import { IconButton } from '../Buttons';
51
51
  * />
52
52
  */
53
53
  export var Tile = function (props) {
54
- var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children"]);
54
+ var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, isActionable = props.isActionable, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable"]);
55
55
  useTheme();
56
56
  var _b = React.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
57
57
  var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
58
58
  var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
59
- return (React.createElement("div", __assign({ className: cx('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
59
+ return (React.createElement("div", __assign({ className: cx('iui-tile', {
60
+ 'iui-folder': variant === 'folder',
61
+ 'iui-new': isNew,
62
+ 'iui-selected': isSelected,
63
+ 'iui-actionable': isActionable,
64
+ }, className), tabIndex: isActionable ? 0 : undefined }, rest),
60
65
  thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
61
66
  typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
62
67
  className: 'iui-tile-thumbnail-picture',
package/esm/core/index.d.ts CHANGED
@@ -62,10 +62,14 @@ export { Select } from './Select';
62
62
  export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
63
63
  export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
64
64
  export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
65
+ export { SkipToContentLink } from './SkipToContentLink';
66
+ export type { SkipToContentLinkProps } from './SkipToContentLink';
65
67
  export { Slider } from './Slider';
66
68
  export type { SliderProps } from './Slider';
67
69
  export { StatusMessage } from './StatusMessage';
68
70
  export type { StatusMessageProps } from './StatusMessage';
71
+ export { Surface } from './Surface';
72
+ export type { SurfaceProps } from './Surface';
69
73
  export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
70
74
  export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
71
75
  export { Tag, TagContainer } from './Tag';
package/esm/core/index.js CHANGED
@@ -34,8 +34,10 @@ export { Radio } from './Radio';
34
34
  export { RadioTile, RadioTileGroup } from './RadioTiles';
35
35
  export { Select } from './Select';
36
36
  export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
37
+ export { SkipToContentLink } from './SkipToContentLink';
37
38
  export { Slider } from './Slider';
38
39
  export { StatusMessage } from './StatusMessage';
40
+ export { Surface } from './Surface';
39
41
  export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
40
42
  export { Tag, TagContainer } from './Tag';
41
43
  export { Textarea } from './Textarea';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "1.36.0",
3
+ "version": "1.37.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",
@@ -40,7 +40,7 @@
40
40
  "build-storybook": "build-storybook"
41
41
  },
42
42
  "dependencies": {
43
- "@itwin/itwinui-css": "^0.54.1",
43
+ "@itwin/itwinui-css": "^0.55.0",
44
44
  "@itwin/itwinui-icons-react": "^1.5.0",
45
45
  "@itwin/itwinui-illustrations-react": "^1.0.1",
46
46
  "@tippyjs/react": "^4.2.5",