@itwin/itwinui-react 1.29.1 → 1.31.0

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

@@ -29,15 +29,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hideOnEscOrTab = exports.Popover = void 0;
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var react_2 = __importDefault(require("@tippyjs/react"));
 var useMergedRefs_1 = require("../hooks/useMergedRefs");
+require("@itwin/itwinui-css/css/popover.css");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
 exports.Popover = react_1.default.forwardRef(function (props, ref) {
-    var _a = react_1.default.useState(false), mounted = _a[0], setMounted = _a[1];
+    var _a;
+    var _b = react_1.default.useState(false), mounted = _b[0], setMounted = _b[1];
     var tippyRef = react_1.default.useRef(null);
     var refs = (0, useMergedRefs_1.useMergedRefs)(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
@@ -56,14 +59,14 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
             },
         }); },
     };
-    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: 'parent', arrow: false, duration: 0, interactive: true, popperOptions: {
-            strategy: 'fixed',
-            modifiers: [{ name: 'flip' }],
-        }, role: undefined, offset: [0, 0], maxWidth: '' }, props), { plugins: __spreadArray([
+    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: 'parent', arrow: false, duration: 0, interactive: true, role: undefined, offset: [0, 0], maxWidth: '' }, props), { className: (0, classnames_1.default)('iui-popover', props.className), plugins: __spreadArray([
             lazyLoad,
             removeTabIndex,
             exports.hideOnEscOrTab
-        ], (props.plugins || []), true) });
+        ], (props.plugins || []), true), popperOptions: __assign(__assign({ strategy: 'fixed' }, props.popperOptions), { modifiers: __spreadArray([
+                { name: 'flip' },
+                { name: 'preventOverflow', options: { padding: 0 } }
+            ], (((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.modifiers) || []), true) }) });
     if (props.render) {
         var render_1 = props.render;
         computedProps.render = function () {

package/cjs/core/utils/components/VirtualScroll.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export declare type VirtualScrollProps = {
+    /**
+     * Length of the items to virtualize.
+     */
+    itemsLength: number;
+    /**
+     * Single item render function, which gives index of the item (0 based) in the data array
+     * and expects to get the JSX of that element to render.
+     * Recommended to memoize the reference of the function.
+     */
+    itemRenderer: (index: number) => JSX.Element;
+    /**
+     * Number of items to be rendered at the start and the end.
+     * Not recommended to go lower than the visible items in viewport.
+     * @default 10
+     */
+    bufferSize?: number;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
+ * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
+ *
+ * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
+ * and other is for transformation (translateY) to show the correct part of the list.
+ *
+ * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
+ * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
+ * @example
+ * const itemRenderer = React.useCallback(() => (
+ *  <div key={index}>
+ *    This is my item #{index}
+ *  </div>
+ * ), [])
+ * <VirtualScroll
+ *  itemsLength={1000}
+ *  itemRenderer={itemRenderer}
+ * />
+ * @private
+ */
+export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize"> & React.RefAttributes<HTMLDivElement>>;
+export default VirtualScroll;

package/cjs/core/utils/components/VirtualScroll.js

@@ -0,0 +1,174 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScroll = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useResizeObserver_1 = require("../hooks/useResizeObserver");
+var getScrollableParent = function (element, ownerDocument) {
+    if (ownerDocument === void 0) { ownerDocument = document; }
+    if (!element || element === ownerDocument.body) {
+        return ownerDocument.body;
+    }
+    return isElementScrollable(element)
+        ? element
+        : getScrollableParent(element.parentElement, ownerDocument);
+};
+var isElementScrollable = function (element) {
+    return /(auto|scroll|overlay)/.test(getElementStyle(element, 'overflow') +
+        getElementStyle(element, 'overflow-y'));
+};
+var getElementStyle = function (element, prop) {
+    return getComputedStyle(element, null).getPropertyValue(prop);
+};
+var getElementHeight = function (element) {
+    var _a;
+    return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+};
+var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
+    if (!childHeight) {
+        return 0;
+    }
+    return Math.floor(totalHeight / childHeight);
+};
+var getTranslateValue = function (childHeight, startIndex) {
+    return childHeight * startIndex;
+};
+var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scrollContainer) {
+    return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
+};
+/**
+ * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
+ * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
+ *
+ * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
+ * and other is for transformation (translateY) to show the correct part of the list.
+ *
+ * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
+ * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
+ * @example
+ * const itemRenderer = React.useCallback(() => (
+ *  <div key={index}>
+ *    This is my item #{index}
+ *  </div>
+ * ), [])
+ * <VirtualScroll
+ *  itemsLength={1000}
+ *  itemRenderer={itemRenderer}
+ * />
+ * @private
+ */
+exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
+    var itemsLength = _a.itemsLength, itemRenderer = _a.itemRenderer, _b = _a.bufferSize, bufferSize = _b === void 0 ? 10 : _b, style = _a.style, rest = __rest(_a, ["itemsLength", "itemRenderer", "bufferSize", "style"]);
+    var _c = react_1.default.useState(0), startNode = _c[0], setStartNode = _c[1];
+    var _d = react_1.default.useState(0), visibleNodeCount = _d[0], setVisibleNodeCount = _d[1];
+    var scrollContainer = react_1.default.useRef();
+    var parentRef = react_1.default.useRef(null);
+    var childHeight = react_1.default.useRef(0);
+    var onScrollRef = react_1.default.useRef();
+    // Used only to recalculate on resize
+    var _e = react_1.default.useState(0), scrollContainerHeight = _e[0], setScrollContainerHeight = _e[1];
+    var onResize = react_1.default.useCallback(function (_a) {
+        var height = _a.height;
+        setScrollContainerHeight(height);
+    }, []);
+    var resizeRef = (0, useResizeObserver_1.useResizeObserver)(onResize)[0];
+    // Find scrollable parent
+    // Needed only on init
+    react_1.default.useLayoutEffect(function () {
+        var _a;
+        var scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        scrollContainer.current = scrollableParent;
+        resizeRef(scrollableParent);
+    }, [resizeRef]);
+    var visibleChildren = react_1.default.useMemo(function () {
+        var arr = [];
+        var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
+        for (var i = startNode; i < endIndex; i++) {
+            arr.push(itemRenderer(i));
+        }
+        return arr;
+    }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
+    // Get child height when children available
+    react_1.default.useLayoutEffect(function () {
+        if (!parentRef.current || !visibleChildren.length) {
+            return;
+        }
+        var firstChild = parentRef.current.children.item(0);
+        childHeight.current = Number(getElementHeight(firstChild).toFixed(2));
+    }, [visibleChildren.length]);
+    var updateVirtualScroll = react_1.default.useCallback(function () {
+        var _a, _b;
+        var scrollableContainer = (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+        if (!scrollableContainer) {
+            return;
+        }
+        var start = getNumberOfNodesInHeight(childHeight.current, scrollableContainer.scrollTop);
+        var startIndex = Math.max(0, start - bufferSize);
+        setStartNode(startIndex);
+        setVisibleNodeCount(getVisibleNodeCount(childHeight.current, start, itemsLength, scrollableContainer));
+        if (!parentRef.current) {
+            return;
+        }
+        parentRef.current.style.transform = "translateY(" + getTranslateValue(childHeight.current, startIndex) + "px)";
+    }, [bufferSize, itemsLength]);
+    var removeScrollListener = react_1.default.useCallback(function () {
+        var _a, _b;
+        if (!onScrollRef.current) {
+            return;
+        }
+        !scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)
+            ? (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('scroll', onScrollRef.current)
+            : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
+    }, []);
+    // Add event listener to the scrollable container.
+    react_1.default.useLayoutEffect(function () {
+        var _a, _b;
+        removeScrollListener();
+        onScrollRef.current = updateVirtualScroll;
+        if (!scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
+            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', updateVirtualScroll);
+        }
+        else {
+            scrollContainer.current.addEventListener('scroll', updateVirtualScroll);
+        }
+        return removeScrollListener;
+    }, [updateVirtualScroll, removeScrollListener]);
+    react_1.default.useLayoutEffect(function () {
+        updateVirtualScroll();
+    }, [scrollContainerHeight, itemsLength, updateVirtualScroll]);
+    return (react_1.default.createElement("div", __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength * childHeight.current, width: '100%' }, style), ref: ref }, rest),
+        react_1.default.createElement("div", { style: {
+                willChange: 'transform',
+            }, ref: parentRef }, visibleChildren)));
+});
+exports.default = exports.VirtualScroll;

