@algolia/satellite 1.0.0-beta.161 → 1.0.0-beta.162

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type FlexGridDirection = "row" | "column";
 export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
@@ -47,5 +47,5 @@ export interface FlexGridProps {
     spacing?: FlexGridSpacing;
     children: ReactNode;
 }
-export declare const FlexGrid: FunctionComponent<FlexGridProps>;
+export declare const FlexGrid: VFC<FlexGridProps>;
 export default FlexGrid;

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 export declare type HelpUnderlineProps = {
@@ -7,5 +7,5 @@ export declare type HelpUnderlineProps = {
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
 } & Omit<TooltipWrapperBaseProps, "children">;
-export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
+export declare const HelpUnderline: VFC<HelpUnderlineProps>;
 export default HelpUnderline;

package/cjs/Insert/Insert.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
@@ -41,5 +41,5 @@ export interface InsertProps {
 * ## Accessibility
 * TODO
  */
-export declare const Insert: FC<InsertProps>;
+export declare const Insert: VFC<InsertProps>;
 export default Insert;

package/cjs/KeyboardKey/KeyboardKey.d.ts

@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 export interface KeyboardKeyProps {
     /** @ignore */
     className?: string;
     value: string;
 }
-export declare const KeyboardKey: FC<KeyboardKeyProps>;
+export declare const KeyboardKey: VFC<KeyboardKeyProps>;

package/cjs/Medallion/Medallion.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../types";
 import type { MedallionSize, MedallionVariant } from "./types";
 export interface MedallionProps {
@@ -7,5 +7,5 @@ export interface MedallionProps {
     size?: MedallionSize;
     className?: string;
 }
-export declare const Medallion: ({ icon: Icon, variant, size, className }: MedallionProps) => JSX.Element;
+export declare const Medallion: VFC<MedallionProps>;
 export default Medallion;

package/cjs/Modal/Modal.d.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { XOR } from "../types";
+import ModalFooter from "./components/ModalFooter";
+import ModalSection from "./components/ModalSection";
 export declare type ModalSizeVariant = "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
@@ -46,9 +48,9 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
     autoFocusOnOpenElement?: HTMLElement | null | false;
     children: ReactNode;
 };
-export declare const Modal: {
-    ({ title, className, children, open, onDismiss, fullBleed, animate, hideCloseIcon, size, centerY, autoFocusOnOpenElement, autoFocusOnCloseElement, triggerButton, locale: propsLocale, }: ModalProps): JSX.Element;
-    Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
-    Section: ({ children, className, fullBleed }: import("./components/ModalSection").ModalSectionProps) => JSX.Element;
+declare type ModalSubComponents = {
+    Footer: typeof ModalFooter;
+    Section: typeof ModalSection;
 };
+export declare const Modal: VFC<ModalProps> & ModalSubComponents;
 export default Modal;

package/cjs/Modal/components/ModalFooter.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode, VFC } from "react";
 export declare type ModalFooterProps = HTMLAttributes<HTMLElement> & {
     children: ReactNode;
 };
-export declare const ModalFooter: FunctionComponent<ModalFooterProps>;
+export declare const ModalFooter: VFC<ModalFooterProps>;
 export default ModalFooter;

package/cjs/Modal/components/ModalSection.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type ModalSectionProps = {
     children: ReactNode;
     /** @ignore */
@@ -6,5 +6,5 @@ export declare type ModalSectionProps = {
     /** Negates the modal default horizontal padding when true */
     fullBleed?: boolean;
 };
-export declare const ModalSection: ({ children, className, fullBleed }: ModalSectionProps) => JSX.Element;
+export declare const ModalSection: VFC<ModalSectionProps>;
 export default ModalSection;

package/cjs/Pagination/CompactPagination/CompactPagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export declare type CompactPaginationLabel = "complete" | "compact" | "none";
 export declare type CompactPaginationLocale = {
     goToFirstPage?: string;
@@ -27,5 +27,5 @@ export declare type CompactPaginationProps = DeterminateCompactPaginationProps |
 export declare const isDeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is DeterminateCompactPaginationProps;
 /** @ignore */
 export declare const isIndeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is IndeterminateCompactPaginationProps;
-export declare const CompactPagination: (props: CompactPaginationProps) => JSX.Element;
+export declare const CompactPagination: VFC<CompactPaginationProps>;
 export default CompactPagination;

package/cjs/Pagination/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export declare type PaginationLocale = {
     goToPage?(page: number): string;
     goToNextPage?: string;
@@ -18,5 +18,5 @@ export interface PaginationProps {
  * - Don't use on list with less than 20 items
  * - Place the pagination at the bottom of the split item
  */
-export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam, locale: propsLocale, }: PaginationProps) => JSX.Element;
+export declare const Pagination: VFC<PaginationProps>;
 export default Pagination;

package/cjs/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, VFC } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
     value: number;
@@ -9,5 +9,5 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-export declare const ProgressBar: ({ value, className, barClassName, ...props }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: VFC<ProgressBarProps>;
 export default ProgressBar;

package/cjs/ProgressSpinner/ProgressSpinner.d.ts

@@ -1,9 +1,9 @@
-import type { SVGAttributes } from "react";
+import type { SVGAttributes, VFC } from "react";
 export declare type ProgressSpinnerAlign = "left" | "center" | "right";
 export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
     size?: number;
     thickness?: number;
     align?: ProgressSpinnerAlign;
 }
-export declare const ProgressSpinner: ({ className, size, thickness, align, ...svgProps }: ProgressSpinnerProps) => JSX.Element;
+export declare const ProgressSpinner: VFC<ProgressSpinnerProps>;
 export default ProgressSpinner;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export interface RadioGroupProps {
     className?: string;
     name?: string;
@@ -17,7 +17,10 @@ export interface RadioGroupItemProps {
     disabled?: boolean;
     children?: ReactNode;
 }
-export declare const RadioGroupItem: FunctionComponent<RadioGroupItemProps>;
+declare type RadioGroupSubComponents = {
+    Item: VFC<RadioGroupItemProps>;
+};
+export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
  * Use radio buttons when users have to make a single selection from a list of options.
  *
@@ -33,8 +36,5 @@ export declare const RadioGroupItem: FunctionComponent<RadioGroupItemProps>;
  * - If you need to have an unselected state, just add a radio button with a *None* option.
  * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
  */
-export declare const RadioGroup: {
-    ({ className, name, value, disabled, textPosition, children, onChange }: RadioGroupProps): JSX.Element;
-    Item: FunctionComponent<RadioGroupItemProps>;
-};
+export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
 export default RadioGroup;

package/cjs/Satellite/Satellite.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type ReactNode } from "react";
+import { type ReactNode, type VFC } from "react";
 import type { ComponentsLocales } from "./locale";
 import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
@@ -7,5 +7,5 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
-export declare const Satellite: FunctionComponent<SatelliteProps>;
+export declare const Satellite: VFC<SatelliteProps>;
 export default Satellite;

package/cjs/Satellite/Satellite.js

@@ -5,41 +5,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Satellite = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _SatelliteContext = _interopRequireDefault(require("./SatelliteContext"));
 var _SatelliteRouter = require("./SatelliteRouter");
 var _jsxRuntime = require("react/jsx-runtime");
+var DEFAULT_PORTAL_ID = "satellite-portal";
+var createDefaultPortalTarget = function createDefaultPortalTarget() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  var div = document.createElement("div");
+  div.setAttribute("id", DEFAULT_PORTAL_ID);
+  div.setAttribute("data-testid", DEFAULT_PORTAL_ID);
+  return div;
+};
+var isDefaultPortalTarget = function isDefaultPortalTarget(el) {
+  return el.getAttribute("id") === DEFAULT_PORTAL_ID;
+};
 var Satellite = function Satellite(_ref) {
+  var _ref2;
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
     locales = _ref.locales,
     _ref$portalTarget = _ref.portalTarget,
     customPortalTarget = _ref$portalTarget === void 0 ? null : _ref$portalTarget,
     children = _ref.children;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    defaultPortalTarget = _useState2[0],
-    setDefaultPortalTarget = _useState2[1];
-  var portalTarget = customPortalTarget !== null && customPortalTarget !== void 0 ? customPortalTarget : defaultPortalTarget;
+  var portalTarget = (_ref2 = customPortalTarget !== null && customPortalTarget !== void 0 ? customPortalTarget : document.getElementById(DEFAULT_PORTAL_ID)) !== null && _ref2 !== void 0 ? _ref2 : createDefaultPortalTarget();
+
+  // Auto append / remove default target as necessary
   (0, _react.useEffect)(function () {
-    if (!portalTarget) return;
+    if (!portalTarget || !isDefaultPortalTarget(portalTarget)) return;
+    document.body.appendChild(portalTarget);
+    return function () {
+      return portalTarget.remove();
+    };
+  }, [portalTarget]);
+
+  // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
+  (0, _react.useEffect)(function () {
+    if (!portalTarget || typeof document === "undefined") return;
     if (portalTarget === document.body) {
       console.warn("Avoid using the document body as a portal target.");
     }
-
-    // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
     portalTarget.style.pointerEvents = "auto";
   }, [portalTarget]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SatelliteContext["default"].Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {
     value: {
       router: router,
       locales: locales,
       portalTarget: portalTarget
     },
-    children: [children, !customPortalTarget && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: setDefaultPortalTarget
-    })]
+    children: children
   });
 };
 exports.Satellite = Satellite;

