@redsift/popovers 11.8.3 → 11.9.0

package/_internal/Toggletip2.js

@@ -0,0 +1,169 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { useId, useTheme, partitionComponents, isComponent, ThemeProvider } from '@redsift/design-system';
+import { T as ToggletipContext } from './useToggletipContext.js';
+import { T as ToggletipPlacement, a as ToggletipContent } from './ToggletipContent.js';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import { offset, flip, shift, arrow, size, useFloating, autoUpdate, useClientPoint, useHover, safePolygon, useDismiss, useRole, useInteractions } from '@floating-ui/react';
+import { T as ToggletipTrigger } from './ToggletipTrigger.js';
+
+function useToggletip(_ref) {
+  let {
+    color,
+    defaultOpen,
+    delay,
+    isModal,
+    isOpen: propsIsOpen,
+    maxWidth,
+    minWidth,
+    offset: propsOffset,
+    onOpen,
+    placement,
+    role: propsRole,
+    toggletipId: propsToggletipId,
+    triggerClassName,
+    width,
+    setHideInsteadOfClose,
+    hideInsteadOfClose
+  } = _ref;
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  const [_id] = useId();
+  const toggletipId = propsToggletipId !== null && propsToggletipId !== void 0 ? propsToggletipId : _id;
+  useEffect(() => {
+    setIsOpen(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  }, [propsIsOpen, defaultOpen]);
+  const handleOpen = useCallback(collapsed => {
+    if (onOpen) {
+      onOpen(collapsed);
+    }
+    if (propsIsOpen === undefined || propsIsOpen === null) {
+      setIsOpen(collapsed);
+    }
+  }, [onOpen]);
+  const middleware = [offset(propsOffset !== null && propsOffset !== void 0 ? propsOffset : 8), flip({
+    fallbackAxisSideDirection: 'start'
+  }), shift({
+    padding: 8
+  }), arrow({
+    element: arrowRef
+  })];
+  middleware.push(size({
+    apply(_ref2) {
+      let {
+        availableHeight,
+        availableWidth,
+        rects,
+        elements
+      } = _ref2;
+      Object.assign(elements.floating.style, _objectSpread2(_objectSpread2(_objectSpread2({
+        maxHeight: `${availableHeight}px`
+      }, minWidth !== undefined && {
+        minWidth: `${minWidth === 'available-width' ? availableWidth : minWidth === 'trigger-width' ? rects.reference.width : minWidth}px`
+      }), width !== undefined && {
+        width: `${width === 'available-width' ? availableWidth : width === 'trigger-width' ? rects.reference.width : width}px`
+      }), maxWidth !== undefined && {
+        maxWidth: `${maxWidth === 'available-width' ? availableWidth : maxWidth === 'trigger-width' ? rects.reference.width : maxWidth}px`
+      }));
+    }
+  }));
+  const data = useFloating({
+    placement: placement === 'client-point' ? 'left' : placement,
+    open: isOpen,
+    onOpenChange: handleOpen,
+    whileElementsMounted: autoUpdate,
+    middleware
+  });
+  const context = data.context;
+  const clientPoint = useClientPoint(context, {
+    enabled: placement === 'client-point'
+  });
+  const hover = useHover(context, {
+    move: false,
+    delay: {
+      open: delay,
+      close: 0
+    },
+    handleClose: safePolygon()
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: propsRole
+  });
+  const interactions = useInteractions([hover, dismiss, role, clientPoint]);
+  return React.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
+    isOpen,
+    handleOpen
+  }, interactions), data), {}, {
+    arrowRef,
+    isModal,
+    triggerClassName,
+    setHideInsteadOfClose,
+    hideInsteadOfClose,
+    toggletipId
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, isModal, triggerClassName, setHideInsteadOfClose, hideInsteadOfClose, toggletipId]);
+}
+
+const COMPONENT_NAME = 'Toggletip';
+const CLASSNAME = 'redsift-toggletip';
+
+/**
+ * The Toggletip component.
+ */
+const BaseToggletip = props => {
+  var _overrideDisplayName$, _overrideDisplayName$2, _overrideDisplayName$3, _overrideDisplayName$4;
+  const {
+    children,
+    color,
+    defaultOpen,
+    isModal = false,
+    isOpen,
+    maxWidth,
+    minWidth,
+    offset,
+    onOpen,
+    overrideDisplayName,
+    placement = ToggletipPlacement.bottom,
+    role = 'dialog',
+    theme: propsTheme,
+    toggletipId,
+    triggerClassName,
+    width
+  } = props;
+  const theme = useTheme(propsTheme);
+  const [hideInsteadOfClose, setHideInsteadOfClose] = useState(false);
+  const toggletip = useToggletip({
+    color,
+    defaultOpen,
+    isModal,
+    isOpen,
+    maxWidth,
+    minWidth,
+    offset,
+    onOpen,
+    placement,
+    role,
+    toggletipId,
+    triggerClassName,
+    setHideInsteadOfClose,
+    hideInsteadOfClose,
+    width
+  });
+  const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [isComponent((_overrideDisplayName$ = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$ !== void 0 ? _overrideDisplayName$ : 'ToggletipTrigger'), isComponent((_overrideDisplayName$2 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$2 !== void 0 ? _overrideDisplayName$2 : 'ToggletipContent')]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React.createElement(ToggletipContext.Provider, {
+    value: toggletip
+  }, trigger && isComponent((_overrideDisplayName$3 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$3 !== void 0 ? _overrideDisplayName$3 : 'ToggletipTrigger')(trigger) ? trigger : null, content && isComponent((_overrideDisplayName$4 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$4 !== void 0 ? _overrideDisplayName$4 : 'ToggletipContent')(content) ? content : null));
+};
+BaseToggletip.className = CLASSNAME;
+BaseToggletip.displayName = COMPONENT_NAME;
+const Toggletip = Object.assign(BaseToggletip, {
+  Trigger: ToggletipTrigger,
+  Content: ToggletipContent
+});
+
+export { BaseToggletip as B, Toggletip as T, useToggletip as u };
+//# sourceMappingURL=Toggletip2.js.map

package/_internal/Toggletip2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggletip2.js","sources":["../../src/components/toggletip/useToggletip.tsx","../../src/components/toggletip/Toggletip.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset,\n  flip,\n  shift,\n  size,\n  useDismiss,\n  useRole,\n  useInteractions,\n  useClientPoint,\n  arrow,\n  safePolygon,\n  useHover,\n} from '@floating-ui/react';\nimport { HiddenToggletipState, ToggletipProps } from './types';\nimport { useId } from '@redsift/design-system';\n\nexport function useToggletip({\n  color,\n  defaultOpen,\n  delay,\n  isModal,\n  isOpen: propsIsOpen,\n  maxWidth,\n  minWidth,\n  offset: propsOffset,\n  onOpen,\n  placement,\n  role: propsRole,\n  toggletipId: propsToggletipId,\n  triggerClassName,\n  width,\n  setHideInsteadOfClose,\n  hideInsteadOfClose,\n}: Omit<ToggletipProps, 'children'> & HiddenToggletipState) {\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);\n\n  const [_id] = useId();\n  const toggletipId = propsToggletipId ?? _id;\n\n  useEffect(() => {\n    setIsOpen(propsIsOpen ?? defaultOpen);\n  }, [propsIsOpen, defaultOpen]);\n\n  const handleOpen = useCallback(\n    (collapsed: boolean) => {\n      if (onOpen) {\n        onOpen(collapsed);\n      }\n      if (propsIsOpen === undefined || propsIsOpen === null) {\n        setIsOpen(collapsed);\n      }\n    },\n    [onOpen]\n  );\n\n  const middleware = [\n    offset(propsOffset ?? 8),\n    flip({\n      fallbackAxisSideDirection: 'start',\n    }),\n    shift({ padding: 8 }),\n    arrow({\n      element: arrowRef,\n    }),\n  ];\n\n  middleware.push(\n    size({\n      apply({ availableHeight, availableWidth, rects, elements }) {\n        Object.assign(elements.floating.style, {\n          maxHeight: `${availableHeight}px`,\n          ...(minWidth !== undefined && {\n            minWidth: `${\n              minWidth === 'available-width'\n                ? availableWidth\n                : minWidth === 'trigger-width'\n                ? rects.reference.width\n                : minWidth\n            }px`,\n          }),\n          ...(width !== undefined && {\n            width: `${\n              width === 'available-width' ? availableWidth : width === 'trigger-width' ? rects.reference.width : width\n            }px`,\n          }),\n          ...(maxWidth !== undefined && {\n            maxWidth: `${\n              maxWidth === 'available-width'\n                ? availableWidth\n                : maxWidth === 'trigger-width'\n                ? rects.reference.width\n                : maxWidth\n            }px`,\n          }),\n        });\n      },\n    })\n  );\n\n  const data = useFloating({\n    placement: placement === 'client-point' ? 'left' : placement,\n    open: isOpen,\n    onOpenChange: handleOpen,\n    whileElementsMounted: autoUpdate,\n    middleware,\n  });\n\n  const context = data.context;\n  const clientPoint = useClientPoint(context, { enabled: placement === 'client-point' });\n\n  const hover = useHover(context, {\n    move: false,\n    delay: {\n      open: delay,\n      close: 0,\n    },\n    handleClose: safePolygon(),\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: propsRole });\n\n  const interactions = useInteractions([hover, dismiss, role, clientPoint]);\n\n  return React.useMemo(\n    () => ({\n      color,\n      isOpen,\n      handleOpen,\n      ...interactions,\n      ...data,\n      arrowRef,\n      isModal,\n      triggerClassName,\n      setHideInsteadOfClose,\n      hideInsteadOfClose,\n      toggletipId,\n    }),\n    [\n      color,\n      isOpen,\n      handleOpen,\n      interactions,\n      data,\n      arrowRef,\n      isModal,\n      triggerClassName,\n      setHideInsteadOfClose,\n      hideInsteadOfClose,\n      toggletipId,\n    ]\n  );\n}\n","import React, { useState } from 'react';\nimport { partitionComponents, isComponent, useTheme, ThemeProvider } from '@redsift/design-system';\nimport { ToggletipContent } from '../toggletip-content';\nimport { ToggletipTrigger } from '../toggletip-trigger';\n\nimport { ToggletipContext } from './context';\nimport { ToggletipPlacement, ToggletipProps } from './types';\nimport { useToggletip } from './useToggletip';\n\nconst COMPONENT_NAME = 'Toggletip';\nconst CLASSNAME = 'redsift-toggletip';\n\n/**\n * The Toggletip component.\n */\nexport const BaseToggletip: React.FC<ToggletipProps> & {\n  displayName?: string;\n  className?: string;\n} = (props) => {\n  const {\n    children,\n    color,\n    defaultOpen,\n    isModal = false,\n    isOpen,\n    maxWidth,\n    minWidth,\n    offset,\n    onOpen,\n    overrideDisplayName,\n    placement = ToggletipPlacement.bottom,\n    role = 'dialog',\n    theme: propsTheme,\n    toggletipId,\n    triggerClassName,\n    width,\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const [hideInsteadOfClose, setHideInsteadOfClose] = useState(false);\n\n  const toggletip = useToggletip({\n    color,\n    defaultOpen,\n    isModal,\n    isOpen,\n    maxWidth,\n    minWidth,\n    offset,\n    onOpen,\n    placement,\n    role,\n    toggletipId,\n    triggerClassName,\n    setHideInsteadOfClose,\n    hideInsteadOfClose,\n    width,\n  });\n\n  const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [\n    isComponent(overrideDisplayName?.trigger ?? 'ToggletipTrigger'),\n    isComponent(overrideDisplayName?.content ?? 'ToggletipContent'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <ToggletipContext.Provider value={toggletip}>\n        {trigger && isComponent(overrideDisplayName?.trigger ?? 'ToggletipTrigger')(trigger) ? trigger : null}\n        {content && isComponent(overrideDisplayName?.content ?? 'ToggletipContent')(content) ? content : null}\n      </ToggletipContext.Provider>\n    </ThemeProvider>\n  );\n};\nBaseToggletip.className = CLASSNAME;\nBaseToggletip.displayName = COMPONENT_NAME;\n\nexport const Toggletip = Object.assign(BaseToggletip, {\n  Trigger: ToggletipTrigger,\n  Content: ToggletipContent,\n});\n"],"names":["useToggletip","_ref","color","defaultOpen","delay","isModal","isOpen","propsIsOpen","maxWidth","minWidth","offset","propsOffset","onOpen","placement","role","propsRole","toggletipId","propsToggletipId","triggerClassName","width","setHideInsteadOfClose","hideInsteadOfClose","arrowRef","useRef","setIsOpen","useState","_id","useId","useEffect","handleOpen","useCallback","collapsed","undefined","middleware","flip","fallbackAxisSideDirection","shift","padding","arrow","element","push","size","apply","_ref2","availableHeight","availableWidth","rects","elements","Object","assign","floating","style","_objectSpread","maxHeight","reference","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","context","clientPoint","useClientPoint","enabled","hover","useHover","move","close","handleClose","safePolygon","dismiss","useDismiss","useRole","interactions","useInteractions","React","useMemo","COMPONENT_NAME","CLASSNAME","BaseToggletip","props","_overrideDisplayName$","_overrideDisplayName$2","_overrideDisplayName$3","_overrideDisplayName$4","children","overrideDisplayName","ToggletipPlacement","bottom","theme","propsTheme","useTheme","toggletip","trigger","content","partitionComponents","Children","toArray","isComponent","createElement","ThemeProvider","value","ToggletipContext","Provider","className","displayName","Toggletip","Trigger","ToggletipTrigger","Content","ToggletipContent"],"mappings":"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"}

package/_internal/ToggletipContent.js

@@ -0,0 +1,226 @@
+import { b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useContext } from 'react';
+import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
+import { baseContainer, Theme, AppContainerContext, useTheme } from '@redsift/design-system';
+import styled, { css } from 'styled-components';
+import classNames from 'classnames';
+import { u as useToggletipContext } from './useToggletipContext.js';
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const ToggletipPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledToggletipContent = styled.div`
+  ${baseContainer}
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});
+  `;
+}}
+
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+  display: flex;
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  font-family: var(--redsift-typography-toggletip-font-family);
+  font-size: var(--redsift-typography-toggletip-font-size);
+  font-weight: var(--redsift-typography-toggletip-font-weight);
+  line-height: var(--redsift-typography-toggletip-line-height);
+  max-width: calc(100vw - 48px);
+  padding: 4px 8px;
+  z-index: var(--redsift-layout-z-index-toggletip);
+
+  .redsift-toggletip-content__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.dark ? css`var(--redsift-color-neutral-black)` : css`var(--redsift-color-neutral-white)`;
+}};
+    border-style: solid;
+  }
+
+  ${_ref3 => {
+  let {
+    $placement
+  } = _ref3;
+  switch ($placement) {
+    case ToggletipPlacement['right-start']:
+      return css`
+          border-bottom-left-radius: 0;
+        `;
+    case ToggletipPlacement['right-end']:
+      return css`
+          border-top-left-radius: 0;
+        `;
+    case ToggletipPlacement['left-start']:
+      return css`
+          border-bottom-right-radius: 0;
+        `;
+    case ToggletipPlacement['left-end']:
+      return css`
+          border-top-right-radius: 0;
+        `;
+    default:
+      return css``;
+  }
+}}
+
+  ${_ref4 => {
+  let {
+    $placement
+  } = _ref4;
+  switch ($placement) {
+    case ToggletipPlacement.left:
+    case ToggletipPlacement['left-end']:
+    case ToggletipPlacement['left-start']:
+      return css`
+          .redsift-toggletip-content__arrow {
+            border-width: 6px 0 6px 6px;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+          }
+        `;
+    case ToggletipPlacement.top:
+    case ToggletipPlacement['top-end']:
+    case ToggletipPlacement['top-start']:
+      return css`
+          .redsift-toggletip-content__arrow {
+            border-width: 6px 6px 0;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+    case ToggletipPlacement.right:
+    case ToggletipPlacement['right-end']:
+    case ToggletipPlacement['right-start']:
+      return css`
+          .redsift-toggletip-content__arrow {
+            border-width: 6px 6px 6px 0;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+    case ToggletipPlacement.bottom:
+    case ToggletipPlacement['bottom-end']:
+    case ToggletipPlacement['bottom-start']:
+    default:
+      return css`
+          .redsift-toggletip-content__arrow {
+            border-width: 0 6px 6px;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+  }
+}}
+`;
+
+const COMPONENT_NAME = 'ToggletipContent';
+const CLASSNAME = 'redsift-toggletip-content';
+
+/**
+ * The ToggletipContent component.
+ */
+const ToggletipContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    theme: propsTheme
+  } = props;
+  const appContainerState = useContext(AppContainerContext);
+  const {
+    getFloatingProps,
+    isOpen,
+    placement,
+    refs,
+    strategy,
+    x,
+    y,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    }
+  } = useToggletipContext();
+  const theme = useTheme ? useTheme(propsTheme) : undefined;
+  const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const {
+    arrowRef
+  } = useToggletipContext();
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[placement.split('-')[0]];
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
+  }, isOpen && /*#__PURE__*/React.createElement(StyledToggletipContent, _extends({
+    className: classNames(ToggletipContent.className, className),
+    ref: popoverRef,
+    $theme: theme
+  }, getFloatingProps(props), {
+    style: _objectSpread2({
+      position: strategy,
+      top: y !== null && y !== void 0 ? y : 0,
+      left: x !== null && x !== void 0 ? x : 0,
+      visibility: x == null ? 'hidden' : 'visible'
+    }, style),
+    $placement: placement
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: arrowRef,
+    className: `${ToggletipContent.className}__arrow`,
+    style: {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      [staticSide]: '-6px'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${ToggletipContent.className}__inner`
+  }, children)));
+});
+ToggletipContent.className = CLASSNAME;
+ToggletipContent.displayName = COMPONENT_NAME;
+
+export { ToggletipPlacement as T, ToggletipContent as a };
+//# sourceMappingURL=ToggletipContent.js.map

package/_internal/ToggletipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipContent.js","sources":["../../src/components/toggletip/types.ts","../../src/components/toggletip-content/styles.ts","../../src/components/toggletip-content/ToggletipContent.tsx"],"sourcesContent":["import { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useToggletip } from './useToggletip';\n\n/**\n * Context props.\n */\nexport type HiddenToggletipState = {\n  /** Whether the toggletip should be hidden or removed from the DOM. */\n  hideInsteadOfClose?: boolean;\n  /** Method to set the hideInsteadOfClose prop. */\n  setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;\n};\nexport type ToggletipState =\n  | (ReturnType<typeof useToggletip> & {\n      /** Class name to append to the trigger. */\n      readonly triggerClassName?: string;\n    } & HiddenToggletipState)\n  | null;\n\n/**\n * Component variant.\n */\nexport const ToggletipPlacement = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n  'top-start': 'top-start',\n  'top-end': 'top-end',\n  'right-start': 'right-start',\n  'right-end': 'right-end',\n  'bottom-start': 'bottom-start',\n  'bottom-end': 'bottom-end',\n  'left-start': 'left-start',\n  'left-end': 'left-end',\n} as const;\nexport type ToggletipPlacement = ValueOf<typeof ToggletipPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToggletipProps {\n  /** Toggletip content width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  width?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content min width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  minWidth?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content max width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  maxWidth?: 'trigger-width' | 'available-width' | number;\n  /** Button color that will be forward to the trigger. */\n  color?: ButtonColor;\n  /** Children. Can only be ToggletipTrigger and ToggletipContent. */\n  children: ReactNode;\n  /**\n   * Default open status.\n   * Used for uncontrolled version.\n   */\n  defaultOpen?: boolean;\n  /** Delay time (in ms) for the tooltip to show up. */\n  delay?: number;\n  /** Default placement of the toggletip. */\n  placement?: ToggletipPlacement | 'client-point';\n  /** Whether the toggletip is a modal or not. */\n  isModal?: boolean;\n  /**\n   * Whether the component is opened or not.\n   * Used for controlled version.\n   */\n  isOpen?: boolean;\n  /** Space between trigger and content (in pixels). */\n  offset?: number;\n  /** Method to handle component change. */\n  onOpen?: (open: boolean) => void;\n  /** Allows other components to be treated as trigger and content. */\n  overrideDisplayName?: {\n    content?: string;\n    trigger?: string;\n  };\n  /** Id to the toggletip content. */\n  toggletipId?: string;\n  /** Role to apply to the toggletip. */\n  role?: 'dialog';\n  /** Theme. */\n  theme?: Theme;\n  /** Class name to append to the trigger. */\n  triggerClassName?: string;\n}\n\nexport type StyledToggletipProps = ToggletipProps;\n","import styled, { css } from 'styled-components';\nimport { Theme, baseContainer } from '@redsift/design-system';\nimport { ToggletipPlacement } from '../toggletip';\nimport { StyledToggletipContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledToggletipContent = styled.div<StyledToggletipContentProps>`\n  ${baseContainer}\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});\n  `}\n\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);\n  display: flex;\n  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));\n  font-family: var(--redsift-typography-toggletip-font-family);\n  font-size: var(--redsift-typography-toggletip-font-size);\n  font-weight: var(--redsift-typography-toggletip-font-weight);\n  line-height: var(--redsift-typography-toggletip-line-height);\n  max-width: calc(100vw - 48px);\n  padding: 4px 8px;\n  z-index: var(--redsift-layout-z-index-toggletip);\n\n  .redsift-toggletip-content__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: ${({ $theme }) =>\n      $theme === Theme.dark ? css`var(--redsift-color-neutral-black)` : css`var(--redsift-color-neutral-white)`};\n    border-style: solid;\n  }\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement['right-start']:\n        return css`\n          border-bottom-left-radius: 0;\n        `;\n      case ToggletipPlacement['right-end']:\n        return css`\n          border-top-left-radius: 0;\n        `;\n      case ToggletipPlacement['left-start']:\n        return css`\n          border-bottom-right-radius: 0;\n        `;\n      case ToggletipPlacement['left-end']:\n        return css`\n          border-top-right-radius: 0;\n        `;\n      default:\n        return css``;\n    }\n  }}\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement.left:\n      case ToggletipPlacement['left-end']:\n      case ToggletipPlacement['left-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.top:\n      case ToggletipPlacement['top-end']:\n      case ToggletipPlacement['top-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 0;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.right:\n      case ToggletipPlacement['right-end']:\n      case ToggletipPlacement['right-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 6px 0;\n            border-top-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.bottom:\n      case ToggletipPlacement['bottom-end']:\n      case ToggletipPlacement['bottom-start']:\n      default:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n    }\n  }}\n`;\n","import React, { forwardRef, useContext } from 'react';\nimport { useMergeRefs, FloatingPortal } from '@floating-ui/react';\n\nimport { AppContainerContext, Comp, useTheme } from '@redsift/design-system';\nimport { ToggletipContentProps } from './types';\nimport { ToggletipPlacement, useToggletipContext } from '../toggletip';\nimport { StyledToggletipContent } from './styles';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'ToggletipContent';\nconst CLASSNAME = 'redsift-toggletip-content';\n\n/**\n * The ToggletipContent component.\n */\nexport const ToggletipContent: Comp<ToggletipContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, style, theme: propsTheme } = props;\n  const appContainerState = useContext(AppContainerContext);\n  const {\n    getFloatingProps,\n    isOpen,\n    placement,\n    refs,\n    strategy,\n    x,\n    y,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useToggletipContext();\n  const theme = useTheme ? useTheme(propsTheme) : undefined;\n  const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n  const { arrowRef } = useToggletipContext();\n\n  const staticSide = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  }[placement.split('-')[0]];\n\n  return (\n    <FloatingPortal root={appContainerState?.appContainerRef.current}>\n      {isOpen && (\n        <StyledToggletipContent\n          className={classNames(ToggletipContent.className, className)}\n          ref={popoverRef}\n          $theme={theme!}\n          {...getFloatingProps(props)}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            visibility: x == null ? 'hidden' : 'visible',\n            ...style,\n          }}\n          $placement={placement as ToggletipPlacement}\n        >\n          <div\n            ref={arrowRef}\n            className={`${ToggletipContent.className}__arrow`}\n            style={{\n              left: arrowX != null ? `${arrowX}px` : '',\n              top: arrowY != null ? `${arrowY}px` : '',\n              [staticSide!]: '-6px',\n            }}\n          />\n          <div className={`${ToggletipContent.className}__inner`}>{children}</div>\n        </StyledToggletipContent>\n      )}\n    </FloatingPortal>\n  );\n});\nToggletipContent.className = CLASSNAME;\nToggletipContent.displayName = COMPONENT_NAME;\n"],"names":["ToggletipPlacement","top","right","bottom","left","StyledToggletipContent","styled","div","baseContainer","_ref","$theme","css","Theme","dark","_ref2","_ref3","$placement","_ref4","COMPONENT_NAME","CLASSNAME","ToggletipContent","forwardRef","props","ref","children","className","style","theme","propsTheme","appContainerState","useContext","AppContainerContext","getFloatingProps","isOpen","placement","refs","strategy","x","y","middlewareData","arrow","arrowX","arrowY","useToggletipContext","useTheme","undefined","popoverRef","useMergeRefs","setFloating","arrowRef","staticSide","split","React","createElement","FloatingPortal","root","appContainerRef","current","_extends","classNames","_objectSpread","position","visibility","displayName"],"mappings":"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"}

