@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/utils/icons/SvgUpload.js

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgUpload = (props)=>React.createElement(Svg, props, React.createElement("path", {
-        d: "m2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z"
-    }));
+export const SvgUpload = (props) =>
+  React.createElement(
+    Svg,
+    props,
+    React.createElement('path', {
+      d: 'm2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z',
+    }),
+  );

package/DEV-esm/utils/meta.js

@@ -1,6 +1,6 @@
 import { version } from '../styles.js';
 let _moduleType = 'ESM';
 export const meta = {
-    version,
-    module: _moduleType
+  version,
+  module: _moduleType,
 };

package/DEV-esm/utils/props.js

@@ -1 +1 @@
-export { };
+export {};

package/DEV-esm/utils/providers/HydrationProvider.js

@@ -1,27 +1,38 @@
 import * as React from 'react';
 import { useSyncExternalStore, useIsClient } from '../hooks/index.js';
 let HydrationContext = React.createContext(false);
-let noopSubscribe = ()=>()=>{};
+let noopSubscribe = () => () => {};
 let isServer = 'undefined' == typeof window;
-export const useHydration = ()=>{
-    let hydrating = useSyncExternalStore(noopSubscribe, ()=>false, ()=>!isServer);
-    let hydrated = React.useContext(HydrationContext);
-    let hydratedFallback = useIsClient();
-    if (hydrated || hydratedFallback) return 'hydrated';
-    if (hydrating) return 'hydrating';
+export const useHydration = () => {
+  let hydrating = useSyncExternalStore(
+    noopSubscribe,
+    () => false,
+    () => !isServer,
+  );
+  let hydrated = React.useContext(HydrationContext);
+  let hydratedFallback = useIsClient();
+  if (hydrated || hydratedFallback) return 'hydrated';
+  if (hydrating) return 'hydrating';
 };
-export const HydrationProvider = ({ children })=>{
-    let [isHydrated, setIsHydrated] = React.useState(React.useContext(HydrationContext));
-    let onHydrate = React.useCallback(()=>setIsHydrated(true), []);
-    return React.createElement(HydrationContext.Provider, {
-        value: isHydrated
-    }, isHydrated ? null : React.createElement(HydrationCheck, {
-        onHydrate: onHydrate
-    }), children);
+export const HydrationProvider = ({ children }) => {
+  let [isHydrated, setIsHydrated] = React.useState(
+    React.useContext(HydrationContext),
+  );
+  let onHydrate = React.useCallback(() => setIsHydrated(true), []);
+  return React.createElement(
+    HydrationContext.Provider,
+    {
+      value: isHydrated,
+    },
+    isHydrated
+      ? null
+      : React.createElement(HydrationCheck, {
+          onHydrate: onHydrate,
+        }),
+    children,
+  );
 };
-let HydrationCheck = ({ onHydrate })=>{
-    React.useEffect(()=>void onHydrate(), [
-        onHydrate
-    ]);
-    return null;
+let HydrationCheck = ({ onHydrate }) => {
+  React.useEffect(() => void onHydrate(), [onHydrate]);
+  return null;
 };

package/DEV-esm/utils/providers/ScopeProvider.js

@@ -1,42 +1,43 @@
 import * as React from 'react';
 import { createStore, useAtomValue, useSetAtom } from 'jotai';
 let ScopeContext = React.createContext({
-    store: createStore(),
-    parentStore: null
+  store: createStore(),
+  parentStore: null,
 });
-export const ScopeProvider = ({ children })=>{
-    let store = React.useMemo(()=>createStore(), []);
-    let parentStore = React.useContext(ScopeContext).store;
-    return React.createElement(ScopeContext.Provider, {
-        value: React.useMemo(()=>({
-                store,
-                parentStore
-            }), [
-            store,
-            parentStore
-        ])
-    }, children);
+export const ScopeProvider = ({ children }) => {
+  let store = React.useMemo(() => createStore(), []);
+  let parentStore = React.useContext(ScopeContext).store;
+  return React.createElement(
+    ScopeContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          store,
+          parentStore,
+        }),
+        [store, parentStore],
+      ),
+    },
+    children,
+  );
 };
