@redsift/design-system 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/utils/_internal/useId.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+
+let globalPrefix = 'rsi';
+let lastId = 0;
+const nextId = localPrefix => {
+  lastId++;
+  return `${localPrefix || globalPrefix}${lastId}`;
+};
+const resetId = () => {
+  lastId = 0;
+};
+const setPrefix = newPrefix => {
+  globalPrefix = newPrefix;
+};
+const getIds = (count, prefix) => {
+  const ids = [];
+  for (let i = 0; i < count; i++) {
+    ids.push(nextId(prefix));
+  }
+  return ids;
+};
+function usePrevious(value) {
+  const ref = React__default.useRef();
+  React__default.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+const useId = function () {
+  let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  let prefix = arguments.length > 1 ? arguments[1] : undefined;
+  const idsListRef = React__default.useRef([]);
+  const prevCount = usePrevious(count);
+  const prevPrefix = usePrevious(prefix);
+  if (count !== prevCount || prevPrefix !== prefix) {
+    idsListRef.current = getIds(count, prefix);
+  }
+  return idsListRef.current;
+};
+
+export { nextId, resetId, setPrefix, useId };
+//# sourceMappingURL=useId.js.map

package/packages/design-system/src/utils/_internal/useId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.js","sources":["../../../../../../src/utils/useId.ts"],"sourcesContent":["import React from 'react';\n\nlet globalPrefix = 'rsi';\nlet lastId = 0;\nexport const nextId = (localPrefix?: string | null): string => {\n  lastId++;\n  return `${localPrefix || globalPrefix}${lastId}`;\n};\n\nexport const resetId = (): void => {\n  lastId = 0;\n};\n\nexport const setPrefix = (newPrefix: string): void => {\n  globalPrefix = newPrefix;\n};\n\nconst getIds = (count: number, prefix?: string) => {\n  const ids = [];\n  for (let i = 0; i < count; i++) {\n    ids.push(nextId(prefix));\n  }\n  return ids;\n};\n\nfunction usePrevious(value: unknown) {\n  const ref = React.useRef<unknown>();\n  React.useEffect(() => {\n    ref.current = value;\n  });\n  return ref.current;\n}\n\nexport const useId = (count = 1, prefix?: string): string[] => {\n  const idsListRef = React.useRef<string[]>([]);\n  const prevCount = usePrevious(count);\n  const prevPrefix = usePrevious(prefix);\n\n  if (count !== prevCount || prevPrefix !== prefix) {\n    idsListRef.current = getIds(count, prefix);\n  }\n\n  return idsListRef.current;\n};\n"],"names":["globalPrefix","lastId","nextId","localPrefix","resetId","setPrefix","newPrefix","getIds","count","prefix","ids","i","push","usePrevious","value","ref","React","useRef","useEffect","current","useId","arguments","length","undefined","idsListRef","prevCount","prevPrefix"],"mappings":";;AAEA,IAAIA,YAAY,GAAG,KAAK,CAAA;AACxB,IAAIC,MAAM,GAAG,CAAC,CAAA;AACDC,MAAAA,MAAM,GAAIC,WAA2B,IAAa;AAC7DF,EAAAA,MAAM,EAAE,CAAA;AACR,EAAA,OAAQ,GAAEE,WAAW,IAAIH,YAAa,CAAA,EAAEC,MAAO,CAAC,CAAA,CAAA;AAClD,EAAC;AAEYG,MAAAA,OAAO,GAAGA,MAAY;AACjCH,EAAAA,MAAM,GAAG,CAAC,CAAA;AACZ,EAAC;AAEYI,MAAAA,SAAS,GAAIC,SAAiB,IAAW;AACpDN,EAAAA,YAAY,GAAGM,SAAS,CAAA;AAC1B,EAAC;AAED,MAAMC,MAAM,GAAGA,CAACC,KAAa,EAAEC,MAAe,KAAK;EACjD,MAAMC,GAAG,GAAG,EAAE,CAAA;EACd,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,KAAK,EAAEG,CAAC,EAAE,EAAE;AAC9BD,IAAAA,GAAG,CAACE,IAAI,CAACV,MAAM,CAACO,MAAM,CAAC,CAAC,CAAA;AAC1B,GAAA;AACA,EAAA,OAAOC,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,SAASG,WAAWA,CAACC,KAAc,EAAE;AACnC,EAAA,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,EAAW,CAAA;EACnCD,cAAK,CAACE,SAAS,CAAC,MAAM;IACpBH,GAAG,CAACI,OAAO,GAAGL,KAAK,CAAA;AACrB,GAAC,CAAC,CAAA;EACF,OAAOC,GAAG,CAACI,OAAO,CAAA;AACpB,CAAA;AAEaC,MAAAA,KAAK,GAAG,YAA0C;AAAA,EAAA,IAAzCZ,KAAK,GAAAa,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,CAAC,CAAA;EAAA,IAAEZ,MAAe,GAAAY,SAAA,CAAAC,MAAA,GAAAD,CAAAA,GAAAA,SAAA,MAAAE,SAAA,CAAA;AAC9C,EAAA,MAAMC,UAAU,GAAGR,cAAK,CAACC,MAAM,CAAW,EAAE,CAAC,CAAA;AAC7C,EAAA,MAAMQ,SAAS,GAAGZ,WAAW,CAACL,KAAK,CAAC,CAAA;AACpC,EAAA,MAAMkB,UAAU,GAAGb,WAAW,CAACJ,MAAM,CAAC,CAAA;AAEtC,EAAA,IAAID,KAAK,KAAKiB,SAAS,IAAIC,UAAU,KAAKjB,MAAM,EAAE;IAChDe,UAAU,CAACL,OAAO,GAAGZ,MAAM,CAACC,KAAK,EAAEC,MAAM,CAAC,CAAA;AAC5C,GAAA;EAEA,OAAOe,UAAU,CAACL,OAAO,CAAA;AAC3B;;;;"}

package/packages/design-system/src/utils/_internal/warnIfNoAccessibleLabelFound.js

@@ -0,0 +1,20 @@
+/**
+ * Display a warning if no label was found for screen readers and assistive technologies.
+ *
+ * @param props Component props containing the aria-label and aria-labelledby params to check for.
+ * @param additionalKeysToCheck Additional props to check that can act as a label for screen readers (i.e. children).
+ */
+const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck, componentName) => {
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby
+  } = props;
+  const hasText = additionalKeysToCheck && additionalKeysToCheck.filter(key => !!key).length > 0;
+  const hasAriaLabel = Boolean(ariaLabel || ariaLabelledby);
+  if (!hasAriaLabel && !hasText) {
+    console.warn(`You must provide a label ${componentName ? `to ${componentName} ` : ''}for accessibility`, props);
+  }
+};
+
+export { warnIfNoAccessibleLabelFound };
+//# sourceMappingURL=warnIfNoAccessibleLabelFound.js.map

