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

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -1,87 +1,99 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxMenu = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../Menu/index.js");
-const index_js_2 = require("../Surface/index.js");
-const index_js_3 = require("../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
-const isOverflowOverlaySupported = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, index_js_3.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, 'overflow: overlay'); };
-const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    const { menuRef } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-    const virtualItemRenderer = React.useCallback((index) => filteredOptions.length > 0
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../Menu/index.js');
+const index_js_2 = require('../utils/index.js');
+const helpers_js_1 = require('./helpers.js');
+const VirtualizedComboBoxMenu = (props) => {
+  const { children, ...rest } = props;
+  const { filteredOptions, getMenuItem, focusedIndex } = (0,
+  index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+  const { menuRef } = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxRefsContext,
+  );
+  const virtualItemRenderer = React.useCallback(
+    (index) =>
+      filteredOptions.length > 0
         ? getMenuItem(filteredOptions[index], index)
         : children, // Here is expected empty state content
-    [filteredOptions, getMenuItem, children]);
-    const focusedVisibleIndex = React.useMemo(() => {
-        var _a, _b;
-        const currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${focusedIndex}"]`);
-        if (!currentElement) {
-            return focusedIndex;
-        }
-        return Number((_b = currentElement.getAttribute('data-iui-filtered-index')) !== null && _b !== void 0 ? _b : focusedIndex);
-    }, [focusedIndex, menuRef]);
-    const { outerProps, innerProps, visibleChildren } = (0, index_js_3.useVirtualization)({
-        // 'Fool' VirtualScroll by passing length 1
-        // whenever there is no elements, to show empty state message
-        itemsLength: filteredOptions.length || 1,
-        itemRenderer: virtualItemRenderer,
-        scrollToIndex: focusedVisibleIndex,
-    });
-    const surfaceStyles = {
-        minWidth,
-        // set as constant because we don't want it shifting when items are unmounted
-        maxWidth: minWidth,
-        // max-height must be on the outermost element for virtual scroll
-        maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-        overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-        ...style,
-    };
-    return (React.createElement(index_js_2.Surface, { style: surfaceStyles },
-        React.createElement("div", { ...outerProps },
-            React.createElement(index_js_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: (0, index_js_3.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: className, style: innerProps.style, ...rest }, visibleChildren))));
-});
+    [filteredOptions, getMenuItem, children],
+  );
+  const focusedVisibleIndex = React.useMemo(() => {
+    const currentElement = menuRef.current?.querySelector(
+      `[data-iui-index="${focusedIndex}"]`,
+    );
+    if (!currentElement) {
+      return focusedIndex;
+    }
+    return Number(
+      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
+    );
+  }, [focusedIndex, menuRef]);
+  const { outerProps, innerProps, visibleChildren } = (0,
+  index_js_2.useVirtualization)({
+    // 'Fool' VirtualScroll by passing length 1
+    // whenever there is no elements, to show empty state message
+    itemsLength: filteredOptions.length || 1,
+    itemRenderer: virtualItemRenderer,
+    scrollToIndex: focusedVisibleIndex,
+  });
+  return React.createElement(
+    index_js_2.Box,
+    { as: 'div', ...outerProps, ...rest },
+    React.createElement(
+      'div',
+      { ...innerProps, ref: innerProps.ref },
+      visibleChildren,
+    ),
+  );
+};
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-    const { className, style, ...rest } = props;
-    const { minWidth, id, enableVirtualization } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-    const { menuRef } = (0, index_js_3.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-    const refs = (0, index_js_3.useMergedRefs)(menuRef, forwardedRef);
-    const styles = React.useMemo(() => ({
-        minWidth,
-        maxWidth: `min(${minWidth * 2}px, 90vw)`,
-    }), [minWidth]);
-    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(index_js_1.Menu, { id: `${id}-list`, style: { ...styles, ...style }, setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className), ...rest })) : (React.createElement(VirtualizedComboBoxMenu, { ref: forwardedRef, ...props }))));
+  const { children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxStateContext,
+  );
+  const { menuRef } = (0, index_js_2.useSafeContext)(
+    helpers_js_1.ComboBoxRefsContext,
+  );
+  const refs = (0, index_js_2.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    menuRef,
+  );
+  return (
+    popover.open &&
+    React.createElement(
+      index_js_2.Portal,
+      { portal: true },
+      React.createElement(
+        index_js_1.Menu,
+        {
+          id: `${id}-list`,
+          setFocus: false,
+          role: 'listbox',
+          ref: refs,
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  // set as constant because we don't want it shifting when items are unmounted
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
+          ? children
+          : React.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
+  );
 });
 exports.ComboBoxMenu.displayName = 'ComboBoxMenu';

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { MenuItemProps } from '../Menu/MenuItem.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxMenuItemProps = MenuItemProps & {
+type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
 };
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"li", ComboBoxMenuItemProps>>;
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -1,51 +1,82 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxMenuItem = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const helpers_js_1 = require("./helpers.js");
-const ListItem_js_1 = require("../List/ListItem.js");
-exports.ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
-    const { focusedIndex, enableVirtualization } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const helpers_js_1 = require('./helpers.js');
+const ListItem_js_1 = require('../List/ListItem.js');
+exports.ComboBoxMenuItem = React.memo(
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      children,
+      isSelected,
+      disabled,
+      value,
+      onClick,
+      sublabel,
+      size = !!sublabel ? 'large' : 'default',
+      startIcon,
+      endIcon,
+      role = 'option',
+      index,
+      ...rest
+    } = props;
+    const { focusedIndex, enableVirtualization } = (0,
+    index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const focusRef = (el) => {
-        if (!enableVirtualization && focusedIndex === index) {
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
-        }
+      if (!enableVirtualization && focusedIndex === index) {
+        el?.scrollIntoView({ block: 'nearest' });
+      }
     };
     const refs = (0, index_js_1.useMergedRefs)(forwardedRef, focusRef);
-    return (React.createElement(ListItem_js_1.ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
-        startIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-        React.createElement(ListItem_js_1.ListItem.Content, null,
-            children,
-            sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
-        endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
-}));
+    return React.createElement(
+      ListItem_js_1.ListItem,
+      {
+        as: 'div',
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        focused: focusedIndex === index,
+        ref: refs,
+        onClick: () => onClick?.(value),
+        role: role,
+        tabIndex: role === 'presentation' ? undefined : -1,
+        'aria-selected': isSelected,
+        'aria-disabled': disabled,
+        'data-iui-index': index,
+        ...rest,
+      },
+      startIcon &&
+        React.createElement(
+          ListItem_js_1.ListItem.Icon,
+          { as: 'span', 'aria-hidden': true },
+          startIcon,
+        ),
+      React.createElement(
+        ListItem_js_1.ListItem.Content,
+        null,
+        children,
+        sublabel &&
+          React.createElement(
+            ListItem_js_1.ListItem.Description,
+            null,
+            sublabel,
+          ),
+      ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem_js_1.ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(index_js_1.SvgCheckmark, null),
+          )),
+    );
+  }),
+);
 exports.ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ComboBoxMultipleContainerProps = {
+type ComboBoxMultipleContainerProps = {
     selectedItems?: React.ReactNode[];
 };
 export declare const ComboBoxMultipleContainer: PolymorphicForwardRefComponent<"div", ComboBoxMultipleContainerProps>;

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,40 +1,21 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBoxMultipleContainer = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const SelectTagContainer_js_1 = __importDefault(require("../Select/SelectTagContainer.js"));
+const React = tslib_1.__importStar(require('react'));
+const SelectTagContainer_js_1 = tslib_1.__importDefault(
+  require('../Select/SelectTagContainer.js'),
+);
 exports.ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
-    const { selectedItems = [], ...rest } = props;
-    return React.createElement(SelectTagContainer_js_1.default, { ref: ref, tags: selectedItems, ...rest });
+  const { selectedItems = [], ...rest } = props;
+  return React.createElement(SelectTagContainer_js_1.default, {
+    ref: ref,
+    tags: selectedItems,
+    ...rest,
+  });
 });
 exports.ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
