@salt-ds/core 0.0.0-snapshot-20230811150341 → 0.0.0-snapshot-20230830162747

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist-cjs/checkbox/Checkbox.js +0 -1
  2. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  3. package/dist-cjs/index.js +0 -4
  4. package/dist-cjs/index.js.map +1 -1
  5. package/dist-cjs/input/Input.css.js +1 -1
  6. package/dist-cjs/input/Input.js +2 -2
  7. package/dist-cjs/input/Input.js.map +1 -1
  8. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  9. package/dist-cjs/multiline-input/MultilineInput.js +3 -3
  10. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  11. package/dist-cjs/radio-button/RadioButton.js +0 -1
  12. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  13. package/dist-cjs/radio-button/RadioButtonGroup.css.js +1 -1
  14. package/dist-cjs/tooltip/Tooltip.js +53 -19
  15. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  16. package/dist-cjs/tooltip/useTooltip.js +7 -8
  17. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  18. package/dist-cjs/utils/useFloatingUI.js +2 -83
  19. package/dist-cjs/utils/useFloatingUI.js.map +1 -1
  20. package/dist-es/checkbox/Checkbox.js +0 -1
  21. package/dist-es/checkbox/Checkbox.js.map +1 -1
  22. package/dist-es/index.js +1 -1
  23. package/dist-es/input/Input.css.js +1 -1
  24. package/dist-es/input/Input.js +2 -2
  25. package/dist-es/input/Input.js.map +1 -1
  26. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  27. package/dist-es/multiline-input/MultilineInput.js +3 -3
  28. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  29. package/dist-es/radio-button/RadioButton.js +0 -1
  30. package/dist-es/radio-button/RadioButton.js.map +1 -1
  31. package/dist-es/radio-button/RadioButtonGroup.css.js +1 -1
  32. package/dist-es/tooltip/Tooltip.js +53 -19
  33. package/dist-es/tooltip/Tooltip.js.map +1 -1
  34. package/dist-es/tooltip/useTooltip.js +7 -8
  35. package/dist-es/tooltip/useTooltip.js.map +1 -1
  36. package/dist-es/utils/useFloatingUI.js +4 -81
  37. package/dist-es/utils/useFloatingUI.js.map +1 -1
  38. package/dist-types/tooltip/Tooltip.d.ts +2 -2
  39. package/dist-types/tooltip/useTooltip.d.ts +0 -5
  40. package/dist-types/utils/useFloatingUI.d.ts +1 -45
  41. package/package.json +1 -1
  42. package/dist-cjs/tooltip/TooltipBase.js +0 -62
  43. package/dist-cjs/tooltip/TooltipBase.js.map +0 -1
  44. package/dist-es/tooltip/TooltipBase.js +0 -58
  45. package/dist-es/tooltip/TooltipBase.js.map +0 -1
  46. package/dist-types/tooltip/TooltipBase.d.ts +0 -13
@@ -1,17 +1,21 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef, isValidElement, cloneElement } from 'react';
4
+ import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
5
+ import { useWindow } from '@salt-ds/window';
6
+ import { useComponentCssInjection } from '@salt-ds/styles';
7
+ import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
4
8
  import { makePrefixer } from '../utils/makePrefixer.js';
5
- import { useFloatingComponent } from '../utils/useFloatingUI.js';
9
+ import '../utils/useFloatingUI.js';
6
10
  import { useForkRef } from '../utils/useForkRef.js';
7
11
  import '../utils/useId.js';
8
- import '../salt-provider/SaltProvider.js';
12
+ import { SaltProvider } from '../salt-provider/SaltProvider.js';
9
13
  import '../viewport/ViewportProvider.js';
10
14
  import { mergeProps } from '../utils/mergeProps.js';
11
15
  import { useTooltip } from './useTooltip.js';
16
+ import css_248z from './Tooltip.css.js';
12
17
  import '../form-field-context/FormFieldContext.js';
13
18
  import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
14
- import { TooltipBase } from './TooltipBase.js';
15
19
 
16
20
  const withBaseName = makePrefixer("saltTooltip");