package/packages/design-system/src/utils/_internal/warnIfNoAccessibleLabelFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warnIfNoAccessibleLabelFound.js","sources":["../../../../../../src/utils/warnIfNoAccessibleLabelFound.ts"],"sourcesContent":["import { ComponentProps, DependencyList } from 'react';\n\n/**\n * Display a warning if no label was found for screen readers and assistive technologies.\n *\n * @param props Component props containing the aria-label and aria-labelledby params to check for.\n * @param additionalKeysToCheck Additional props to check that can act as a label for screen readers (i.e. children).\n */\nexport const warnIfNoAccessibleLabelFound = (\n  props: ComponentProps<keyof JSX.IntrinsicElements>,\n  additionalKeysToCheck?: DependencyList,\n  componentName?: string\n): void => {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = props;\n\n  const hasText = additionalKeysToCheck && additionalKeysToCheck.filter((key) => !!key).length > 0;\n  const hasAriaLabel = Boolean(ariaLabel || ariaLabelledby);\n\n  if (!hasAriaLabel && !hasText) {\n    console.warn(`You must provide a label ${componentName ? `to ${componentName} ` : ''}for accessibility`, props);\n  }\n};\n"],"names":["warnIfNoAccessibleLabelFound","props","additionalKeysToCheck","componentName","ariaLabel","ariaLabelledby","hasText","filter","key","length","hasAriaLabel","Boolean","console","warn"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,4BAA4B,GAAGA,CAC1CC,KAAkD,EAClDC,qBAAsC,EACtCC,aAAsB,KACb;EACT,MAAM;AAAE,IAAA,YAAY,EAAEC,SAAS;AAAE,IAAA,iBAAiB,EAAEC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAE5E,EAAA,MAAMK,OAAO,GAAGJ,qBAAqB,IAAIA,qBAAqB,CAACK,MAAM,CAAEC,GAAG,IAAK,CAAC,CAACA,GAAG,CAAC,CAACC,MAAM,GAAG,CAAC,CAAA;AAChG,EAAA,MAAMC,YAAY,GAAGC,OAAO,CAACP,SAAS,IAAIC,cAAc,CAAC,CAAA;AAEzD,EAAA,IAAI,CAACK,YAAY,IAAI,CAACJ,OAAO,EAAE;AAC7BM,IAAAA,OAAO,CAACC,IAAI,CAAE,CAAA,yBAAA,EAA2BV,aAAa,GAAI,CAAA,GAAA,EAAKA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAkB,iBAAA,CAAA,EAAEF,KAAK,CAAC,CAAA;AACjH,GAAA;AACF;;;;"}