-declare type ComboBoxAction = {
+import type { usePopover } from '../utils/index.js';
+type ComboBoxAction = {
     type: 'multiselect';
     value: number[];
 } | {
@@ -25,22 +26,23 @@ export declare const comboBoxReducer: (state: {
 };
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLUListElement>;
-    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    menuRef: React.RefObject<HTMLElement>;
     optionsExtraInfoRef: React.MutableRefObject<Record<string, {
         __originalIndex: number;
     }>>;
 } | undefined>;
-declare type ComboBoxStateContextProps<T = unknown> = {
+type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
-    minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
     multiple?: boolean;
+    popover: ReturnType<typeof usePopover>;
+    show: () => void;
+    hide: () => void;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
 export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;

package/cjs/core/ComboBox/helpers.js

@@ -1,75 +1,56 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxActionContext = exports.ComboBoxStateContext = exports.ComboBoxRefsContext = exports.comboBoxReducer = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ComboBoxActionContext =
+  exports.ComboBoxStateContext =
+  exports.ComboBoxRefsContext =
+  exports.comboBoxReducer =
+    void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
+const React = tslib_1.__importStar(require('react'));
 const comboBoxReducer = (state, action) => {
-    var _a, _b, _c, _d, _e;
-    switch (action.type) {
-        case 'open': {
-            return { ...state, isOpen: true };
-        }
-        case 'close': {
-            return { ...state, isOpen: false };
-        }
-        case 'select': {
-            if (Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return {
-                ...state,
-                selected: (_a = action.value) !== null && _a !== void 0 ? _a : state.selected,
-                focusedIndex: (_b = action.value) !== null && _b !== void 0 ? _b : state.focusedIndex,
-            };
-        }
-        case 'multiselect': {
-            if (!Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return { ...state, selected: action.value };
-        }
-        case 'focus': {
-            if (Array.isArray(state.selected)) {
-                return {
-                    ...state,
-                    focusedIndex: (_c = action.value) !== null && _c !== void 0 ? _c : -1,
-                };
-            }
-            return {
-                ...state,
-                focusedIndex: (_e = (_d = action.value) !== null && _d !== void 0 ? _d : state.selected) !== null && _e !== void 0 ? _e : -1,
-            };
-        }
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case 'open': {
+      return { ...state, isOpen: true };
+    }
+    case 'close': {
+      return { ...state, isOpen: false };
+    }
+    case 'select': {
+      if (Array.isArray(state.selected)) {
+        return { ...state };
+      }
+      return {
+        ...state,
+        selected: action.value ?? state.selected,
+        focusedIndex: action.value ?? state.focusedIndex,
+      };
+    }
+    case 'multiselect': {
+      if (!Array.isArray(state.selected)) {
+        return { ...state };
+      }
+      return { ...state, selected: action.value };
+    }
+    case 'focus': {
+      if (Array.isArray(state.selected)) {
+        return {
+          ...state,
+          focusedIndex: action.value ?? -1,
+        };
+      }
+      return {
+        ...state,
+        focusedIndex: action.value ?? state.selected ?? -1,
+      };
+    }
+    default: {
+      return state;
     }
+  }
 };
 exports.comboBoxReducer = comboBoxReducer;
 exports.ComboBoxRefsContext = React.createContext(undefined);

package/cjs/core/ComboBox/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ComboBox = 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 ComboBox_js_1 = require("./ComboBox.js");
-Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return ComboBox_js_1.ComboBox; } });
+var ComboBox_js_1 = require('./ComboBox.js');
+Object.defineProperty(exports, 'ComboBox', {
+  enumerable: true,
+  get: function () {
+    return ComboBox_js_1.ComboBox;
+  },
+});
 exports.default = './ComboBox';

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,16 +1,15 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
+export type DatePickerLocalizedNames = {
+    [key in 'months' | 'shortDays' | 'days']: string[];
+};
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string) => {
-    months: string[];
-    shortDays: string[];
-    days: string[];
-};
-export declare type DateRangePickerProps = {
+export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
+export type DateRangePickerProps = {
     /**
      * Enable date range support.
      * @default false
@@ -34,7 +33,7 @@ export declare type DateRangePickerProps = {
     endDate: Date;
     onChange?: (startDate: Date, endDate: Date) => void;
 };
-declare type DatePickerProps = {
+type DatePickerProps = {
     /**
      * Selected date.
      */
@@ -43,9 +42,7 @@ declare type DatePickerProps = {
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
      */
-    localizedNames?: {
-        [key in 'months' | 'shortDays' | 'days']: string[];
-    };
+    localizedNames?: DatePickerLocalizedNames;
     /**
      * Set focus on selected day or today.
      * @default false
@@ -61,11 +58,44 @@ declare type DatePickerProps = {
      * @default false
      */
     showYearSelection?: boolean;
+    /**
+     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
+     */
+    monthYearProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for only month, referring to span that wraps around the month title.
+     */
+    monthProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for week days, referring to div that wraps around the week day title.
+     */
+    weekDayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
+     */
+    dayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
+     */
+    calendarProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for weeks, referring to div that wraps around weeks.
+     */
+    weekProps?: React.ComponentProps<'div'>;
     /**
      * Will disable dates for which this function returns true.
      * Disabled dates cannot be selected.
      */
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Whether there is a background, border, shadow, etc.
+     *
+     * Should be set to true if used in a popover that doesn't have its own background,
+     * or set to false if the popover has its own background or embedding within a page.
+     *
+     * @default true
+     */
+    applyBackground?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component