@itwin/itwinui-react 1.32.0 → 1.34.0

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -51,20 +51,23 @@ export var ToggleSwitch = React.forwardRef(function (props, ref) {
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
+    var WrapperComponent = label ? 'label' : 'div';
     React.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: cx('iui-toggle-switch', { 'iui-disabled': disabled }, className), style: style },
-        React.createElement("input", __assign({ type: 'checkbox', disabled: disabled, ref: refs }, rest)),
-        labelPosition === 'left' && label && (React.createElement("span", { className: 'iui-label' }, label)),
-        React.createElement("span", { className: 'iui-toggle' },
-            icon &&
-                React.cloneElement(icon, {
-                    className: cx('iui-icon', icon.props.className),
-                }),
-            React.createElement("span", { className: 'iui-handle' })),
-        labelPosition === 'right' && label && (React.createElement("span", { className: 'iui-label' }, label))));
+    return (React.createElement(WrapperComponent, { className: cx('iui-toggle-switch-wrapper', {
+            'iui-disabled': disabled,
+            'iui-label-on-right': label && labelPosition === 'right',
+            'iui-label-on-left': label && labelPosition === 'left',
+        }, className), style: style },
+        React.createElement("input", __assign({ className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs }, rest)),
+        icon &&
+            React.cloneElement(icon, {
+                className: cx('iui-toggle-switch-icon', icon.props.className),
+                'aria-hidden': true,
+            }),
+        label && React.createElement("span", { className: 'iui-toggle-switch-label' }, label)));
 });
 export default ToggleSwitch;

package/esm/core/UserIcon/UserIcon.js

@@ -24,9 +24,6 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgAway from '@itwin/itwinui-icons-react/cjs/icons/Away';
-import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
@@ -57,16 +54,10 @@ export var UserIcon = function (props) {
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
     useTheme();
     var statusTitles = __assign(__assign({}, defaultStatusTitles), translatedStatusTitles);
-    var iconMap = {
-        away: React.createElement(SvgAway, { className: 'iui-status-symbol', "aria-hidden": true }),
-        offline: React.createElement(SvgCloseSmall, { className: 'iui-status-symbol', "aria-hidden": true }),
-        online: React.createElement(SvgCheckmark, { className: 'iui-status-symbol', "aria-hidden": true }),
-        busy: React.createElement(React.Fragment, null),
-    };
     return (React.createElement("span", __assign({ className: cx('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         React.createElement("span", { className: 'iui-stroke' }),
         status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', (_b = {},
                 _b["iui-" + status] = !!status,
-                _b)), "aria-label": statusTitles[status] }, iconMap[status]))));
+                _b)), "aria-label": statusTitles[status] }))));
 };
 export default UserIcon;

package/esm/core/index.d.ts

@@ -62,6 +62,8 @@ export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, }
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
 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 type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';

package/esm/core/index.js

@@ -34,6 +34,7 @@ export { RadioTile, RadioTileGroup } from './RadioTiles';
 export { Select } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export { Slider } from './Slider';
+export { StatusMessage } from './StatusMessage';
 export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export { Textarea } from './Textarea';

package/esm/core/utils/components/InputContainer.d.ts

@@ -9,6 +9,7 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     icon?: JSX.Element;
     isLabelInline?: boolean;
     isIconInline?: boolean;