package/cjs/core/utils/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
+export * from './VirtualScroll';

package/cjs/core/utils/components/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
 __exportStar(require("./MiddleTextTruncation"), exports);
+__exportStar(require("./VirtualScroll"), exports);

package/cjs/core/utils/props.d.ts

@@ -42,9 +42,9 @@ export interface PolymorphicForwardRefComponent<T, OwnProps = Record<string, unk
     as?: T;
 }>> {
     <As = T>(props: As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
-        as?: As;
+        as: As;
     }> : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as?: As;
+        as: As;
     }> : never): React.ReactElement | null;
 }
 declare type Merge<P1, P2> = Omit<P1, keyof P2> & P2;

package/esm/core/Badge/Badge.js

@@ -60,8 +60,8 @@ export var Badge = function (props) {
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     useTheme();
     var _style = backgroundColor &&
-        ((_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, "--badge-color: " + backgroundColor))
-        ? __assign({ '--badge-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, 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-badge-background-color: " + backgroundColor))
+        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
     return (React.createElement("span", __assign({ className: cx('iui-badge', className), style: _style }, rest), children));
 };
 export default Badge;

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -6,13 +6,20 @@ export declare type ButtonGroupProps = {
      */
     children: React.ReactNode;
     /**
-     * If specified, this prop will be used to show a custom button as the last button
-     * when overflow happens, i.e. when there is not enough space to fit all the buttons.
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the buttons.
      *
      * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
      * and returns the `ReactNode` to render.
+     *
+     * The placement of this button can be controlled using the `overflowPlacement` prop.
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
+    /**
+     * If `overflowButton` is specified, should it placed at the start or the end?
+     * @default 'end'
+     */
+    overflowPlacement?: 'start' | 'end';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -42,5 +49,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -57,13 +57,14 @@ import '@itwin/itwinui-css/css/button.css';
  * </ButtonGroup>
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
+    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
     var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
-    var _a = useOverflow(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
+    var _b = useOverflow(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
     var refs = useMergedRefs(overflowRef, ref);
     return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
+        overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (items)));
+        overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));
 });
 export default ButtonGroup;