package/packages/popovers/src/components/tooltip/_internal/Tooltip.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { TooltipContext } from './context.js';
+import { TooltipPlacement } from './types.js';
+import { useTooltip } from './useTooltip.js';
+import { ThemeProvider } from '../../../../../design-system/src/components/theme/_internal/context.js';
+import { TooltipTrigger } from '../../tooltip-trigger/_internal/TooltipTrigger.js';
+import { TooltipContent } from '../../tooltip-content/_internal/TooltipContent.js';
+import { useTheme } from '../../../../../design-system/src/components/theme/_internal/useTheme.js';
+import { partitionComponents } from '../../../../../design-system/src/utils/_internal/partitionComponents.js';
+import { isComponent } from '../../../../../design-system/src/utils/_internal/isComponent.js';
+
+const COMPONENT_NAME = 'Tooltip';
+const CLASSNAME = 'redsift-tooltip';
+
+/**
+ * The Tooltip component.
+ */
+const BaseTooltip = props => {
+  const {
+    children,
+    color,
+    defaultOpen,
+    delay = 300,
+    isOpen,
+    offset,
+    onOpen,
+    placement = TooltipPlacement.top,
+    theme: propsTheme,
+    tooltipId,
+    triggerClassName
+  } = props;
+  const theme = useTheme ? useTheme(propsTheme) : undefined;
+  const tooltip = useTooltip({
+    color,
+    defaultOpen,
+    delay,
+    placement,
+    isOpen,
+    offset,
+    onOpen,
+    tooltipId,
+    theme,
+    triggerClassName
+  });
+  const [[trigger], [content]] = partitionComponents(React__default.Children.toArray(children), [isComponent('TooltipTrigger'), isComponent('TooltipContent')]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(TooltipContext.Provider, {
+    value: tooltip
+  }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
+};
+BaseTooltip.className = CLASSNAME;
+BaseTooltip.displayName = COMPONENT_NAME;
+const Tooltip = Object.assign(BaseTooltip, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+});
+
+export { BaseTooltip, Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/packages/popovers/src/components/tooltip/_internal/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../../popovers/src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { partitionComponents, isComponent, useTheme } from '@redsift/design-system';\nimport { TooltipContent } from '../tooltip-content';\nimport { TooltipTrigger } from '../tooltip-trigger';\n\nimport { TooltipContext } from './context';\nimport { TooltipPlacement, TooltipProps } from './types';\nimport { useTooltip } from './useTooltip';\n\nimport { ThemeProvider } from '../../../../design-system/src/components/theme/context';\n\nconst COMPONENT_NAME = 'Tooltip';\nconst CLASSNAME = 'redsift-tooltip';\n\n/**\n * The Tooltip component.\n */\nexport const BaseTooltip: React.FC<TooltipProps> & {\n  displayName?: string;\n  className?: string;\n} = (props) => {\n  const {\n    children,\n    color,\n    defaultOpen,\n    delay = 300,\n    isOpen,\n    offset,\n    onOpen,\n    placement = TooltipPlacement.top,\n    theme: propsTheme,\n    tooltipId,\n    triggerClassName,\n  } = props;\n\n  const theme = useTheme ? useTheme(propsTheme) : undefined;\n\n  const tooltip = useTooltip({\n    color,\n    defaultOpen,\n    delay,\n    placement,\n    isOpen,\n    offset,\n    onOpen,\n    tooltipId,\n    theme,\n    triggerClassName,\n  });\n\n  const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('TooltipTrigger'),\n    isComponent('TooltipContent'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <TooltipContext.Provider value={tooltip}>\n        {trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null}\n        {content && isComponent('TooltipContent')(content) ? content : null}\n      </TooltipContext.Provider>\n    </ThemeProvider>\n  );\n};\nBaseTooltip.className = CLASSNAME;\nBaseTooltip.displayName = COMPONENT_NAME;\n\nexport const Tooltip = Object.assign(BaseTooltip, {\n  Trigger: TooltipTrigger,\n  Content: TooltipContent,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseTooltip","props","children","color","defaultOpen","delay","isOpen","offset","onOpen","placement","TooltipPlacement","top","theme","propsTheme","tooltipId","triggerClassName","useTheme","undefined","tooltip","useTooltip","trigger","content","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","TooltipContext","Provider","className","displayName","Tooltip","Object","assign","Trigger","TooltipTrigger","Content","TooltipContent"],"mappings":";;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACaC,MAAAA,WAGZ,GAAIC,KAAK,IAAK;EACb,MAAM;IACJC,QAAQ;IACRC,KAAK;IACLC,WAAW;AACXC,IAAAA,KAAK,GAAG,GAAG;IACXC,MAAM;IACNC,MAAM;IACNC,MAAM;IACNC,SAAS,GAAGC,gBAAgB,CAACC,GAAG;AAChCC,IAAAA,KAAK,EAAEC,UAAU;IACjBC,SAAS;AACTC,IAAAA,gBAAAA;AACF,GAAC,GAAGd,KAAK,CAAA;EAET,MAAMW,KAAK,GAAGI,QAAQ,GAAGA,QAAQ,CAACH,UAAU,CAAC,GAAGI,SAAS,CAAA;EAEzD,MAAMC,OAAO,GAAGC,UAAU,CAAC;IACzBhB,KAAK;IACLC,WAAW;IACXC,KAAK;IACLI,SAAS;IACTH,MAAM;IACNC,MAAM;IACNC,MAAM;IACNM,SAAS;IACTF,KAAK;AACLG,IAAAA,gBAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAM,CAAC,CAACK,OAAO,CAAC,EAAE,CAACC,OAAO,CAAC,CAAC,GAAGC,mBAAmB,CAACC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACvB,QAAQ,CAAC,EAAE,CACnFwB,WAAW,CAAC,gBAAgB,CAAC,EAC7BA,WAAW,CAAC,gBAAgB,CAAC,CAC9B,CAAC,CAAA;AAEF,EAAA,oBACEH,cAAA,CAAAI,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEjB,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,eAC9BW,cAAA,CAAAI,aAAA,CAACG,cAAc,CAACC,QAAQ,EAAA;AAACF,IAAAA,KAAK,EAAEX,OAAAA;AAAQ,GAAA,EACrCE,OAAO,IAAIM,WAAW,CAAC,gBAAgB,CAAC,CAACN,OAAO,CAAC,GAAGA,OAAO,GAAG,IAAI,EAClEC,OAAO,IAAIK,WAAW,CAAC,gBAAgB,CAAC,CAACL,OAAO,CAAC,GAAGA,OAAO,GAAG,IACxC,CACZ,CAAC,CAAA;AAEpB,EAAC;AACDrB,WAAW,CAACgC,SAAS,GAAGjC,SAAS,CAAA;AACjCC,WAAW,CAACiC,WAAW,GAAGnC,cAAc,CAAA;AAEjC,MAAMoC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAACpC,WAAW,EAAE;AAChDqC,EAAAA,OAAO,EAAEC,cAAc;AACvBC,EAAAA,OAAO,EAAEC,cAAAA;AACX,CAAC;;;;"}

package/packages/popovers/src/components/tooltip/_internal/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const TooltipContext = /*#__PURE__*/React__default.createContext(null);
+
+export { TooltipContext };
+//# sourceMappingURL=context.js.map

package/packages/popovers/src/components/tooltip/_internal/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../../popovers/src/components/tooltip/context.ts"],"sourcesContent":["import React from 'react';\nimport { TooltipState } from './types';\n\nexport const TooltipContext = React.createContext<TooltipState | null>(null);\n"],"names":["TooltipContext","React","createContext"],"mappings":";;AAGO,MAAMA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAsB,IAAI;;;;"}

package/packages/popovers/src/components/tooltip/_internal/types.js

@@ -0,0 +1,28 @@
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const TooltipPlacement = {
+  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.
+ */
+
+export { TooltipPlacement };
+//# sourceMappingURL=types.js.map

package/packages/popovers/src/components/tooltip/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../../popovers/src/components/tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useTooltip } from './useTooltip';\n\n/**\n * Context props.\n */\nexport type TooltipState =\n  | (ReturnType<typeof useTooltip> & {\n      /** Class name to append to the trigger. */\n      readonly triggerClassName?: string;\n    })\n  | null;\n\n/**\n * Component variant.\n */\nexport const TooltipPlacement = {\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 TooltipPlacement = ValueOf<typeof TooltipPlacement>;\n\n/**\n * Component props.\n */\nexport interface TooltipProps {\n  /** Button color that will be forward to the trigger. */\n  color?: ButtonColor;\n  /** Children. Can only be TooltipTrigger and TooltilContent. */\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 tooltip. */\n  placement?: TooltipPlacement | 'client-point';\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  /** Id to the tooltip content. */\n  tooltipId?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Class name to append to the trigger. */\n  triggerClassName?: string;\n}\n\nexport type StyledTooltipProps = TooltipProps;\n"],"names":["TooltipPlacement","top","right","bottom","left"],"mappings":"AAIA;AACA;AACA;;AAQA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,IAAI,EAAE,MAAM;AACZ,EAAA,WAAW,EAAE,WAAW;AACxB,EAAA,SAAS,EAAE,SAAS;AACpB,EAAA,aAAa,EAAE,aAAa;AAC5B,EAAA,WAAW,EAAE,WAAW;AACxB,EAAA,cAAc,EAAE,cAAc;AAC9B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAA;AACd,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/popovers/src/components/tooltip/_internal/useTooltip.js

@@ -0,0 +1,78 @@
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { useFloating, useClientPoint, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions } from '../../../../../../node_modules/@floating-ui/react/dist/_internal/floating-ui.react.js';
+import { autoUpdate } from '../../../../../../node_modules/@floating-ui/dom/dist/_internal/floating-ui.dom.js';
+import { offset, flip, shift, arrow } from '../../../../../../node_modules/@floating-ui/react-dom/dist/_internal/floating-ui.react-dom.js';
+import { useId } from '../../../../../design-system/src/utils/_internal/useId.js';
+
+function useTooltip(_ref) {
+  let {
+    color,
+    defaultOpen,
+    delay,
+    placement,
+    isOpen: propsIsOpen,
+    offset: propsOffset,
+    onOpen,
+    tooltipId: propsTooltipId,
+    triggerClassName
+  } = _ref;
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  const [_id] = useId();
+  const tooltipId = propsTooltipId !== null && propsTooltipId !== void 0 ? propsTooltipId : _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 data = useFloating({
+    placement: placement === 'client-point' ? 'left' : placement,
+    open: isOpen,
+    onOpenChange: handleOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(propsOffset !== null && propsOffset !== void 0 ? propsOffset : 8), flip({
+      fallbackAxisSideDirection: 'start'
+    }), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })]
+  });
+  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 focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: 'tooltip'
+  });
+  const interactions = useInteractions([hover, focus, dismiss, role, clientPoint]);
+  return React__default.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
+    isOpen,
+    handleOpen
+  }, interactions), data), {}, {
+    arrowRef,
+    tooltipId,
+    triggerClassName
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
+}
+
+export { useTooltip };
+//# sourceMappingURL=useTooltip.js.map

