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

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/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 { 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/Tag/Tag.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onRemove", "removeTooltip", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 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 cx from "clsx";
@@ -87,7 +87,7 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(evt);
   };
   var content = /*#__PURE__*/_jsx("span", {
-    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1 leading-base"]))),
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
     children: children
   });
   return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
@@ -96,10 +96,9 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
       content: addTooltip,
       hideDelay: 0,
-      placement: "bottom",
-      wrapperClassName: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["h-full"]))),
+      side: "bottom",
       children: /*#__PURE__*/_jsxs("button", {
-        className: cx(stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleAdd,
         "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
@@ -110,9 +109,10 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }) : content, removable && /*#__PURE__*/_jsx(TooltipWrapper, {
       content: removeTooltip,
       hideDelay: 0,
-      placement: "bottom-start",
+      side: "bottom",
+      align: "start",
       children: /*#__PURE__*/_jsx("button", {
-        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleRemove,
         "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,

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

@@ -2,13 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 var _excluded = ["className", "checked", "defaultChecked"];
 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 cx from "clsx";
 import { forwardRef, useState } from "react";
-import { Check, X } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,17 +45,8 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
       type: "checkbox",
       role: "switch",
       ref: ref
-    })), /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle flex justify-around items-center"]))),
-      children: [/*#__PURE__*/_jsx(Check, {
-        size: 12,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"]))),
-        "aria-hidden": true
-      }), /*#__PURE__*/_jsx(X, {
-        size: 12,
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"]))),
-        "aria-hidden": true
-      })]
+    })), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle"])))
     })]
   });
 });

package/esm/Toggle/Toggle.tailwind.js

@@ -25,6 +25,12 @@ var togglePlugin = plugin(function (_ref) {
         "&:disabled": {
           cursor: "not-allowed"
         }
+      },
+      "&:hover .toggle:after": {
+        transform: "translateX(2px)"
+      },
+      "&:hover input:checked ~ .toggle:after": {
+        transform: "translateX(12px)"
       }
     },
     ".toggle": {
@@ -35,7 +41,7 @@ var togglePlugin = plugin(function (_ref) {
       height: "100%",
       pointerEvents: "none",
       borderRadius: "9999px",
-      background: theme("colors.grey.100"),
+      background: theme("colors.grey.500"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.2)),
       transition: transition,
       "&::after": {
@@ -58,7 +64,7 @@ var togglePlugin = plugin(function (_ref) {
         }
       },
       "input:disabled ~ &": {
-        opacity: "0.6"
+        background: theme("colors.grey.200")
       }
     }
   });

package/esm/Tooltip/OverflowTooltipWrapper.d.ts

@@ -1,6 +1,3 @@
-import type { FunctionComponent } from "react";
+import { VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
-/** @ignore */
-export declare const isOverflowing: (element: HTMLElement) => boolean;
-export declare const OverflowTooltipWrapper: FunctionComponent<TooltipWrapperBaseProps>;
-export default OverflowTooltipWrapper;
+export declare const OverflowTooltipWrapper: VFC<TooltipWrapperBaseProps>;

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -1,94 +1,36 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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 cx from "clsx";
 import { useState } from "react";
-import { usePopper } from "react-popper";
-import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import TextWrap from "../TextWrap";
-import Tooltip from "./Tooltip";
-import { DEFAULT_TOOLTIP_POPPER_MODIFIERS } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
+import { isOverflowing } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-/** @ignore */
-export var isOverflowing = function isOverflowing(element) {
-  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-};
 export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
-  var _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-    _ref$tooltipVariant = _ref.tooltipVariant,
-    tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
-    wrapperClassName = _ref.wrapperClassName,
-    tooltipClassName = _ref.tooltipClassName,
-    children = _ref.children,
-    _ref$modifiers = _ref.modifiers,
-    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
-    _ref$noArrow = _ref.noArrow,
-    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
-  var createPortal = useCreatePortal();
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    targetEl = _useState2[0],
-    setTargetEl = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    popperEl = _useState4[0],
-    setPopperEl = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    arrowEl = _useState6[0],
-    setArrowEl = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    tooltipText = _useState8[0],
-    setTooltipText = _useState8[1];
-  var _usePopper = usePopper(targetEl, popperEl, {
-      placement: placement,
-      strategy: "fixed",
-      modifiers: [].concat(_toConsumableArray(DEFAULT_TOOLTIP_POPPER_MODIFIERS), [{
-        name: "arrow",
-        options: {
-          element: arrowEl
-        }
-      }], _toConsumableArray(modifiers))
-    }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes;
+    content = _useState2[0],
+    setContent = _useState2[1];
   var onMouseEnter = function onMouseEnter(evt) {
-    return setTooltipText(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
+    setContent(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
-  var onMouseLeave = function onMouseLeave() {
-    return setTooltipText(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: setTargetEl,
-      className: cx(wrapperClassName, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"])))),
+  return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
+    content: content && /*#__PURE__*/_jsx(TextWrap, {
+      children: content
+    })
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"]))),
       onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
       children: children
-    }), !!tooltipText && createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
-      ref: setPopperEl,
-      children: [!noArrow && /*#__PURE__*/_jsx("div", {
-        ref: setArrowEl,
-        style: styles.arrow,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tooltip-wrapper-arrow ", ""])), tooltipVariant === "light" && "tooltip-wrapper-arrow-light")
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        variant: tooltipVariant,
-        children: /*#__PURE__*/_jsx(TextWrap, {
-          children: tooltipText
-        })
-      })]
-    })))]
-  });
-};
-export default OverflowTooltipWrapper;
+    })
+  }));
+};

package/esm/Tooltip/Tooltip.d.ts

@@ -7,18 +7,18 @@ export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivEl
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/esm/Tooltip/Tooltip.js

@@ -18,18 +18,18 @@ var VARIANT_CLASSNAMES = {
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 export var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,