-export const useScopedAtom = (atom)=>{
-    let { store, parentStore } = React.useContext(ScopeContext);
-    let setAtom = useScopedSetAtom(atom);
-    let value = useAtomValue(atom, {
-        store
-    });
-    let inheritedValue = useAtomValue(atom, {
-        store: parentStore || store
-    });
-    React.useEffect(()=>{
-        if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
-    });
-    return [
-        value,
-        setAtom
-    ];
+export const useScopedAtom = (atom) => {
+  let { store, parentStore } = React.useContext(ScopeContext);
+  let setAtom = useScopedSetAtom(atom);
+  let value = useAtomValue(atom, {
+    store,
+  });
+  let inheritedValue = useAtomValue(atom, {
+    store: parentStore || store,
+  });
+  React.useEffect(() => {
+    if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
+  });
+  return [value, setAtom];
 };
-export const useScopedSetAtom = (atom)=>{
-    let { store } = React.useContext(ScopeContext);
-    return useSetAtom(atom, {
-        store
-    });
+export const useScopedSetAtom = (atom) => {
+  let { store } = React.useContext(ScopeContext);
+  return useSetAtom(atom, {
+    store,
+  });
 };

package/DEV-esm/utils/types.js

@@ -1 +1 @@
-export { };
+export {};

package/cjs/core/Buttons/IconButton.d.ts

@@ -21,6 +21,10 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
+    /**
+     * @deprecated Use `label` instead.
+     */
+    title?: string;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button

package/cjs/core/Buttons/IconButton.js

@@ -17,6 +17,7 @@ const _Tooltip = require('../Tooltip/Tooltip.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const _Popover = require('../Popover/Popover.js');
+const logWarning = (0, _index.createWarningLogger)();
 const IconButton = _react.forwardRef((props, ref) => {
   let {
     isActive,
@@ -24,7 +25,8 @@ const IconButton = _react.forwardRef((props, ref) => {
     styleType = 'default',
     size,
     className,
-    label,
+    title,
+    label = title,
     iconProps,
     labelProps,
     ...rest

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

@@ -42,21 +42,23 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
+            title?: string;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
+            title?: string;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;

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

@@ -9,21 +9,23 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;

package/cjs/core/ComboBox/ComboBox.js

@@ -318,6 +318,11 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
     closeOnOutsideClick: true,
     interactions: {
       click: false,

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -32,7 +32,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;

package/cjs/core/List/List.d.ts

@@ -1 +1 @@
-export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
+export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/List/List.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'List', {
   },
 });
 const _index = require('../../utils/index.js');
-const List = _index.polymorphic.ul('iui-list', {
+const List = _index.polymorphic.div('iui-list', {
   role: 'list',
 });

package/cjs/core/List/ListItem.d.ts

@@ -40,11 +40,11 @@ export type ListItemOwnProps = {
  *   <ListItem>item 3</ListItem>
  * </List>
  */
-export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnProps> & {
+export declare const ListItem: PolymorphicForwardRefComponent<"div", ListItemOwnProps> & {
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Icon: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -53,7 +53,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Content: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Description to be used in addition to the main label of the ListItem.
      * Should be used as a child of `ListItem.Content`.
@@ -66,7 +66,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
      * This ensures that clicking anywhere on the ListItem will trigger the link.

package/cjs/core/List/ListItem.js

@@ -25,7 +25,7 @@ const ListItemComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   return _react.createElement(_index.Box, {
-    as: 'li',
+    role: 'listitem',
     className: (0, _classnames.default)('iui-list-item', className),
     'data-iui-active': active ? 'true' : void 0,
     'data-iui-disabled': disabled ? 'true' : void 0,
@@ -36,11 +36,9 @@ const ListItemComponent = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-const ListItemIcon = (0, _index.polymorphic)('iui-list-item-icon');
-const ListItemContent = (0, _index.polymorphic)('iui-list-item-content');
-const ListItemDescription = (0, _index.polymorphic)(
-  'iui-list-item-description',
-);
+const ListItemIcon = _index.polymorphic.div('iui-list-item-icon');
+const ListItemContent = _index.polymorphic.div('iui-list-item-content');
+const ListItemDescription = _index.polymorphic.div('iui-list-item-description');
 const ListItemAction = _LinkAction.LinkAction;
 const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,

package/cjs/core/Menu/Menu.js

@@ -79,6 +79,12 @@ const Menu = _react.forwardRef((props, ref) => {
       ...restInteractionsProps,
     },
     ...restPopoverProps,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+      ...restPopoverProps.middleware,
+    },
   });
   let { getReferenceProps, getFloatingProps, getItemProps } = (0,
   _react1.useInteractions)([

package/cjs/core/Menu/MenuDivider.d.ts

@@ -13,4 +13,4 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Menu/MenuDivider.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'MenuDivider', {
   },
 });
 const _index = require('../../utils/index.js');
-const MenuDivider = (0, _index.polymorphic)('iui-menu-divider', {
+const MenuDivider = _index.polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });

package/cjs/core/Overlay/Overlay.d.ts

@@ -38,7 +38,7 @@ export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayCompo
      * The main component is a wrapper to hold the
      * `Overlay.HiddenContent` and `Overlay.Overlay`.
      */
-    Wrapper: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Wrapper: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `Overlay.HiddenContent` houses page elements that are blurred by the
      * Overlay. These elements will become inert when the overlay is active.
@@ -48,6 +48,6 @@ export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayCompo
      * `Overlay.Overlay` sits on top of the HiddenContent, and can show
      * any arbitrary content like a progress indicator and loading message.
      */
-    Overlay: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Overlay: PolymorphicForwardRefComponent<"div", {}>;
 };
 export {};

package/cjs/core/Overlay/Overlay.js

@@ -36,8 +36,8 @@ const OverlayHiddenContent = _react.forwardRef((props, ref) => {
     children,
   );
 });
-const OverlayOverlay = (0, _index.polymorphic)('iui-overlay');
-const OverlayWrapper = (0, _index.polymorphic)('iui-overlay-wrapper');
+const OverlayOverlay = _index.polymorphic.div('iui-overlay');
+const OverlayWrapper = _index.polymorphic.div('iui-overlay-wrapper');
 const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,

package/cjs/core/Popover/Popover.d.ts

@@ -26,7 +26,7 @@ type PopoverOptions = {
     /**
      * Middleware options.
      *
-     * By default, `flip` and `shift` are enabled.
+     * By default, `flip`, `shift` and `size` are enabled.
      *
      * @see https://floating-ui.com/docs/middleware
      */
@@ -34,6 +34,13 @@ type PopoverOptions = {
         offset?: number;
         flip?: boolean;
         shift?: boolean;
+        size?: boolean | {
+            /**
+             * Override the maximum height of the popover. Must be a CSS-compatible value.
+             * @default "400px"
+             */
+            maxHeight?: string;
+        };
         autoPlacement?: boolean;
         hide?: boolean;
         inline?: boolean;

package/cjs/core/Popover/Popover.js

@@ -56,10 +56,13 @@ const usePopover = (options) => {
     () => ({
       flip: true,
       shift: true,
+      size: true,
       ...options.middleware,
     }),
     [options.middleware],
   );
+  let maxHeight =
+    'boolean' == typeof middleware.size ? '400px' : middleware.size?.maxHeight;
   let [open, onOpenChange] = (0, _index.useControlledState)(
     false,
     visible,
@@ -69,6 +72,7 @@ const usePopover = (options) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -82,17 +86,32 @@ const usePopover = (options) => {
         [
           void 0 !== middleware.offset &&
             (0, _react1.offset)(middleware.offset),
-          middleware.flip && (0, _react1.flip)(),
-          middleware.shift && (0, _react1.shift)(),
-          matchWidth &&
+          middleware.flip &&
+            (0, _react1.flip)({
+              padding: 4,
+            }),
+          middleware.shift &&
+            (0, _react1.shift)({
+              padding: 4,
+            }),
+          (matchWidth || middleware.size) &&
             (0, _react1.size)({
-              apply: ({ rects }) => {
-                setReferenceWidth(rects.reference.width);
+              padding: 4,
+              apply: ({ rects, availableHeight }) => {
+                if (middleware.size)
+                  setAvailableHeight(Math.round(availableHeight));
+                if (matchWidth) setReferenceWidth(rects.reference.width);
               },
             }),
-          middleware.autoPlacement && (0, _react1.autoPlacement)(),
+          middleware.autoPlacement &&
+            (0, _react1.autoPlacement)({
+              padding: 4,
+            }),
           middleware.inline && (0, _react1.inline)(),
-          middleware.hide && (0, _react1.hide)(),
+          middleware.hide &&
+            (0, _react1.hide)({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [matchWidth, middleware],
     ),
@@ -128,12 +147,17 @@ const usePopover = (options) => {
     }),
   ]);
   let [referenceWidth, setReferenceWidth] = _react.useState();
+  let [availableHeight, setAvailableHeight] = _react.useState();
   let getFloatingProps = _react.useCallback(
     (userProps) =>
       interactions.getFloatingProps({
         ...userProps,
         style: {
           ...floating.floatingStyles,
+          ...(middleware.size &&
+            availableHeight && {
+              maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
+            }),
           zIndex: 9999,
           ...(matchWidth && referenceWidth
             ? {
@@ -144,7 +168,15 @@ const usePopover = (options) => {
           ...userProps?.style,
         },
       }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+    [
+      floating.floatingStyles,
+      interactions,
+      matchWidth,
+      referenceWidth,
+      middleware.size,
+      availableHeight,
+      maxHeight,
+    ],
   );
   let getReferenceProps = _react.useCallback(
     (userProps) =>
@@ -234,7 +266,6 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
               {
                 context: popover.context,
                 modal: false,
-                initialFocus: popover.refs.floating,
               },
               _react.createElement(
                 _index.Box,

package/cjs/core/Select/Select.js

@@ -231,6 +231,11 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
     ...popoverProps,
     onVisibleChange: (open) => (open ? show() : hide()),
   });

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ColumnInstance, HeaderGroup, TableKeyedProps, TableState } from '../../react-table/react-table.js';
+type ColumnHeaderProps<T extends Record<string, unknown> = Record<string, unknown>> = TableKeyedProps & {
+    columnRefs: React.MutableRefObject<Record<string, HTMLDivElement>>;
+    column: HeaderGroup<T>;
+    index: number;
+    areFiltersSet: boolean;
+    hasAnySubRows: boolean;
+    headers: HeaderGroup<T>[];
+    state: TableState<T>;
+    data: T[];
+    isResizable: boolean;
+    columnResizeMode: 'fit' | 'expand';
+    enableColumnReordering: boolean;
+    density: string | undefined;
+    visibleColumns: ColumnInstance<T>[];
+};
+export declare const ColumnHeader: <T extends Record<string, unknown> = Record<string, unknown>>(props: ColumnHeaderProps<T>) => JSX.Element;
+export {};