package/packages/popovers/src/components/tooltip/_internal/useTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.js","sources":["../../../../../../../../popovers/src/components/tooltip/useTooltip.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  useFloating,\n  arrow,\n  autoUpdate,\n  offset,\n  flip,\n  safePolygon,\n  shift,\n  useHover,\n  useFocus,\n  useDismiss,\n  useRole,\n  useInteractions,\n  useClientPoint,\n} from '@floating-ui/react';\nimport { TooltipProps } from './types';\nimport { useId } from '@redsift/design-system';\n\nexport function useTooltip({\n  color,\n  defaultOpen,\n  delay,\n  placement,\n  isOpen: propsIsOpen,\n  offset: propsOffset,\n  onOpen,\n  tooltipId: propsTooltipId,\n  triggerClassName,\n}: Omit<TooltipProps, 'children'>) {\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);\n\n  const [_id] = useId();\n  const tooltipId = propsTooltipId ?? _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 data = useFloating({\n    placement: placement === 'client-point' ? 'left' : placement,\n    open: isOpen,\n    onOpenChange: handleOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(propsOffset ?? 8),\n      flip({\n        fallbackAxisSideDirection: 'start',\n      }),\n      shift({ padding: 8 }),\n      arrow({\n        element: arrowRef,\n      }),\n    ],\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 focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  const interactions = useInteractions([hover, focus, dismiss, role, clientPoint]);\n\n  return React.useMemo(\n    () => ({\n      color,\n      isOpen,\n      handleOpen,\n      ...interactions,\n      ...data,\n      arrowRef,\n      tooltipId,\n      triggerClassName,\n    }),\n    [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]\n  );\n}\n"],"names":["useTooltip","_ref","color","defaultOpen","delay","placement","isOpen","propsIsOpen","offset","propsOffset","onOpen","tooltipId","propsTooltipId","triggerClassName","arrowRef","useRef","setIsOpen","useState","_id","useId","useEffect","handleOpen","useCallback","collapsed","undefined","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","flip","fallbackAxisSideDirection","shift","padding","arrow","element","context","clientPoint","useClientPoint","enabled","hover","useHover","move","close","handleClose","safePolygon","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","React","useMemo","_objectSpread"],"mappings":"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"}

