@vuu-ui/vuu-utils 2.0.0 → 2.1.0-alpha.2
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/cjs/node_modules/@dnd-kit/react/hooks.js +3 -3
- package/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +492 -0
- package/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -0
- package/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.js +987 -0
- package/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.js.map +1 -0
- package/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js +130 -0
- package/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js.map +1 -0
- package/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +183 -0
- package/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +1 -0
- package/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +39 -0
- package/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerContext.js +10 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerProvider.js +76 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/useAriaAnnouncer.js +52 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/breakpoints/BreakpointProvider.js +59 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/breakpoints/BreakpointProvider.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/breakpoints/Breakpoints.js +12 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/breakpoints/Breakpoints.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/Button.css.js +6 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/Button.css.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/Button.js +96 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/Button.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/useButton.js +65 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/button/useButton.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/ProviderContext.js +11 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/ProviderContext.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.css.js +6 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.css.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.js +160 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/ThemeApplicator.js +115 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/salt-provider/ThemeApplicator.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/Spinner.css.js +6 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/Spinner.css.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/Spinner.js +86 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/Spinner.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/svgSpinners/SpinnerSVG.js +93 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/createChainedFunction.js +20 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/createChainedFunction.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/createContext.js +14 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/createContext.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/debounce.js +22 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/debounce.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/makePrefixer.js +6 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/makePrefixer.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useFloatingUI/useFloatingUI.js +52 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useId.js +45 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useId.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useIsomorphicLayoutEffect.js +8 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/usePreventScroll.js +233 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/utils/usePreventScroll.js.map +1 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/viewport/ViewportProvider.js +35 -0
- package/cjs/node_modules/@salt-ds/core/dist-es/viewport/ViewportProvider.js.map +1 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/style-injection-provider/index.js +22 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/style-injection-provider/index.js.map +1 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js +16 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js.map +1 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js +75 -0
- package/cjs/node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js.map +1 -0
- package/cjs/node_modules/@salt-ds/window/dist-es/WindowProvider.js +17 -0
- package/cjs/node_modules/@salt-ds/window/dist-es/WindowProvider.js.map +1 -0
- package/cjs/node_modules/tabbable/dist/index.esm.js +550 -0
- package/cjs/node_modules/tabbable/dist/index.esm.js.map +1 -0
- package/cjs/packages/vuu-utils/src/ThemeProvider.js +2 -2
- package/cjs/packages/vuu-utils/src/ThemeProvider.js.map +1 -1
- package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js +25 -0
- package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js.map +1 -0
- package/cjs/packages/vuu-utils/src/data-editing/EditButtons.js +23 -0
- package/cjs/packages/vuu-utils/src/data-editing/EditButtons.js.map +1 -0
- package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js +154 -0
- package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js.map +1 -0
- package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js +69 -0
- package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js.map +1 -0
- package/cjs/packages/vuu-utils/src/index.js +9 -0
- package/cjs/packages/vuu-utils/src/index.js.map +1 -1
- package/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +489 -0
- package/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -0
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js +962 -0
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js.map +1 -0
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js +114 -0
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js.map +1 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +162 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +1 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +33 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerContext.js +8 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerProvider.js +73 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/useAriaAnnouncer.js +50 -0
- package/esm/node_modules/@salt-ds/core/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/breakpoints/BreakpointProvider.js +56 -0
- package/esm/node_modules/@salt-ds/core/dist-es/breakpoints/BreakpointProvider.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/breakpoints/Breakpoints.js +10 -0
- package/esm/node_modules/@salt-ds/core/dist-es/breakpoints/Breakpoints.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/Button.css.js +4 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/Button.css.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/Button.js +94 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/Button.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/useButton.js +63 -0
- package/esm/node_modules/@salt-ds/core/dist-es/button/useButton.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/ProviderContext.js +9 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/ProviderContext.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.css.js +4 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.css.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.js +151 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/ThemeApplicator.js +113 -0
- package/esm/node_modules/@salt-ds/core/dist-es/salt-provider/ThemeApplicator.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/Spinner.css.js +4 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/Spinner.css.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/Spinner.js +84 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/Spinner.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/svgSpinners/SpinnerSVG.js +91 -0
- package/esm/node_modules/@salt-ds/core/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/createChainedFunction.js +18 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/createChainedFunction.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/createContext.js +12 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/createContext.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/debounce.js +20 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/debounce.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/makePrefixer.js +4 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/makePrefixer.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useFloatingUI/useFloatingUI.js +50 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useId.js +24 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useId.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useIsomorphicLayoutEffect.js +6 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/usePreventScroll.js +231 -0
- package/esm/node_modules/@salt-ds/core/dist-es/utils/usePreventScroll.js.map +1 -0
- package/esm/node_modules/@salt-ds/core/dist-es/viewport/ViewportProvider.js +32 -0
- package/esm/node_modules/@salt-ds/core/dist-es/viewport/ViewportProvider.js.map +1 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/style-injection-provider/index.js +19 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/style-injection-provider/index.js.map +1 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js +14 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js.map +1 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js +54 -0
- package/esm/node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js.map +1 -0
- package/esm/node_modules/@salt-ds/window/dist-es/WindowProvider.js +15 -0
- package/esm/node_modules/@salt-ds/window/dist-es/WindowProvider.js.map +1 -0
- package/esm/node_modules/tabbable/dist/index.esm.js +546 -0
- package/esm/node_modules/tabbable/dist/index.esm.js.map +1 -0
- package/esm/packages/vuu-utils/src/ThemeProvider.js +2 -2
- package/esm/packages/vuu-utils/src/ThemeProvider.js.map +1 -1
- package/esm/packages/vuu-utils/src/context-definitions/WorkspaceContext.js +2 -2
- package/esm/packages/vuu-utils/src/context-definitions/WorkspaceContext.js.map +1 -1
- package/esm/packages/vuu-utils/src/data-editing/DataEditingProvider.js +22 -0
- package/esm/packages/vuu-utils/src/data-editing/DataEditingProvider.js.map +1 -0
- package/esm/packages/vuu-utils/src/data-editing/EditButtons.js +21 -0
- package/esm/packages/vuu-utils/src/data-editing/EditButtons.js.map +1 -0
- package/esm/packages/vuu-utils/src/data-editing/EditTracker.js +152 -0
- package/esm/packages/vuu-utils/src/data-editing/EditTracker.js.map +1 -0
- package/esm/packages/vuu-utils/src/data-editing/useEditableTable.js +67 -0
- package/esm/packages/vuu-utils/src/data-editing/useEditableTable.js.map +1 -0
- package/esm/packages/vuu-utils/src/feature-utils.js +2 -2
- package/esm/packages/vuu-utils/src/feature-utils.js.map +1 -1
- package/esm/packages/vuu-utils/src/index.js +4 -0
- package/esm/packages/vuu-utils/src/index.js.map +1 -1
- package/package.json +6 -6
- package/types/data-editing/DataEditingProvider.d.ts +7 -0
- package/types/data-editing/EditButtons.d.ts +7 -0
- package/types/data-editing/EditTracker.d.ts +24 -0
- package/types/data-editing/useEditableTable.d.ts +15 -0
- package/types/index.d.ts +5 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breakpoints.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/breakpoints/Breakpoints.js"],"sourcesContent":["const DEFAULT_BREAKPOINTS = {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920\n};\n\nexport { DEFAULT_BREAKPOINTS };\n//# sourceMappingURL=Breakpoints.js.map\n"],"names":[],"mappings":";;AAAK,MAAC,mBAAmB,GAAG;AAC5B,EAAE,EAAE,EAAE,CAAC;AACP,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,IAAI;AACV,EAAE,EAAE,EAAE;AACN;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\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-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\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-text-action-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(--salt-text-action-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 border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\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 border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\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 border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Button.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.css.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/button/Button.css.js"],"sourcesContent":["var css_248z = \".saltButton {\\n --button-borderWidth: var(--salt-size-fixed-100);\\n\\n align-items: var(--saltButton-alignItems, center);\\n appearance: none;\\n background: var(--saltButton-background, var(--button-background));\\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\\n border-style: var(--saltButton-borderStyle, solid);\\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\\n color: var(--saltButton-text-color, var(--button-text-color));\\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-action-fontFamily));\\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\\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-text-action-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(--salt-text-action-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 border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\\n}\\n\\n@media (hover: hover) {\\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 border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\\n cursor: var(--salt-cursor-hover);\\n }\\n}\\n\\n/* Pseudo-class applied to the root element when Button is active and not disabled */\\n.saltButton.saltButton-active:focus-visible,\\n.saltButton:focus-visible:active,\\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 border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\\n cursor: var(--salt-cursor-active);\\n}\\n\\n/* Styles applied when the button triggers a dialog or menu */\\n.saltButton[aria-expanded=\\\"true\\\"][aria-haspopup=\\\"menu\\\"],\\n.saltButton[aria-expanded=\\\"true\\\"][aria-haspopup=\\\"dialog\\\"] {\\n background: var(--saltButton-background-active, var(--button-background-active));\\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\\n}\\n\\n/* Pseudo-class applied to the root element if disabled={true} */\\n.saltButton:disabled,\\n.saltButton.saltButton-disabled,\\n.saltButton.saltButton-disabled:active,\\n.saltButton.saltButton-disabled:focus-visible,\\n.saltButton.saltButton-disabled:focus-visible:active,\\n.saltButton.saltButton-disabled:hover {\\n background: var(--saltButton-background-disabled, var(--button-background));\\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\\n\\n opacity: 0.4;\\n}\\n\\n.saltButton-accented.saltButton-solid {\\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\\n --button-background: var(--salt-actionable-accented-bold-background);\\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\\n}\\n\\n.saltButton-accented.saltButton-bordered {\\n --button-text-color: var(--salt-actionable-accented-foreground);\\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\\n --button-background: var(--salt-actionable-accented-background);\\n --button-background-hover: var(--salt-actionable-accented-background-hover);\\n --button-background-active: var(--salt-actionable-accented-background-active);\\n --button-borderColor: var(--salt-actionable-accented-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\\n}\\n\\n.saltButton-accented.saltButton-transparent {\\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\\n --button-background: var(--salt-actionable-accented-subtle-background);\\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\\n}\\n\\n.saltButton-accented.saltButton-loading {\\n --button-text-color: var(--salt-actionable-accented-background);\\n --button-text-color-hover: var(--salt-actionable-accented-background);\\n --button-text-color-active: var(--salt-actionable-accented-background);\\n --button-background: var(--salt-actionable-accented-background);\\n --button-background-hover: var(--salt-actionable-accented-background);\\n --button-background-active: var(--salt-actionable-accented-background);\\n --button-borderColor: var(--salt-actionable-accented-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\\n cursor: var(--salt-cursor-pending);\\n}\\n\\n.saltButton-neutral.saltButton-solid {\\n --button-text-color: var(--salt-actionable-bold-foreground);\\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\\n --button-background: var(--salt-actionable-bold-background);\\n --button-background-hover: var(--salt-actionable-bold-background-hover);\\n --button-background-active: var(--salt-actionable-bold-background-active);\\n --button-borderColor: var(--salt-actionable-bold-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\\n}\\n\\n.saltButton-neutral.saltButton-bordered {\\n --button-text-color: var(--salt-actionable-foreground);\\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-foreground-active);\\n --button-background: var(--salt-actionable-background);\\n --button-background-hover: var(--salt-actionable-background-hover);\\n --button-background-active: var(--salt-actionable-background-active);\\n --button-borderColor: var(--salt-actionable-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\\n}\\n\\n.saltButton-neutral.saltButton-transparent {\\n --button-text-color: var(--salt-actionable-subtle-foreground);\\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\\n --button-background: var(--salt-actionable-subtle-background);\\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\\n --button-background-active: var(--salt-actionable-subtle-background-active);\\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\\n}\\n\\n.saltButton-neutral.saltButton-loading {\\n --button-text-color: var(--salt-actionable-background);\\n --button-text-color-hover: var(--salt-actionable-background);\\n --button-text-color-active: var(--salt-actionable-background);\\n --button-background: var(--salt-actionable-background);\\n --button-background-hover: var(--salt-actionable-background);\\n --button-background-active: var(--salt-actionable-background);\\n --button-borderColor: var(--salt-actionable-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-borderColor);\\n --button-borderColor-active: var(--salt-actionable-borderColor);\\n cursor: var(--salt-cursor-pending);\\n}\\n\\n.saltButton-negative.saltButton-solid {\\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\\n --button-background: var(--salt-actionable-negative-bold-background);\\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\\n}\\n\\n.saltButton-negative.saltButton-bordered {\\n --button-text-color: var(--salt-actionable-negative-foreground);\\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\\n --button-background: var(--salt-actionable-negative-background);\\n --button-background-hover: var(--salt-actionable-negative-background-hover);\\n --button-background-active: var(--salt-actionable-negative-background-active);\\n --button-borderColor: var(--salt-actionable-negative-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\\n}\\n\\n.saltButton-negative.saltButton-transparent {\\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\\n --button-background: var(--salt-actionable-negative-subtle-background);\\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\\n}\\n\\n.saltButton-negative.saltButton-loading {\\n --button-text-color: var(--salt-actionable-negative-background);\\n --button-text-color-hover: var(--salt-actionable-negative-background);\\n --button-text-color-active: var(--salt-actionable-negative-background);\\n --button-background: var(--salt-actionable-negative-background);\\n --button-background-hover: var(--salt-actionable-negative-background);\\n --button-background-active: var(--salt-actionable-negative-background);\\n --button-borderColor: var(--salt-actionable-negative-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\\n cursor: var(--salt-cursor-pending);\\n}\\n\\n.saltButton-positive.saltButton-solid {\\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\\n --button-background: var(--salt-actionable-positive-bold-background);\\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\\n}\\n\\n.saltButton-positive.saltButton-bordered {\\n --button-text-color: var(--salt-actionable-positive-foreground);\\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\\n --button-background: var(--salt-actionable-positive-background);\\n --button-background-hover: var(--salt-actionable-positive-background-hover);\\n --button-background-active: var(--salt-actionable-positive-background-active);\\n --button-borderColor: var(--salt-actionable-positive-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\\n}\\n\\n.saltButton-positive.saltButton-transparent {\\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\\n --button-background: var(--salt-actionable-positive-subtle-background);\\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\\n}\\n\\n.saltButton-positive.saltButton-loading {\\n --button-text-color: var(--salt-actionable-positive-background);\\n --button-text-color-hover: var(--salt-actionable-positive-background);\\n --button-text-color-active: var(--salt-actionable-positive-background);\\n --button-background: var(--salt-actionable-positive-background);\\n --button-background-hover: var(--salt-actionable-positive-background);\\n --button-background-active: var(--salt-actionable-positive-background);\\n --button-borderColor: var(--salt-actionable-positive-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\\n cursor: var(--salt-cursor-pending);\\n}\\n\\n.saltButton-caution.saltButton-solid {\\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\\n --button-background: var(--salt-actionable-caution-bold-background);\\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\\n}\\n\\n.saltButton-caution.saltButton-bordered {\\n --button-text-color: var(--salt-actionable-caution-foreground);\\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\\n --button-background: var(--salt-actionable-caution-background);\\n --button-background-hover: var(--salt-actionable-caution-background-hover);\\n --button-background-active: var(--salt-actionable-caution-background-active);\\n --button-borderColor: var(--salt-actionable-caution-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\\n}\\n\\n.saltButton-caution.saltButton-transparent {\\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\\n --button-background: var(--salt-actionable-caution-subtle-background);\\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\\n}\\n\\n.saltButton-caution.saltButton-loading {\\n --button-text-color: var(--salt-actionable-caution-background);\\n --button-text-color-hover: var(--salt-actionable-caution-background);\\n --button-text-color-active: var(--salt-actionable-caution-background);\\n --button-background: var(--salt-actionable-caution-background);\\n --button-background-hover: var(--salt-actionable-caution-background);\\n --button-background-active: var(--salt-actionable-caution-background);\\n --button-borderColor: var(--salt-actionable-caution-borderColor);\\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\\n cursor: var(--salt-cursor-pending);\\n}\\n\\n.saltButton strong {\\n font-weight: var(--salt-text-action-fontWeight-strong);\\n}\\n\\n.saltButton small {\\n font-size: inherit;\\n font-weight: var(--salt-text-action-fontWeight-small);\\n}\\n\\n.saltButton-spinner {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.saltButton-sr-only {\\n position: fixed;\\n top: 0;\\n left: 0;\\n transform: translate(-100%, -100%);\\n}\\n\";\n\nexport { css_248z as default };\n//# sourceMappingURL=Button.css.js.map\n"],"names":[],"mappings":";;AAAG,IAAC,QAAQ,GAAG;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var Spinner = require('../spinner/Spinner.js');
|
|
7
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
8
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
9
|
+
require('../utils/useId.js');
|
|
10
|
+
require('../salt-provider/SaltProvider.js');
|
|
11
|
+
require('../viewport/ViewportProvider.js');
|
|
12
|
+
var Button_css = require('./Button.css.js');
|
|
13
|
+
var useButton = require('./useButton.js');
|
|
14
|
+
var WindowProvider = require('../../../window/dist-es/WindowProvider.js');
|
|
15
|
+
var useStyleInjection = require('../../../styles/dist-es/use-style-injection/useStyleInjection.js');
|
|
16
|
+
|
|
17
|
+
const withBaseName = makePrefixer.makePrefixer("saltButton");
|
|
18
|
+
function variantToAppearanceAndColor(variant) {
|
|
19
|
+
switch (variant) {
|
|
20
|
+
case "primary":
|
|
21
|
+
return { appearance: "solid", sentiment: "neutral" };
|
|
22
|
+
case "secondary":
|
|
23
|
+
return { appearance: "transparent", sentiment: "neutral" };
|
|
24
|
+
case "cta":
|
|
25
|
+
return { appearance: "solid", sentiment: "accented" };
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const Button = React.forwardRef(
|
|
29
|
+
function Button2({
|
|
30
|
+
children,
|
|
31
|
+
className,
|
|
32
|
+
disabled,
|
|
33
|
+
focusableWhenDisabled,
|
|
34
|
+
onKeyUp,
|
|
35
|
+
onKeyDown,
|
|
36
|
+
onBlur,
|
|
37
|
+
onClick,
|
|
38
|
+
loading,
|
|
39
|
+
loadingAnnouncement,
|
|
40
|
+
appearance: appearanceProp,
|
|
41
|
+
sentiment: sentimentProp,
|
|
42
|
+
type: typeProp = "button",
|
|
43
|
+
variant = "primary",
|
|
44
|
+
...restProps
|
|
45
|
+
}, ref) {
|
|
46
|
+
const { active, buttonProps } = useButton.useButton({
|
|
47
|
+
loading,
|
|
48
|
+
disabled,
|
|
49
|
+
focusableWhenDisabled,
|
|
50
|
+
onKeyUp,
|
|
51
|
+
onKeyDown,
|
|
52
|
+
onBlur,
|
|
53
|
+
onClick
|
|
54
|
+
});
|
|
55
|
+
const targetWindow = WindowProvider.useWindow();
|
|
56
|
+
useStyleInjection.useComponentCssInjection({
|
|
57
|
+
testId: "salt-button",
|
|
58
|
+
css: Button_css,
|
|
59
|
+
window: targetWindow
|
|
60
|
+
});
|
|
61
|
+
const mapped = variantToAppearanceAndColor(variant);
|
|
62
|
+
const appearance = appearanceProp ?? (mapped == null ? void 0 : mapped.appearance) ?? "solid";
|
|
63
|
+
const sentiment = sentimentProp ?? (mapped == null ? void 0 : mapped.sentiment) ?? "neutral";
|
|
64
|
+
const { tabIndex, ...restButtonProps } = buttonProps;
|
|
65
|
+
const type = typeProp === "submit" && loading ? "button" : typeProp;
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
67
|
+
"button",
|
|
68
|
+
{
|
|
69
|
+
...restButtonProps,
|
|
70
|
+
className: clsx.clsx(
|
|
71
|
+
withBaseName(),
|
|
72
|
+
withBaseName(variant),
|
|
73
|
+
{
|
|
74
|
+
[withBaseName("loading")]: loading,
|
|
75
|
+
[withBaseName("disabled")]: disabled,
|
|
76
|
+
[withBaseName("active")]: active,
|
|
77
|
+
[withBaseName(appearance)]: appearance,
|
|
78
|
+
[withBaseName(sentiment)]: sentiment
|
|
79
|
+
},
|
|
80
|
+
className
|
|
81
|
+
),
|
|
82
|
+
...restProps,
|
|
83
|
+
ref,
|
|
84
|
+
type,
|
|
85
|
+
children: [
|
|
86
|
+
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("spinner"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { size: "small", "aria-hidden": true, disableAnnouncer: true }) }),
|
|
87
|
+
typeof loadingAnnouncement === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: withBaseName("sr-only"), children: loadingAnnouncement }),
|
|
88
|
+
children
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
exports.Button = Button;
|
|
96
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/button/Button.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { useComponentCssInjection } from '@salt-ds/styles';\nimport { useWindow } from '@salt-ds/window';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { Spinner } from '../spinner/Spinner.js';\nimport { makePrefixer } from '../utils/makePrefixer.js';\nimport '../utils/useFloatingUI/useFloatingUI.js';\nimport '../utils/useId.js';\nimport '../salt-provider/SaltProvider.js';\nimport '../viewport/ViewportProvider.js';\nimport css_248z from './Button.css.js';\nimport { useButton } from './useButton.js';\n\nconst withBaseName = makePrefixer(\"saltButton\");\nconst ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"];\nconst ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\"\n];\nconst ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\"\n];\nfunction variantToAppearanceAndColor(variant) {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\nconst Button = forwardRef(\n function Button2({\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type: typeProp = \"button\",\n variant = \"primary\",\n ...restProps\n }, ref) {\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick\n });\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: css_248z,\n window: targetWindow\n });\n const mapped = variantToAppearanceAndColor(variant);\n const appearance = appearanceProp ?? (mapped == null ? void 0 : mapped.appearance) ?? \"solid\";\n const sentiment = sentimentProp ?? (mapped == null ? void 0 : mapped.sentiment) ?? \"neutral\";\n const { tabIndex, ...restButtonProps } = buttonProps;\n const type = typeProp === \"submit\" && loading ? \"button\" : typeProp;\n return /* @__PURE__ */ jsxs(\n \"button\",\n {\n ...restButtonProps,\n className: clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment\n },\n className\n ),\n ...restProps,\n ref,\n type,\n children: [\n loading && /* @__PURE__ */ jsx(\"div\", { className: withBaseName(\"spinner\"), \"aria-hidden\": true, children: /* @__PURE__ */ jsx(Spinner, { size: \"small\", \"aria-hidden\": true, disableAnnouncer: true }) }),\n typeof loadingAnnouncement === \"string\" && /* @__PURE__ */ jsx(\"span\", { role: \"status\", className: withBaseName(\"sr-only\"), children: loadingAnnouncement }),\n children\n ]\n }\n );\n }\n);\n\nexport { Button, ButtonAppearanceValues, ButtonSentimentValues, ButtonVariantValues };\n//# sourceMappingURL=Button.js.map\n"],"names":["makePrefixer","forwardRef","useButton","useWindow","useComponentCssInjection","css_248z","jsxs","clsx","jsx","Spinner"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const useButton = ({
|
|
6
|
+
loading,
|
|
7
|
+
disabled,
|
|
8
|
+
focusableWhenDisabled,
|
|
9
|
+
onKeyUp,
|
|
10
|
+
onKeyDown,
|
|
11
|
+
onClick,
|
|
12
|
+
onBlur
|
|
13
|
+
}) => {
|
|
14
|
+
const [keyIsDown, setKeyIsDown] = React.useState("");
|
|
15
|
+
const [active, setActive] = React.useState(false);
|
|
16
|
+
const enter = "Enter";
|
|
17
|
+
const space = " ";
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
const t = setTimeout(() => {
|
|
20
|
+
if (keyIsDown !== enter && keyIsDown !== space) {
|
|
21
|
+
setActive(false);
|
|
22
|
+
}
|
|
23
|
+
}, 0);
|
|
24
|
+
return () => {
|
|
25
|
+
clearTimeout(t);
|
|
26
|
+
};
|
|
27
|
+
}, [active, keyIsDown]);
|
|
28
|
+
const handleKeyUp = (event) => {
|
|
29
|
+
setKeyIsDown("");
|
|
30
|
+
setActive(false);
|
|
31
|
+
onKeyUp == null ? void 0 : onKeyUp(event);
|
|
32
|
+
};
|
|
33
|
+
const handleClick = (event) => {
|
|
34
|
+
setActive(true);
|
|
35
|
+
onClick == null ? void 0 : onClick(event);
|
|
36
|
+
};
|
|
37
|
+
const handleBlur = (event) => {
|
|
38
|
+
setActive(false);
|
|
39
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
40
|
+
};
|
|
41
|
+
const handleKeyDown = (event) => {
|
|
42
|
+
if (event.key === enter || event.key === space) {
|
|
43
|
+
setKeyIsDown(event.key);
|
|
44
|
+
setActive(true);
|
|
45
|
+
}
|
|
46
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
47
|
+
};
|
|
48
|
+
const buttonProps = {
|
|
49
|
+
"aria-disabled": disabled && focusableWhenDisabled ? true : void 0,
|
|
50
|
+
"data-loading": loading,
|
|
51
|
+
disabled: disabled && !focusableWhenDisabled,
|
|
52
|
+
tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,
|
|
53
|
+
onBlur: handleBlur,
|
|
54
|
+
onClick: !loading && !disabled ? handleClick : void 0,
|
|
55
|
+
onKeyDown: handleKeyDown,
|
|
56
|
+
onKeyUp: handleKeyUp
|
|
57
|
+
};
|
|
58
|
+
return {
|
|
59
|
+
active,
|
|
60
|
+
buttonProps
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
exports.useButton = useButton;
|
|
65
|
+
//# sourceMappingURL=useButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useButton.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/button/useButton.js"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nconst useButton = ({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur\n}) => {\n const [keyIsDown, setKeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n const enter = \"Enter\";\n const space = \" \";\n useEffect(() => {\n const t = setTimeout(() => {\n if (keyIsDown !== enter && keyIsDown !== space) {\n setActive(false);\n }\n }, 0);\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n const handleKeyUp = (event) => {\n setKeyIsDown(\"\");\n setActive(false);\n onKeyUp == null ? void 0 : onKeyUp(event);\n };\n const handleClick = (event) => {\n setActive(true);\n onClick == null ? void 0 : onClick(event);\n };\n const handleBlur = (event) => {\n setActive(false);\n onBlur == null ? void 0 : onBlur(event);\n };\n const handleKeyDown = (event) => {\n if (event.key === enter || event.key === space) {\n setKeyIsDown(event.key);\n setActive(true);\n }\n onKeyDown == null ? void 0 : onKeyDown(event);\n };\n const buttonProps = {\n \"aria-disabled\": disabled && focusableWhenDisabled ? true : void 0,\n \"data-loading\": loading,\n disabled: disabled && !focusableWhenDisabled,\n tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !loading && !disabled ? handleClick : void 0,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp\n };\n return {\n active,\n buttonProps\n };\n};\n\nexport { useButton };\n//# sourceMappingURL=useButton.js.map\n"],"names":["useState","useEffect"],"mappings":";;;;AAEK,MAAC,SAAS,GAAG,CAAC;AACnB,EAAE,OAAO;AACT,EAAE,QAAQ;AACV,EAAE,qBAAqB;AACvB,EAAE,OAAO;AACT,EAAE,SAAS;AACX,EAAE,OAAO;AACT,EAAE;AACF,CAAC,KAAK;AACN,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;AAChD,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC7C,EAAE,MAAM,KAAK,GAAG,OAAO;AACvB,EAAE,MAAM,KAAK,GAAG,GAAG;AACnB,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM;AAC/B,MAAM,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,EAAE;AACtD,QAAQ,SAAS,CAAC,KAAK,CAAC;AACxB;AACA,KAAK,EAAE,CAAC,CAAC;AACT,IAAI,OAAO,MAAM;AACjB,MAAM,YAAY,CAAC,CAAC,CAAC;AACrB,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AACzB,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACjC,IAAI,YAAY,CAAC,EAAE,CAAC;AACpB,IAAI,SAAS,CAAC,KAAK,CAAC;AACpB,IAAI,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;AAC7C,GAAG;AACH,EAAE,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACjC,IAAI,SAAS,CAAC,IAAI,CAAC;AACnB,IAAI,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;AAC7C,GAAG;AACH,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,SAAS,CAAC,KAAK,CAAC;AACpB,IAAI,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;AAC3C,GAAG;AACH,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AACpD,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC;AAC7B,MAAM,SAAS,CAAC,IAAI,CAAC;AACrB;AACA,IAAI,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC;AACjD,GAAG;AACH,EAAE,MAAM,WAAW,GAAG;AACtB,IAAI,eAAe,EAAE,QAAQ,IAAI,qBAAqB,GAAG,IAAI,GAAG,KAAK,CAAC;AACtE,IAAI,cAAc,EAAE,OAAO;AAC3B,IAAI,QAAQ,EAAE,QAAQ,IAAI,CAAC,qBAAqB;AAChD,IAAI,QAAQ,EAAE,QAAQ,IAAI,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,CAAC;AACzD,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;AACzD,IAAI,SAAS,EAAE,aAAa;AAC5B,IAAI,OAAO,EAAE;AACb,GAAG;AACH,EAAE,OAAO;AACT,IAAI,MAAM;AACV,IAAI;AACJ,GAAG;AACH;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var createContext = require('../utils/createContext.js');
|
|
4
|
+
|
|
5
|
+
const ProviderContext = createContext.createContext(
|
|
6
|
+
"ProviderContext",
|
|
7
|
+
null
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
exports.ProviderContext = ProviderContext;
|
|
11
|
+
//# sourceMappingURL=ProviderContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProviderContext.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/salt-provider/ProviderContext.js"],"sourcesContent":["import { createContext } from '../utils/createContext.js';\n\nconst ProviderContext = createContext(\n \"ProviderContext\",\n null\n);\n\nexport { ProviderContext };\n//# sourceMappingURL=ProviderContext.js.map\n"],"names":["createContext"],"mappings":";;;;AAEK,MAAC,eAAe,GAAGA,2BAAa;AACrC,EAAE,iBAAiB;AACnB,EAAE;AACF;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SaltProvider.css.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.css.js"],"sourcesContent":["var css_248z = \".salt-provider {\\n display: contents;\\n}\\n\";\n\nexport { css_248z as default };\n//# sourceMappingURL=SaltProvider.css.js.map\n"],"names":[],"mappings":";;AAAG,IAAC,QAAQ,GAAG;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
7
|
+
var AriaAnnouncerProvider = require('../aria-announcer/AriaAnnouncerProvider.js');
|
|
8
|
+
var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
|
|
9
|
+
var Breakpoints = require('../breakpoints/Breakpoints.js');
|
|
10
|
+
var ViewportProvider = require('../viewport/ViewportProvider.js');
|
|
11
|
+
var ProviderContext = require('./ProviderContext.js');
|
|
12
|
+
var SaltProvider_css = require('./SaltProvider.css.js');
|
|
13
|
+
var ThemeApplicator = require('./ThemeApplicator.js');
|
|
14
|
+
var index = require('../../../styles/dist-es/style-injection-provider/index.js');
|
|
15
|
+
var WindowProvider = require('../../../window/dist-es/WindowProvider.js');
|
|
16
|
+
var useStyleInjection = require('../../../styles/dist-es/use-style-injection/useStyleInjection.js');
|
|
17
|
+
|
|
18
|
+
const DEFAULT_DENSITY = "medium";
|
|
19
|
+
const DEFAULT_THEME_NAME = "salt-theme";
|
|
20
|
+
const DEFAULT_THEME_NAME_NEXT = "salt-theme-next";
|
|
21
|
+
const DEFAULT_MODE = "light";
|
|
22
|
+
const DEFAULT_CORNER = "sharp";
|
|
23
|
+
const DEFAULT_HEADING_FONT = "Open Sans";
|
|
24
|
+
const DEFAULT_ACCENT = "blue";
|
|
25
|
+
const DEFAULT_ACTION_FONT = "Open Sans";
|
|
26
|
+
const DensityContext = React.createContext(DEFAULT_DENSITY);
|
|
27
|
+
const ThemeContext = React.createContext({
|
|
28
|
+
theme: "",
|
|
29
|
+
mode: DEFAULT_MODE,
|
|
30
|
+
themeNext: false,
|
|
31
|
+
corner: DEFAULT_CORNER,
|
|
32
|
+
UNSTABLE_corner: DEFAULT_CORNER,
|
|
33
|
+
headingFont: DEFAULT_HEADING_FONT,
|
|
34
|
+
UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
|
|
35
|
+
accent: DEFAULT_ACCENT,
|
|
36
|
+
UNSTABLE_accent: DEFAULT_ACCENT,
|
|
37
|
+
actionFont: DEFAULT_ACTION_FONT,
|
|
38
|
+
UNSTABLE_actionFont: DEFAULT_ACTION_FONT
|
|
39
|
+
});
|
|
40
|
+
const BreakpointContext = React.createContext(Breakpoints.DEFAULT_BREAKPOINTS);
|
|
41
|
+
function InternalSaltProvider({
|
|
42
|
+
applyClassesTo: applyClassesToProp,
|
|
43
|
+
children,
|
|
44
|
+
density: densityProp,
|
|
45
|
+
theme: themeProp,
|
|
46
|
+
mode: modeProp,
|
|
47
|
+
breakpoints: breakpointsProp,
|
|
48
|
+
themeNext,
|
|
49
|
+
corner: cornerProp,
|
|
50
|
+
headingFont: headingFontProp,
|
|
51
|
+
accent: accentProp,
|
|
52
|
+
actionFont: actionFontProp
|
|
53
|
+
}) {
|
|
54
|
+
const prevProvider = React.useContext(ProviderContext.ProviderContext);
|
|
55
|
+
const inheritedDensity = React.useContext(DensityContext);
|
|
56
|
+
const {
|
|
57
|
+
theme: inheritedTheme,
|
|
58
|
+
mode: inheritedMode,
|
|
59
|
+
corner: inheritedCorner,
|
|
60
|
+
headingFont: inheritedHeadingFont,
|
|
61
|
+
accent: inheritedAccent,
|
|
62
|
+
actionFont: inheritedActionFont
|
|
63
|
+
} = React.useContext(ThemeContext);
|
|
64
|
+
const isRootProvider = prevProvider === null;
|
|
65
|
+
const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
|
|
66
|
+
const inheritedThemeName = inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme;
|
|
67
|
+
const themeName = themeProp ?? inheritedThemeName;
|
|
68
|
+
const mode = modeProp ?? inheritedMode;
|
|
69
|
+
const breakpoints = breakpointsProp ?? Breakpoints.DEFAULT_BREAKPOINTS;
|
|
70
|
+
const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
|
|
71
|
+
const headingFont = headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;
|
|
72
|
+
const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;
|
|
73
|
+
const actionFont = actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;
|
|
74
|
+
const targetWindow = WindowProvider.useWindow();
|
|
75
|
+
useStyleInjection.useComponentCssInjection({
|
|
76
|
+
testId: "salt-provider",
|
|
77
|
+
css: SaltProvider_css,
|
|
78
|
+
window: targetWindow
|
|
79
|
+
});
|
|
80
|
+
const themeContextValue = React.useMemo(
|
|
81
|
+
() => ({
|
|
82
|
+
theme: themeName,
|
|
83
|
+
mode,
|
|
84
|
+
window: targetWindow,
|
|
85
|
+
themeNext: Boolean(themeNext),
|
|
86
|
+
corner,
|
|
87
|
+
headingFont,
|
|
88
|
+
accent,
|
|
89
|
+
actionFont,
|
|
90
|
+
// Backward compatibility
|
|
91
|
+
UNSTABLE_corner: corner,
|
|
92
|
+
UNSTABLE_headingFont: headingFont,
|
|
93
|
+
UNSTABLE_accent: accent,
|
|
94
|
+
UNSTABLE_actionFont: actionFont
|
|
95
|
+
}),
|
|
96
|
+
[
|
|
97
|
+
themeName,
|
|
98
|
+
mode,
|
|
99
|
+
targetWindow,
|
|
100
|
+
themeNext,
|
|
101
|
+
corner,
|
|
102
|
+
headingFont,
|
|
103
|
+
accent,
|
|
104
|
+
actionFont
|
|
105
|
+
]
|
|
106
|
+
);
|
|
107
|
+
const matchedBreakpoints = BreakpointProvider.useMatchedBreakpoints(breakpoints);
|
|
108
|
+
const saltProvider = /* @__PURE__ */ jsxRuntime.jsx(ProviderContext.ProviderContext.Provider, { value: { targetWindow }, children: /* @__PURE__ */ jsxRuntime.jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(BreakpointProvider.BreakpointProvider, { matchedBreakpoints, children: /* @__PURE__ */ jsxRuntime.jsx(BreakpointContext.Provider, { value: breakpoints, children: /* @__PURE__ */ jsxRuntime.jsx(ViewportProvider.ViewportProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
ThemeApplicator.ThemeApplicator,
|
|
110
|
+
{
|
|
111
|
+
applyClassesTo: applyClassesToProp ?? (isRootProvider ? "root" : "scope"),
|
|
112
|
+
density,
|
|
113
|
+
theme: clsx.clsx(
|
|
114
|
+
DEFAULT_THEME_NAME,
|
|
115
|
+
{ [DEFAULT_THEME_NAME_NEXT]: themeNext },
|
|
116
|
+
themeName
|
|
117
|
+
),
|
|
118
|
+
mode,
|
|
119
|
+
accent: themeNext ? accent : void 0,
|
|
120
|
+
actionFont: themeNext ? actionFont : void 0,
|
|
121
|
+
headingFont: themeNext ? headingFont : void 0,
|
|
122
|
+
corner: themeNext ? corner : void 0,
|
|
123
|
+
children
|
|
124
|
+
}
|
|
125
|
+
) }) }) }) }) }) });
|
|
126
|
+
if (isRootProvider) {
|
|
127
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AriaAnnouncerProvider.AriaAnnouncerProvider, { children: saltProvider });
|
|
128
|
+
}
|
|
129
|
+
return saltProvider;
|
|
130
|
+
}
|
|
131
|
+
function SaltProvider({
|
|
132
|
+
enableStyleInjection,
|
|
133
|
+
...restProps
|
|
134
|
+
}) {
|
|
135
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.StyleInjectionProvider, { value: enableStyleInjection, children: /* @__PURE__ */ jsxRuntime.jsx(InternalSaltProvider, { ...restProps }) });
|
|
136
|
+
}
|
|
137
|
+
function SaltProviderNext({
|
|
138
|
+
enableStyleInjection,
|
|
139
|
+
...restProps
|
|
140
|
+
}) {
|
|
141
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.StyleInjectionProvider, { value: enableStyleInjection, children: /* @__PURE__ */ jsxRuntime.jsx(InternalSaltProvider, { ...restProps, themeNext: true }) });
|
|
142
|
+
}
|
|
143
|
+
const useTheme = () => {
|
|
144
|
+
const { window: _window, ...contextWithoutWindow } = React.useContext(ThemeContext);
|
|
145
|
+
return contextWithoutWindow;
|
|
146
|
+
};
|
|
147
|
+
function useDensity(density) {
|
|
148
|
+
const densityFromContext = React.useContext(DensityContext);
|
|
149
|
+
return densityFromContext ?? DEFAULT_DENSITY;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
exports.BreakpointContext = BreakpointContext;
|
|
153
|
+
exports.DEFAULT_DENSITY = DEFAULT_DENSITY;
|
|
154
|
+
exports.DensityContext = DensityContext;
|
|
155
|
+
exports.SaltProvider = SaltProvider;
|
|
156
|
+
exports.SaltProviderNext = SaltProviderNext;
|
|
157
|
+
exports.ThemeContext = ThemeContext;
|
|
158
|
+
exports.useDensity = useDensity;
|
|
159
|
+
exports.useTheme = useTheme;
|
|
160
|
+
//# sourceMappingURL=SaltProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../../../../../../../../node_modules/@salt-ds/core/dist-es/salt-provider/SaltProvider.js"],"sourcesContent":["import { jsx } from 'react/jsx-runtime';\nimport { StyleInjectionProvider, useComponentCssInjection } from '@salt-ds/styles';\nimport { useWindow } from '@salt-ds/window';\nimport { clsx } from 'clsx';\nimport { createContext, useContext, useMemo } from 'react';\nimport '../aria-announcer/AriaAnnouncerContext.js';\nimport { AriaAnnouncerProvider } from '../aria-announcer/AriaAnnouncerProvider.js';\nimport { useMatchedBreakpoints, BreakpointProvider } from '../breakpoints/BreakpointProvider.js';\nimport { DEFAULT_BREAKPOINTS } from '../breakpoints/Breakpoints.js';\nimport { ViewportProvider } from '../viewport/ViewportProvider.js';\nimport { ProviderContext } from './ProviderContext.js';\nimport css_248z from './SaltProvider.css.js';\nimport { ThemeApplicator } from './ThemeApplicator.js';\n\nconst DEFAULT_DENSITY = \"medium\";\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER = \"sharp\";\nconst DEFAULT_HEADING_FONT = \"Open Sans\";\nconst DEFAULT_ACCENT = \"blue\";\nconst DEFAULT_ACTION_FONT = \"Open Sans\";\nconst DensityContext = createContext(DEFAULT_DENSITY);\nconst ThemeContext = createContext({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n corner: DEFAULT_CORNER,\n UNSTABLE_corner: DEFAULT_CORNER,\n headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n accent: DEFAULT_ACCENT,\n UNSTABLE_accent: DEFAULT_ACCENT,\n actionFont: DEFAULT_ACTION_FONT,\n UNSTABLE_actionFont: DEFAULT_ACTION_FONT\n});\nconst BreakpointContext = createContext(DEFAULT_BREAKPOINTS);\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n headingFont: headingFontProp,\n accent: accentProp,\n actionFont: actionFontProp\n}) {\n const prevProvider = useContext(ProviderContext);\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n corner: inheritedCorner,\n headingFont: inheritedHeadingFont,\n accent: inheritedAccent,\n actionFont: inheritedActionFont\n } = useContext(ThemeContext);\n const isRootProvider = prevProvider === null;\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const inheritedThemeName = inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme;\n const themeName = themeProp ?? inheritedThemeName;\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n const headingFont = headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n const actionFont = actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: css_248z,\n window: targetWindow\n });\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n corner,\n headingFont,\n accent,\n actionFont,\n // Backward compatibility\n UNSTABLE_corner: corner,\n UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n UNSTABLE_actionFont: actionFont\n }),\n [\n themeName,\n mode,\n targetWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont\n ]\n );\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n const saltProvider = /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { targetWindow }, children: /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContextValue, children: /* @__PURE__ */ jsx(BreakpointProvider, { matchedBreakpoints, children: /* @__PURE__ */ jsx(BreakpointContext.Provider, { value: breakpoints, children: /* @__PURE__ */ jsx(ViewportProvider, { children: /* @__PURE__ */ jsx(\n ThemeApplicator,\n {\n applyClassesTo: applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\"),\n density,\n theme: clsx(\n DEFAULT_THEME_NAME,\n { [DEFAULT_THEME_NAME_NEXT]: themeNext },\n themeName\n ),\n mode,\n accent: themeNext ? accent : void 0,\n actionFont: themeNext ? actionFont : void 0,\n headingFont: themeNext ? headingFont : void 0,\n corner: themeNext ? corner : void 0,\n children\n }\n ) }) }) }) }) }) });\n if (isRootProvider) {\n return /* @__PURE__ */ jsx(AriaAnnouncerProvider, { children: saltProvider });\n }\n return saltProvider;\n}\nfunction SaltProvider({\n enableStyleInjection,\n ...restProps\n}) {\n return /* @__PURE__ */ jsx(StyleInjectionProvider, { value: enableStyleInjection, children: /* @__PURE__ */ jsx(InternalSaltProvider, { ...restProps }) });\n}\nfunction SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}) {\n return /* @__PURE__ */ jsx(StyleInjectionProvider, { value: enableStyleInjection, children: /* @__PURE__ */ jsx(InternalSaltProvider, { ...restProps, themeNext: true }) });\n}\nconst UNSTABLE_SaltProviderNext = SaltProviderNext;\nconst useTheme = () => {\n const { window: _window, ...contextWithoutWindow } = useContext(ThemeContext);\n return contextWithoutWindow;\n};\nfunction useDensity(density) {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\nconst useBreakpoints = () => {\n return useContext(BreakpointContext);\n};\n\nexport { BreakpointContext, DEFAULT_DENSITY, DensityContext, SaltProvider, SaltProviderNext, ThemeContext, UNSTABLE_SaltProviderNext, useBreakpoints, useDensity, useTheme };\n//# sourceMappingURL=SaltProvider.js.map\n"],"names":["createContext","DEFAULT_BREAKPOINTS","useContext","ProviderContext","useWindow","useComponentCssInjection","css_248z","useMemo","useMatchedBreakpoints","jsx","BreakpointProvider","ViewportProvider","ThemeApplicator","clsx","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var useId = require('../utils/useId.js');
|
|
7
|
+
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
8
|
+
var WindowProvider = require('../../../window/dist-es/WindowProvider.js');
|
|
9
|
+
|
|
10
|
+
const providerSymbol = Symbol.for("salt-provider");
|
|
11
|
+
function ThemeApplicator({
|
|
12
|
+
applyClassesTo,
|
|
13
|
+
children,
|
|
14
|
+
density,
|
|
15
|
+
mode,
|
|
16
|
+
theme,
|
|
17
|
+
corner,
|
|
18
|
+
headingFont,
|
|
19
|
+
accent,
|
|
20
|
+
actionFont
|
|
21
|
+
}) {
|
|
22
|
+
var _a;
|
|
23
|
+
const targetWindow = WindowProvider.useWindow();
|
|
24
|
+
const providerId = useId.useId();
|
|
25
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
26
|
+
if (applyClassesTo !== "root" || !targetWindow || !providerId) return;
|
|
27
|
+
const targetDocument = targetWindow.document;
|
|
28
|
+
if (!targetDocument[providerSymbol]) {
|
|
29
|
+
targetDocument[providerSymbol] = providerId;
|
|
30
|
+
}
|
|
31
|
+
if (providerId !== targetDocument[providerSymbol]) {
|
|
32
|
+
console.warn(
|
|
33
|
+
"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window."
|
|
34
|
+
);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const themeNames = theme.split(" ");
|
|
38
|
+
targetDocument.documentElement.classList.add(
|
|
39
|
+
...themeNames,
|
|
40
|
+
`salt-density-${density}`
|
|
41
|
+
);
|
|
42
|
+
targetDocument.documentElement.dataset.mode = mode;
|
|
43
|
+
if (corner) targetDocument.documentElement.dataset.corner = corner;
|
|
44
|
+
if (headingFont)
|
|
45
|
+
targetDocument.documentElement.dataset.headingFont = headingFont;
|
|
46
|
+
if (accent) targetDocument.documentElement.dataset.accent = accent;
|
|
47
|
+
if (actionFont)
|
|
48
|
+
targetDocument.documentElement.dataset.actionFont = actionFont;
|
|
49
|
+
return () => {
|
|
50
|
+
delete targetDocument[providerSymbol];
|
|
51
|
+
targetDocument.documentElement.classList.remove(
|
|
52
|
+
...themeNames,
|
|
53
|
+
`salt-density-${density}`
|
|
54
|
+
);
|
|
55
|
+
targetDocument.documentElement.dataset.mode = void 0;
|
|
56
|
+
delete targetDocument.documentElement.dataset.corner;
|
|
57
|
+
delete targetDocument.documentElement.dataset.headingFont;
|
|
58
|
+
delete targetDocument.documentElement.dataset.accent;
|
|
59
|
+
delete targetDocument.documentElement.dataset.actionFont;
|
|
60
|
+
};
|
|
61
|
+
}, [
|
|
62
|
+
providerId,
|
|
63
|
+
applyClassesTo,
|
|
64
|
+
density,
|
|
65
|
+
mode,
|
|
66
|
+
theme,
|
|
67
|
+
targetWindow,
|
|
68
|
+
corner,
|
|
69
|
+
headingFont,
|
|
70
|
+
accent,
|
|
71
|
+
actionFont
|
|
72
|
+
]);
|
|
73
|
+
const themeNextProps = {
|
|
74
|
+
"data-corner": corner,
|
|
75
|
+
"data-heading-font": headingFont,
|
|
76
|
+
"data-accent": accent,
|
|
77
|
+
"data-action-font": actionFont
|
|
78
|
+
};
|
|
79
|
+
if (applyClassesTo === "child") {
|
|
80
|
+
if (React.isValidElement(children)) {
|
|
81
|
+
return React.cloneElement(children, {
|
|
82
|
+
className: clsx.clsx(
|
|
83
|
+
(_a = children.props) == null ? void 0 : _a.className,
|
|
84
|
+
theme,
|
|
85
|
+
`salt-density-${density}`
|
|
86
|
+
),
|
|
87
|
+
// @ts-expect-error
|
|
88
|
+
"data-mode": mode,
|
|
89
|
+
...themeNextProps
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
console.warn(
|
|
93
|
+
`
|
|
94
|
+
SaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.
|
|
95
|
+
Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a
|
|
96
|
+
div element will wrap your child elements`
|
|
97
|
+
);
|
|
98
|
+
return children;
|
|
99
|
+
}
|
|
100
|
+
if (applyClassesTo === "scope") {
|
|
101
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
className: clsx.clsx("salt-provider", theme, `salt-density-${density}`),
|
|
105
|
+
"data-mode": mode,
|
|
106
|
+
...themeNextProps,
|
|
107
|
+
children
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
return children;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
exports.ThemeApplicator = ThemeApplicator;
|
|
115
|
+
//# sourceMappingURL=ThemeApplicator.js.map
|