@itwin/itwinui-react 3.14.2 → 3.15.1

package/cjs/core/Overlay/Overlay.js

@@ -25,7 +25,6 @@ const OverlayComponent = _react.forwardRef((props, forwardedRef) => {
 });
 const OverlayHiddenContent = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
-  useInertPolyfill();
   return _react.createElement(
     _index.Box,
     {
@@ -43,20 +42,3 @@ const Overlay = Object.assign(OverlayComponent, {
   HiddenContent: OverlayHiddenContent,
   Overlay: OverlayOverlay,
 });
-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/cjs/core/Popover/Popover.d.ts

@@ -26,7 +26,10 @@ type PopoverOptions = {
     /**
      * Middleware options.
      *
-     * By default, `flip`, `shift` and `size` are enabled.
+     * By default, `flip`, `shift`, `size`, and `hide` are enabled.
+     *
+     * If the floating content gets hidden even when it shouldn't (e.g. some custom styles interfering with the trigger's
+     * hide detection) consider disabling the `hide` middleware.
      *
      * @see https://floating-ui.com/docs/middleware
      */

package/cjs/core/Popover/Popover.js

@@ -42,21 +42,22 @@ const usePopover = (options) => {
   } = options;
   let mergedInteractions = _react.useMemo(
     () => ({
-      click: true,
-      dismiss: true,
-      hover: false,
-      focus: false,
       ...interactionsProp,
+      click: interactionsProp?.click ?? true,
+      dismiss: interactionsProp?.dismiss ?? true,
+      hover: interactionsProp?.hover ?? false,
+      focus: interactionsProp?.focus ?? false,
     }),
     [interactionsProp],
   );
   let tree = (0, _react1.useFloatingTree)();
   let middleware = _react.useMemo(
     () => ({
-      flip: true,
-      shift: true,
-      size: true,
       ...options.middleware,
+      flip: options.middleware?.flip ?? true,
+      shift: options.middleware?.shift ?? true,
+      size: options.middleware?.size ?? true,
+      hide: options.middleware?.hide || !_index.isUnitTest,
     }),
     [options.middleware],
   );
@@ -164,17 +165,23 @@ const usePopover = (options) => {
                 maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
               }
             : {}),
+          ...(middleware.hide &&
+            floating.middlewareData.hide?.referenceHidden && {
+              visibility: 'hidden',
+            }),
           ...userProps?.style,
         },
       }),
     [
-      floating.floatingStyles,
       interactions,
-      matchWidth,
-      referenceWidth,
+      floating.floatingStyles,
+      floating.middlewareData.hide?.referenceHidden,
       middleware.size,
+      middleware.hide,
       availableHeight,
       maxHeight,
+      matchWidth,
+      referenceWidth,
     ],
   );
   let getReferenceProps = _react.useCallback(

package/cjs/core/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
+import type { CommonProps, PortalProps } from '../../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 /**
  * Select component to select value from options.
@@ -182,7 +182,19 @@ export type CustomSelectProps<T> = SelectCommonProps & {
     /**
      * Props to customize Popover behavior.
      */
-    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'> & {
+        /**
+         * Middleware options.
+         *
+         * By default, `hide` is enabled. If the floating options get hidden even when they shouldn't (e.g. some custom
+         * styles interfering with the trigger's hide detection) consider disabling the `hide` middleware.
+         *
+         * @see https://floating-ui.com/docs/middleware
+         */
+        middleware?: {
+            hide?: boolean;
+        };
+    } & Pick<PortalProps, 'portal'>;
     /**
      * Props to pass to the select button (trigger) element.
      */

package/cjs/core/Select/Select.js

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

package/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,
@@ -433,39 +445,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,
@@ -477,8 +504,6 @@ const Table = (props) => {
       enableVirtualization,
       tableRowRef,
       density,
-      onBottomReachedRef,
-      onRowInViewportRef,
     ],
   );
   let updateStickyState = () => {

package/cjs/core/Table/TableExpandableContentMemoized.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { VirtualItem } from '@tanstack/react-virtual';
+type TableExpandableContentProps = {
+    children: React.ReactNode;
+    virtualItem?: VirtualItem<Element>;
+    isDisabled?: boolean;
+};
+export declare const TableExpandableContentMemoized: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", TableExpandableContentProps>>;
+export {};

package/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/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/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/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;
@@ -267,3 +268,20 @@ const useIuiDebugRef = () => {
   var version, version1;
   _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/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/cjs/core/Tooltip/Tooltip.js

@@ -111,10 +111,13 @@ const useTooltip = (options = {}) => {
   });
   let interactions = (0, _react1.useInteractions)([
     (0, _react1.useHover)(floating.context, {
-      delay: delay ?? {
-        open: 50,
-        close: 250,
-      },
+      delay:
+        0 !== delay
+          ? delay
+          : {
+              open: 50,
+              close: 250,
+            },
       handleClose: (0, _react1.safePolygon)({
         buffer: -1 / 0,
       }),

package/cjs/styles.js

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

package/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/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;

package/esm/core/Buttons/SplitButton.d.ts

@@ -3,6 +3,7 @@ import type { ButtonProps } from './Button.js';
 import { IconButton } from './IconButton.js';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
 import type { Placement } from '@floating-ui/react';
+import type { usePopover } from '../Popover/Popover.js';
 export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
@@ -27,6 +28,10 @@ export type SplitButtonProps = ButtonProps & {
      * Passes props to SplitButton menu button.
      */
     menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+    /**
+     * Props to customize menu behavior.
+     */
+    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'>;
 } & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.

package/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/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/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,7 +1,28 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { Slider } from '../Slider/Slider.js';
+type ColorBuilderProps = {
+    /**
+     * Passes props to the color field.
+     */
+    colorFieldProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color dot.
+     */
+    colorDotProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color opacity slider.
+     */
+    opacitySliderProps?: React.ComponentProps<typeof Slider>;
+    /**
+     * Passes props to the color hue slider.
+     */
+    hueSliderProps?: React.ComponentProps<typeof Slider>;
+};
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-export declare const ColorBuilder: PolymorphicForwardRefComponent<"div">;
+export declare const ColorBuilder: PolymorphicForwardRefComponent<"div", ColorBuilderProps>;
+export {};