package/_internal/ToggletipTrigger.js

@@ -0,0 +1,78 @@
+import { b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { focusRing, isComponent } from '@redsift/design-system';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { u as useToggletipContext } from './useToggletipContext.js';
+
+/**
+ * Component style.
+ */
+const StyledToggletipTrigger = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-decoration: inherit;
+  cursor: default;
+  display: inline-flex;
+
+  ${focusRing}
+`;
+
+const COMPONENT_NAME = 'ToggletipTrigger';
+const CLASSNAME = 'redsift-toggletip-trigger';
+
+/**
+ * The ToggletipTrigger component.
+ */
+const ToggletipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    getReferenceProps,
+    isOpen,
+    handleOpen,
+    refs,
+    toggletipId,
+    triggerClassName,
+    color
+  } = useToggletipContext();
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  if (isComponent('Icon')(children) || isComponent('Text')(children)) {
+    return /*#__PURE__*/React.createElement(StyledToggletipTrigger, _extends({}, getReferenceProps(_objectSpread2(_objectSpread2({
+      ref: triggerRef
+    }, props), {}, {
+      'aria-describedby': toggletipId
+    })), {
+      type: "button",
+      "aria-expanded": isOpen,
+      onClick: undefined,
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (props.onClick) {
+            props.onClick(e);
+          } else {
+            handleOpen(!isOpen);
+          }
+        }
+      },
+      className: classNames(triggerClassName)
+    }), /*#__PURE__*/React.cloneElement(children, _objectSpread2(_objectSpread2({}, children.props), {}, {
+      isActive: isOpen,
+      color: color !== null && color !== void 0 ? color : children.props.color
+    })));
+  }
+  return null;
+});
+ToggletipTrigger.className = CLASSNAME;
+ToggletipTrigger.displayName = COMPONENT_NAME;
+
+export { ToggletipTrigger as T };
+//# sourceMappingURL=ToggletipTrigger.js.map

package/_internal/ToggletipTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipTrigger.js","sources":["../../src/components/toggletip-trigger/styles.ts","../../src/components/toggletip-trigger/ToggletipTrigger.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledToggletipTriggerProps } from './types';\nimport { focusRing } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledToggletipTrigger = styled.button<StyledToggletipTriggerProps>`\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-decoration: inherit;\n  cursor: default;\n  display: inline-flex;\n\n  ${focusRing}\n`;\n","import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, isComponent } from '@redsift/design-system';\nimport { useToggletipContext } from '../toggletip';\nimport { ToggletipTriggerProps } from './types';\nimport classNames from 'classnames';\nimport { StyledToggletipTrigger } from './styles';\n\nconst COMPONENT_NAME = 'ToggletipTrigger';\nconst CLASSNAME = 'redsift-toggletip-trigger';\n\n/**\n * The ToggletipTrigger component.\n */\nexport const ToggletipTrigger: Comp<ToggletipTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, isOpen, handleOpen, refs, toggletipId, triggerClassName, color } = useToggletipContext();\n  const childrenRef = (children as any).ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  if (isComponent('Icon')(children) || isComponent('Text')(children)) {\n    return (\n      <StyledToggletipTrigger\n        {...getReferenceProps({\n          ref: triggerRef,\n          ...props,\n          'aria-describedby': toggletipId,\n        })}\n        type=\"button\"\n        aria-expanded={isOpen}\n        onClick={undefined}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            if (props.onClick) {\n              props.onClick(e as never);\n            } else {\n              handleOpen(!isOpen);\n            }\n          }\n        }}\n        className={classNames(triggerClassName)}\n      >\n        {React.cloneElement(children as ReactElement, {\n          ...children.props,\n          isActive: isOpen,\n          color: color ?? children.props.color,\n        })}\n      </StyledToggletipTrigger>\n    );\n  }\n\n  return null;\n});\nToggletipTrigger.className = CLASSNAME;\nToggletipTrigger.displayName = COMPONENT_NAME;\n"],"names":["StyledToggletipTrigger","styled","button","focusRing","COMPONENT_NAME","CLASSNAME","ToggletipTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","toggletipId","triggerClassName","color","useToggletipContext","childrenRef","triggerRef","useMergeRefs","setReference","isComponent","React","createElement","_extends","_objectSpread","type","onClick","undefined","onKeyDown","e","key","preventDefault","className","classNames","cloneElement","isActive","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAGC,MAAM,CAACC,MAAoC,CAAA;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,SAAU,CAAA;AACd,CAAC;;ACVD,MAAMC,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAAgE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,WAAW;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,mBAAmB,EAAE,CAAA;AACnH,EAAA,MAAMC,WAAW,GAAIT,QAAQ,CAASD,GAAG,CAAA;AACzC,EAAA,MAAMW,UAAU,GAAGC,YAAY,CAAC,CAACP,IAAI,CAACQ,YAAY,EAAEb,GAAG,EAAEU,WAAW,CAAC,CAAC,CAAA;AAEtE,EAAA,IAAII,WAAW,CAAC,MAAM,CAAC,CAACb,QAAQ,CAAC,IAAIa,WAAW,CAAC,MAAM,CAAC,CAACb,QAAQ,CAAC,EAAE;AAClE,IAAA,oBACEc,KAAA,CAAAC,aAAA,CAACzB,sBAAsB,EAAA0B,QAAA,CAAA,EAAA,EACjBf,iBAAiB,CAAAgB,cAAA,CAAAA,cAAA,CAAA;AACnBlB,MAAAA,GAAG,EAAEW,UAAAA;AAAU,KAAA,EACZZ,KAAK,CAAA,EAAA,EAAA,EAAA;AACR,MAAA,kBAAkB,EAAEO,WAAAA;AAAW,KAAA,CAChC,CAAC,EAAA;AACFa,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,eAAA,EAAehB,MAAO;AACtBiB,MAAAA,OAAO,EAAEC,SAAU;MACnBC,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;UACtCD,CAAC,CAACE,cAAc,EAAE,CAAA;UAClB,IAAI1B,KAAK,CAACqB,OAAO,EAAE;AACjBrB,YAAAA,KAAK,CAACqB,OAAO,CAACG,CAAU,CAAC,CAAA;AAC3B,WAAC,MAAM;YACLnB,UAAU,CAAC,CAACD,MAAM,CAAC,CAAA;AACrB,WAAA;AACF,SAAA;OACA;MACFuB,SAAS,EAAEC,UAAU,CAACpB,gBAAgB,CAAA;AAAE,KAAA,CAAA,eAEvCQ,KAAK,CAACa,YAAY,CAAC3B,QAAQ,EAAAiB,cAAA,CAAAA,cAAA,CAAA,EAAA,EACvBjB,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjB8B,MAAAA,QAAQ,EAAE1B,MAAM;MAChBK,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIP,QAAQ,CAACF,KAAK,CAACS,KAAAA;AAAK,KAAA,CACrC,CACqB,CAAC,CAAA;AAE7B,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACFX,gBAAgB,CAAC6B,SAAS,GAAG9B,SAAS,CAAA;AACtCC,gBAAgB,CAACiC,WAAW,GAAGnC,cAAc;;;;"}

package/_internal/toggletip-content.js

@@ -0,0 +1,2 @@
+export { a as ToggletipContent } from './ToggletipContent.js';
+//# sourceMappingURL=toggletip-content.js.map

package/_internal/toggletip-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggletip-content.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_internal/toggletip-trigger.js

@@ -0,0 +1,2 @@
+export { T as ToggletipTrigger } from './ToggletipTrigger.js';
+//# sourceMappingURL=toggletip-trigger.js.map

package/_internal/toggletip-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggletip-trigger.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_internal/toggletip.js

@@ -0,0 +1,4 @@
+export { T as ToggletipContext, u as useToggletipContext } from './useToggletipContext.js';
+export { T as ToggletipPlacement } from './ToggletipContent.js';
+export { B as BaseToggletip, T as Toggletip, u as useToggletip } from './Toggletip2.js';
+//# sourceMappingURL=toggletip.js.map

package/_internal/toggletip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggletip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/_internal/useToggletipContext.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ToggletipContext = /*#__PURE__*/React.createContext(null);
+
+const useToggletipContext = () => {
+  const context = React.useContext(ToggletipContext);
+  if (context == null) {
+    throw new Error('Toggletip components must be wrapped in <Toggletip />');
+  }
+  return context;
+};
+
+export { ToggletipContext as T, useToggletipContext as u };
+//# sourceMappingURL=useToggletipContext.js.map

package/_internal/useToggletipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggletipContext.js","sources":["../../src/components/toggletip/context.ts","../../src/components/toggletip/useToggletipContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ToggletipState } from './types';\n\nexport const ToggletipContext = React.createContext<ToggletipState | null>(null);\n","import React from 'react';\nimport { ToggletipContext } from './context';\n\nexport const useToggletipContext = () => {\n  const context = React.useContext(ToggletipContext);\n\n  if (context == null) {\n    throw new Error('Toggletip components must be wrapped in <Toggletip />');\n  }\n\n  return context;\n};\n"],"names":["ToggletipContext","React","createContext","useToggletipContext","context","useContext","Error"],"mappings":";;AAGO,MAAMA,gBAAgB,gBAAGC,KAAK,CAACC,aAAa,CAAwB,IAAI;;ACAlEC,MAAAA,mBAAmB,GAAGA,MAAM;AACvC,EAAA,MAAMC,OAAO,GAAGH,KAAK,CAACI,UAAU,CAACL,gBAAgB,CAAC,CAAA;EAElD,IAAII,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAIE,KAAK,CAAC,uDAAuD,CAAC,CAAA;AAC1E,GAAA;AAEA,EAAA,OAAOF,OAAO,CAAA;AAChB;;;;"}

package/index.d.ts

@@ -966,4 +966,241 @@ declare const WithTooltip: {
     } & Omit<_redsift_design_system.LinkButtonProps, "ref">, HTMLButtonElement>;
 };
 
-export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, ButtonLinkWithTooltip, ButtonWithTooltip, Dialog, DialogContent, DialogContentActions, DialogContentActionsProps, DialogContentBody, DialogContentBodyProps, DialogContentHeader, DialogContentHeaderProps, DialogContentProps, DialogContext, DialogProps, DialogSize, DialogState, DialogTrigger, DialogTriggerProps, HiddenPopoverState, IconButtonLinkWithTooltip, IconButtonWithTooltip, LinkButtonWithTooltip, LinkWithTooltip, Popover, PopoverContent, PopoverContentProps, PopoverContext, PopoverPlacement, PopoverProps, PopoverState, PopoverTrigger, PopoverTriggerProps, StyledDialogContentActionsProps, StyledDialogContentBodyProps, StyledDialogContentHeaderProps, StyledDialogContentProps, StyledDialogProps, StyledPopoverContent, StyledPopoverContentProps, StyledPopoverProps, StyledToastContainerProps, StyledToastProps, StyledTooltipContentProps, StyledTooltipProps, Toast, ToastContainer, ToastContainerProps, ToastOptions, ToastPlacement, ToastProps, ToastVariant, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, WithTooltip, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useToastProps, useToastReturnType, useTooltip, useTooltipContext };
+declare function useToggletip({ color, defaultOpen, delay, isModal, isOpen: propsIsOpen, maxWidth, minWidth, offset: propsOffset, onOpen, placement, role: propsRole, toggletipId: propsToggletipId, triggerClassName, width, setHideInsteadOfClose, hideInsteadOfClose, }: Omit<ToggletipProps, 'children'> & HiddenToggletipState): {
+    arrowRef: React$1.MutableRefObject<null>;
+    isModal: boolean | undefined;
+    triggerClassName: string | undefined;
+    setHideInsteadOfClose: React$1.Dispatch<React$1.SetStateAction<boolean>> | undefined;
+    hideInsteadOfClose: boolean | undefined;
+    toggletipId: string;
+    placement: _floating_ui_utils.Placement;
+    strategy: _floating_ui_utils.Strategy;
+    middlewareData: _floating_ui_core.MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React$1.CSSProperties;
+    refs: {
+        reference: React$1.MutableRefObject<_floating_ui_react_dom.ReferenceType | null>;
+        floating: React$1.MutableRefObject<HTMLElement | null>;
+        setReference: (node: _floating_ui_react_dom.ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
+    elements: {
+        reference: _floating_ui_react_dom.ReferenceType | null;
+        floating: HTMLElement | null;
+    } & _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: _floating_ui_utils.Placement;
+        strategy: _floating_ui_utils.Strategy;
+        middlewareData: _floating_ui_core.MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React$1.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
+        events: _floating_ui_react.FloatingEvents;
+        dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
+        elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    color: string | undefined;
+    isOpen: boolean | undefined;
+    handleOpen: (collapsed: boolean) => void;
+};
+
+/**
+ * Context props.
+ */
+type HiddenToggletipState = {
+    /** Whether the toggletip should be hidden or removed from the DOM. */
+    hideInsteadOfClose?: boolean;
+    /** Method to set the hideInsteadOfClose prop. */
+    setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;
+};
+type ToggletipState = (ReturnType<typeof useToggletip> & {
+    /** Class name to append to the trigger. */
+    readonly triggerClassName?: string;
+} & HiddenToggletipState) | null;
+/**
+ * Component variant.
+ */
+declare const ToggletipPlacement: {
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
+    readonly 'top-start': "top-start";
+    readonly 'top-end': "top-end";
+    readonly 'right-start': "right-start";
+    readonly 'right-end': "right-end";
+    readonly 'bottom-start': "bottom-start";
+    readonly 'bottom-end': "bottom-end";
+    readonly 'left-start': "left-start";
+    readonly 'left-end': "left-end";
+};
+type ToggletipPlacement = ValueOf<typeof ToggletipPlacement>;
+/**
+ * Component props.
+ */
+interface ToggletipProps {
+    /** Toggletip content width. Can be either based on the trigger, the available space or define with a number of pixels. */
+    width?: 'trigger-width' | 'available-width' | number;
+    /** Toggletip content min width. Can be either based on the trigger, the available space or define with a number of pixels. */
+    minWidth?: 'trigger-width' | 'available-width' | number;
+    /** Toggletip content max width. Can be either based on the trigger, the available space or define with a number of pixels. */
+    maxWidth?: 'trigger-width' | 'available-width' | number;
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
+    /** Children. Can only be ToggletipTrigger and ToggletipContent. */
+    children: ReactNode;
+    /**
+     * Default open status.
+     * Used for uncontrolled version.
+     */
+    defaultOpen?: boolean;
+    /** Delay time (in ms) for the tooltip to show up. */
+    delay?: number;
+    /** Default placement of the toggletip. */
+    placement?: ToggletipPlacement | 'client-point';
+    /** Whether the toggletip is a modal or not. */
+    isModal?: boolean;
+    /**
+     * Whether the component is opened or not.
+     * Used for controlled version.
+     */
+    isOpen?: boolean;
+    /** Space between trigger and content (in pixels). */
+    offset?: number;
+    /** Method to handle component change. */
+    onOpen?: (open: boolean) => void;
+    /** Allows other components to be treated as trigger and content. */
+    overrideDisplayName?: {
+        content?: string;
+        trigger?: string;
+    };
+    /** Id to the toggletip content. */
+    toggletipId?: string;
+    /** Role to apply to the toggletip. */
+    role?: 'dialog';
+    /** Theme. */
+    theme?: Theme;
+    /** Class name to append to the trigger. */
+    triggerClassName?: string;
+}
+type StyledToggletipProps = ToggletipProps;
+
+declare const ToggletipContext: React$1.Context<ToggletipState>;
+
+/**
+ * Component props.
+ */
+interface ToggletipContentProps extends ComponentProps<'div'>, Omit<ContainerProps, keyof InternalSpacingProps> {
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledToggletipContentProps = ToggletipContentProps & {
+    $placement: ToggletipPlacement;
+    $theme: Theme;
+};
+
+/**
+ * The ToggletipContent component.
+ */
+declare const ToggletipContent: Comp<ToggletipContentProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface ToggletipTriggerProps extends ComponentProps<'button'>, StylingProps {
+}
+type StyledToggletipTriggerProps = ToggletipTriggerProps & {};
+
+/**
+ * The ToggletipTrigger component.
+ */
+declare const ToggletipTrigger: Comp<ToggletipTriggerProps, HTMLButtonElement>;
+
+/**
+ * The Toggletip component.
+ */
+declare const BaseToggletip: React$1.FC<ToggletipProps> & {
+    displayName?: string;
+    className?: string;
+};
+declare const Toggletip: React$1.FC<ToggletipProps> & {
+    displayName?: string | undefined;
+    className?: string | undefined;
+} & {
+    Trigger: _redsift_design_system.Comp<ToggletipTriggerProps, HTMLButtonElement>;
+    Content: _redsift_design_system.Comp<ToggletipContentProps, HTMLDivElement>;
+};
+
+declare const useToggletipContext: () => {
+    arrowRef: React$1.MutableRefObject<null>;
+    isModal: boolean | undefined;
+    triggerClassName: string | undefined;
+    setHideInsteadOfClose: React$1.Dispatch<React$1.SetStateAction<boolean>> | undefined;
+    hideInsteadOfClose: boolean | undefined;
+    toggletipId: string;
+    placement: _floating_ui_utils.Placement;
+    strategy: _floating_ui_utils.Strategy;
+    middlewareData: _floating_ui_core.MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React$1.CSSProperties;
+    refs: {
+        reference: React$1.MutableRefObject<_floating_ui_react_dom.ReferenceType | null>;
+        floating: React$1.MutableRefObject<HTMLElement | null>;
+        setReference: (node: _floating_ui_react_dom.ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
+    elements: {
+        reference: _floating_ui_react_dom.ReferenceType | null;
+        floating: HTMLElement | null;
+    } & _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: _floating_ui_utils.Placement;
+        strategy: _floating_ui_utils.Strategy;
+        middlewareData: _floating_ui_core.MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React$1.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
+        events: _floating_ui_react.FloatingEvents;
+        dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
+        elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    color: string | undefined;
+    isOpen: boolean | undefined;
+    handleOpen: (collapsed: boolean) => void;
+} & {
+    readonly triggerClassName?: string | undefined;
+} & HiddenToggletipState;
+
+export { BaseDialog, BaseDialogContent, BasePopover, BaseToggletip, BaseTooltip, ButtonLinkWithTooltip, ButtonWithTooltip, Dialog, DialogContent, DialogContentActions, DialogContentActionsProps, DialogContentBody, DialogContentBodyProps, DialogContentHeader, DialogContentHeaderProps, DialogContentProps, DialogContext, DialogProps, DialogSize, DialogState, DialogTrigger, DialogTriggerProps, HiddenPopoverState, HiddenToggletipState, IconButtonLinkWithTooltip, IconButtonWithTooltip, LinkButtonWithTooltip, LinkWithTooltip, Popover, PopoverContent, PopoverContentProps, PopoverContext, PopoverPlacement, PopoverProps, PopoverState, PopoverTrigger, PopoverTriggerProps, StyledDialogContentActionsProps, StyledDialogContentBodyProps, StyledDialogContentHeaderProps, StyledDialogContentProps, StyledDialogProps, StyledPopoverContent, StyledPopoverContentProps, StyledPopoverProps, StyledToastContainerProps, StyledToastProps, StyledToggletipContentProps, StyledToggletipProps, StyledToggletipTriggerProps, StyledTooltipContentProps, StyledTooltipProps, Toast, ToastContainer, ToastContainerProps, ToastOptions, ToastPlacement, ToastProps, ToastVariant, Toggletip, ToggletipContent, ToggletipContentProps, ToggletipContext, ToggletipPlacement, ToggletipProps, ToggletipState, ToggletipTrigger, ToggletipTriggerProps, Tooltip, TooltipContent, TooltipContentProps, TooltipContext, TooltipPlacement, TooltipProps, TooltipState, TooltipTrigger, TooltipTriggerProps, WithTooltip, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useToastProps, useToastReturnType, useToggletip, useToggletipContext, useTooltip, useTooltipContext };

package/index.js

@@ -16,4 +16,8 @@ export { T as ToastContainer, u as useToast } from './_internal/useToast.js';
 export { T as TooltipContext, u as useTooltipContext } from './_internal/useTooltipContext.js';
 export { a as TooltipContent, T as TooltipPlacement } from './_internal/types.js';
 export { T as TooltipTrigger } from './_internal/TooltipTrigger.js';
+export { T as ToggletipContext, u as useToggletipContext } from './_internal/useToggletipContext.js';
+export { a as ToggletipContent, T as ToggletipPlacement } from './_internal/ToggletipContent.js';
+export { B as BaseToggletip, T as Toggletip, u as useToggletip } from './_internal/Toggletip2.js';
+export { T as ToggletipTrigger } from './_internal/ToggletipTrigger.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -30,7 +30,7 @@
     "test": "yarn test:unit && yarn test:storybook"
   },
   "types": "index.d.ts",
-  "version": "11.8.3",
+  "version": "11.9.0",
   "dependencies": {
     "@floating-ui/react": "^0.27.5",
     "classnames": "^2.3.1",
@@ -86,11 +86,11 @@
     "ts-jest": "^28.0.3"
   },
   "peerDependencies": {
-    "@redsift/design-system": "^11.8.3-0",
-    "@redsift/icons": "^11.8.3-0",
+    "@redsift/design-system": "^11.9.0-0",
+    "@redsift/icons": "^11.9.0-0",
     "react": ">=17",
     "react-dom": ">=17",
     "styled-components": "^5.3.5"
   },
-  "gitHead": "9de216a56c425998f8912b84f65aa9ca18d51092"
+  "gitHead": "10bc298f5ff0cf5aa232f597f597ac2b7ccba5be"
 }