@itwin/itwinui-react 1.34.0 → 1.35.0

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,7 +28,7 @@ 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';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.34.0",
+  "version": "1.35.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.53.3",
     "@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",