@salt-ds/core 1.13.1 → 1.13.3
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/css/salt-core.css +9 -9
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/salt-provider/SaltProvider.js +1 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/package.json +3 -3
package/css/salt-core.css
CHANGED
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
min-width: var(--salt-text-notation-lineHeight);
|
|
160
160
|
border-radius: 9999px;
|
|
161
161
|
white-space: nowrap;
|
|
162
|
-
z-index: var(--salt-zIndex-
|
|
162
|
+
z-index: var(--salt-zIndex-default);
|
|
163
163
|
align-items: center;
|
|
164
164
|
justify-content: center;
|
|
165
165
|
display: inline-flex;
|
|
@@ -1049,10 +1049,10 @@ a:link .saltInteractableCard * {
|
|
|
1049
1049
|
.saltInput-endAdornmentContainer .saltButton:last-child {
|
|
1050
1050
|
margin-right: calc(var(--salt-spacing-50) * -1);
|
|
1051
1051
|
}
|
|
1052
|
-
.saltInput .saltButton
|
|
1053
|
-
|
|
1052
|
+
.saltInput-startAdornmentContainer > .saltButton,
|
|
1053
|
+
.saltInput-endAdornmentContainer > .saltButton {
|
|
1054
|
+
--saltButton-padding: var(--salt-spacing-50);
|
|
1054
1055
|
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
1055
|
-
--saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
1056
1056
|
}
|
|
1057
1057
|
|
|
1058
1058
|
/* src/link/Link.css */
|
|
@@ -1298,10 +1298,10 @@ a:link .saltInteractableCard * {
|
|
|
1298
1298
|
.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {
|
|
1299
1299
|
margin-right: 0;
|
|
1300
1300
|
}
|
|
1301
|
-
.saltMultilineInput .saltButton
|
|
1302
|
-
|
|
1303
|
-
--saltButton-
|
|
1304
|
-
--saltButton-
|
|
1301
|
+
.saltMultilineInput-startAdornmentContainer > .saltButton,
|
|
1302
|
+
.saltMultilineInput-endAdornmentContainer > .saltButton {
|
|
1303
|
+
--saltButton-padding: var(--salt-spacing-50);
|
|
1304
|
+
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
1305
1305
|
}
|
|
1306
1306
|
|
|
1307
1307
|
/* src/panel/Panel.css */
|
|
@@ -2019,4 +2019,4 @@ label.saltText small,
|
|
|
2019
2019
|
--tooltip-status-borderColor: var(--salt-status-success-borderColor);
|
|
2020
2020
|
}
|
|
2021
2021
|
|
|
2022
|
-
/* src/
|
|
2022
|
+
/* src/ed7da9ce-7b40-408c-ba0f-b7c1676a8487.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n --saltButton-padding:
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Input.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n --multilineInput-border: none;\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--multilineInput-background);\n border: var(--multilineInput-border);\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: auto;\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--multilineInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--multilineInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-active: var(--salt-editable-primary-background-active);\n --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-active: var(--salt-status-error-background);\n --multilineInput-background-hover: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-active: var(--salt-status-warning-background);\n --multilineInput-background-hover: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-active: var(--salt-status-success-background);\n --multilineInput-background-hover: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n display: flex;\n flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: inline-flex;\n height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n flex-grow: 1;\n font: inherit;\n letter-spacing: 0;\n margin: var(--salt-spacing-75) 0;\n min-width: 0;\n overflow: hidden;\n resize: none;\n padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n --multilineInput-borderColor: var(--multilineInput-outlineColor);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput .saltButton {\n --saltButton-padding:
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n --multilineInput-border: none;\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--multilineInput-background);\n border: var(--multilineInput-border);\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: auto;\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--multilineInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--multilineInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-active: var(--salt-editable-primary-background-active);\n --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-active: var(--salt-status-error-background);\n --multilineInput-background-hover: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-active: var(--salt-status-warning-background);\n --multilineInput-background-hover: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-active: var(--salt-status-success-background);\n --multilineInput-background-hover: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n display: flex;\n flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: inline-flex;\n height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n flex-grow: 1;\n font: inherit;\n letter-spacing: 0;\n margin: var(--salt-spacing-75) 0;\n min-width: 0;\n overflow: hidden;\n resize: none;\n padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n --multilineInput-borderColor: var(--multilineInput-outlineColor);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=MultilineInput.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\" && targetWindow) {\n if (isRoot) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection = true,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useMemo","useWindow","useComponentCssInjection","saltProviderCss","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\" && targetWindow) {\n if (isRoot) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useMemo","useWindow","useComponentCssInjection","saltProviderCss","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n --saltButton-padding:
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Input.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n --multilineInput-border: none;\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--multilineInput-background);\n border: var(--multilineInput-border);\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: auto;\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--multilineInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--multilineInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-active: var(--salt-editable-primary-background-active);\n --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-active: var(--salt-status-error-background);\n --multilineInput-background-hover: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-active: var(--salt-status-warning-background);\n --multilineInput-background-hover: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-active: var(--salt-status-success-background);\n --multilineInput-background-hover: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n display: flex;\n flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: inline-flex;\n height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n flex-grow: 1;\n font: inherit;\n letter-spacing: 0;\n margin: var(--salt-spacing-75) 0;\n min-width: 0;\n overflow: hidden;\n resize: none;\n padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n --multilineInput-borderColor: var(--multilineInput-outlineColor);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput .saltButton {\n --saltButton-padding:
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n --multilineInput-border: none;\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--multilineInput-background);\n border: var(--multilineInput-border);\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: auto;\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--multilineInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--multilineInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-active: var(--salt-editable-primary-background-active);\n --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-active: var(--salt-status-error-background);\n --multilineInput-background-hover: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-active: var(--salt-status-warning-background);\n --multilineInput-background-hover: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-active: var(--salt-status-success-background);\n --multilineInput-background-hover: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n display: flex;\n flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: inline-flex;\n height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n flex-grow: 1;\n font: inherit;\n letter-spacing: 0;\n margin: var(--salt-spacing-75) 0;\n min-width: 0;\n overflow: hidden;\n resize: none;\n padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n --multilineInput-borderColor: var(--multilineInput-outlineColor);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=MultilineInput.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\" && targetWindow) {\n if (isRoot) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection = true,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\" && targetWindow) {\n if (isRoot) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/core",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.3",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"@floating-ui/react": "^0.23.0",
|
|
15
15
|
"clsx": "^2.0.0",
|
|
16
16
|
"@salt-ds/window": "^0.1.1",
|
|
17
|
-
"@salt-ds/styles": "^0.2.
|
|
18
|
-
"@salt-ds/icons": "^1.
|
|
17
|
+
"@salt-ds/styles": "^0.2.1",
|
|
18
|
+
"@salt-ds/icons": "^1.9.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@types/react": ">=16.14.0",
|