@salt-ds/core 1.8.1 → 1.9.0
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.
- package/dist-cjs/accordion/Accordion.js +1 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +1 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +1 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +1 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -1
- package/dist-cjs/avatar/Avatar.js +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +1 -1
- package/dist-cjs/banner/Banner.js +1 -1
- package/dist-cjs/banner/BannerActions.js +17 -15
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +17 -15
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +1 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +1 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +2 -5
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/card/InteractableCard.css.js +1 -1
- package/dist-cjs/card/InteractableCard.js +2 -5
- package/dist-cjs/card/InteractableCard.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +1 -2
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +1 -1
- package/dist-cjs/flex-item/FlexItem.js +1 -1
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.css.js +1 -1
- package/dist-cjs/form-field/FormField.js +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +1 -1
- package/dist-cjs/grid-item/GridItem.js +1 -1
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +3 -3
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +5 -1
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +1 -1
- package/dist-cjs/link/Link.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +1 -1
- package/dist-cjs/panel/Panel.js +1 -1
- package/dist-cjs/radio-button/RadioButton.js +1 -2
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +1 -1
- package/dist-cjs/spinner/Spinner.js +1 -1
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +1 -1
- package/dist-cjs/status-adornment/ErrorAdornment.js +2 -2
- package/dist-cjs/status-adornment/ErrorAdornment.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +1 -1
- package/dist-cjs/status-adornment/SuccessAdornment.js +2 -2
- package/dist-cjs/status-adornment/SuccessAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +1 -1
- package/dist-cjs/status-indicator/ValidationStatus.js.map +1 -1
- package/dist-cjs/text/Display.js +1 -1
- package/dist-cjs/text/Text.js +1 -1
- package/dist-cjs/theme/Density.js.map +1 -1
- package/dist-cjs/theme/Mode.js.map +1 -1
- package/dist-cjs/toast/Toast.js +1 -1
- package/dist-cjs/toast/ToastContent.js +1 -1
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +19 -53
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +62 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js +1 -1
- package/dist-cjs/tooltip/useTooltip.js +16 -9
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +124 -0
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -0
- package/dist-cjs/viewport/ViewportProvider.js +1 -1
- package/dist-es/accordion/Accordion.js +1 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +1 -1
- package/dist-es/accordion/AccordionGroup.js +1 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +1 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +1 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -1
- package/dist-es/avatar/Avatar.js +1 -1
- package/dist-es/avatar/useAvatarImage.js +1 -1
- package/dist-es/banner/Banner.js +1 -1
- package/dist-es/banner/BannerActions.js +17 -15
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +17 -15
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +1 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +1 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +2 -5
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/card/InteractableCard.css.js +1 -1
- package/dist-es/card/InteractableCard.js +2 -5
- package/dist-es/card/InteractableCard.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +1 -2
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +1 -1
- package/dist-es/flex-item/FlexItem.js +1 -1
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +1 -1
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.css.js +1 -1
- package/dist-es/form-field/FormField.js +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +1 -1
- package/dist-es/form-field/FormFieldLabel.js +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +1 -1
- package/dist-es/grid-item/GridItem.js +1 -1
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +3 -3
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +1 -1
- package/dist-es/input/Input.js +1 -1
- package/dist-es/link/Link.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +1 -1
- package/dist-es/panel/Panel.js +1 -1
- package/dist-es/radio-button/RadioButton.js +1 -2
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.css.js +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +1 -1
- package/dist-es/salt-provider/SaltProvider.js +1 -1
- package/dist-es/spinner/Spinner.js +1 -1
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +1 -1
- package/dist-es/stack-layout/StackLayout.js +1 -1
- package/dist-es/status-adornment/ErrorAdornment.js +2 -2
- package/dist-es/status-adornment/ErrorAdornment.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +1 -1
- package/dist-es/status-adornment/SuccessAdornment.js +2 -2
- package/dist-es/status-adornment/SuccessAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +1 -1
- package/dist-es/status-indicator/ValidationStatus.js.map +1 -1
- package/dist-es/text/Display.js +1 -1
- package/dist-es/text/Text.js +1 -1
- package/dist-es/theme/Density.js.map +1 -1
- package/dist-es/theme/Mode.js.map +1 -1
- package/dist-es/toast/Toast.js +1 -1
- package/dist-es/toast/ToastContent.js +1 -1
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +1 -1
- package/dist-es/tooltip/Tooltip.js +19 -53
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +58 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -0
- package/dist-es/tooltip/useAriaAnnounce.js +1 -1
- package/dist-es/tooltip/useTooltip.js +16 -9
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +115 -0
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -0
- package/dist-es/viewport/ViewportProvider.js +1 -1
- package/dist-types/accordion/Accordion.d.ts +0 -1
- package/dist-types/accordion/AccordionGroup.d.ts +8 -3
- package/dist-types/accordion/AccordionHeader.d.ts +8 -3
- package/dist-types/accordion/AccordionPanel.d.ts +8 -3
- package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts +0 -1
- package/dist-types/banner/BannerActions.d.ts +9 -2
- package/dist-types/banner/BannerContent.d.ts +9 -2
- package/dist-types/border-item/BorderItem.d.ts +1 -1
- package/dist-types/button/Button.d.ts +1 -1
- package/dist-types/checkbox/CheckboxIcon.d.ts +0 -1
- package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +0 -1
- package/dist-types/flex-item/FlexItem.d.ts +1 -1
- package/dist-types/flex-layout/FlexLayout.d.ts +2 -2
- package/dist-types/form-field/FormFieldHelperText.d.ts +0 -1
- package/dist-types/form-field/FormFieldLabel.d.ts +0 -1
- package/dist-types/form-field-context/FormFieldContext.d.ts +0 -1
- package/dist-types/grid-item/GridItem.d.ts +1 -1
- package/dist-types/spinner/Spinner.d.ts +1 -1
- package/dist-types/status-adornment/ErrorAdornment.d.ts +0 -1
- package/dist-types/status-adornment/StatusAdornment.d.ts +0 -1
- package/dist-types/status-adornment/SuccessAdornment.d.ts +0 -1
- package/dist-types/status-adornment/WarningAdornment.d.ts +0 -1
- package/dist-types/status-indicator/StatusIndicator.d.ts +0 -1
- package/dist-types/status-indicator/ValidationStatus.d.ts +1 -1
- package/dist-types/text/Display.d.ts +0 -1
- package/dist-types/text/Headings.d.ts +0 -1
- package/dist-types/text/Label.d.ts +0 -1
- package/dist-types/theme/Density.d.ts +1 -1
- package/dist-types/theme/Mode.d.ts +1 -1
- package/dist-types/toast/ToastContent.d.ts +8 -2
- package/dist-types/tooltip/Tooltip.d.ts +2 -2
- package/dist-types/tooltip/TooltipBase.d.ts +12 -0
- package/dist-types/tooltip/useTooltip.d.ts +12 -5
- package/dist-types/utils/useFloatingUI/index.d.ts +1 -0
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +77 -0
- package/package.json +15 -14
- package/dist-cjs/utils/useFloatingUI.js +0 -38
- package/dist-cjs/utils/useFloatingUI.js.map +0 -1
- package/dist-es/utils/useFloatingUI.js +0 -33
- package/dist-es/utils/useFloatingUI.js.map +0 -1
- package/dist-types/utils/useFloatingUI.d.ts +0 -34
|
@@ -13,8 +13,8 @@ const SuccessAdornmentIcon = React.forwardRef(function SuccessAdornmentIcon2({ c
|
|
|
13
13
|
viewBox: "0 0 10 8",
|
|
14
14
|
ref,
|
|
15
15
|
children: /* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
fillRule: "evenodd",
|
|
17
|
+
clipRule: "evenodd",
|
|
18
18
|
d: "M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z"
|
|
19
19
|
})
|
|
20
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n SVGSVGElement,\n SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n { children, className, ...rest }: SuccessAdornmentIconProps,\n ref\n) {\n return (\n <svg\n className={className}\n {...rest}\n role=\"img\"\n viewBox=\"0 0 10 8\"\n ref={ref}\n >\n <path\n
|
|
1
|
+
{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n SVGSVGElement,\n SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n { children, className, ...rest }: SuccessAdornmentIconProps,\n ref\n) {\n return (\n <svg\n className={className}\n {...rest}\n role=\"img\"\n viewBox=\"0 0 10 8\"\n ref={ref}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z\"\n />\n </svg>\n );\n});\n"],"names":["forwardRef","SuccessAdornmentIcon","jsx"],"mappings":";;;;;;;AAKa,MAAA,oBAAA,GAAuBA,iBAGlC,SAASC,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,UAAA;AAAA,IACR,GAAA;AAAA,IAEA,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAS,EAAA,SAAA;AAAA,MACT,QAAS,EAAA,SAAA;AAAA,MACT,CAAE,EAAA,2FAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusIndicator-error {\n --
|
|
3
|
+
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n --saltIcon-color: var(--statusIndicator-Color);\n color: var(--statusIndicator-Color);\n}\n\n.saltStatusIndicator-error {\n --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-error-color));\n}\n\n.saltStatusIndicator-warning {\n --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-warning-color));\n}\n\n.saltStatusIndicator-success {\n --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-success-color));\n}\n\n.saltStatusIndicator-info {\n --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-info-color));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=StatusIndicator.css.js.map
|
|
@@ -7,7 +7,7 @@ var icons$1 = require('@salt-ds/icons');
|
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
-
require('../utils/useFloatingUI.js');
|
|
10
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
11
11
|
require('../utils/useId.js');
|
|
12
12
|
require('../salt-provider/SaltProvider.js');
|
|
13
13
|
require('../viewport/ViewportProvider.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export const VALIDATION_NAMED_STATUS = [\n \"error\",\n \"warning\",\n \"success\",\n \"info\",\n] as const;\n\nexport type ValidationStatus = typeof VALIDATION_NAMED_STATUS[number];\n"],"names":[],"mappings":";;;;AAAO,MAAM,uBAA0B,GAAA;AAAA,EACrC,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export const VALIDATION_NAMED_STATUS = [\n \"error\",\n \"warning\",\n \"success\",\n \"info\",\n] as const;\n\nexport type ValidationStatus = (typeof VALIDATION_NAMED_STATUS)[number];\n"],"names":[],"mappings":";;;;AAAO,MAAM,uBAA0B,GAAA;AAAA,EACrC,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AACF;;;;"}
|
package/dist-cjs/text/Display.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
8
|
-
require('../utils/useFloatingUI.js');
|
|
8
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
9
9
|
require('../utils/useId.js');
|
|
10
10
|
require('../salt-provider/SaltProvider.js');
|
|
11
11
|
require('../viewport/ViewportProvider.js');
|
package/dist-cjs/text/Text.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
8
|
-
require('../utils/useFloatingUI.js');
|
|
8
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
9
9
|
require('../utils/useId.js');
|
|
10
10
|
require('../salt-provider/SaltProvider.js');
|
|
11
11
|
require('../viewport/ViewportProvider.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Density.js","sources":["../src/theme/Density.ts"],"sourcesContent":["export const DensityValues = [\"high\", \"medium\", \"low\", \"touch\"] as const;\n\nexport type Density = typeof DensityValues[number];\n"],"names":[],"mappings":";;;;AAAO,MAAM,aAAgB,GAAA,CAAC,MAAQ,EAAA,QAAA,EAAU,OAAO,OAAO;;;;"}
|
|
1
|
+
{"version":3,"file":"Density.js","sources":["../src/theme/Density.ts"],"sourcesContent":["export const DensityValues = [\"high\", \"medium\", \"low\", \"touch\"] as const;\n\nexport type Density = (typeof DensityValues)[number];\n"],"names":[],"mappings":";;;;AAAO,MAAM,aAAgB,GAAA,CAAC,MAAQ,EAAA,QAAA,EAAU,OAAO,OAAO;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mode.js","sources":["../src/theme/Mode.ts"],"sourcesContent":["export const ModeValues = [\"light\", \"dark\"] as const;\n\nexport type Mode = typeof ModeValues[number];\n"],"names":[],"mappings":";;;;AAAa,MAAA,UAAA,GAAa,CAAC,OAAA,EAAS,MAAM;;;;"}
|
|
1
|
+
{"version":3,"file":"Mode.js","sources":["../src/theme/Mode.ts"],"sourcesContent":["export const ModeValues = [\"light\", \"dark\"] as const;\n\nexport type Mode = (typeof ModeValues)[number];\n"],"names":[],"mappings":";;;;AAAa,MAAA,UAAA,GAAa,CAAC,OAAA,EAAS,MAAM;;;;"}
|
package/dist-cjs/toast/Toast.js
CHANGED
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
var window = require('@salt-ds/window');
|
|
9
9
|
var styles = require('@salt-ds/styles');
|
|
10
10
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
11
|
-
require('../utils/useFloatingUI.js');
|
|
11
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
12
12
|
var useForkRef = require('../utils/useForkRef.js');
|
|
13
13
|
require('../utils/useId.js');
|
|
14
14
|
require('../salt-provider/SaltProvider.js');
|
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
var window = require('@salt-ds/window');
|
|
9
9
|
var styles = require('@salt-ds/styles');
|
|
10
10
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
11
|
-
require('../utils/useFloatingUI.js');
|
|
11
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
12
12
|
require('../utils/useId.js');
|
|
13
13
|
require('../salt-provider/SaltProvider.js');
|
|
14
14
|
require('../viewport/ViewportProvider.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AASvC,MAAA,YAAA,GAAeC,iBAAW,SAASC,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-actionable-textTransform);\n font-weight: var(--salt-actionable-secondary-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-actionable-textAlign);\n letter-spacing: var(--salt-actionable-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-
|
|
3
|
+
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-actionable-textTransform);\n font-weight: var(--salt-actionable-secondary-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-actionable-textAlign);\n letter-spacing: var(--salt-actionable-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -11,7 +11,7 @@ var window = require('@salt-ds/window');
|
|
|
11
11
|
var styles = require('@salt-ds/styles');
|
|
12
12
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
13
13
|
var useControlled = require('../utils/useControlled.js');
|
|
14
|
-
require('../utils/useFloatingUI.js');
|
|
14
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
15
15
|
var useForkRef = require('../utils/useForkRef.js');
|
|
16
16
|
require('../utils/useId.js');
|
|
17
17
|
require('../salt-provider/SaltProvider.js');
|
|
@@ -9,7 +9,7 @@ var window = require('@salt-ds/window');
|
|
|
9
9
|
var styles = require('@salt-ds/styles');
|
|
10
10
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
11
11
|
var useControlled = require('../utils/useControlled.js');
|
|
12
|
-
require('../utils/useFloatingUI.js');
|
|
12
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
13
13
|
var useForkRef = require('../utils/useForkRef.js');
|
|
14
14
|
require('../utils/useId.js');
|
|
15
15
|
require('../salt-provider/SaltProvider.js');
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var createContext = require('../utils/createContext.js');
|
|
7
|
-
require('../utils/useFloatingUI.js');
|
|
7
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
8
8
|
require('../utils/useId.js');
|
|
9
9
|
require('../salt-provider/SaltProvider.js');
|
|
10
10
|
require('../viewport/ViewportProvider.js');
|
|
@@ -5,21 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var React = require('react');
|
|
8
|
-
var react = require('@floating-ui/react');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var styles = require('@salt-ds/styles');
|
|
11
|
-
var StatusIndicator = require('../status-indicator/StatusIndicator.js');
|
|
12
8
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
13
|
-
require('../utils/useFloatingUI.js');
|
|
9
|
+
var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
|
|
14
10
|
var useForkRef = require('../utils/useForkRef.js');
|
|
15
11
|
require('../utils/useId.js');
|
|
16
|
-
|
|
12
|
+
require('../salt-provider/SaltProvider.js');
|
|
17
13
|
require('../viewport/ViewportProvider.js');
|
|
18
14
|
var mergeProps = require('../utils/mergeProps.js');
|
|
19
15
|
var useTooltip = require('./useTooltip.js');
|
|
20
|
-
var Tooltip$1 = require('./Tooltip.css.js');
|
|
21
16
|
require('../form-field-context/FormFieldContext.js');
|
|
22
17
|
var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
|
|
18
|
+
var TooltipBase = require('./TooltipBase.js');
|
|
23
19
|
|
|
24
20
|
const withBaseName = makePrefixer.makePrefixer("saltTooltip");
|
|
25
21
|
const Tooltip = React.forwardRef(
|
|
@@ -27,7 +23,7 @@ const Tooltip = React.forwardRef(
|
|
|
27
23
|
const {
|
|
28
24
|
children,
|
|
29
25
|
className,
|
|
30
|
-
disabled: disabledProp,
|
|
26
|
+
disabled: disabledProp = false,
|
|
31
27
|
hideArrow = false,
|
|
32
28
|
hideIcon = false,
|
|
33
29
|
open: openProp,
|
|
@@ -39,18 +35,12 @@ const Tooltip = React.forwardRef(
|
|
|
39
35
|
...rest
|
|
40
36
|
} = props;
|
|
41
37
|
const {
|
|
42
|
-
a11yProps,
|
|
43
38
|
disabled: formFieldDisabled,
|
|
44
39
|
validationStatus: formFieldValidationStatus
|
|
45
40
|
} = useFormFieldProps.useFormFieldProps();
|
|
46
41
|
const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
|
|
47
42
|
const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
|
|
48
|
-
const
|
|
49
|
-
styles.useComponentCssInjection({
|
|
50
|
-
testId: "salt-tooltip",
|
|
51
|
-
css: Tooltip$1,
|
|
52
|
-
window: targetWindow
|
|
53
|
-
});
|
|
43
|
+
const { Component: FloatingComponent } = useFloatingUI.useFloatingComponent();
|
|
54
44
|
const hookProps = {
|
|
55
45
|
open: openProp,
|
|
56
46
|
placement,
|
|
@@ -64,7 +54,8 @@ const Tooltip = React.forwardRef(
|
|
|
64
54
|
floating,
|
|
65
55
|
reference,
|
|
66
56
|
getTriggerProps,
|
|
67
|
-
getTooltipProps
|
|
57
|
+
getTooltipProps,
|
|
58
|
+
getTooltipPosition
|
|
68
59
|
} = useTooltip.useTooltip(hookProps);
|
|
69
60
|
const triggerRef = useForkRef.useForkRef(
|
|
70
61
|
React.isValidElement(children) ? children.ref : null,
|
|
@@ -77,43 +68,18 @@ const Tooltip = React.forwardRef(
|
|
|
77
68
|
...mergeProps.mergeProps(getTriggerProps(), children.props),
|
|
78
69
|
ref: triggerRef
|
|
79
70
|
}),
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
className: withBaseName("container"),
|
|
93
|
-
children: [
|
|
94
|
-
!hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
|
|
95
|
-
status,
|
|
96
|
-
size: 1,
|
|
97
|
-
className: withBaseName("icon")
|
|
98
|
-
}),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
100
|
-
id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
|
|
101
|
-
className: withBaseName("content"),
|
|
102
|
-
children: content
|
|
103
|
-
})
|
|
104
|
-
]
|
|
105
|
-
}),
|
|
106
|
-
!hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
|
|
107
|
-
...arrowProps,
|
|
108
|
-
className: withBaseName("arrow"),
|
|
109
|
-
strokeWidth: 1,
|
|
110
|
-
fill: "var(--salt-container-primary-background)",
|
|
111
|
-
stroke: "var(--tooltip-status-borderColor)",
|
|
112
|
-
height: 5,
|
|
113
|
-
width: 10
|
|
114
|
-
})
|
|
115
|
-
]
|
|
116
|
-
})
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
|
|
72
|
+
className: clsx.clsx(withBaseName(), withBaseName(status), className),
|
|
73
|
+
open: open && !disabled,
|
|
74
|
+
ref: floatingRef,
|
|
75
|
+
...getTooltipProps(),
|
|
76
|
+
...getTooltipPosition(),
|
|
77
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipBase.TooltipBase, {
|
|
78
|
+
hideIcon,
|
|
79
|
+
status,
|
|
80
|
+
content,
|
|
81
|
+
hideArrow,
|
|
82
|
+
arrowProps
|
|
117
83
|
})
|
|
118
84
|
})
|
|
119
85
|
]
|
|
@@ -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
|
|
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. 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 = 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\n const floatingRef = useForkRef(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 ref={floatingRef}\n {...getTooltipProps()}\n {...getTooltipPosition()}\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":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","useFloatingComponent","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,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,QAChBC,mCAAkB,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,GAAIC,kCAAqB,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,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcD,qBAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAAE,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAeF,oBAAA,CAAA,QAAQ,CACtB,IAAAG,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEFC,cAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACf,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAAD,cAAA,CAAAE,uBAAA,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;;;;"}
|
|
@@ -0,0 +1,62 @@
|
|
|
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/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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
7
7
|
require('react/jsx-runtime');
|
|
8
8
|
var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
|
|
9
|
-
require('../utils/useFloatingUI.js');
|
|
9
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
10
10
|
require('../utils/useId.js');
|
|
11
11
|
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
12
12
|
require('../salt-provider/SaltProvider.js');
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var react = require('@floating-ui/react');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var useControlled = require('../utils/useControlled.js');
|
|
8
|
-
var useFloatingUI = require('../utils/useFloatingUI.js');
|
|
8
|
+
var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
|
|
9
9
|
require('../utils/useId.js');
|
|
10
10
|
require('../salt-provider/SaltProvider.js');
|
|
11
11
|
require('../viewport/ViewportProvider.js');
|
|
@@ -41,7 +41,8 @@ function useTooltip(props) {
|
|
|
41
41
|
strategy,
|
|
42
42
|
middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
|
|
43
43
|
placement,
|
|
44
|
-
context
|
|
44
|
+
context,
|
|
45
|
+
elements
|
|
45
46
|
} = useFloatingUI.useFloatingUI({
|
|
46
47
|
open,
|
|
47
48
|
onOpenChange: handleOpenChange,
|
|
@@ -84,24 +85,30 @@ function useTooltip(props) {
|
|
|
84
85
|
const getTooltipProps = () => {
|
|
85
86
|
return getFloatingProps({
|
|
86
87
|
"data-placement": placement,
|
|
87
|
-
ref: floating
|
|
88
|
-
style: {
|
|
89
|
-
top: y != null ? y : 0,
|
|
90
|
-
left: x != null ? x : 0,
|
|
91
|
-
position: strategy
|
|
92
|
-
}
|
|
88
|
+
ref: floating
|
|
93
89
|
});
|
|
94
90
|
};
|
|
95
91
|
const getTriggerProps = () => getReferenceProps({
|
|
96
92
|
ref: reference
|
|
97
93
|
});
|
|
94
|
+
const getTooltipPosition = () => {
|
|
95
|
+
var _a, _b;
|
|
96
|
+
return {
|
|
97
|
+
top: y != null ? y : 0,
|
|
98
|
+
left: x != null ? x : 0,
|
|
99
|
+
position: strategy,
|
|
100
|
+
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
101
|
+
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
|
|
102
|
+
};
|
|
103
|
+
};
|
|
98
104
|
return {
|
|
99
105
|
arrowProps,
|
|
100
106
|
open,
|
|
101
107
|
floating,
|
|
102
108
|
reference,
|
|
103
109
|
getTooltipProps,
|
|
104
|
-
getTriggerProps
|
|
110
|
+
getTriggerProps,
|
|
111
|
+
getTooltipPosition
|
|
105
112
|
};
|
|
106
113
|
}
|
|
107
114
|
|
|
@@ -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
|
|
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 elements,\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 width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('@floating-ui/react');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var SaltProvider = require('../../salt-provider/SaltProvider.js');
|
|
9
|
+
|
|
10
|
+
const DefaultFloatingComponent = React.forwardRef(function DefaultFloatingComponent2(props, ref) {
|
|
11
|
+
const { open, top, left, position, ...rest } = props;
|
|
12
|
+
const style = {
|
|
13
|
+
top,
|
|
14
|
+
left,
|
|
15
|
+
position
|
|
16
|
+
};
|
|
17
|
+
return open ? /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
|
|
18
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(SaltProvider.SaltProvider, {
|
|
19
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
20
|
+
style,
|
|
21
|
+
...rest,
|
|
22
|
+
ref
|
|
23
|
+
})
|
|
24
|
+
})
|
|
25
|
+
}) : null;
|
|
26
|
+
});
|
|
27
|
+
const FloatingComponentContext = React.createContext({
|
|
28
|
+
Component: DefaultFloatingComponent
|
|
29
|
+
});
|
|
30
|
+
if (process.env.NODE_ENV !== "production") {
|
|
31
|
+
FloatingComponentContext.displayName = "FloatingComponentContext";
|
|
32
|
+
}
|
|
33
|
+
function FloatingComponentProvider(props) {
|
|
34
|
+
const { Component, children } = props;
|
|
35
|
+
const value = React.useMemo(() => ({ Component }), [Component]);
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponentContext.Provider, {
|
|
37
|
+
value,
|
|
38
|
+
children
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function useFloatingComponent() {
|
|
42
|
+
return React.useContext(FloatingComponentContext);
|
|
43
|
+
}
|
|
44
|
+
const defaultGetMiddleware = (defaultMiddleware) => defaultMiddleware;
|
|
45
|
+
const defaultFloatingPlaform = {
|
|
46
|
+
platform: react.platform,
|
|
47
|
+
middleware: defaultGetMiddleware,
|
|
48
|
+
animationFrame: false
|
|
49
|
+
};
|
|
50
|
+
const FloatingPlatformContext = React.createContext(
|
|
51
|
+
defaultFloatingPlaform
|
|
52
|
+
);
|
|
53
|
+
function FloatingPlatformProvider(props) {
|
|
54
|
+
const {
|
|
55
|
+
platform: platformProp,
|
|
56
|
+
middleware,
|
|
57
|
+
animationFrame,
|
|
58
|
+
children
|
|
59
|
+
} = props;
|
|
60
|
+
const floatingPlatformContextValue = React.useMemo(
|
|
61
|
+
() => ({
|
|
62
|
+
platform: platformProp != null ? platformProp : react.platform,
|
|
63
|
+
middleware: middleware != null ? middleware : defaultGetMiddleware,
|
|
64
|
+
animationFrame: animationFrame != null ? animationFrame : false
|
|
65
|
+
}),
|
|
66
|
+
[platformProp, middleware, animationFrame]
|
|
67
|
+
);
|
|
68
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FloatingPlatformContext.Provider, {
|
|
69
|
+
value: floatingPlatformContextValue,
|
|
70
|
+
children
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
function useFloatingPlatform() {
|
|
74
|
+
return React.useContext(FloatingPlatformContext);
|
|
75
|
+
}
|
|
76
|
+
const DEFAULT_FLOATING_UI_MIDDLEWARE = [
|
|
77
|
+
react.flip(),
|
|
78
|
+
react.shift({ limiter: react.limitShift() })
|
|
79
|
+
];
|
|
80
|
+
function useFloatingUI(props) {
|
|
81
|
+
const {
|
|
82
|
+
placement,
|
|
83
|
+
strategy,
|
|
84
|
+
middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
|
|
85
|
+
open = false,
|
|
86
|
+
onOpenChange
|
|
87
|
+
} = props;
|
|
88
|
+
const handleOpenChange = (open2) => {
|
|
89
|
+
update();
|
|
90
|
+
onOpenChange == null ? void 0 : onOpenChange(open2);
|
|
91
|
+
};
|
|
92
|
+
const {
|
|
93
|
+
platform: contextPlaform,
|
|
94
|
+
middleware: contextMiddleware,
|
|
95
|
+
animationFrame
|
|
96
|
+
} = useFloatingPlatform();
|
|
97
|
+
const { reference, floating, refs, update, ...rest } = react.useFloating({
|
|
98
|
+
placement,
|
|
99
|
+
strategy,
|
|
100
|
+
middleware: contextMiddleware(middleware),
|
|
101
|
+
open,
|
|
102
|
+
onOpenChange: handleOpenChange,
|
|
103
|
+
whileElementsMounted: (...args) => {
|
|
104
|
+
const cleanup = react.autoUpdate(...args, { animationFrame });
|
|
105
|
+
return cleanup;
|
|
106
|
+
},
|
|
107
|
+
platform: contextPlaform
|
|
108
|
+
});
|
|
109
|
+
return {
|
|
110
|
+
reference,
|
|
111
|
+
floating,
|
|
112
|
+
refs,
|
|
113
|
+
update,
|
|
114
|
+
...rest
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
|
|
119
|
+
exports.FloatingComponentProvider = FloatingComponentProvider;
|
|
120
|
+
exports.FloatingPlatformProvider = FloatingPlatformProvider;
|
|
121
|
+
exports.useFloatingComponent = useFloatingComponent;
|
|
122
|
+
exports.useFloatingPlatform = useFloatingPlatform;
|
|
123
|
+
exports.useFloatingUI = useFloatingUI;
|
|
124
|
+
//# sourceMappingURL=useFloatingUI.js.map
|