@salt-ds/core 1.8.2 → 1.9.1
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/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.js +1 -1
- package/dist-cjs/card/InteractableCard.js +1 -1
- package/dist-cjs/checkbox/Checkbox.js +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 +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 -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/StatusAdornment.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.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/utils/useId.js +1 -1
- package/dist-cjs/utils/useId.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +1 -1
- package/dist-es/accordion/Accordion.js +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.js +1 -1
- package/dist-es/card/InteractableCard.js +1 -1
- package/dist-es/checkbox/Checkbox.js +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 +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 -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/StatusAdornment.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.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/utils/useId.js +1 -1
- package/dist-es/utils/useId.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +1 -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/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 +2 -2
- 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
|
@@ -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":";;;;;;;;;;;;;;AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,SAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAWA,aAA6B,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACC,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA,EAAgB,EAAE,KAAA,EAAO,EAAE,CAAA,EAAG,QAAQ,CAAG,EAAA,MAAA,EAAW,GAAA,EAAG,EAAA;AAAA,IACvD,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,MACEC,2BAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,MAC/BC,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,eAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAaC,iBAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACDC,eAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpDC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpCC,iBAAW,OAAO,CAAA;AAAA,IAClBC,gCAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,OAAA;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,QAAA;AAAA,MACV,MAAM,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA;AAAA,MAChB,KAAK,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AACvD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAA,MAAM,qBAAqB,MAAG;AAlIhC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAkIoC,IAAA,OAAA;AAAA,MAChC,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,KAC7B,CAAA;AAAA,GAAA,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n PropsWithChildren,\n Ref,\n ForwardRefExoticComponent,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport interface FloatingComponentProps {\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 width?: number;\n height?: number;\n position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLElement,\n CombinedFloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const { open, top, left, position, ...rest } = props;\n const style = {\n top,\n left,\n position,\n };\n return open ? (\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: ForwardRefExoticComponent<CombinedFloatingComponentProps>;\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 interface UseFloatingUIProps {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\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 GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\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 ?? defaultGetMiddleware,\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 handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\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: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\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":["forwardRef","DefaultFloatingComponent","jsx","FloatingPortal","SaltProvider","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
package/dist-cjs/utils/useId.js
CHANGED
|
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
|
|
|
24
24
|
|
|
25
25
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
26
|
|
|
27
|
-
const maybeReactUseId = React__namespace[
|
|
27
|
+
const maybeReactUseId = React__namespace["useId".toString()];
|
|
28
28
|
let globalId = BigInt(0);
|
|
29
29
|
function useIdLegacy(idOverride) {
|
|
30
30
|
const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useId.js","sources":["../src/utils/useId.ts"],"sourcesContent":["import * as React from \"react\";\n\n//
|
|
1
|
+
{"version":3,"file":"useId.js","sources":["../src/utils/useId.ts"],"sourcesContent":["import * as React from \"react\";\n\n// Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// Without `toString()`, downstream library using webpack to re-bundle will error\n// eslint-disable-next-line\nconst maybeReactUseId: undefined | (() => string) = (React as any)[\n \"useId\".toString()\n];\n\nlet globalId = BigInt(0);\nfunction useIdLegacy(idOverride?: string): string | undefined {\n const [defaultId, setDefaultId] = React.useState(idOverride);\n const id = idOverride || defaultId;\n React.useEffect(() => {\n if (defaultId == null) {\n setDefaultId(`salt-${++globalId}`);\n }\n }, [defaultId]);\n return id;\n}\n\nexport function useId(idOverride?: string): string | undefined {\n if (maybeReactUseId !== undefined) {\n const reactId = maybeReactUseId();\n return idOverride ?? reactId;\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.\n return useIdLegacy(idOverride);\n}\n\n// Note: Some usages require that an id is returned on first call, not only post-first-render\n// (as with the useEffect solution). This can go away once we totally move to React 18\nexport function useIdMemo(idOverride?: string): string {\n const id = React.useMemo(() => {\n return idOverride ?? `salt-${++globalId}`;\n }, [idOverride]);\n return id;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,eAAA,GAA+CA,gBACnD,CAAA,OAAA,CAAQ,QAAS,EAAA,CAAA,CAAA;AAGnB,IAAI,QAAA,GAAW,OAAO,CAAC,CAAA,CAAA;AACvB,SAAS,YAAY,UAAyC,EAAA;AAC5D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,gBAAA,CAAM,SAAS,UAAU,CAAA,CAAA;AAC3D,EAAA,MAAM,KAAK,UAAc,IAAA,SAAA,CAAA;AACzB,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAa,IAAM,EAAA;AACrB,MAAa,YAAA,CAAA,CAAA,KAAA,EAAQ,EAAE,QAAU,CAAA,CAAA,CAAA,CAAA;AAAA,KACnC;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AACd,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AAEO,SAAS,MAAM,UAAyC,EAAA;AAC7D,EAAA,IAAI,oBAAoB,KAAW,CAAA,EAAA;AACjC,IAAA,MAAM,UAAU,eAAgB,EAAA,CAAA;AAChC,IAAA,OAAO,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,OAAA,CAAA;AAAA,GACvB;AAEA,EAAA,OAAO,YAAY,UAAU,CAAA,CAAA;AAC/B,CAAA;AAIO,SAAS,UAAU,UAA6B,EAAA;AACrD,EAAM,MAAA,EAAA,GAAKA,gBAAM,CAAA,OAAA,CAAQ,MAAM;AAC7B,IAAO,OAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,QAAQ,EAAE,QAAA,CAAA,CAAA,CAAA;AAAA,GACjC,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AACf,EAAO,OAAA,EAAA,CAAA;AACT;;;;;"}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
require('../utils/useFloatingUI.js');
|
|
7
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
8
8
|
require('../utils/useId.js');
|
|
9
9
|
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
10
10
|
require('../salt-provider/SaltProvider.js');
|
|
@@ -6,7 +6,7 @@ import { useWindow } from '@salt-ds/window';
|
|
|
6
6
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
7
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
8
8
|
import { useControlled } from '../utils/useControlled.js';
|
|
9
|
-
import '../utils/useFloatingUI.js';
|
|
9
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
10
10
|
import { useId } from '../utils/useId.js';
|
|
11
11
|
import '../salt-provider/SaltProvider.js';
|
|
12
12
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { createContext } from '../utils/createContext.js';
|
|
3
|
-
import '../utils/useFloatingUI.js';
|
|
3
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
4
4
|
import '../utils/useId.js';
|
|
5
5
|
import '../salt-provider/SaltProvider.js';
|
|
6
6
|
import '../viewport/ViewportProvider.js';
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
5
|
-
import '../utils/useFloatingUI.js';
|
|
5
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
6
6
|
import '../utils/useId.js';
|
|
7
7
|
import '../salt-provider/SaltProvider.js';
|
|
8
8
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport
|
|
1
|
+
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n }\n);\n"],"names":["AccordionGroup","accordionGroupCss"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -6,7 +6,7 @@ import { ChevronRightIcon } from '@salt-ds/icons';
|
|
|
6
6
|
import { useWindow } from '@salt-ds/window';
|
|
7
7
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
8
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
9
|
-
import '../utils/useFloatingUI.js';
|
|
9
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
10
10
|
import '../utils/useId.js';
|
|
11
11
|
import '../salt-provider/SaltProvider.js';
|
|
12
12
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEvent,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, ...rest } = props;\n const { value, expanded, toggle, disabled, id, status } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={`${id}-header`}\n aria-controls={`${id}-panel`}\n value={value}\n {...rest}\n >\n <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n {children}\n {status && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n </button>\n );\n});\n"],"names":["AccordionHeader","accordionHeaderCss"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA,CAG7B,SAASA,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,UAAU,EAAI,EAAA,MAAA,KAAW,YAAa,EAAA,CAAA;AAEvE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACrE,QAAA;AAAA,MACA,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -4,7 +4,7 @@ import { useWindow } from '@salt-ds/window';
|
|
|
4
4
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
7
|
-
import '../utils/useFloatingUI.js';
|
|
7
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
8
8
|
import '../utils/useId.js';
|
|
9
9
|
import '../salt-provider/SaltProvider.js';
|
|
10
10
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { id, expanded } = useAccordion();\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={`${id}-panel`}\n aria-labelledby={`${id}-header`}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n </div>\n );\n }\n);\n"],"names":["AccordionPanel","accordionPanelCss"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAI,YAAa,EAAA,CAAA;AAEtC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
|
|
2
2
|
import { debounce } from '../utils/debounce.js';
|
|
3
|
-
import '../utils/useFloatingUI.js';
|
|
3
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
4
4
|
import '../utils/useId.js';
|
|
5
5
|
import '../salt-provider/SaltProvider.js';
|
|
6
6
|
import '../viewport/ViewportProvider.js';
|
package/dist-es/avatar/Avatar.js
CHANGED
|
@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
|
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { useAvatarImage } from './useAvatarImage.js';
|
|
8
8
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
9
|
-
import '../utils/useFloatingUI.js';
|
|
9
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
10
10
|
import '../utils/useId.js';
|
|
11
11
|
import '../salt-provider/SaltProvider.js';
|
|
12
12
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
|
-
import '../utils/useFloatingUI.js';
|
|
2
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
3
3
|
import '../utils/useId.js';
|
|
4
4
|
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
|
|
5
5
|
import '../salt-provider/SaltProvider.js';
|
package/dist-es/banner/Banner.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
4
|
-
import '../utils/useFloatingUI.js';
|
|
4
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
5
5
|
import '../utils/useId.js';
|
|
6
6
|
import '../salt-provider/SaltProvider.js';
|
|
7
7
|
import '../viewport/ViewportProvider.js';
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
5
|
-
import '../utils/useFloatingUI.js';
|
|
5
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
6
6
|
import '../utils/useId.js';
|
|
7
7
|
import '../salt-provider/SaltProvider.js';
|
|
8
8
|
import '../viewport/ViewportProvider.js';
|
|
@@ -11,20 +11,22 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
11
11
|
import { useWindow } from '@salt-ds/window';
|
|
12
12
|
|
|
13
13
|
const withBaseName = makePrefixer("saltBannerActions");
|
|
14
|
-
const BannerActions = forwardRef(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
14
|
+
const BannerActions = forwardRef(
|
|
15
|
+
function BannerActions2(props, ref) {
|
|
16
|
+
const { className, ...rest } = props;
|
|
17
|
+
const targetWindow = useWindow();
|
|
18
|
+
useComponentCssInjection({
|
|
19
|
+
testId: "salt-banner-actions",
|
|
20
|
+
css: css_248z,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
23
|
+
return /* @__PURE__ */ jsx("div", {
|
|
24
|
+
className: clsx(withBaseName(), className),
|
|
25
|
+
...rest,
|
|
26
|
+
ref
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
);
|
|
28
30
|
|
|
29
31
|
export { BannerActions };
|
|
30
32
|
//# sourceMappingURL=BannerActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerActionsCss from \"./BannerActions.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\nexport const BannerActions = forwardRef
|
|
1
|
+
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerActionsCss from \"./BannerActions.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerActions","bannerActionsCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
5
|
-
import '../utils/useFloatingUI.js';
|
|
5
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
6
6
|
import '../utils/useId.js';
|
|
7
7
|
import '../salt-provider/SaltProvider.js';
|
|
8
8
|
import '../viewport/ViewportProvider.js';
|
|
@@ -11,20 +11,22 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
11
11
|
import { useWindow } from '@salt-ds/window';
|
|
12
12
|
|
|
13
13
|
const withBaseName = makePrefixer("saltBannerContent");
|
|
14
|
-
const BannerContent = forwardRef(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
14
|
+
const BannerContent = forwardRef(
|
|
15
|
+
function BannerContent2(props, ref) {
|
|
16
|
+
const { className, ...rest } = props;
|
|
17
|
+
const targetWindow = useWindow();
|
|
18
|
+
useComponentCssInjection({
|
|
19
|
+
testId: "salt-banner-content",
|
|
20
|
+
css: css_248z,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
23
|
+
return /* @__PURE__ */ jsx("div", {
|
|
24
|
+
className: clsx(withBaseName(), className),
|
|
25
|
+
...rest,
|
|
26
|
+
ref
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
);
|
|
28
30
|
|
|
29
31
|
export { BannerContent };
|
|
30
32
|
//# sourceMappingURL=BannerContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerContentCss from \"./BannerContent.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\nexport const BannerContent = forwardRef
|
|
1
|
+
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerContentCss from \"./BannerContent.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerContent","bannerContentCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
|
|
|
4
4
|
import { GridItem } from '../grid-item/GridItem.js';
|
|
5
5
|
import css_248z from './BorderItem.css.js';
|
|
6
6
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
7
|
-
import '../utils/useFloatingUI.js';
|
|
7
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
8
8
|
import '../utils/useId.js';
|
|
9
9
|
import '../salt-provider/SaltProvider.js';
|
|
10
10
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport borderItemCss from \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":["borderItemCss"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport borderItemCss from \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":["borderItemCss"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -3,7 +3,7 @@ import { forwardRef, Children, useEffect } from 'react';
|
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { GridLayout } from '../grid-layout/GridLayout.js';
|
|
5
5
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
-
import '../utils/useFloatingUI.js';
|
|
6
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
7
7
|
import '../utils/useId.js';
|
|
8
8
|
import '../salt-provider/SaltProvider.js';
|
|
9
9
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, 0);\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n
|
|
1
|
+
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, 0);\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n display: inline-flex;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Button.css.js.map
|