+    statusMessage?: React.ReactNode;
 } & React.ComponentPropsWithoutRef<T>;
 /**
  * Input container to wrap inputs with label, and add optional message and icon.

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

@@ -33,22 +33,23 @@ import cx from 'classnames';
 export var InputContainer = function (props) {
     var _a;
     var _b;
-    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style"]);
+    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, statusMessage = props.statusMessage, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style", "statusMessage"]);
     return (React.createElement(Element, __assign({ className: cx('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
             _a["iui-" + status] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
-            _a['iui-with-message'] = !!message && !isLabelInline,
+            _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,
             _a), className), style: style }, rest),
         label && (React.createElement("div", { className: cx('iui-label', {
                 'iui-required': required,
             }) }, label)),
         children,
-        icon &&
-            React.cloneElement(icon, {
-                className: cx('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
-            }),
-        message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))));
+        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
+            icon &&
+                React.cloneElement(icon, {
+                    className: cx('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+                }),
+            message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))))));
 };

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

@@ -1,7 +1,8 @@
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -9,4 +10,4 @@
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit) => (node: HTMLElement | null) => void;
+export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit, once?: boolean) => (node: HTMLElement | null) => void;

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

@@ -6,8 +6,9 @@ import React from 'react';
 import { getWindow } from '../functions/dom';
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -15,8 +16,9 @@ import { getWindow } from '../functions/dom';
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export var useIntersection = function (onIntersect, options) {
+export var useIntersection = function (onIntersect, options, once) {
     if (options === void 0) { options = {}; }
+    if (once === void 0) { once = true; }
     var root = options.root, rootMargin = options.rootMargin, threshold = options.threshold;
     var observer = React.useRef();
     var setRef = React.useCallback(function (node) {
@@ -33,11 +35,14 @@ export var useIntersection = function (onIntersect, options) {
         observer.current = new IntersectionObserver(function (_a, obs) {
             var entry = _a[0];
             if (entry.isIntersecting) {
-                obs.disconnect();
+                if (once) {
+                    obs.disconnect();
+                }
                 onIntersect();
             }
         }, { root: root, rootMargin: rootMargin, threshold: threshold });
         observer.current.observe(node);
-    }, [onIntersect, root, rootMargin, threshold]);
+    }, [onIntersect, once, root, rootMargin, threshold]);
+    React.useEffect(function () { return function () { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, []);
     return setRef;
 };

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

@@ -1,13 +1,14 @@
 import React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -20,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null) => void, number];

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

@@ -8,13 +8,14 @@ import { useResizeObserver } from './useResizeObserver';
 var STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -27,20 +28,21 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-export var useOverflow = function (items, disabled) {
+export var useOverflow = function (items, disabled, orientation) {
     if (disabled === void 0) { disabled = false; }
+    if (orientation === void 0) { orientation = 'horizontal'; }
     var containerRef = React.useRef(null);
     var _a = React.useState(function () {
         return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
     }), visibleCount = _a[0], setVisibleCount = _a[1];
     var needsFullRerender = React.useRef(true);
-    var _b = React.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
-    var previousContainerWidth = React.useRef(0);
-    var updateContainerWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setContainerWidth(width);
-    }, []);
-    var _c = useResizeObserver(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
+    var _b = React.useState(0), containerSize = _b[0], setContainerSize = _b[1];
+    var previousContainerSize = React.useRef(0);
+    var updateContainerSize = React.useCallback(function (_a) {
+        var width = _a.width, height = _a.height;
+        return setContainerSize(orientation === 'horizontal' ? width : height);
+    }, [orientation]);
+    var _c = useResizeObserver(updateContainerSize), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = React.useRef(observer);
     React.useLayoutEffect(function () {
         if (disabled) {
@@ -50,7 +52,7 @@ export var useOverflow = function (items, disabled) {
             setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
             needsFullRerender.current = true;
         }
-    }, [containerWidth, disabled, items]);
+    }, [containerSize, disabled, items]);
     var mergedRefs = useMergedRefs(containerRef, resizeRef);
     React.useLayoutEffect(function () {
         var _a;
@@ -58,24 +60,25 @@ export var useOverflow = function (items, disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             return;
         }
-        var availableWidth = containerRef.current.offsetWidth;
-        var requiredWidth = containerRef.current.scrollWidth;
-        if (availableWidth < requiredWidth) {
-            var avgItemWidth = requiredWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+        var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
+        var availableSize = containerRef.current["offset" + dimension];
+        var requiredSize = containerRef.current["scroll" + dimension];
+        if (availableSize < requiredSize) {
+            var avgItemSize = requiredSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenWidth = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child.offsetWidth; }, 0);
-            var avgItemWidth = childrenWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var avgItemSize = childrenSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.
             setVisibleCount(Math.min(items.length, visibleItems * 2));
         }
         needsFullRerender.current = false;
-    }, [containerWidth, visibleCount, disabled, items.length]);
+    }, [containerSize, visibleCount, disabled, items.length, orientation]);
     React.useLayoutEffect(function () {
-        previousContainerWidth.current = containerWidth;
-    }, [containerWidth]);
+        previousContainerSize.current = containerSize;
+    }, [containerSize]);
     return [mergedRefs, visibleCount];
 };

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

@@ -32,6 +32,7 @@ declare module 'react-table' {
             isResizingColumn?: string;
         };
         isTableResizing?: boolean;
+        columnReorderStartIndex: number;
     }
     interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**
@@ -67,11 +68,17 @@ declare module 'react-table' {
          * }
          */
         cellRenderer?: (props: CellRendererProps<D>) => React.ReactNode;
+        /**
+         * If true, column can't be reordered.
+         * @default false
+         */
+        disableReordering?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;
         resizeWidth?: number;
         isResizerVisible?: boolean;
+        getDragAndDropProps: () => TableKeyedProps;
     }
     interface Cell<D extends object = {}> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.32.0",
+  "version": "1.34.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.48.2",
+    "@itwin/itwinui-css": "^0.52.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -51,17 +51,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-essentials": "~6.3.6",
-    "@storybook/addon-storysource": "~6.3.6",
-    "@storybook/addons": "~6.3.6",
-    "@storybook/api": "~6.3.6",
-    "@storybook/builder-webpack5": "~6.3.6",
-    "@storybook/components": "~6.3.6",
-    "@storybook/core-events": "~6.3.6",
-    "@storybook/manager-webpack5": "~6.3.6",
+    "@storybook/addon-essentials": "~6.4.19",
+    "@storybook/addon-storysource": "~6.4.19",
+    "@storybook/addons": "~6.4.19",
+    "@storybook/api": "~6.4.19",
+    "@storybook/builder-webpack5": "~6.4.19",
+    "@storybook/components": "~6.4.19",
+    "@storybook/core-events": "~6.4.19",
+    "@storybook/manager-webpack5": "~6.4.19",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "~6.3.6",
-    "@storybook/theming": "~6.3.6",
+    "@storybook/react": "~6.4.19",
+    "@storybook/theming": "~6.4.19",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
@@ -77,12 +77,13 @@
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "cpx": "^1.5.0",
-    "creevey": "^0.7.36",
+    "creevey": "^0.8.0-beta.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.7",
     "fast-glob": "^3.2.5",
     "husky": "^4.0.0",
     "inquirer": "^6.2.2",
@@ -96,7 +97,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^2.6.2",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook-dark-mode": "^1.0.9",
     "tippy.js": "^6.3.1",
     "ts-jest": "^27.0.4",
     "ts-loader": "^8.0.1",