package/cjs/ScrollIndicator/ScrollIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, FunctionComponent, ReactHTML, ReactNode } from "react";
+import type { CSSProperties, ReactHTML, ReactNode, VFC } from "react";
 export declare type ScrollIndicatorVariant = "light" | "dark";
 export interface ScrollIndicatorProps {
     wrapperClassName?: string;
@@ -10,5 +10,5 @@ export interface ScrollIndicatorProps {
     variant?: ScrollIndicatorVariant;
     children: ReactNode;
 }
-export declare const ScrollIndicator: FunctionComponent<ScrollIndicatorProps>;
+export declare const ScrollIndicator: VFC<ScrollIndicatorProps>;
 export default ScrollIndicator;

package/cjs/Separator/Separator.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import * as RadixSeparator from "@radix-ui/react-separator";
+import type { VFC } from "react";
 export interface SeparatorProps {
     className?: string;
     orientation?: RadixSeparator.SeparatorProps["orientation"];
 }
-export declare const Separator: ({ className, orientation }: SeparatorProps) => JSX.Element;
+export declare const Separator: VFC<SeparatorProps>;
 export default Separator;

package/cjs/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
 export interface SidebarProps {
     id?: string;
@@ -32,4 +32,4 @@ export interface SidebarProps {
     location: SidebarLocation;
     children?: ReactNode;
 }
-export declare const Sidebar: FC<SidebarProps>;
+export declare const Sidebar: VFC<SidebarProps>;

package/cjs/Sidebar/SidebarButtonLink.d.ts

@@ -1,4 +1,4 @@
-import type { FC, MouseEventHandler, ReactNode } from "react";
+import type { MouseEventHandler, ReactNode, VFC } from "react";
 import type { IconComponentType } from "../types";
 export declare type SidebarButtonLinkIcon = IconComponentType | {
     active: IconComponentType;
@@ -17,4 +17,4 @@ export interface SidebarButtonLinkProps {
     tooltipContent?: ReactNode;
     children: ReactNode;
 }
-export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;
+export declare const SidebarButtonLink: VFC<SidebarButtonLinkProps>;

package/cjs/Sidebar/SidebarHeader.d.ts

@@ -1,6 +1,6 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidebarHeaderProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const SidebarHeader: FC<SidebarHeaderProps>;
+export declare const SidebarHeader: VFC<SidebarHeaderProps>;

package/cjs/Sidebar/SidebarHeading.d.ts

@@ -1,7 +1,7 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidebarHeadingProps = {
     id?: string;
     className?: string;
     children: ReactNode;
 };
-export declare const SidebarHeading: FC<SidebarHeadingProps>;
+export declare const SidebarHeading: VFC<SidebarHeadingProps>;

package/cjs/Sidebar/SidebarLink.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../types";
 export declare type SidebarLinkProps = {
     icon: IconComponentType;
@@ -6,4 +6,4 @@ export declare type SidebarLinkProps = {
     disabled?: boolean;
     children: ReactNode;
 } & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "target" | "rel" | "aria-label" | "onClick">;
-export declare const SidebarLink: FC<SidebarLinkProps>;
+export declare const SidebarLink: VFC<SidebarLinkProps>;

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -1,8 +1,8 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 declare type ActiveLinkIndicatorProps = {
     className?: string;
     activeIndex?: number;
     linksCount: number;
 };
-export declare const ActiveLinkIndicator: FC<ActiveLinkIndicatorProps>;
+export declare const ActiveLinkIndicator: VFC<ActiveLinkIndicatorProps>;
 export {};

package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 import type { SidebarLinksGroupLink } from "./types";
 declare type LinkProps = SidebarLinksGroupLink & {
     active: boolean;
 };
-export declare const SidebarGroupLink: FC<LinkProps>;
+export declare const SidebarGroupLink: VFC<LinkProps>;
 export {};

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../../types";
 import type { SidebarLinksGroupLink } from "./types";
 declare type SidebarLinksGroupBaseProps = {
@@ -19,5 +19,5 @@ export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBasePro
     onGroupToggle?: (open: boolean) => void;
 };
 export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
-export declare const SidebarLinksGroup: (props: SidebarLinksGroupProps) => JSX.Element;
+export declare const SidebarLinksGroup: VFC<SidebarLinksGroupProps>;
 export {};

package/cjs/Sidebar/SidebarNav.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidebarNavSpacing = "small" | "large";
 export declare type SidebarNavProps = {
     id?: string;
@@ -7,4 +7,4 @@ export declare type SidebarNavProps = {
     label: string;
     children: ReactNode;
 };
-export declare const SidebarNav: FC<SidebarNavProps>;
+export declare const SidebarNav: VFC<SidebarNavProps>;

package/cjs/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { SwitchSize } from "./types";
 export interface SwitchProps {
     className?: string;
@@ -9,5 +9,5 @@ export interface SwitchProps {
     size?: SwitchSize;
     name?: string;
 }
-export declare const Switch: FunctionComponent<SwitchProps>;
+export declare const Switch: VFC<SwitchProps>;
 export default Switch;

package/cjs/Switch/SwitchOption.d.ts

@@ -1,8 +1,8 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export interface SwitchOptionProps {
     value: string;
     disabled?: boolean;
     children: ReactNode;
 }
-export declare const SwitchOption: FunctionComponent<SwitchOptionProps>;
+export declare const SwitchOption: VFC<SwitchOptionProps>;
 export default SwitchOption;

package/cjs/Tables/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
 declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
+export declare type SortMode = "single" | "multi";
 export declare type DataTableLocale = {
     selectAllButton?: string;
     noDataTitle?: string;
@@ -14,7 +15,6 @@ interface BaseDataTableProps<Item> {
     data: Item[];
     itemId?: GetItemId<Item>;
     pagination?: PaginationConfiguration;
-    sorting?: Sorting[];
     onChange?(dataConfiguration: DataConfiguration): void;
     status?: Status;
     noDataContent?: ReactNode;
@@ -22,6 +22,8 @@ interface BaseDataTableProps<Item> {
     columns: ColumnDefinition<Item>[];
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
+    sorting?: Sorting[];
+    sortMode?: SortMode;
     locale?: DataTableLocale;
 }
 declare type DataTableWithSelectMode<Item> = {
@@ -56,5 +58,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
  * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
  * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
 export default DataTable;

package/cjs/Tables/DataTable/DataTable.js

@@ -73,6 +73,8 @@ var DataTable = function DataTable(_ref) {
     errorContent = _ref.errorContent,
     _ref$sorting = _ref.sorting,
     sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+    _ref$sortMode = _ref.sortMode,
+    sortMode = _ref$sortMode === void 0 ? "single" : _ref$sortMode,
     _ref$pagination = _ref.pagination,
     pagination = _ref$pagination === void 0 ? false : _ref$pagination,
     _ref$selectMode = _ref.selectMode,
@@ -189,12 +191,15 @@ var DataTable = function DataTable(_ref) {
     };
   });
   var internalSorting = computedColumns.map(function (c) {
-    var _sorting$find$, _sorting$find;
-    return [c.id, c.sort ? (_sorting$find$ = (_sorting$find = sorting.find(function (_ref5) {
+    var _sorting$find;
+    if (c.sort === undefined) return [c.id, "none"];
+    var columnDirection = (_sorting$find = sorting.find(function (_ref5) {
       var _ref6 = (0, _slicedToArray2["default"])(_ref5, 1),
         columnId = _ref6[0];
       return columnId === c.id;
-    })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
+    })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1];
+    if (columnDirection) return [c.id, columnDirection];
+    return [c.id, "desc"];
   });
   var shouldRenderPagination = function shouldRenderPagination() {
     if ((0, _utils2.isDeterminatePagination)(pagination)) return pagination && pagination.totalItemsCount > 0;
@@ -210,7 +215,7 @@ var DataTable = function DataTable(_ref) {
       var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
         colId = _ref8[0],
         d = _ref8[1];
-      return columnId === colId ? [columnId, direction] : [colId, d];
+      return columnId === colId ? [columnId, direction] : [colId, sortMode === "multi" ? d : "none"];
     });
     onChange === null || onChange === void 0 ? void 0 : onChange({
       pagination: pagination,

package/cjs/Tables/DataTable/components/Footer.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { DataConfiguration, PaginationConfiguration } from "../types";
 export interface FooterProps {
     pagination: PaginationConfiguration;
     onChange(dataConfiguration: DataConfiguration): void;
 }
-export declare const Footer: ({ pagination, onChange }: FooterProps) => JSX.Element | null;
+export declare const Footer: VFC<FooterProps>;
 export default Footer;

package/cjs/Tables/DataTable/components/Loader.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { VFC } from "react";
 import type { DataTableLocale } from "../DataTable";
 export interface LoaderProps {
     className?: string;
     locale: Required<DataTableLocale>;
 }
-export declare const Loader: ({ className, locale }: LoaderProps) => JSX.Element;
+export declare const Loader: VFC<LoaderProps>;
 export default Loader;

package/cjs/Tables/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes } from "react";
+import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
 export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     footer?: ReactNode;
     smallFooter?: boolean;
@@ -24,5 +24,5 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
  * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
  * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
  */
-export declare const Table: ({ className, footer, smallFooter, hasActions, highlight, ...props }: TableProps) => JSX.Element;
+export declare const Table: VFC<TableProps>;
 export default Table;

package/cjs/Tables/Table/components/TableFooter.d.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type FooterSizes = "default" | "small";
 export interface FooterProps {
     size?: FooterSizes;
     children?: ReactNode;
 }
-export declare const TableFooter: ({ size, children }: FooterProps) => JSX.Element;
+export declare const TableFooter: VFC<FooterProps>;
 export default TableFooter;

package/cjs/Tabs/ContentTabs.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { ContentTabsProps } from "./types";
-export declare const ContentTabs: ({ className, tabs, tabIndex, defaultIndex, onChange }: ContentTabsProps) => JSX.Element;
+export declare const ContentTabs: VFC<ContentTabsProps>;
 export default ContentTabs;

package/cjs/Tabs/LinkTabs.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { LinkTabsProps, UrlMatcher } from "./types";
 export declare const defaultUrlMatcher: UrlMatcher;
 /**
@@ -29,5 +29,5 @@ export declare const defaultUrlMatcher: UrlMatcher;
  * - Use more than one row of tabs. Multiple rows create jumping UI elements, which make it impossible for users to remember which tabs they've already visited
  * - Place the tab on the sides or bottom of the page, where users often overlook them
  */
-export declare const LinkTabs: ({ className, tabs, onTabClick, urlMatcher }: LinkTabsProps) => JSX.Element;
+export declare const LinkTabs: VFC<LinkTabsProps>;
 export default LinkTabs;

package/cjs/Tabs/components/LinkTab.d.ts

@@ -1,9 +1,9 @@
-import type { MouseEventHandler } from "react";
+import type { MouseEventHandler, VFC } from "react";
 import type { LinkTab as LinkTabType } from "../types";
 export interface LinkTabProps {
     tab: LinkTabType;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     selected: boolean;
 }
-export declare const LinkTab: ({ tab, onClick, selected }: LinkTabProps) => JSX.Element;
+export declare const LinkTab: VFC<LinkTabProps>;
 export default LinkTab;

package/cjs/TextWrap/TextWrap.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "children"> {
     /** The max number of lines before the text is cut with an ellipsis */
     maxLines?: number;
     children: string;
 }
-export declare const TextWrap: ({ children: text, maxLines, style, ...spanProps }: TextWrapProps) => JSX.Element;
+export declare const TextWrap: VFC<TextWrapProps>;
 export default TextWrap;

package/cjs/Tooltip/OverflowTooltipWrapper.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
-export declare const OverflowTooltipWrapper: ({ children, ...props }: TooltipWrapperBaseProps) => JSX.Element;
+export declare const OverflowTooltipWrapper: VFC<TooltipWrapperBaseProps>;

package/cjs/Tooltip/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, ReactText } from "react";
+import { ReactElement, ReactNode, ReactText, VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
 export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
     /**
@@ -12,4 +12,4 @@ export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
     content: ReactNode;
     children: ReactElement | ReactText;
 }
-export declare const TooltipWrapper: ({ show, delay, hideDelay, content: tooltipContent, side, sideOffset, align, alignOffset, tooltipVariant, tooltipClassName, children, noArrow, interactive, avoidCollisions, }: TooltipWrapperProps) => JSX.Element;
+export declare const TooltipWrapper: VFC<TooltipWrapperProps>;