@itwin/itwinui-react 3.14.1 → 3.15.0

package/DEV-cjs/core/Select/Select.js

@@ -117,7 +117,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     multiple = false,
     triggerProps,
     status,
-    popoverProps,
+    popoverProps: { portal = true, ...popoverProps } = {},
     styleType,
     ...rest
   } = props;
@@ -314,7 +314,9 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     popover.open &&
       _react.createElement(
         _index.Portal,
-        null,
+        {
+          portal: portal,
+        },
         _react.createElement(
           SelectListbox,
           {

package/DEV-cjs/core/Table/Table.js

@@ -31,6 +31,7 @@ const _index1 = require('./hooks/index.js');
 const _index2 = require('./actionHandlers/index.js');
 const _index3 = require('./columns/index.js');
 const _ColumnHeader = require('./ColumnHeader.js');
+const _TableExpandableContentMemoized = require('./TableExpandableContentMemoized.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
@@ -224,6 +225,17 @@ const Table = (props) => {
       ),
     [data, getSubRows],
   );
+  let [rowHasParent] = _react.useState(() => new WeakSet());
+  let getSubRowsWithSubComponents = _react.useCallback(
+    (originalRow) => {
+      if (!rowHasParent.has(originalRow)) {
+        rowHasParent.add(originalRow);
+        return [originalRow];
+      }
+      return originalRow.subRows || [];
+    },
+    [rowHasParent],
+  );
   let instance = (0, _reacttable.useTable)(
     {
       manualPagination: !paginatorRenderer,
@@ -236,7 +248,7 @@ const Table = (props) => {
       filterTypes,
       selectSubRows,
       data,
-      getSubRows,
+      getSubRows: subComponent ? getSubRowsWithSubComponents : getSubRows,
       initialState: {
         pageSize,
         ...props.initialState,
@@ -437,39 +449,54 @@ const Table = (props) => {
   (0, _index.useLayoutEffect)(() => {
     if (scrollToIndex)
       virtualizer.scrollToIndex(scrollToIndex, {
-        align: 'center',
+        align: 'start',
       });
   }, [virtualizer, scrollToIndex]);
   let getPreparedRow = _react.useCallback(
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      return _react.createElement(_TableRowMemoized.TableRowMemoized, {
-        row: row,
-        rowProps: rowProps,
-        isLast: index === page.length - 1,
-        onRowInViewport: onRowInViewportRef,
-        onBottomReached: onBottomReachedRef,
-        intersectionMargin: intersectionMargin,
-        state: state,
-        key: row.getRowProps().key,
-        onClick: onRowClickHandler,
-        subComponent: subComponent,
-        isDisabled: !!isRowDisabled?.(row.original),
-        tableHasSubRows: hasAnySubRows,
-        tableInstance: instance,
-        expanderCell: expanderCell,
-        scrollContainerRef: tableRef.current,
-        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-        density: density,
-        virtualItem: virtualItem,
-        virtualizer: virtualizer,
-      });
+      if (row.subRows.length > 0 || !subComponent)
+        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+          row: row,
+          rowProps: rowProps,
+          isLast: index === page.length - 1,
+          onRowInViewport: onRowInViewportRef,
+          onBottomReached: onBottomReachedRef,
+          intersectionMargin: intersectionMargin,
+          state: state,
+          key: row.getRowProps().key,
+          onClick: onRowClickHandler,
+          subComponent: subComponent,
+          isDisabled: !!isRowDisabled?.(row.original),
+          tableHasSubRows: hasAnySubRows,
+          tableInstance: instance,
+          expanderCell: expanderCell,
+          scrollContainerRef: tableRef.current,
+          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+          density: density,
+          virtualItem: virtualItem,
+          virtualizer: virtualizer,
+        });
+      return _react.createElement(
+        _TableExpandableContentMemoized.TableExpandableContentMemoized,
+        {
+          key: row.getRowProps().key,
+          virtualItem: virtualItem,
+          ref: enableVirtualization
+            ? virtualizer?.measureElement
+            : tableRowRef(row),
+          isDisabled: !!isRowDisabled?.(row.original),
+        },
+        subComponent(row),
+      );
     },
     [
       page,
       prepareRow,
       rowProps,
+      onRowInViewportRef,
+      onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
@@ -481,8 +508,6 @@ const Table = (props) => {
       enableVirtualization,
       tableRowRef,
       density,
-      onBottomReachedRef,
-      onRowInViewportRef,
     ],
   );
   let updateStickyState = () => {
@@ -514,7 +539,7 @@ const Table = (props) => {
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     _react.createElement(
       _index.Box,

package/DEV-cjs/core/Table/TableExpandableContentMemoized.js

@@ -0,0 +1,47 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'TableExpandableContentMemoized', {
+  enumerable: true,
+  get: function () {
+    return TableExpandableContentMemoized;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const TableExpandableContent = _react.forwardRef((props, ref) => {
+  let { children, className, style, isDisabled, virtualItem, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-table-row',
+        'iui-table-expanded-content',
+        className,
+      ),
+      style: {
+        flex: '0 0 auto',
+        minWidth: '100%',
+        ...(null != virtualItem
+          ? {
+              transform: `translateY(${virtualItem.start}px)`,
+            }
+          : {}),
+        ...style,
+      },
+      'aria-disabled': isDisabled,
+      'data-iui-index': virtualItem?.index,
+      ...(null != virtualItem && {
+        'data-iui-virtualizer': 'item',
+      }),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+const TableExpandableContentMemoized = _react.memo(TableExpandableContent);

package/DEV-cjs/core/Table/TableRowMemoized.js

@@ -122,24 +122,6 @@ const TableRow = (props) => {
         }),
       ),
     ),
-    subComponent &&
-      _react.createElement(
-        _index.WithCSSTransition,
-        {
-          in: row.isExpanded,
-        },
-        _react.createElement(
-          _index.Box,
-          {
-            className: (0, _classnames.default)(
-              'iui-table-row',
-              'iui-table-expanded-content',
-            ),
-            'aria-disabled': isDisabled,
-          },
-          subComponent(row),
-        ),
-      ),
   );
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {

package/DEV-cjs/core/Table/cells/DefaultCell.js

@@ -11,17 +11,17 @@ Object.defineProperty(exports, 'DefaultCell', {
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
+const _reacttable = require('react-table');
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
 const DefaultCell = (props) => {
-  let columnsProp = _react.useContext(_utils.TableColumnsContext);
+  let instanceColumns = _react.useContext(_utils.TableColumnsContext);
   let isCustomCell = _react.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== _reacttable.defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

package/DEV-cjs/core/Table/hooks/useColumnDragAndDrop.js

@@ -10,6 +10,8 @@ Object.defineProperty(exports, 'useColumnDragAndDrop', {
 });
 const _reacttable = require('react-table');
 const _styles = require('../../../styles.js');
+const leftClassName = _styles.styles['iui-table-reorder-column-left'];
+const rightClassName = _styles.styles['iui-table-reorder-column-right'];
 const REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
   columnDragEnd: 'columnDragEnd',
@@ -31,20 +33,16 @@ const defaultGetDragAndDropProps =
     };
     let setOnDragColumnStyle = (event, position) => {
       let columnElement = event.currentTarget;
-      columnElement.classList.remove(
-        _styles.styles['iui-table-reorder-column-right'],
-      );
-      columnElement.classList.remove(
-        _styles.styles['iui-table-reorder-column-left'],
-      );
-      if ('left' === position)
-        columnElement.classList.add(
-          _styles.styles['iui-table-reorder-column-left'],
-        );
-      else if ('right' === position)
-        columnElement.classList.add(
-          _styles.styles['iui-table-reorder-column-right'],
-        );
+      if ('left' === position) {
+        columnElement.classList.remove(rightClassName);
+        columnElement.classList.add(leftClassName);
+      } else if ('right' === position) {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.add(rightClassName);
+      } else {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.remove(rightClassName);
+      }
     };
     let reorderColumns = (tableColumns, srcIndex, dstIndex) => {
       let newTableColumns = [...tableColumns];

package/DEV-cjs/core/ThemeProvider/ThemeProvider.js

@@ -30,6 +30,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     includeCss = 'inherit' === themeProp,
     ...rest
   } = props;
+  useInertPolyfill();
   let [rootElement, setRootElement] = _react.useState(null);
   let parent = useParentThemeAndContext(rootElement);
   let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
@@ -247,7 +248,7 @@ const FallbackStyles = ({ root }) => {
       } catch (error) {
         console.log('Error loading styles.css locally', error);
         let css = await (0, _index.importCss)(
-          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+          `https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@${_meta.meta.version}/styles.css`,
         );
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,
@@ -291,3 +292,20 @@ const useIuiDebugRef = () => {
     };
   _globalThis1.__iui.versions.add(JSON.stringify(_meta.meta));
 };
+const useInertPolyfill = () => {
+  let loaded = _react.useRef(false);
+  let modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  _react.useEffect(() => {
+    (async () => {
+      if (
+        !HTMLElement.prototype.hasOwnProperty('inert') &&
+        !loaded.current &&
+        !_index.isUnitTest
+      ) {
+        await new Function('url', 'return import(url)')(modulePath);
+        loaded.current = true;
+      }
+    })();
+  }, []);
+};

package/DEV-cjs/core/Toast/Toast.js

@@ -25,10 +25,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _Toaster = require('./Toaster.js');
-const isMotionOk = () =>
-  (0, _index.getWindow)()?.matchMedia?.(
-    '(prefers-reduced-motion: no-preference)',
-  )?.matches;
 const Toast = (props) => {
   let {
     content,
@@ -52,6 +48,9 @@ const Toast = (props) => {
   let [height, setHeight] = _react.useState(0);
   let thisElement = _react.useRef(null);
   let [margin, setMargin] = _react.useState(0);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -116,16 +115,16 @@ const Toast = (props) => {
       appear: true,
       unmountOnExit: true,
       onEnter: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           node.style.transform = 'translateY(15%)';
           node.style.transitionTimingFunction = 'ease';
         }
       },
       onEntered: (node) => {
-        if (isMotionOk()) node.style.transform = 'translateY(0)';
+        if (motionOk) node.style.transform = 'translateY(0)';
       },
       onExiting: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           let { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.14.1';
+const e = '3.15.0';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/components/ShadowRoot.js

@@ -61,6 +61,19 @@ function useShadowRoot(templateRef, { css = '' }) {
   let styleSheet = _react.useRef();
   let latestCss = (0, _index.useLatestRef)(css);
   let latestShadowRoot = (0, _index.useLatestRef)(shadowRoot);
+  let createStyleSheet = _react.useCallback(
+    (shadow) => {
+      if (shadow && supportsAdoptedStylesheets) {
+        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        if (styleSheet.current instanceof currentWindow.CSSStyleSheet) return;
+        styleSheet.current = new currentWindow.CSSStyleSheet();
+        shadow.adoptedStyleSheets.push(styleSheet.current);
+        if (latestCss.current)
+          styleSheet.current.replaceSync(latestCss.current);
+      }
+    },
+    [latestCss],
+  );
   (0, _index.useLayoutEffect)(() => {
     let parent = templateRef.current?.parentElement;
     if (!parent) return;
@@ -72,22 +85,23 @@ function useShadowRoot(templateRef, { css = '' }) {
         parent.attachShadow({
           mode: 'open',
         });
-      if (supportsAdoptedStylesheets) {
-        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
-        styleSheet.current = new currentWindow.CSSStyleSheet();
-        shadow.adoptedStyleSheets = [styleSheet.current];
-        if (latestCss.current)
-          styleSheet.current.replaceSync(latestCss.current);
-      }
+      createStyleSheet(shadow);
       _reactdom.flushSync(() => setShadowRoot(shadow));
     };
     queueMicrotask(() => {
       setupOrReuseShadowRoot();
     });
     return () => void setShadowRoot(null);
-  }, [templateRef, latestCss, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot]);
   (0, _index.useLayoutEffect)(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);
+  _react.useEffect(() => {
+    let listener = () => createStyleSheet(latestShadowRoot.current);
+    window.addEventListener('appui:reparent', listener);
+    return () => {
+      window.removeEventListener('appui:reparent', listener);
+    };
+  }, [createStyleSheet, latestShadowRoot]);
   return shadowRoot;
 }

package/DEV-cjs/utils/hooks/useWarningLogger.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, 'useWarningLogger', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _dev = require('../functions/dev.js');
+const _dom = require('../functions/dom.js');
 const _React = _react;
 const ReactInternals =
   _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -18,13 +19,13 @@ const useWarningLogger = _dev.isUnitTest
   ? () => () => {}
   : function () {
       let loggedRef = _react.useRef(false);
-      let timeoutRef = _react.useRef(null);
+      let timeoutRef = _react.useRef(void 0);
       let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
       let componentName = stack?.trim().split('\n')[1]?.trim();
       let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
       let logWarning = _react.useCallback(
         (message) => {
-          timeoutRef.current = window.setTimeout(() => {
+          timeoutRef.current = (0, _dom.getWindow)()?.setTimeout(() => {
             if (!loggedRef.current) {
               console.error(prefix, message);
               loggedRef.current = true;
@@ -35,7 +36,8 @@ const useWarningLogger = _dev.isUnitTest
       );
       _react.useEffect(
         () => () => {
-          if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+          if (timeoutRef.current)
+            (0, _dom.getWindow)()?.clearTimeout(timeoutRef.current);
         },
         [],
       );

package/DEV-esm/core/Carousel/CarouselDotsList.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import {
   getBoundedValue,
-  getWindow,
+  useMediaQuery,
   useMergedRefs,
   useResizeObserver,
   Box,
@@ -96,18 +96,23 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       handleSlideChange,
     ],
   );
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   React.useEffect(() => {
     let firstDot = listRef.current?.children[firstVisibleDotIndex];
     if (!listRef.current || !firstDot) return;
-    let motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
     if (justMounted.current) justMounted.current = false;
-  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  }, [
+    currentIndex,
+    firstVisibleDotIndex,
+    motionOk,
+    slideCount,
+    visibleCount,
+    width,
+  ]);
   let handleKeyDown = (event) => {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
       return;

package/DEV-esm/core/Carousel/CarouselSlider.js

@@ -6,6 +6,7 @@ import {
   useMergedRefs,
   useLayoutEffect,
   Box,
+  useMediaQuery,
 } from '../../utils/index.js';
 export const CarouselSlider = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
@@ -30,13 +31,11 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
   }, [items.length, setSlideCount]);
   let sliderRef = React.useRef(null);
   let refs = useMergedRefs(sliderRef, ref);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   scrollToSlide.current = (slideIndex, { instant } = {}) => {
     isManuallyUpdating.current = true;
     let slideToShow = sliderRef.current?.children.item(slideIndex);
     if (!sliderRef.current || !slideToShow) return;
-    let motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     sliderRef.current.scrollTo({
       left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
       behavior: instant || !motionOk ? 'instant' : 'smooth',

package/DEV-esm/core/ColorPicker/ColorBuilder.js

@@ -6,6 +6,7 @@ import {
   useEventListener,
   useMergedRefs,
   Box,
+  mergeEventHandlers,
 } from '../../utils/index.js';
 import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
@@ -18,7 +19,14 @@ let getHorizontalPercentageOfRectangle = (rect, pointer) => {
   return ((position - rect.left) / rect.width) * 100;
 };
 export const ColorBuilder = React.forwardRef((props, ref) => {
-  let { className, ...rest } = props;
+  let {
+    className,
+    colorFieldProps,
+    colorDotProps,
+    opacitySliderProps,
+    hueSliderProps,
+    ...rest
+  } = props;
   let builderRef = React.useRef();
   let refs = useMergedRefs(builderRef, ref);
   let {
@@ -206,54 +214,74 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        className: 'iui-color-field',
+        as: 'div',
+        ...colorFieldProps,
+        className: cx('iui-color-field', colorFieldProps?.className),
         style: {
           '--iui-color-field-hue': hueColorString,
           '--iui-color-picker-selected-color': dotColorString,
+          ...colorFieldProps?.style,
         },
-        ref: squareRef,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          updateSquareValue(event, 'onClick');
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
+        ref: useMergedRefs(squareRef, colorFieldProps?.ref),
+        onPointerDown: mergeEventHandlers(
+          colorFieldProps?.onPointerDown,
+          (event) => {
+            event.preventDefault();
+            updateSquareValue(event, 'onClick');
+            setColorDotActive(true);
+            colorDotRef.current?.focus();
+          },
+        ),
       },
       React.createElement(Box, {
-        className: 'iui-color-dot',
+        as: 'div',
+        ...colorDotProps,
+        className: cx('iui-color-dot', colorDotProps?.className),
         style: {
           '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
           '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
+          ...colorDotProps?.style,
         },
-        onPointerDown: () => {
+        onPointerDown: mergeEventHandlers(colorDotProps?.onPointerDown, () => {
           setColorDotActive(true);
           colorDotRef.current?.focus();
-        },
-        onKeyDown: handleColorDotKeyDown,
-        onKeyUp: handleColorDotKeyUp,
+        }),
+        onKeyDown: mergeEventHandlers(
+          colorDotProps?.onKeyDown,
+          handleColorDotKeyDown,
+        ),
+        onKeyUp: mergeEventHandlers(
+          colorDotProps?.onKeyUp,
+          handleColorDotKeyUp,
+        ),
         tabIndex: 0,
-        ref: colorDotRef,
+        ref: useMergedRefs(colorDotRef, colorDotProps?.ref),
       }),
     ),
     React.createElement(Slider, {
       minLabel: '',
       maxLabel: '',
       values: [sliderValue],
-      className: 'iui-hue-slider',
       trackDisplayMode: 'none',
+      min: 0,
+      max: 359,
+      ...hueSliderProps,
+      className: cx('iui-hue-slider', hueSliderProps?.className),
       tooltipProps: () => ({
         visible: false,
+        ...hueSliderProps?.tooltipProps,
       }),
       onChange: (values) => {
+        hueSliderProps?.onChange?.(values);
         updateHueSlider(values[0], true);
       },
       onUpdate: (values) => {
+        hueSliderProps?.onUpdate?.(values);
         updateHueSlider(values[0], false);
       },
-      min: 0,
-      max: 359,
       thumbProps: () => ({
         'aria-label': 'Hue',
+        ...hueSliderProps?.thumbProps,
       }),
     }),
     showAlpha &&
@@ -261,25 +289,31 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         minLabel: '',
         maxLabel: '',
         values: [alphaValue],
-        className: 'iui-opacity-slider',
         trackDisplayMode: 'none',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        ...opacitySliderProps,
+        className: cx('iui-opacity-slider', opacitySliderProps?.className),
         tooltipProps: () => ({
           visible: false,
+          ...opacitySliderProps?.tooltipProps,
         }),
         onChange: (values) => {
+          opacitySliderProps?.onChange?.(values);
           updateOpacitySlider(values[0], true);
         },
         onUpdate: (values) => {
+          opacitySliderProps?.onUpdate?.(values);
           updateOpacitySlider(values[0], false);
         },
-        min: 0,
-        max: 1,
-        step: 0.01,
         style: {
           '--iui-color-picker-selected-color': hueColorString,
+          ...opacitySliderProps?.style,
         },
         thumbProps: () => ({
           'aria-label': 'Opacity',
+          ...opacitySliderProps?.thumbProps,
         }),
       }),
   );