package/packages/popovers/src/components/tooltip/_internal/useTooltipContext.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { TooltipContext } from './context.js';
+
+const useTooltipContext = () => {
+  const context = React__default.useContext(TooltipContext);
+  if (context == null) {
+    throw new Error('Tooltip components must be wrapped in <Tooltip />');
+  }
+  return context;
+};
+
+export { useTooltipContext };
+//# sourceMappingURL=useTooltipContext.js.map

package/packages/popovers/src/components/tooltip/_internal/useTooltipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipContext.js","sources":["../../../../../../../../popovers/src/components/tooltip/useTooltipContext.tsx"],"sourcesContent":["import React from 'react';\nimport { TooltipContext } from './context';\n\nexport const useTooltipContext = () => {\n  const context = React.useContext(TooltipContext);\n\n  if (context == null) {\n    throw new Error('Tooltip components must be wrapped in <Tooltip />');\n  }\n\n  return context;\n};\n"],"names":["useTooltipContext","context","React","useContext","TooltipContext","Error"],"mappings":";;;AAGaA,MAAAA,iBAAiB,GAAGA,MAAM;AACrC,EAAA,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,cAAc,CAAC,CAAA;EAEhD,IAAIH,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAII,KAAK,CAAC,mDAAmD,CAAC,CAAA;AACtE,GAAA;AAEA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/packages/popovers/src/components/tooltip-content/_internal/TooltipContent.js