package/esm/core/ColorPicker/ColorBuilder.js

@@ -63,21 +63,20 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
     ]);
     var _p = React.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_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, "--hue:\u00A0" + hueColorString))
+    var colorSquareStyle = ((_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-color-field-hue: " + hueColorString))
         ? {
-            '--hue': hueColorString,
-            '--selected-color': dotColorString,
+            '--iui-color-field-hue': hueColorString,
+            '--iui-color-picker-selected-color': dotColorString,
         }
         : { backgroundColor: hueColorString };
-    var opacitySliderStyle = ((_f = (_e = (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--selected-color:\u00A0" + hueColorString))
-        ? { '--selected-color': hueColorString }
+    var opacitySliderStyle = ((_f = (_e = (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--iui-color-picker-selected-color: " + hueColorString))
+        ? { '--iui-color-picker-selected-color': hueColorString }
         : { backgroundColor: hueColorString };
     var squareTop = 100 - hsvColor.v;
     var squareLeft = hsvColor.s;
-    var colorDotStyle = ((_j = (_h = (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--top:\u00A0" + squareTop.toString() + "%"))
+    var colorDotStyle = ((_j = (_h = (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--iui-color-dot-inset: 0"))
         ? {
-            '--top': squareTop.toString() + '%',
-            '--left': squareLeft.toString() + '%',
+            '--iui-color-dot-inset': squareTop.toString() + "% auto auto " + squareLeft.toString() + "%",
         }
         : {
             backgroundColor: dotColorString,
@@ -132,22 +131,31 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         }
     }, [colorDotActive, updateColorDot]);
     var handleSquarePointerUp = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
     var handleSquarePointerMove = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
     var handleSquarePointerLeave = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
     var keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot

package/esm/core/ColorPicker/ColorSwatch.js

@@ -45,8 +45,8 @@ export var ColorSwatch = React.forwardRef(function (props, ref) {
     }, [color]);
     var _style = React.useMemo(function () {
         var _a, _b, _c;
-        return ((_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, "--swatch-color: " + colorString))
-            ? __assign({ '--swatch-color': colorString }, style) : __assign({ backgroundColor: colorString }, style);
+        return ((_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-color-swatch-background: " + colorString))
+            ? __assign({ '--iui-color-swatch-background': colorString }, style) : __assign({ backgroundColor: colorString }, style);
     }, [colorString, style]);
     return (React.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
 });

package/esm/core/ComboBox/ComboBox.js

@@ -235,41 +235,46 @@ export var ComboBox = function (props) {
         selectedValue,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true, icon: React.useMemo(function () { return (React.createElement("span", { ref: toggleButtonRef, className: cx({
-                'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
-                'iui-open': isOpen,
-            }), onClick: function () {
-                var _a;
-                if (isOpen) {
-                    setIsOpen(false);
-                }
-                else {
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            } },
-            React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))); }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen]) }, rest, { id: id }),
-        React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
-                var _b;
-                var target = _a.target;
-                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
-                    setIsOpen(false);
-                }
-            }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
-                    minWidth: minWidth,
-                    maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
-                    maxHeight: 300,
-                }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
-                var _a;
-                var selectedIndex = options.findIndex(function (_a) {
-                    var value = _a.value;
-                    return value === selectedValue;
-                });
-                setFocusedIndex(selectedIndex);
-                if (selectedIndex > -1) {
-                    setInputValue(options[selectedIndex].label); // update input value to be same as selected value
-                }
-                (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
-            } }),
-            React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1 ? getOptionId(focusedIndex) : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps)))));
+    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+        React.createElement("div", { className: 'iui-input-with-icon' },
+            React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
+                    var _b;
+                    var target = _a.target;
+                    if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                        setIsOpen(false);
+                    }
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                        minWidth: minWidth,
+                        maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                        maxHeight: 300,
+                    }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
+                    var _a;
+                    var selectedIndex = options.findIndex(function (_a) {
+                        var value = _a.value;
+                        return value === selectedValue;
+                    });
+                    setFocusedIndex(selectedIndex);
+                    if (selectedIndex > -1) {
+                        setInputValue(options[selectedIndex].label); // update input value to be same as selected value
+                    }
+                    (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
+                } }),
+                React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                        ? getOptionId(focusedIndex)
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps))),
+            React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
+                    'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
+                    'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
+                    'iui-open': isOpen,
+                }), onClick: function () {
+                    var _a;
+                    if (isOpen) {
+                        setIsOpen(false);
+                    }
+                    else {
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                } },
+                React.createElement(SvgCaretDownSmall, { "aria-hidden": true })))));
 };
 export default ComboBox;

