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

package/esm/RangeSlider/RangeSlider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ForwardedRef } from "react";
 declare type RangeSliderValue = number | [number, number];
 declare type WidenNumber<T> = T extends number ? number : T;
 export interface RangeSliderProps<Value extends RangeSliderValue = number> {
@@ -20,6 +20,7 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     track1Color?: string;
     track2Color?: string;
 }
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
  * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
@@ -27,8 +28,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: {
-    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
-    displayName: string;
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
 };
 export default RangeSlider;

package/esm/RangeSlider/RangeSlider.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radix-ui/react-slider";
 import cx from "clsx";
+import { forwardRef } from "react";
 import colors from "../styles/colors";
 import stl from "../styles/helpers/satellitePrefixer";
 
@@ -26,15 +27,7 @@ var ThumbGroove = function ThumbGroove(_ref) {
     className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-3 w-px bg-grey-500 group-hover:bg-grey-600"]))), className)
   });
 };
-
-/**
- * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
- *
- * - Range sliders should always be used with a label
- * - Provide min and max value whenever possible
- * - Provide text input for better accessibility
- */
-export var RangeSlider = function RangeSlider(_ref2) {
+var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
   var className = _ref2.className,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
@@ -53,7 +46,9 @@ export var RangeSlider = function RangeSlider(_ref2) {
     track1: disabled ? colors.grey[200] : track1Color,
     track2: disabled ? colors.grey[100] : track2Color
   };
-  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({}, otherProps), {}, {
+  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({
+    ref: ref
+  }, otherProps), {}, {
     className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
     value: coerceToRadixValue(value),
     defaultValue: coerceToRadixValue(defaultValue),
@@ -93,5 +88,14 @@ export var RangeSlider = function RangeSlider(_ref2) {
     })]
   }));
 };
+
+/**
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ *
+ * - Range sliders should always be used with a label
+ * - Provide min and max value whenever possible
+ * - Provide text input for better accessibility
+ */
+export var RangeSlider = /*#__PURE__*/forwardRef(RangeSliderInternal);
 RangeSlider.displayName = "RangeSlider";
 export default RangeSlider;

package/esm/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/esm/Satellite/Satellite.js

@@ -1,39 +1,54 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "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;
+};
 export var Satellite = function Satellite(_ref) {
+  var _ref2;
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? defaultRouter : _ref$router,
     locales = _ref.locales,
     _ref$portalTarget = _ref.portalTarget,
     customPortalTarget = _ref$portalTarget === void 0 ? null : _ref$portalTarget,
     children = _ref.children;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_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
   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)
+  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__*/_jsxs(SatelliteContext.Provider, {
+  return /*#__PURE__*/_jsx(SatelliteContext.Provider, {
     value: {
       router: router,
       locales: locales,
       portalTarget: portalTarget
     },
-    children: [children, !customPortalTarget && /*#__PURE__*/_jsx("div", {
-      ref: setDefaultPortalTarget
-    })]
+    children: children
   });
 };
 export default Satellite;

package/esm/Satellite/SatelliteContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ComponentsLocales } from "./locale";
-import { SatelliteRouter } from "./SatelliteRouter";
+import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteContextType {
     router: SatelliteRouter;
     portalTarget: HTMLElement | null;

package/esm/Satellite/useCreatePortal.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 declare type CreatePortal = (children: ReactNode) => ReactElement;
 export declare const useCreatePortal: () => CreatePortal;
 export {};

package/esm/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/esm/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/esm/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/esm/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/esm/Sidebar/SidebarButtonLink.js

@@ -63,11 +63,11 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
       className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
       children: [/*#__PURE__*/_jsx(Icon, {
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            truncate\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLink, {
         className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),

package/esm/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/esm/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/esm/Sidebar/SidebarHeading.js

@@ -12,7 +12,7 @@ export var SidebarHeading = function SidebarHeading(_ref) {
     collapsed = _useSidebarContext.collapsed;
   return /*#__PURE__*/_jsx("span", {
     id: id,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "opacity-0"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none truncate\n          ", "\n        "])), collapsed && "opacity-0"), className),
     children: children
   });
 };

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Switch/SwitchOption.js

@@ -30,7 +30,9 @@ export var SwitchOption = function SwitchOption(_ref) {
         return context.onChange(evt.currentTarget.value);
       }
     }), /*#__PURE__*/_jsx(OverflowTooltipWrapper, {
-      children: children
+      children: /*#__PURE__*/_jsx("span", {
+        children: children
+      })
     })]
   }));
 };

package/esm/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/esm/Tables/DataTable/DataTable.js

@@ -67,6 +67,8 @@ export 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,
@@ -183,12 +185,15 @@ export 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 = _slicedToArray(_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 (isDeterminatePagination(pagination)) return pagination && pagination.totalItemsCount > 0;
@@ -204,7 +209,7 @@ export var DataTable = function DataTable(_ref) {
       var _ref8 = _slicedToArray(_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/esm/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/esm/Tables/DataTable/components/Loader.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import type { 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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/TextArea/TextArea.tailwind.js

@@ -13,7 +13,7 @@ var textAreaPlugin = plugin(function (_ref) {
       width: "100%",
       padding: theme("spacing.4"),
       backgroundColor: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
@@ -22,6 +22,9 @@ var textAreaPlugin = plugin(function (_ref) {
       "&::placeholder": {
         color: theme("colors.grey.600")
       },
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
       "&:focus": {
         borderColor: theme("colors.accent.600"),
         boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),

package/esm/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/esm/Tooltip/OverflowTooltipWrapper.d.ts

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

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -6,9 +6,11 @@ var _templateObject;
 var _excluded = ["children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Slot } from "@radix-ui/react-slot";
 import { useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import TextWrap from "../TextWrap";
+import { isReactText } from "../utils/isReactText";
 import { TooltipWrapper } from "./TooltipWrapper";
 import { isOverflowing } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,13 +24,14 @@ export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   var onMouseEnter = function onMouseEnter(evt) {
     setContent(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
+  var Wrapper = isReactText(children) ? "span" : Slot;
   return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
     content: content && /*#__PURE__*/_jsx(TextWrap, {
       children: content
     })
   }, props), {}, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"]))),
+    children: /*#__PURE__*/_jsx(Wrapper, {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block truncate"]))),
       onMouseEnter: onMouseEnter,
       children: children
     })

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, ReactText } from "react";
+import type { ReactNode, VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
 export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
     /**
@@ -10,6 +10,5 @@ export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
      * Defines the content of the tooltip.
      */
     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>;