@@ -0,0 +1,80 @@
+import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext } from 'react';
+import { useMergeRefs, FloatingPortal } from '../../../../../../node_modules/@floating-ui/react/dist/_internal/floating-ui.react.js';
+import { StyledTooltipContent } from './styles.js';
+import classNames from 'classnames';
+import { useTooltipContext } from '../../tooltip/_internal/useTooltipContext.js';
+import { AppContainerContext } from '../../../../../design-system/src/components/app-container/_internal/context.js';
+import { useTheme } from '../../../../../design-system/src/components/theme/_internal/useTheme.js';
+
+const COMPONENT_NAME = 'TooltipContent';
+const CLASSNAME = 'redsift-tooltip-content';
+
+/**
+ * The TooltipContent component.
+ */
+const TooltipContent = /*#__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
+      } = {}
+    }
+  } = useTooltipContext();
+  const theme = useTheme ? useTheme(propsTheme) : undefined;
+  const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const {
+    arrowRef
+  } = useTooltipContext();
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[placement.split('-')[0]];
+  return /*#__PURE__*/React__default.createElement(FloatingPortal, {
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
+  }, isOpen && /*#__PURE__*/React__default.createElement(StyledTooltipContent, _extends({
+    className: classNames(TooltipContent.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__default.createElement("div", {
+    ref: arrowRef,
+    className: `${TooltipContent.className}__arrow`,
+    style: {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      [staticSide]: '-6px'
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${TooltipContent.className}__inner`
+  }, children)));
+});
+TooltipContent.className = CLASSNAME;
+TooltipContent.displayName = COMPONENT_NAME;
+
+export { TooltipContent };
+//# sourceMappingURL=TooltipContent.js.map

package/packages/popovers/src/components/tooltip-content/_internal/TooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.js","sources":["../../../../../../../../popovers/src/components/tooltip-content/TooltipContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { useMergeRefs, FloatingPortal } from '@floating-ui/react';\n\nimport { AppContainerContext, Comp, useTheme } from '@redsift/design-system';\nimport { TooltipContentProps } from './types';\nimport { TooltipPlacement, useTooltipContext } from '../tooltip';\nimport { StyledTooltipContent } from './styles';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'TooltipContent';\nconst CLASSNAME = 'redsift-tooltip-content';\n\n/**\n * The TooltipContent component.\n */\nexport const TooltipContent: Comp<TooltipContentProps, 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  } = useTooltipContext();\n  const theme = useTheme ? useTheme(propsTheme) : undefined;\n  const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n  const { arrowRef } = useTooltipContext();\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        <StyledTooltipContent\n          className={classNames(TooltipContent.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 TooltipPlacement}\n        >\n          <div\n            ref={arrowRef}\n            className={`${TooltipContent.className}__arrow`}\n            style={{\n              left: arrowX != null ? `${arrowX}px` : '',\n              top: arrowY != null ? `${arrowY}px` : '',\n              [staticSide!]: '-6px',\n            }}\n          />\n          <div className={`${TooltipContent.className}__inner`}>{children}</div>\n        </StyledTooltipContent>\n      )}\n    </FloatingPortal>\n  );\n});\nTooltipContent.className = CLASSNAME;\nTooltipContent.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","TooltipContent","forwardRef","props","ref","children","className","style","theme","propsTheme","appContainerState","useContext","AppContainerContext","getFloatingProps","isOpen","placement","refs","strategy","x","y","middlewareData","arrow","arrowX","arrowY","useTooltipContext","useTheme","undefined","popoverRef","useMergeRefs","setFloating","arrowRef","staticSide","top","right","bottom","left","split","React","createElement","FloatingPortal","root","appContainerRef","current","StyledTooltipContent","_extends","classNames","$theme","_objectSpread","position","visibility","$placement","displayName"],"mappings":"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"}

package/packages/popovers/src/components/tooltip-content/_internal/styles.js

@@ -0,0 +1,128 @@
+import styled, { css } from 'styled-components';
+import { TooltipPlacement } from '../../tooltip/_internal/types.js';
+import { baseContainer } from '../../../../../design-system/src/components/shared/_internal/styles.js';
+import { Theme } from '../../../../../design-system/src/types/_internal/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledTooltipContent = 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-tooltip-font-family);
+  font-size: var(--redsift-typography-tooltip-font-size);
+  font-weight: var(--redsift-typography-tooltip-font-weight);
+  line-height: var(--redsift-typography-tooltip-line-height);
+  max-width: calc(100vw - 48px);
+  padding: 4px 8px;
+  z-index: var(--redsift-layout-z-index-tooltip);
+
+  .redsift-tooltip-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 TooltipPlacement['right-start']:
+      return css`
+          border-bottom-left-radius: 0;
+        `;
+    case TooltipPlacement['right-end']:
+      return css`
+          border-top-left-radius: 0;
+        `;
+    case TooltipPlacement['left-start']:
+      return css`
+          border-bottom-right-radius: 0;
+        `;
+    case TooltipPlacement['left-end']:
+      return css`
+          border-top-right-radius: 0;
+        `;
+    default:
+      return css``;
+  }
+}}
+
+  ${_ref4 => {
+  let {
+    $placement
+  } = _ref4;
+  switch ($placement) {
+    case TooltipPlacement.left:
+    case TooltipPlacement['left-end']:
+    case TooltipPlacement['left-start']:
+      return css`
+          .redsift-tooltip-content__arrow {
+            border-width: 6px 0 6px 6px;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+          }
+        `;
+    case TooltipPlacement.top:
+    case TooltipPlacement['top-end']:
+    case TooltipPlacement['top-start']:
+      return css`
+          .redsift-tooltip-content__arrow {
+            border-width: 6px 6px 0;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+    case TooltipPlacement.right:
+    case TooltipPlacement['right-end']:
+    case TooltipPlacement['right-start']:
+      return css`
+          .redsift-tooltip-content__arrow {
+            border-width: 6px 6px 6px 0;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+    case TooltipPlacement.bottom:
+    case TooltipPlacement['bottom-end']:
+    case TooltipPlacement['bottom-start']:
+    default:
+      return css`
+          .redsift-tooltip-content__arrow {
+            border-width: 0 6px 6px;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-left-color: transparent;
+          }
+        `;
+  }
+}}
+`;
+
+export { StyledTooltipContent };
+//# sourceMappingURL=styles.js.map

package/packages/popovers/src/components/tooltip-content/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../popovers/src/components/tooltip-content/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Theme, baseContainer } from '@redsift/design-system';\nimport { TooltipPlacement } from '../tooltip';\nimport { StyledTooltipContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledTooltipContent = styled.div<StyledTooltipContentProps>`\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-tooltip-font-family);\n  font-size: var(--redsift-typography-tooltip-font-size);\n  font-weight: var(--redsift-typography-tooltip-font-weight);\n  line-height: var(--redsift-typography-tooltip-line-height);\n  max-width: calc(100vw - 48px);\n  padding: 4px 8px;\n  z-index: var(--redsift-layout-z-index-tooltip);\n\n  .redsift-tooltip-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 TooltipPlacement['right-start']:\n        return css`\n          border-bottom-left-radius: 0;\n        `;\n      case TooltipPlacement['right-end']:\n        return css`\n          border-top-left-radius: 0;\n        `;\n      case TooltipPlacement['left-start']:\n        return css`\n          border-bottom-right-radius: 0;\n        `;\n      case TooltipPlacement['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 TooltipPlacement.left:\n      case TooltipPlacement['left-end']:\n      case TooltipPlacement['left-start']:\n        return css`\n          .redsift-tooltip-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 TooltipPlacement.top:\n      case TooltipPlacement['top-end']:\n      case TooltipPlacement['top-start']:\n        return css`\n          .redsift-tooltip-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 TooltipPlacement.right:\n      case TooltipPlacement['right-end']:\n      case TooltipPlacement['right-start']:\n        return css`\n          .redsift-tooltip-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 TooltipPlacement.bottom:\n      case TooltipPlacement['bottom-end']:\n      case TooltipPlacement['bottom-start']:\n      default:\n        return css`\n          .redsift-tooltip-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"],"names":["StyledTooltipContent","styled","div","baseContainer","_ref","$theme","css","Theme","dark","_ref2","_ref3","$placement","TooltipPlacement","_ref4","left","top","right","bottom"],"mappings":"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"}

package/packages/popovers/src/components/tooltip-trigger/_internal/TooltipTrigger.js

@@ -0,0 +1,47 @@
+import { objectSpread2 as _objectSpread2, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { useMergeRefs } from '../../../../../../node_modules/@floating-ui/react/dist/_internal/floating-ui.react.js';
+import classNames from 'classnames';
+import { useTooltipContext } from '../../tooltip/_internal/useTooltipContext.js';
+
+const COMPONENT_NAME = 'TooltipTrigger';
+const CLASSNAME = 'redsift-tooltip-trigger';
+
+/**
+ * The TooltipTrigger component.
+ */
+const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    getReferenceProps,
+    refs,
+    tooltipId,
+    triggerClassName,
+    color
+  } = useTooltipContext();
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  if ( /*#__PURE__*/React__default.isValidElement(children)) {
+    var _children$props$child;
+    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+      ref: triggerRef
+    }, props), {}, {
+      'aria-describedby': tooltipId
+    }, children.props), {}, {
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement("span", _extends({
+    ref: triggerRef
+  }, getReferenceProps(props)), children);
+});
+TooltipTrigger.className = CLASSNAME;
+TooltipTrigger.displayName = COMPONENT_NAME;
+
+export { TooltipTrigger };
+//# sourceMappingURL=TooltipTrigger.js.map

package/packages/popovers/src/components/tooltip-trigger/_internal/TooltipTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTrigger.js","sources":["../../../../../../../../popovers/src/components/tooltip-trigger/TooltipTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp } from '@redsift/design-system';\nimport { useTooltipContext } from '../tooltip';\nimport { TooltipTriggerProps } from './types';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'TooltipTrigger';\nconst CLASSNAME = 'redsift-tooltip-trigger';\n\n/**\n * The TooltipTrigger component.\n */\nexport const TooltipTrigger: Comp<TooltipTriggerProps, HTMLSpanElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, refs, tooltipId, triggerClassName, color } = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  if (React.isValidElement(children)) {\n    return React.cloneElement(children as ReactElement, {\n      ...getReferenceProps({\n        ref: triggerRef,\n        ...props,\n        'aria-describedby': tooltipId,\n        ...children.props,\n        children: children.props.children ?? '',\n      }),\n      className: classNames((children as ReactElement).props.className, triggerClassName),\n      color: color ?? children.props.color,\n    });\n  }\n\n  return (\n    <span ref={triggerRef} {...getReferenceProps(props)}>\n      {children}\n    </span>\n  );\n});\nTooltipTrigger.className = CLASSNAME;\nTooltipTrigger.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","TooltipTrigger","forwardRef","props","ref","children","getReferenceProps","refs","tooltipId","triggerClassName","color","useTooltipContext","childrenRef","triggerRef","useMergeRefs","setReference","React","isValidElement","_children$props$child","cloneElement","_objectSpread","className","classNames","createElement","_extends","displayName"],"mappings":";;;;;;AAQA,MAAMA,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,yBAAyB,CAAA;;AAE3C;AACA;AACA;AACO,MAAMC,cAA0D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,IAAI;IAAEC,SAAS;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,iBAAiB,EAAE,CAAA;AAC3F,EAAA,MAAMC,WAAW,GAAIP,QAAQ,CAASD,GAAG,CAAA;AACzC,EAAA,MAAMS,UAAU,GAAGC,YAAY,CAAC,CAACP,IAAI,CAACQ,YAAY,EAAEX,GAAG,EAAEQ,WAAW,CAAC,CAAC,CAAA;AAEtE,EAAA,kBAAII,cAAK,CAACC,cAAc,CAACZ,QAAQ,CAAC,EAAE;AAAA,IAAA,IAAAa,qBAAA,CAAA;AAClC,IAAA,oBAAOF,cAAK,CAACG,YAAY,CAACd,QAAQ,EAAAe,cAAA,CAAAA,cAAA,CAAA,EAAA,EAC7Bd,iBAAiB,CAAAc,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA;AAClBhB,MAAAA,GAAG,EAAES,UAAAA;AAAU,KAAA,EACZV,KAAK,CAAA,EAAA,EAAA,EAAA;AACR,MAAA,kBAAkB,EAAEK,SAAAA;KACjBH,EAAAA,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjBE,MAAAA,QAAQ,EAAAa,CAAAA,qBAAA,GAAEb,QAAQ,CAACF,KAAK,CAACE,QAAQ,MAAAa,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAI,EAAA;AAAE,KAAA,CACxC,CAAC,CAAA,EAAA,EAAA,EAAA;MACFG,SAAS,EAAEC,UAAU,CAAEjB,QAAQ,CAAkBF,KAAK,CAACkB,SAAS,EAAEZ,gBAAgB,CAAC;MACnFC,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIL,QAAQ,CAACF,KAAK,CAACO,KAAAA;AAAK,KAAA,CACrC,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,oBACEM,cAAA,CAAAO,aAAA,CAAA,MAAA,EAAAC,QAAA,CAAA;AAAMpB,IAAAA,GAAG,EAAES,UAAAA;AAAW,GAAA,EAAKP,iBAAiB,CAACH,KAAK,CAAC,CAAA,EAChDE,QACG,CAAC,CAAA;AAEX,CAAC,EAAC;AACFJ,cAAc,CAACoB,SAAS,GAAGrB,SAAS,CAAA;AACpCC,cAAc,CAACwB,WAAW,GAAG1B,cAAc;;;;"}