package/esm/core/Modal/Modal.js

@@ -104,13 +104,16 @@ export var Modal = function (props) {
     var handleMouseDown = function (event) {
         // Prevents React from resetting its properties
         event.persist();
+        if (event.target !== overlayRef.current) {
+            return;
+        }
         if (isDismissible && closeOnExternalClick && onClose) {
             onClose(event);
         }
     };
     return !!container ? (ReactDOM.createPortal(isOpen && (React.createElement(FocusTrap, null,
         React.createElement("div", __assign({ className: cx('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-            React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true', onMouseDown: function (event) { return event.stopPropagation(); } },
+            React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
                 React.createElement("div", { className: 'iui-title-bar' },
                     React.createElement("div", { className: 'iui-title' }, title),
                     isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },

package/esm/core/Radio/Radio.js

@@ -52,7 +52,7 @@ export var Radio = React.forwardRef(function (props, ref) {
         React.createElement("input", __assign({ disabled: disabled, type: 'radio', ref: refs }, rest)),
         React.createElement("span", { className: cx('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
             React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-                React.createElement("circle", { cx: '8', cy: '8', r: '6' }))),
+                React.createElement("circle", { cx: '8', cy: '8', r: '4' }))),
         label && React.createElement("span", { className: 'iui-label' }, label)));
 });
 export default Radio;

package/esm/core/Select/Select.js

@@ -30,6 +30,7 @@ import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
+import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -91,6 +92,7 @@ export var Select = function (props) {
     var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
+    var toggleButtonRef = React.useRef(null);
     var onShowHandler = React.useCallback(function (instance) {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
@@ -137,13 +139,20 @@ export var Select = function (props) {
         }
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
-    return (React.createElement("div", __assign({ className: cx('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
-            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', {
-                    'iui-placeholder': !selectedItem && !!placeholder,
-                    'iui-disabled': disabled,
-                    'iui-active': isOpen,
-                }), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+    return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+                var _b;
+                var target = _a.target;
+                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                    setIsOpen(false);
+                }
+            } }),
+            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
+                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-disabled': disabled
+                    },
+                    _a["iui-" + size] = !!size,
+                    _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&
                     selectedItemRenderer &&
@@ -153,6 +162,12 @@ export var Select = function (props) {
                         React.cloneElement(selectedItem.icon, {
                             className: cx(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
                         }),
-                    React.createElement("span", { className: 'iui-content' }, selectedItem.label)))))));
+                    React.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+        React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
+                'iui-actionable': !disabled,
+                'iui-disabled': disabled,
+                'iui-open': isOpen,
+            }), onClick: function () { return !disabled && toggle(); } },
+            React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))));
 };
 export default Select;

package/esm/core/Slider/Slider.js

@@ -158,10 +158,13 @@ export var Slider = React.forwardRef(function (props, ref) {
         onChange,
     ]);
     var handlePointerMove = React.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateThumbValue(event, 'onUpdate');
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
     var onThumbValueChanged = React.useCallback(function (index, value) {
         if (currentValues[index] === value) {
@@ -176,11 +179,14 @@ export var Slider = React.forwardRef(function (props, ref) {
         setActiveThumbIndex(index);
     }, []);
     var handlePointerUp = React.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         updateThumbValue(event, 'onChange');
         setActiveThumbIndex(undefined);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = React.useCallback(function (event) {
         if (containerRef.current) {
             var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);