@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/cjs/core/Carousel/Carousel.js

@@ -34,7 +34,6 @@ exports.Carousel = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/carousel.css");
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const CarouselSlider_js_1 = require("./CarouselSlider.js");
 const CarouselSlide_js_1 = require("./CarouselSlide.js");
@@ -44,7 +43,7 @@ const CarouselNavigation_js_1 = require("./CarouselNavigation.js");
 const CarouselComponent = React.forwardRef((props, ref) => {
     const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // Generate a stateful random id if not specified
-    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${(0, index_js_1.getRandomValue)(10)}`; });
+    const [id] = React.useState(() => props.id ?? `iui-carousel-${(0, index_js_1.getRandomValue)(10)}`);
     const isManuallyUpdating = React.useRef(false);
     const carouselRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(carouselRef, ref);
@@ -52,7 +51,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     const scrollToSlide = React.useRef(() => { }); // stub function populated in CarouselSlider
     const justMounted = React.useRef(true);
     React.useEffect(() => {
-        var _a;
         setCurrentIndex(userActiveIndex);
         scrollToSlide.current(userActiveIndex, {
             instant: justMounted.current,
@@ -60,7 +58,7 @@ const CarouselComponent = React.forwardRef((props, ref) => {
         // re-focus the carousel for keyboard nav, but not on first mount
         // because it shows outline and might interfere with other components
         if (!justMounted.current) {
-            (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            carouselRef.current?.focus({ preventScroll: true });
         }
         justMounted.current = false;
     }, [userActiveIndex]);
@@ -95,8 +93,7 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     };
     const userOnSlideChange = React.useRef(onSlideChange);
     React.useEffect(() => {
-        var _a;
-        (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
+        userOnSlideChange.current?.(currentIndex);
     }, [currentIndex]);
     return (React.createElement(index_js_1.Box, { as: 'section', "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext_js_1.CarouselContext.Provider, { value: {

package/cjs/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;

package/cjs/core/Carousel/CarouselDotsList.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const CarouselContext_js_1 = require("./CarouselContext.js");
 const index_js_1 = require("../utils/index.js");
 const CarouselDot_js_1 = require("./CarouselDot.js");
-require("@itwin/itwinui-css/css/carousel.css");
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
@@ -60,18 +59,17 @@ require("@itwin/itwinui-css/css/carousel.css");
  * />
  */
 exports.CarouselDotsList = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
     const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
     const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : React.Children.count(children);
-    const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
-    const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
+    const slideCount = length ?? context?.slideCount ?? React.Children.count(children);
+    const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+    const idPrefix = props.id ?? context?.idPrefix;
     const handleSlideChange = React.useCallback((index) => {
         if (context) {
             context.setCurrentIndex(index);
             context.scrollToSlide.current(index);
         }
-        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+        onSlideChange?.(index);
     }, [context, onSlideChange]);
     const justMounted = React.useRef(true);
     const [visibleCount, setVisibleCount] = React.useState(slideCount);
@@ -85,7 +83,7 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         const dotWidth = listRef.current.children[0].offsetWidth;
         setVisibleCount(Math.floor(width / dotWidth));
     });
-    React.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+    React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
     const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
     const firstVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
     const lastVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
@@ -109,12 +107,11 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         handleSlideChange,
     ]);
     React.useEffect(() => {
-        var _a, _b, _c;
-        const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
+        const firstDot = listRef.current?.children[firstVisibleDotIndex];
         if (!listRef.current || !firstDot) {
             return;
         }
-        const motionOk = (_c = (_b = (0, index_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = (0, index_js_1.getWindow)()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
         listRef.current.scrollTo({
             left: firstDot.offsetLeft - listRef.current.offsetLeft,
             behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
@@ -124,5 +121,5 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children ?? dots)));
 });

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
     } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
@@ -17,7 +17,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
     } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {

package/cjs/core/Carousel/CarouselNavigation.js

@@ -39,7 +39,7 @@ const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
 const index_js_2 = require("../utils/index.js");
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(index_js_2.Box, { as: 'nav', className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+    return (React.createElement(index_js_2.Box, { as: 'nav', className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(index_js_2.Box, { className: 'iui-carousel-navigation-left' },
             React.createElement(PreviousButton, null)),
         React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
@@ -54,11 +54,10 @@ const PreviousButton = React.forwardRef((props, ref) => {
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
     return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
             const prevIndex = (slideCount + currentIndex - 1) % slideCount;
             setCurrentIndex(prevIndex);
             scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props?.onClick?.(e);
         } },
         React.createElement(index_js_2.SvgChevronLeft, null)));
 });
@@ -70,11 +69,10 @@ const NextButton = React.forwardRef((props, ref) => {
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
     return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
             const nextIndex = (slideCount + currentIndex + 1) % slideCount;
             setCurrentIndex(nextIndex);
             scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props?.onClick?.(e);
         } },
         React.createElement(index_js_2.SvgChevronRight, null)));
 });

package/cjs/core/Carousel/CarouselSlider.js

@@ -45,28 +45,24 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
         throw new Error('CarouselSlider must be used within Carousel');
     }
     const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = React.useMemo(() => {
-        var _a;
-        return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
-            ? React.cloneElement(child, {
-                id: `${idPrefix}--slide-${index}`,
-                index,
-            })
-            : child)) !== null && _a !== void 0 ? _a : [];
-    }, [children, idPrefix]);
+    const items = React.useMemo(() => React.Children.map(children, (child, index) => React.isValidElement(child)
+        ? React.cloneElement(child, {
+            id: `${idPrefix}--slide-${index}`,
+            index,
+        })
+        : child) ?? [], [children, idPrefix]);
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(sliderRef, ref);
     scrollToSlide.current = (slideIndex, { instant } = {}) => {
-        var _a, _b, _c;
         isManuallyUpdating.current = true; // start manual update
-        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
+        const slideToShow = sliderRef.current?.children.item(slideIndex);
         if (!sliderRef.current || !slideToShow) {
             return;
         }
-        const motionOk = (_c = (_b = (0, index_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = (0, index_js_1.getWindow)()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
         sliderRef.current.scrollTo({
             left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
             behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
@@ -75,11 +71,10 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
     const scrollTimeout = React.useRef();
     // reset isManuallyUpdating.current to false after the last scroll event
     const handleOnScroll = React.useCallback(() => {
-        var _a, _b;
         if (scrollTimeout.current) {
-            (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
+            (0, index_js_1.getWindow)()?.clearTimeout(scrollTimeout.current);
         }
-        scrollTimeout.current = (_b = (0, index_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+        scrollTimeout.current = (0, index_js_1.getWindow)()?.setTimeout(() => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);

package/cjs/core/Checkbox/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
 declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/cjs/core/Checkbox/Checkbox.js

@@ -35,7 +35,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../ProgressIndicators/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
  * @example

package/cjs/core/ColorPicker/ColorBuilder.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Slider/index.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = (0, index_js_1.getBoundedValue)(pointer, rect.top, rect.bottom);
@@ -51,7 +50,6 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * and a set of sliders to adjust hue and alpha values.
  */
 exports.ColorBuilder = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
     const { className, ...rest } = props;
     const builderRef = React.useRef();
     const refs = (0, index_js_1.useMergedRefs)(builderRef, ref);
@@ -59,7 +57,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
     // Set values for slider
     const hueSliderColor = React.useMemo(() => index_js_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
     const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-    const alphaValue = React.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
+    const alphaValue = React.useMemo(() => (showAlpha ? hsvColor.a ?? 1 : 1), [hsvColor.a, showAlpha]);
     // Set values for color square and color dot
     const dotColorString = React.useMemo(() => activeColor.toHexString(), [activeColor]);
     const [colorDotActive, setColorDotActive] = React.useState(false);
@@ -122,7 +120,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    (0, index_js_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    (0, index_js_1.useEventListener)('pointerup', handleSquarePointerUp, builderRef.current?.ownerDocument);
     const handleSquarePointerMove = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
@@ -131,7 +129,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    (0, index_js_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    (0, index_js_1.useEventListener)('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
     const handleSquarePointerLeave = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
@@ -139,7 +137,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    (0, index_js_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
+    (0, index_js_1.useEventListener)('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
     const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     const handleColorDotKeyDown = (event) => {
@@ -183,7 +181,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
                     keysPressed.current['ArrowRight']) {
                     return;
                 }
-                onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(index_js_1.ColorValue.create(hsvColor));
+                onChangeComplete?.(index_js_1.ColorValue.create(hsvColor));
                 break;
         }
     };
@@ -192,18 +190,16 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
                 '--iui-color-field-hue': hueColorString,
                 '--iui-color-picker-selected-color': dotColorString,
             }, ref: squareRef, onPointerDown: (event) => {
-                var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
                 setColorDotActive(true);
-                (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                colorDotRef.current?.focus();
             } },
             React.createElement(index_js_1.Box, { className: 'iui-color-dot', style: {
                     '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
                 }, onPointerDown: () => {
-                    var _a;
                     setColorDotActive(true);
-                    (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    colorDotRef.current?.focus();
                 }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
         React.createElement(index_js_2.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateHueSlider(values[0], true);

package/cjs/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 declare type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../Input/index.js");
 const index_js_3 = require("../utils/index.js");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.
@@ -48,7 +47,6 @@ require("@itwin/itwinui-css/css/color-picker.css");
  * </ColorPicker>
  */
 exports.ColorInputPanel = React.forwardRef((props, ref) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j;
     const { defaultColorFormat, allowedColorFormats = ['hsl', 'rgb', 'hex'], className, ...rest } = props;
     const inputsContainerRef = React.useRef(null);
     const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = (0, ColorPickerContext_js_1.useColorPickerContext)();
@@ -59,14 +57,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     // need to use state since input may have parsing error
     const [input, setInput] = React.useState(['', '', '', '']);
     React.useEffect(() => {
-        var _a, _b;
         if (currentFormat === 'hsl') {
             const hsl = activeColor.toHslColor();
             setInput([
                 index_js_3.ColorValue.getFormattedColorNumber(hsvColor.h),
                 index_js_3.ColorValue.getFormattedColorNumber(hsl.s),
                 index_js_3.ColorValue.getFormattedColorNumber(hsl.l),
-                index_js_3.ColorValue.getFormattedColorNumber((_a = hsl.a) !== null && _a !== void 0 ? _a : activeColor.getAlpha() / 255, 2),
+                index_js_3.ColorValue.getFormattedColorNumber(hsl.a ?? activeColor.getAlpha() / 255, 2),
             ]);
         }
         else if (currentFormat === 'rgb') {
@@ -75,7 +72,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
                 rgb.r.toString(),
                 rgb.g.toString(),
                 rgb.b.toString(),
-                index_js_3.ColorValue.getFormattedColorNumber((_b = rgb.a) !== null && _b !== void 0 ? _b : activeColor.getAlpha() / 255, 2),
+                index_js_3.ColorValue.getFormattedColorNumber(rgb.a ?? activeColor.getAlpha() / 255, 2),
             ]);
         }
         else {
@@ -85,9 +82,8 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
     const [validHexInput, setValidHexInput] = React.useState(true);
     const swapColorFormat = React.useCallback(() => {
-        var _a;
-        const newFormat = (_a = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
-            allowedColorFormats.length]) !== null && _a !== void 0 ? _a : allowedColorFormats[0];
+        const newFormat = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
+            allowedColorFormats.length] ?? allowedColorFormats[0];
         setCurrentFormat(newFormat);
     }, [currentFormat, allowedColorFormats]);
     const isFocusInside = (focused) => !!(focused &&
@@ -168,7 +164,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 360
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '359', step: '.1', placeholder: 'H', value: (_a = input[0]) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '359', step: '.1', placeholder: 'H', value: input[0] ?? '', onChange: (event) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -184,7 +180,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 100
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'S', value: (_b = input[1]) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'S', value: input[1] ?? '', onChange: (event) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -200,7 +196,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 100
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'L', value: (_c = input[2]) !== null && _c !== void 0 ? _c : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'L', value: input[2] ?? '', onChange: (event) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -216,7 +212,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         showAlpha && (React.createElement(index_js_3.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_d = input[3]) !== null && _d !== void 0 ? _d : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: input[3] ?? '', onChange: (event) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -233,7 +229,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: (_f = input[0]) !== null && _f !== void 0 ? _f : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: input[0] ?? '', onChange: (event) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -249,7 +245,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: (_g = input[1]) !== null && _g !== void 0 ? _g : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: input[1] ?? '', onChange: (event) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -265,7 +261,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         React.createElement(index_js_3.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: (_h = input[2]) !== null && _h !== void 0 ? _h : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: input[2] ?? '', onChange: (event) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -281,7 +277,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         showAlpha && (React.createElement(index_js_3.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_j = input[3]) !== null && _j !== void 0 ? _j : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: input[3] ?? '', onChange: (event) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {

package/cjs/core/ColorPicker/ColorPalette.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/cjs/core/ColorPicker/ColorPalette.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../utils/index.js");
 const ColorPicker_js_1 = require("./ColorPicker.js");
 const ColorSwatch_js_1 = require("./ColorSwatch.js");
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example
@@ -55,9 +54,8 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
     const setDefaultTabIndex = (el) => {
-        var _a;
         if (el && !el.querySelector('[tabindex="0"]')) {
-            (_a = el.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
+            el.firstElementChild?.setAttribute('tabindex', '0');
         }
     };
     const paletteRef = React.useRef(null);
@@ -71,7 +69,7 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
         if (!swatches.length) {
             return;
         }
-        const currentIndex = swatches.findIndex((swatch) => { var _a; return swatch === ((_a = paletteRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
+        const currentIndex = swatches.findIndex((swatch) => swatch === paletteRef.current?.ownerDocument.activeElement);
         if (currentIndex < 0) {
             return;
         }
@@ -113,10 +111,9 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
     };
     // call focus() when focusedIndex changes
     React.useEffect(() => {
-        var _a;
         if (focusedIndex != null) {
             const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
-            (_a = swatches[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            swatches[focusedIndex]?.focus();
         }
     }, [focusedIndex]);
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-color-palette-wrapper', className), ref: ref, ...rest },
@@ -128,7 +125,7 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
                     const color = (0, ColorPicker_js_1.getColorValue)(_color);
                     return (React.createElement(ColorSwatch_js_1.ColorSwatch, { key: index, color: color, onClick: (event) => {
                             event.preventDefault();
-                            onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
+                            onChangeComplete?.(color);
                             setActiveColor(color);
                         }, isActive: color.equals(activeColor) }));
                 }))));

package/cjs/core/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;

package/cjs/core/ColorPicker/ColorPicker.js

@@ -32,7 +32,6 @@ exports.ColorPicker = exports.getColorValue = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/color-picker.css");
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
@@ -85,13 +84,13 @@ exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
     const applyHsvColorChange = React.useCallback((newColor, selectionChanged, newColorValue) => {
         // save the HSV values
         setHsvColor(newColor);
-        const newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : index_js_1.ColorValue.create(newColor);
+        const newActiveColor = newColorValue ?? index_js_1.ColorValue.create(newColor);
         // Only update selected color when dragging is done
         if (selectionChanged) {
-            onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newActiveColor);
+            onChangeComplete?.(newActiveColor);
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(newActiveColor);
+            onChange?.(newActiveColor);
         }
         activeColorTbgr.current = newActiveColor.toTbgr();
         // this converts it to store in tbgr

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type ColorSwatchProps = {

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -33,7 +33,6 @@ exports.ColorSwatch = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/color-picker.css");
 const index_js_1 = require("../utils/index.js");
 const ColorPicker_js_1 = require("./ColorPicker.js");
 /**

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
 import type { PopoverProps, InputContainerProps, CommonProps } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {
     value: T;