@itwin/itwinui-react 1.34.2 → 1.37.0

package/esm/core/Tile/Tile.js

@@ -51,12 +51,17 @@ import { IconButton } from '../Buttons';
  * />
  */
 export var Tile = function (props) {
-    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"]);
+    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"]);
     useTheme();
     var _b = React.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
     var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (React.createElement("div", __assign({ className: cx('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
+    return (React.createElement("div", __assign({ className: cx('iui-tile', {
+            'iui-folder': variant === 'folder',
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+        }, className), tabIndex: isActionable ? 0 : undefined }, rest),
         thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
             typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',

package/esm/core/Toast/Toast.js

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

package/esm/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/esm/core/Typography/Anchor/Anchor.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/anchor.css';
 export var Anchor = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     useTheme();

package/esm/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';
@@ -60,11 +62,15 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
 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 { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+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/esm/core/index.js

@@ -7,6 +7,7 @@ export { Badge } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
+export { Carousel } from './Carousel';
 export { Checkbox } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
 export { ComboBox } from './ComboBox';
@@ -27,15 +28,17 @@ export { InputGroup } from './InputGroup';
 export { LabeledSelect } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export { Radio } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';
 export { Select } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
+export { SkipToContentLink } from './SkipToContentLink';
 export { Slider } from './Slider';
 export { StatusMessage } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Surface } from './Surface';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export { Textarea } from './Textarea';
 export { Tile } from './Tile';

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

@@ -72,7 +72,19 @@ export var Popover = React.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.isValidElement(props.content)
+            ? React.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.createElement(Tippy, __assign({}, computedProps, { ref: refs }));
 });

package/esm/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/esm/core/utils/hooks/index.js

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

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

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

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

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { getWindow } from '../functions';
+export var useMediaQuery = function (queryString) {
+    var _a = React.useState(), matches = _a[0], setMatches = _a[1];
+    React.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var mediaQueryList = (_b = (_a = 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;
+};
+export default useMediaQuery;

package/esm/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';
 /**

package/esm/core/utils/hooks/useTheme.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/global.css';
 import { getDocument, getWindow } from '../functions/dom';
+import { useMediaQuery } from './useMediaQuery';
 /**
  * Hook that applies styling and theme to all components.
  * Defaults to light theme if none provided or set elsewhere.
@@ -14,6 +15,8 @@ import { getDocument, getWindow } from '../functions/dom';
 export var useTheme = function (theme, themeOptions) {
     var _a;
     var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
+    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+    var highContrast = React.useMemo(function () { var _a; return !!((_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast); }, [prefersHighContrast, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast]);
     React.useLayoutEffect(function () {
         if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
@@ -28,20 +31,20 @@ export var useTheme = function (theme, themeOptions) {
         var addOSTheme = function (_a) {
             var isDark = _a.matches;
             if (isDark) {
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
             else {
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
         };
         switch (theme) {
             case 'light':
                 (_c = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'dark':
                 (_d = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'os':
                 if (prefersDarkMediaQuery != undefined) {
@@ -49,25 +52,28 @@ export var useTheme = function (theme, themeOptions) {
                     (_e = prefersDarkMediaQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersDarkMediaQuery, 'change', addOSTheme);
                 }
                 else {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
                 break;
             default:
                 if (ownerDocument.documentElement.className.indexOf('iui-theme') === -1) {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
         }
         return function () {
             var _a;
             (_a = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkMediaQuery, 'change', addOSTheme);
         };
-    }, [ownerDocument, theme]);
+    }, [highContrast, ownerDocument, theme]);
 };
-var addLightTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-light');
-    ownerDocument.documentElement.classList.remove('iui-theme-dark');
-};
-var addDarkTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-dark');
-    ownerDocument.documentElement.classList.remove('iui-theme-light');
+var applyTheme = function (theme, _a) {
+    var ownerDocument = _a.ownerDocument, highContrast = _a.highContrast;
+    var classList = ownerDocument.documentElement.classList;
+    var currentTheme = Array.from(classList).find(function (cls) {
+        return cls.startsWith('iui-theme');
+    });
+    if (currentTheme) {
+        classList.remove(currentTheme);
+    }
+    classList.add("iui-theme-" + theme + (highContrast ? '-hc' : ''));
 };

package/esm/types/react-table-config.d.ts

@@ -2,9 +2,22 @@
 declare module 'react-table' {
     type FieldType = 'text' | 'number' | 'date' | string;
     type CellRendererProps<D extends object = {}> = {
+        /**
+         * Cell HTML props passed from the Table.
+         */
         cellElementProps: TableCellProps;
+        /**
+         * Table specific cell props like `column`, `row`.
+         */
         cellProps: CellProps<D>;
+        /**
+         * Cell's content.
+         */
         children: React.ReactNode;
+        /**
+         * Function that returns whether the cell is disabled.
+         */
+        isDisabled?: (rowData: D) => boolean;
     };
     interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
@@ -73,6 +86,11 @@ declare module 'react-table' {
          * @default false
          */
         disableReordering?: boolean;
+        /**
+         * If true, column's visibility cannot be toggled.
+         * @default false
+         */
+        disableToggleVisibility?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.34.2",
+  "version": "1.37.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.52.0",
+    "@itwin/itwinui-css": "^0.55.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-essentials": "~6.4.19",
     "@storybook/addon-storysource": "~6.4.19",
     "@storybook/addons": "~6.4.19",