@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/esm/core/Slider/Thumb.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import type { SliderProps } from './Slider.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 type ThumbProps = {
     /**
      * Thumb value.
@@ -54,7 +53,7 @@ type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-} & Pick<SliderProps, 'orientation'>;
+};
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/esm/core/Slider/Thumb.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
@@ -26,7 +26,6 @@ export const Thumb = (props) => {
     tooltipProps,
     thumbProps,
     disabled,
-    orientation,
   } = props;
   const thumbRef = React.useRef(null);
   const handleOnKeyboardEvent = React.useCallback(
@@ -93,13 +92,10 @@ export const Thumb = (props) => {
     },
     React.createElement(Box, {
       ...rest,
-      'data-index': index,
       ref: thumbRef,
       style: {
         ...style,
-        ...(orientation === 'horizontal'
-          ? { insetInlineStart: `${lowPercent}%` }
-          : { insetBlockEnd: `${lowPercent}%` }),
+        '--iui-slider-thumb-position': `${lowPercent}%`,
       },
       className: cx('iui-slider-thumb', { 'iui-active': isActive }, className),
       role: 'slider',

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.

package/esm/core/StatusMessage/StatusMessage.js

@@ -3,8 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, StatusIconMap, Icon } from '../utils/index.js';
+import { Box, StatusIconMap } from '../utils/index.js';
 import cx from 'classnames';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Component to display icon and text below the form field.
  * @example

package/esm/core/Stepper/StepperStep.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const StepperStep = React.forwardRef((props, forwardedRef) => {
   const {

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
   const { title, description, className, style, contentProps, ...rest } = props;

package/esm/core/Surface/Surface.d.ts

@@ -11,6 +11,14 @@ type SurfaceProps = {
      * Sets the elevation of the surface
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sets the border of the surface.
+     *
+     * Can be a boolean to toggle the default border, or a string value to specify a custom border.
+     *
+     * @default true
+     */
+    border?: boolean | string;
     /**
      * Content in the surface.
      */

package/esm/core/Surface/Surface.js

@@ -26,6 +26,16 @@ const getSurfaceElevationValue = (elevation) => {
       return '';
   }
 };
+/** Returns correct border value based on prop */
+const getBorderValue = (border) => {
+  if (typeof border === 'string') {
+    return border;
+  }
+  if (border === false) {
+    return 'none';
+  }
+  return '';
+};
 // ----------------------------------------------------------------------------
 // Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
