@itwin/itwinui-react 1.32.0-dev.0 → 1.33.1

package/esm/core/Tree/TreeNodeExpander.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { IconButton } from '../Buttons/IconButton';
+import '@itwin/itwinui-css/css/tree.css';
+export var TreeNodeExpander = function (props) {
+    var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
+    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),
+        React.createElement(SvgChevronRight, { className: cx('iui-tree-node-content-expander-icon', {
+                'iui-tree-node-content-expander-icon-expanded': isExpanded,
+            }) })));
+};
+export default TreeNodeExpander;

package/esm/core/Tree/index.d.ts

@@ -0,0 +1,6 @@
+export { Tree } from './Tree';
+export type { TreeProps, NodeData, NodeRenderProps } from './Tree';
+export { TreeNode } from './TreeNode';
+export type { TreeNodeProps } from './TreeNode';
+export { TreeNodeExpander } from './TreeNodeExpander';
+export type { TreeNodeExpanderProps } from './TreeNodeExpander';

package/esm/core/Tree/index.js

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Tree } from './Tree';
+export { TreeNode } from './TreeNode';
+export { TreeNodeExpander } from './TreeNodeExpander';

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';
@@ -80,6 +82,8 @@ export { ToggleSwitch } from './ToggleSwitch';
 export type { ToggleSwitchProps } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
+export { Tree, TreeNode, TreeNodeExpander } from './Tree';
+export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { UserIcon } from './UserIcon';

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';
@@ -43,6 +44,7 @@ export { default as toaster } from './Toast';
 export { ThemeProvider } from './ThemeProvider';
 export { ToggleSwitch } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
+export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';

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/functions/focusable.js

@@ -12,7 +12,9 @@ export var getTabbableElements = function (container) {
     }
     var elements = container.querySelectorAll(tabbableElementsSelector);
     return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+        return !el.hasAttribute('disabled') &&
+            !el.classList.contains('iui-disabled') &&
+            el.getAttribute('aria-disabled') !== 'true';
     });
 };
 /**
@@ -24,6 +26,8 @@ export var getFocusableElements = function (container) {
     }
     var elements = container.querySelectorAll(tabbableElementsSelector + ", [tabindex=\"-1\"]");
     return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+        return !el.hasAttribute('disabled') &&
+            !el.classList.contains('iui-disabled') &&
+            el.getAttribute('aria-disabled') !== 'true';
     });
 };

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

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.32.0-dev.0",
+  "version": "1.33.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.47.0",
+    "@itwin/itwinui-css": "^0.50.1",
     "@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",