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

package/cjs/RangeSlider/RangeSlider.js

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _reactSlider = require("@radix-ui/react-slider");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _colors = _interopRequireDefault(require("../styles/colors"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,15 +31,7 @@ var ThumbGroove = function ThumbGroove(_ref) {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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
- */
-var RangeSlider = function RangeSlider(_ref2) {
+var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
   var className = _ref2.className,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
@@ -57,7 +50,9 @@ var RangeSlider = function RangeSlider(_ref2) {
     track1: disabled ? _colors["default"].grey[200] : track1Color,
     track2: disabled ? _colors["default"].grey[100] : track2Color
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.Root, _objectSpread(_objectSpread({}, otherProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.Root, _objectSpread(_objectSpread({
+    ref: ref
+  }, otherProps), {}, {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["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),
@@ -97,6 +92,15 @@ 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
+ */
+var RangeSlider = /*#__PURE__*/(0, _react.forwardRef)(RangeSliderInternal);
 exports.RangeSlider = RangeSlider;
 RangeSlider.displayName = "RangeSlider";
 var _default = RangeSlider;

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/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/cjs/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/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/SidebarButtonLink.js

@@ -69,11 +69,11 @@ var SidebarButtonLink = function SidebarButtonLink(props) {
       className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            truncate\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
         className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),

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

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

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

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

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 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/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/TextArea/TextArea.tailwind.js

@@ -12,7 +12,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",
@@ -21,6 +21,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/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,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/cjs/Tooltip/OverflowTooltipWrapper.js

@@ -9,9 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactSlot = require("@radix-ui/react-slot");
 var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _TextWrap = _interopRequireDefault(require("../TextWrap"));
+var _isReactText = require("../utils/isReactText");
 var _TooltipWrapper = require("./TooltipWrapper");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,13 +31,14 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   var onMouseEnter = function onMouseEnter(evt) {
     setContent((0, _utils.isOverflowing)(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
+  var Wrapper = (0, _isReactText.isReactText)(children) ? "span" : _reactSlot.Slot;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipWrapper.TooltipWrapper, _objectSpread(_objectSpread({
     content: content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextWrap["default"], {
       children: content
     })
   }, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block truncate"]))),
       onMouseEnter: onMouseEnter,
       children: children
     })

package/cjs/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>;

package/cjs/Tooltip/TooltipWrapper.js

@@ -12,6 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isReactText = require("../utils/isReactText");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
@@ -46,8 +47,8 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   if (!tooltipContent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: children
   });
-  var isReactText = typeof children === "string" || typeof children === "number";
-  if (!isReactText && children.type === _react.Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
+  var hasTextChildren = (0, _isReactText.isReactText)(children);
+  if (!hasTextChildren && children.type === _react.Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Provider, {
     delayDuration: delay,
     skipDelayDuration: 300,
@@ -55,7 +56,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Root, {
       open: show,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Trigger, {
-        asChild: !isReactText,
+        asChild: !hasTextChildren,
         children: children
       }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Content, {
         className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-content"]))), tooltipClassName),