17
21
  const Tooltip = forwardRef(
@@ -19,7 +23,7 @@ const Tooltip = forwardRef(
19
23
  const {
20
24
  children,
21
25
  className,
22
- disabled: disabledProp = false,
26
+ disabled: disabledProp,
23
27
  hideArrow = false,
24
28
  hideIcon = false,
25
29
  open: openProp,
@@ -31,12 +35,18 @@ const Tooltip = forwardRef(
31
35
  ...rest
32
36
  } = props;
33
37
  const {
38
+ a11yProps,
34
39
  disabled: formFieldDisabled,
35
40
  validationStatus: formFieldValidationStatus
36
41
  } = useFormFieldProps();
37
42
  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
38
43
  const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
39
- const { Component: FloatingComponent } = useFloatingComponent();
44
+ const targetWindow = useWindow();
45
+ useComponentCssInjection({
46
+ testId: "salt-tooltip",
47
+ css: css_248z,
48
+ window: targetWindow
49
+ });
40
50
  const hookProps = {
41
51
  open: openProp,
42
52
  placement,
@@ -50,8 +60,7 @@ const Tooltip = forwardRef(
50
60
  floating,
51
61
  reference,
52
62
  getTriggerProps,
53
- getTooltipProps,
54
- getTooltipPosition
63
+ getTooltipProps
55
64
  } = useTooltip(hookProps);
56
65
  const triggerRef = useForkRef(
57
66
  isValidElement(children) ? children.ref : null,
@@ -64,18 +73,43 @@ const Tooltip = forwardRef(
64
73
  ...mergeProps(getTriggerProps(), children.props),
65
74
  ref: triggerRef
66
75
  }),
67
- /* @__PURE__ */ jsx(FloatingComponent, {
68
- className: clsx(withBaseName(), withBaseName(status), className),
69
- open: open && !disabled,
70
- ...getTooltipPosition(),
71
- ...getTooltipProps(),
72
- ref: floatingRef,
73
- children: /* @__PURE__ */ jsx(TooltipBase, {
74
- hideIcon,
75
- status,
76
- content,
77
- hideArrow,
78
- arrowProps
76
+ open && !disabled && /* @__PURE__ */ jsx(FloatingPortal, {
77
+ children: /* @__PURE__ */ jsx(SaltProvider, {
78
+ children: /* @__PURE__ */ jsxs("div", {
79
+ className: clsx(
80
+ withBaseName(),
81
+ withBaseName(status),
82
+ className
83
+ ),
84
+ ref: floatingRef,
85
+ ...getTooltipProps(),
86
+ children: [
87
+ /* @__PURE__ */ jsxs("div", {
88
+ className: withBaseName("container"),
89
+ children: [
90
+ !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
91
+ status,
92
+ size: 1,
93
+ className: withBaseName("icon")
94
+ }),
95
+ /* @__PURE__ */ jsx("span", {
96
+ id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
97
+ className: withBaseName("content"),
98
+ children: content
99
+ })
100
+ ]
101
+ }),
102
+ !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
103
+ ...arrowProps,
104
+ className: withBaseName("arrow"),
105
+ strokeWidth: 1,
106
+ fill: "var(--salt-container-primary-background)",
107
+ stroke: "var(--tooltip-status-borderColor)",
108
+ height: 5,
109
+ width: 10
110
+ })
111
+ ]
112
+ })
79
113
  })
80
114
  })
81
115
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n const floatingRef = useForkRef<HTMLElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipPosition()}\n {...getTooltipProps()}\n ref={floatingRef}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SAAS,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,UAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AACA,IAAM,MAAA,WAAA,GAAc,UAAwB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAEzD,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,kBAAmB,EAAA;AAAA,UACtB,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UAEL,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}
@@ -80,25 +80,24 @@ function useTooltip(props) {
80
80
  const getTooltipProps = () => {
81
81
  return getFloatingProps({
82
82
  "data-placement": placement,
83
- ref: floating
83
+ ref: floating,
84
+ style: {
85
+ top: y != null ? y : 0,
86
+ left: x != null ? x : 0,
87
+ position: strategy
88
+ }
84
89
  });
85
90
  };
86
91
  const getTriggerProps = () => getReferenceProps({
87
92
  ref: reference
88
93
  });
89
- const getTooltipPosition = () => ({
90
- top: y != null ? y : 0,
91
- left: x != null ? x : 0,
92
- position: strategy
93
- });
94
94
  return {
95
95
  arrowProps,
96
96
  open,
97
97
  floating,
98
98
  reference,
99
99
  getTooltipProps,
100
- getTriggerProps,
101
- getTooltipPosition
100
+ getTriggerProps
102
101
  };
103
102
  }
104
103
 
@@ -1 +1 @@
1
- {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
1
+ {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["open"],"mappings":"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"}
@@ -1,73 +1,5 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { FloatingPortal, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
3
- import { forwardRef, createContext, useMemo, useContext } from 'react';
4
- import { SaltProvider } from '../salt-provider/SaltProvider.js';
1
+ import { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
5
2
 
6
- const DefaultFloatingComponent = forwardRef((props, ref) => {
7
- const { open, disabled = false, top, left, position, ...rest } = props;
8
- const style = {
9
- top,
10
- left,
11
- position
12
- };
13
- return open && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, {
14
- children: /* @__PURE__ */ jsx(SaltProvider, {
15
- children: /* @__PURE__ */ jsx("div", {
16
- style,
17
- ...rest,
18
- ref
19
- })
20
- })
21
- }) : null;
22
- });
23
- const FloatingComponentContext = createContext({
24
- Component: DefaultFloatingComponent
25
- });
26
- if (process.env.NODE_ENV !== "production") {
27
- FloatingComponentContext.displayName = "FloatingComponentContext";
28
- }
29
- function FloatingComponentProvider(props) {
30
- const { Component, children } = props;
31
- const value = useMemo(() => ({ Component }), [Component]);
32
- return /* @__PURE__ */ jsx(FloatingComponentContext.Provider, {
33
- value,
34
- children
35
- });
36
- }
37
- function useFloatingComponent() {
38
- return useContext(FloatingComponentContext);
39
- }
40
- const defaultFloatingPlaform = {
41
- platform,
42
- middleware: [],
43
- animationFrame: false
44
- };
45
- const FloatingPlatformContext = createContext(
46
- defaultFloatingPlaform
47
- );
48
- function FloatingPlatformProvider(props) {
49
- const {
50
- platform: platformProp,
51
- middleware,
52
- animationFrame,
53
- children
54
- } = props;
55
- const floatingPlatformContextValue = useMemo(
56
- () => ({
57
- platform: platformProp != null ? platformProp : platform,
58
- middleware: middleware != null ? middleware : [],
59
- animationFrame: animationFrame != null ? animationFrame : false
60
- }),
61
- [platformProp, middleware, animationFrame]
62
- );
63
- return /* @__PURE__ */ jsx(FloatingPlatformContext.Provider, {
64
- value: floatingPlatformContextValue,
65
- children
66
- });
67
- }
68
- function useFloatingPlatform() {
69
- return useContext(FloatingPlatformContext);
70
- }
71
3
  const DEFAULT_FLOATING_UI_MIDDLEWARE = [
72
4
  flip(),
73
5
  shift({ limiter: limitShift() })
@@ -80,22 +12,13 @@ function useFloatingUI(props) {
80
12
  open = false,
81
13
  onOpenChange
82
14
  } = props;
83
- const {
84
- platform: contextPlaform,
85
- middleware: contextMiddleware,
86
- animationFrame
87
- } = useFloatingPlatform();
88
15
  const { reference, floating, refs, update, ...rest } = useFloating({
89
16
  placement,
90
17
  strategy,
91
- middleware: [...middleware, ...contextMiddleware],
18
+ middleware,
92
19
  open,
93
20
  onOpenChange,
94
- whileElementsMounted: (...args) => {
95
- const cleanup = autoUpdate(...args, { animationFrame });
96
- return cleanup;
97
- },
98
- platform: contextPlaform
21
+ whileElementsMounted: autoUpdate
99
22
  });
100
23
  return {
101
24
  reference,
@@ -106,5 +29,5 @@ function useFloatingUI(props) {
106
29
  };
107
30
  }
108
31
 
109
- export { DEFAULT_FLOATING_UI_MIDDLEWARE, FloatingComponentProvider, FloatingPlatformProvider, useFloatingComponent, useFloatingPlatform, useFloatingUI };
32
+ export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
110
33
  //# sourceMappingURL=useFloatingUI.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type {\n Middleware,\n Placement,\n Platform,\n Strategy,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n PropsWithChildren,\n ForwardRefExoticComponent,\n Ref,\n RefAttributes,\n} from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { SaltProvider } from \"../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport type FloatingComponentProps = {\n /**\n * Whether the floating component is disabled (used for determinig whether to show the component)\n */\n disabled?: boolean;\n /**\n * Whether the floating component is open (used for determinig whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n position: Strategy;\n};\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLElement,\n CombinedFloatingComponentProps\n>((props, ref) => {\n const { open, disabled = false, top, left, position, ...rest } = props;\n const style = {\n top,\n left,\n position,\n };\n return open && !disabled ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport type UseFloatingUIProps = {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n};\n\ntype FloatingPlatformContextType = {\n platform: Platform;\n middleware: Middleware[];\n animationFrame: boolean;\n};\n\nconst defaultFloatingPlaform = {\n platform,\n middleware: [],\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: Middleware[];\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? [],\n animationFrame: animationFrame ?? false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: [...middleware, ...contextMiddleware],\n open,\n onOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlaform,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware,\n open,\n onOpenChange,\n whileElementsMounted: autoUpdate,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}
@@ -27,11 +27,11 @@ export interface TooltipProps extends Pick<UseFloatingUIProps, "open" | "onOpenC
27
27
  */
28
28
  enterDelay?: number;
29
29
  /**
30
- * Delay in milliseconds before the Tooltip is hidden.
30
+ * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.
31
31
  */
32
32
  leaveDelay?: number;
33
33
  /**
34
- * Option to not display the Tooltip. Can be used in conditional situations like text truncation.
34
+ * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.
35
35
  */
36
36
  disabled?: boolean;
37
37
  /**
@@ -53,9 +53,4 @@ export declare function useTooltip(props?: UseTooltipProps): {
53
53
  reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
54
54
  getTooltipProps: () => HTMLProps<HTMLDivElement>;
55
55
  getTriggerProps: () => Record<string, unknown>;
56
- getTooltipPosition: () => {
57
- top: number;
58
- left: number;
59
- position: import("@floating-ui/react").Strategy;
60
- };
61
56
  };
@@ -1,35 +1,5 @@
1
- import type { Middleware, Placement, Platform, Strategy } from "@floating-ui/react";
1
+ import type { Middleware, Placement, Strategy } from "@floating-ui/react";
2
2
  import { useFloating } from "@floating-ui/react";
3
- import { ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
4
- export declare type FloatingComponentProps = {
5
- /**
6
- * Whether the floating component is disabled (used for determinig whether to show the component)
7
- */
8
- disabled?: boolean;
9
- /**
10
- * Whether the floating component is open (used for determinig whether to show the component)
11
- * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
12
- * for caching windows and reusing them, rather than always spawning a new one
13
- */
14
- open: boolean;
15
- /**
16
- * Position props for the floating component
17
- */
18
- top: number;
19
- left: number;
20
- position: Strategy;
21
- };
22
- declare const DefaultFloatingComponent: ForwardRefExoticComponent<FloatingComponentProps & {
23
- children?: ReactNode;
24
- } & RefAttributes<HTMLElement>>;
25
- export interface FloatingComponentContextType {
26
- Component: typeof DefaultFloatingComponent;
27
- }
28
- export interface FloatingComponentProviderProps extends FloatingComponentContextType {
29
- children: ReactNode;
30
- }
31
- export declare function FloatingComponentProvider(props: FloatingComponentProviderProps): JSX.Element;
32
- export declare function useFloatingComponent(): FloatingComponentContextType;
33
3
  export declare type UseFloatingUIProps = {
34
4
  /**
35
5
  * Sets position relative to trigger.
@@ -46,19 +16,6 @@ export declare type UseFloatingUIProps = {
46
16
  */
47
17
  onOpenChange?: (open: boolean) => void;
48
18
  };
49
- declare type FloatingPlatformContextType = {
50
- platform: Platform;
51
- middleware: Middleware[];
52
- animationFrame: boolean;
53
- };
54
- export interface FloatingPlatformProviderProps {
55
- platform?: Platform;
56
- middleware?: Middleware[];
57
- children: ReactNode;
58
- animationFrame?: boolean;
59
- }
60
- export declare function FloatingPlatformProvider(props: FloatingPlatformProviderProps): JSX.Element;
61
- export declare function useFloatingPlatform(): FloatingPlatformContextType;
62
19
  export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
63
20
  name: string;
64
21
  options?: any;
@@ -75,4 +32,3 @@ export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
75
32
  }) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;
76
33
  }[];
77
34
  export declare function useFloatingUI(props: UseFloatingUIProps): ReturnType<typeof useFloating>;
78
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "0.0.0-snapshot-20230811150341",
3
+ "version": "0.0.0-snapshot-20230830162747",
4
4
  "license": "Apache-2.0",
5
5
  "main": "dist-cjs/index.js",
6
6
  "sideEffects": false,
@@ -1,62 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var StatusIndicator = require('../status-indicator/StatusIndicator.js');
7
- var react = require('@floating-ui/react');
8
- require('react');
9
- var makePrefixer = require('../utils/makePrefixer.js');
10
- require('../utils/useFloatingUI.js');
11
- require('../utils/useId.js');
12
- require('../salt-provider/SaltProvider.js');
13
- require('../viewport/ViewportProvider.js');
14
- require('clsx');
15
- require('../form-field-context/FormFieldContext.js');
16
- var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
17
- var Tooltip = require('./Tooltip.css.js');
18
- var window = require('@salt-ds/window');
19
- var styles = require('@salt-ds/styles');
20
-
21
- const withBaseName = makePrefixer.makePrefixer("saltTooltip");
22
- const TooltipBase = (props) => {
23
- const targetWindow = window.useWindow();
24
- styles.useComponentCssInjection({
25
- testId: "salt-tooltip",
26
- css: Tooltip,
27
- window: targetWindow
28
- });
29
- const { a11yProps } = useFormFieldProps.useFormFieldProps();
30
- const { arrowProps, content, hideArrow, hideIcon, status } = props;
31
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
32
- children: [
33
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
34
- className: withBaseName("container"),
35
- children: [
36
- !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
37
- status,
38
- size: 1,
39
- className: withBaseName("icon")
40
- }),
41
- /* @__PURE__ */ jsxRuntime.jsx("span", {
42
- id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
43
- className: withBaseName("content"),
44
- children: content
45
- })
46
- ]
47
- }),
48
- !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
49
- ...arrowProps,
50
- className: withBaseName("arrow"),
51
- strokeWidth: 1,
52
- fill: "var(--salt-container-primary-background)",
53
- stroke: "var(--tooltip-status-borderColor)",
54
- height: 5,
55
- width: 10
56
- })
57
- ]
58
- });
59
- };
60
-
61
- exports.TooltipBase = TooltipBase;
62
- //# sourceMappingURL=TooltipBase.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tooltipCss","useFormFieldProps","jsxs","Fragment","jsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACCE,cAAA,CAAAC,+BAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAEDD,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACCA,cAAA,CAAAE,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
@@ -1,58 +0,0 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
3
- import { FloatingArrow } from '@floating-ui/react';
4
- import 'react';
5
- import { makePrefixer } from '../utils/makePrefixer.js';
6
- import '../utils/useFloatingUI.js';
7
- import '../utils/useId.js';
8
- import '../salt-provider/SaltProvider.js';
9
- import '../viewport/ViewportProvider.js';
10
- import 'clsx';
11
- import '../form-field-context/FormFieldContext.js';
12
- import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
13
- import css_248z from './Tooltip.css.js';
14
- import { useWindow } from '@salt-ds/window';
15
- import { useComponentCssInjection } from '@salt-ds/styles';
16
-
17
- const withBaseName = makePrefixer("saltTooltip");
18
- const TooltipBase = (props) => {
19
- const targetWindow = useWindow();
20
- useComponentCssInjection({
21
- testId: "salt-tooltip",
22
- css: css_248z,
23
- window: targetWindow
24
- });
25
- const { a11yProps } = useFormFieldProps();
26
- const { arrowProps, content, hideArrow, hideIcon, status } = props;
27
- return /* @__PURE__ */ jsxs(Fragment, {
28
- children: [
29
- /* @__PURE__ */ jsxs("div", {
30
- className: withBaseName("container"),
31
- children: [
32
- !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
33
- status,
34
- size: 1,
35
- className: withBaseName("icon")
36
- }),
37
- /* @__PURE__ */ jsx("span", {
38
- id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
39
- className: withBaseName("content"),
40
- children: content
41
- })
42
- ]
43
- }),
44
- !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
45
- ...arrowProps,
46
- className: withBaseName("arrow"),
47
- strokeWidth: 1,
48
- fill: "var(--salt-container-primary-background)",
49
- stroke: "var(--tooltip-status-borderColor)",
50
- height: 5,
51
- width: 10
52
- })
53
- ]
54
- });
55
- };
56
-
57
- export { TooltipBase };
58
- //# sourceMappingURL=TooltipBase.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAED,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import { ValidationStatus } from "../status-indicator";
3
- import { FloatingArrowProps } from "@floating-ui/react";
4
- import { TooltipProps } from "./Tooltip";
5
- interface TooltipBaseProps extends Omit<TooltipProps, "children"> {
6
- arrowProps: FloatingArrowProps;
7
- /**
8
- * A string to determine the status of the Tooltip. Defaults to `info`.
9
- */
10
- status: ValidationStatus;
11
- }
12
- export declare const TooltipBase: (props: TooltipBaseProps) => JSX.Element;
13
- export {};