@@ -73,10 +83,18 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 export const Surface = Object.assign(
   React.forwardRef((props, ref) => {
-    const { elevation, className, style, children, ...rest } = props;
+    const {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
       '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
       ...style,
     };
     return React.createElement(

package/esm/core/Table/SubRowExpander.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps } from 'react-table';
+import type { Cell, CellProps } from '../../react-table/react-table.js';
 export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;

package/esm/core/Table/SubRowExpander.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { SvgChevronRight } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 export const SubRowExpander = (props) => {
   const { cell, isDisabled, cellProps, expanderCell, density } = props;
   return React.createElement(

package/esm/core/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, TableOptions, Row, TableState } from 'react-table';
+import type { CellProps, TableOptions, Row, TableState } from '../../react-table/react-table.js';
 import type { CommonProps } from '../utils/index.js';
 import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";

package/esm/core/Table/Table.js

@@ -16,7 +16,7 @@ import {
   useColumnOrder,
   useGlobalFilter,
 } from 'react-table';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import {
   useGlobals,
   useResizeObserver,
@@ -24,6 +24,7 @@ import {
   SvgSortUp,
   useIsomorphicLayoutEffect,
   Box,
+  createWarningLogger,
 } from '../utils/index.js';
 import { getCellStyle, getStickyStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
@@ -54,17 +55,13 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-let didLogWarning = false;
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-  isDev = process.env.NODE_ENV !== 'production';
-} catch {}
+const logWarningInDev = createWarningLogger();
 const flattenColumns = (columns) => {
   const flatColumns = [];
   columns.forEach((column) => {
     flatColumns.push(column);
     if ('columns' in column) {
+      // @ts-expect-error - Since nested columns are not supported from a types perspective
       flatColumns.push(...flattenColumns(column.columns));
     }
   });
@@ -343,12 +340,9 @@ export const Table = (props) => {
   let headerGroups = _headerGroups;
   if (columns.length === 1 && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
-    if (isDev && !didLogWarning) {
-      console.warn(
-        `Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`,
-      );
-      didLogWarning = true;
-    }
+    logWarningInDev(
+      `Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`,
+    );
   }
   const ariaDataAttributes = Object.entries(rest).reduce(
     (result, [key, value]) => {

package/esm/core/Table/TableCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps, TableInstance } from 'react-table';
+import type { Cell, CellProps, TableInstance } from '../../react-table/react-table.js';
 export type TableCellProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     cellIndex: number;

package/esm/core/Table/TablePaginator.js

@@ -4,9 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton, Button, DropdownButton } from '../Buttons/index.js';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
-import { MenuItem } from '../Menu/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Button } from '../Buttons/Button.js';
+import { DropdownButton } from '../Buttons/DropdownButton.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
+import { MenuItem } from '../Menu/MenuItem.js';
 import {
   getBoundedValue,
   useGlobals,

package/esm/core/Table/TableRowMemoized.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, Row, TableInstance, TableState } from 'react-table';
+import type { CellProps, Row, TableInstance, TableState } from '../../react-table/react-table.js';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
  * Using `isLast` here instead of passing data length to avoid re-renders of all rows when more data is added. Now only the last row re-renders.

package/esm/core/Table/actionHandlers/expandHandler.d.ts

@@ -1,2 +1,2 @@
-import type { TableInstance, TableState } from 'react-table';
+import type { TableInstance, TableState } from '../../../react-table/react-table.js';
 export declare const onExpandHandler: <T extends Record<string, unknown>>(newState: TableState<T>, instance?: TableInstance<T> | undefined, onExpand?: ((expandedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined) => void;

package/esm/core/Table/actionHandlers/filterHandler.d.ts

@@ -1,3 +1,3 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState } from '../../../react-table/react-table.js';
 import type { TableFilterValue } from '../filters/index.js';
 export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, currentFilter: TableFilterValue<T>[], instance?: TableInstance<T> | undefined) => TableFilterValue<T>[];

package/esm/core/Table/actionHandlers/resizeHandler.d.ts

@@ -1,7 +1,7 @@
-import type { ActionType, TableState } from 'react-table';
+import type { ActionType, TableState } from '../../../react-table/react-table.js';
 export declare const onTableResizeStart: <T extends Record<string, unknown>>(state: TableState<T>) => {
     isTableResizing: boolean;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: import("../../../react-table/react-table.js").IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -17,18 +17,18 @@ export declare const onTableResizeStart: <T extends Record<string, unknown>>(sta
         isScrolledToLeft?: boolean | undefined;
     };
     lastSelectedRowId?: string | undefined;
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
-    filters: import("react-table").Filters<T>;
+    columnOrder: import("../../../react-table/react-table.js").IdType<T>[];
+    expanded: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
+    filters: import("../../../react-table/react-table.js").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: import("../../../react-table/react-table.js").IdType<T>[];
     pageSize: number;
     pageIndex: number;
-    selectedRowIds: Record<import("react-table").IdType<T>, boolean>;
+    selectedRowIds: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
     rowState: Record<string, {
-        cellState: import("react-table").UseRowStateLocalState<T, unknown>;
+        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
     }>;
-    sortBy: import("react-table").SortingRule<T>[];
+    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
 };
 export declare const onTableResizeEnd: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType) => {
     isTableResizing: boolean;
@@ -41,23 +41,23 @@ export declare const onTableResizeEnd: <T extends Record<string, unknown>>(state
         nextHeaderIdWidths?: [string, number][] | undefined;
         isResizingColumn?: string | undefined;
     };
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: import("../../../react-table/react-table.js").IdType<T>[] | undefined;
     columnReorderStartIndex: number;
     sticky: {
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
     lastSelectedRowId?: string | undefined;
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
-    filters: import("react-table").Filters<T>;
+    columnOrder: import("../../../react-table/react-table.js").IdType<T>[];
+    expanded: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
+    filters: import("../../../react-table/react-table.js").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: import("../../../react-table/react-table.js").IdType<T>[];
     pageSize: number;
     pageIndex: number;
-    selectedRowIds: Record<import("react-table").IdType<T>, boolean>;
+    selectedRowIds: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
     rowState: Record<string, {
-        cellState: import("react-table").UseRowStateLocalState<T, unknown>;
+        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
     }>;
-    sortBy: import("react-table").SortingRule<T>[];
+    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
 };

package/esm/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,4 +1,4 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState } from '../../../react-table/react-table.js';
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     lastSelectedRowId: any;
     selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: import("../../../react-table/react-table.js").IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -25,17 +25,17 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
-    filters: import("react-table").Filters<T>;
+    columnOrder: import("../../../react-table/react-table.js").IdType<T>[];
+    expanded: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
+    filters: import("../../../react-table/react-table.js").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: import("../../../react-table/react-table.js").IdType<T>[];
     pageSize: number;
     pageIndex: number;
     rowState: Record<string, {
-        cellState: import("react-table").UseRowStateLocalState<T, unknown>;
+        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
     }>;
-    sortBy: import("react-table").SortingRule<T>[];
+    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
 };
 /**
  * Handles selection when clicked on a row while shift key is pressed.

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRendererProps } from 'react-table';
+import type { CellRendererProps } from '../../../react-table/react-table.js';
 export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Custom icon to be displayed at the beginning of the cell.

package/esm/core/Table/cells/EditableCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRendererProps } from 'react-table';
+import type { CellRendererProps } from '../../../react-table/react-table.js';
 export type EditableCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & {
     /**
      * Callback function when cell is edited. It is called only when `onBlur` event is fired.

package/esm/core/Table/columns/actionColumn.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { HeaderProps } from 'react-table';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
+import type { HeaderProps } from '../../../react-table/react-table.js';
+import type { DropdownMenuProps } from '../../DropdownMenu/DropdownMenu.js';
 type ActionColumnProps = {
     columnManager?: boolean | {
         dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;

package/esm/core/Table/columns/actionColumn.js

@@ -3,15 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Checkbox } from '../../Checkbox/index.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { SvgColumnManager } from '../../utils/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { IconButton } from '../../Buttons/IconButton/index.js';
-import { MenuItem } from '../../Menu/index.js';
+import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { MenuItem } from '../../Menu/MenuItem.js';
 import { tableResizeStartAction } from '../Table.js';
 import { SELECTION_CELL_ID } from './selectionColumn.js';
 import { EXPANDER_CELL_ID } from './expanderColumn.js';
-import cx from 'classnames';
 const ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -105,15 +104,10 @@ export const ActionColumn = ({ columnManager = false } = {}) => {
         {
           ...dropdownMenuProps,
           menuItems: headerCheckBoxes,
-          onHide: (i) => {
-            setIsOpen(false);
-            dropdownMenuProps.onHide?.(i);
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
           },
-          onShow: (i) => {
-            setIsOpen(true);
-            dropdownMenuProps.onShow?.(i);
-          },
-          className: cx('iui-scroll', dropdownMenuProps.className),
         },
         React.createElement(
           IconButton,

package/esm/core/Table/columns/expanderColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, CellRendererProps, Row } from 'react-table';
+import type { CellProps, CellRendererProps, Row } from '../../../react-table/react-table.js';
 export declare const EXPANDER_CELL_ID = "iui-table-expander";
 /**
  * Expander column that adds sub-content expander column to the Table.

package/esm/core/Table/columns/expanderColumn.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { SvgChevronRight } from '../../utils/index.js';
-import { IconButton } from '../../Buttons/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
 /**
@@ -58,6 +58,7 @@ export const ExpanderColumn = (props = {}) => {
               row.toggleRowExpanded();
             },
             disabled: isDisabled?.(props.row.original),
+            'aria-expanded': row.isExpanded,
           },
           React.createElement(SvgChevronRight, null),
         );

package/esm/core/Table/columns/selectionColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, CellRendererProps, HeaderProps } from 'react-table';
+import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
  * Selection column that adds selection checkbox column to the Table.

package/esm/core/Table/columns/selectionColumn.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Checkbox } from '../../Checkbox/index.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { LabeledInput } from '../../../LabeledInput/index.js';
+import type { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
 import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
 import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export type DatePickerInputProps = {

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -3,11 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, SvgCalendar, isBefore, useId } from '../../../utils/index.js';
-import { DatePicker } from '../../../DatePicker/index.js';
-import { InputGrid } from '../../../InputGrid/index.js';
-import { Label } from '../../../Label/index.js';
-import { InputWithDecorations } from '../../../InputWithDecorations/index.js';
+import { SvgCalendar, isBefore, useId } from '../../../utils/index.js';
+import { DatePicker } from '../../../DatePicker/DatePicker.js';
+import { InputGrid } from '../../../InputGrid/InputGrid.js';
+import { Label } from '../../../Label/Label.js';
+import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
+import { Popover } from '../../../Popover/Popover.js';
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
   const {
@@ -66,54 +67,51 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
     [onChange, parseInput],
   );
   return React.createElement(
-    Popover,
-    {
-      content: React.createElement(DatePicker, {
-        date: date,
-        onChange: onDateSelected,
-        setFocus: true,
-        isDateDisabled: isDateDisabled,
-        localizedNames: localizedNames,
-      }),
-      placement: 'bottom',
-      visible: isVisible,
-      onClickOutside: (_, e) => {
-        if (!buttonRef.current?.contains(e.target)) {
-          close();
-        }
+    InputGrid,
+    { labelPlacement: 'inline', ...wrapperProps },
+    React.createElement(
+      Label,
+      {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
       },
-      appendTo: 'parent',
-    },
+      label,
+    ),
     React.createElement(
-      InputGrid,
-      { labelPlacement: 'inline', ...wrapperProps },
+      InputWithDecorations,
+      { ...inputWrapperProps },
+      React.createElement(InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
+      }),
       React.createElement(
-        Label,
+        Popover,
         {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          htmlFor: id,
-          ...labelProps,
+          content: React.createElement(DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+            applyBackground: false,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
         },
-        label,
-      ),
-      React.createElement(
-        InputWithDecorations,
-        { ...inputWrapperProps },
-        React.createElement(InputWithDecorations.Input, {
-          id: id,
-          value: inputValue,
-          onChange: onInputChange,
-          onClick: close,
-          required: required,
-          disabled: disabled,
-          ref: forwardedRef,
-          ...rest,
-        }),
         React.createElement(
           InputWithDecorations.Button,
-          { onClick: () => setIsVisible((v) => !v), ref: buttonRef },
+          { 'aria-label': 'Date picker', ref: buttonRef },
           React.createElement(SvgCalendar, null),
         ),
       ),

package/esm/core/Table/filters/FilterButtonBar.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../utils/index.js';
-import { Button } from '../../Buttons/index.js';
+import { Button } from '../../Buttons/Button.js';
 const defaultStrings = {
   filter: 'Filter',
   clear: 'Clear',

package/esm/core/Table/filters/FilterToggle.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { HeaderGroup } from 'react-table';
+import type { HeaderGroup } from '../../../react-table/react-table.js';
 import type { CommonProps } from '../../utils/index.js';
 export type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;