@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/packages/lab/src/form-field-context/FormFieldContextNext.js.map +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js +9 -0
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js.map +1 -0
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldControlWrapper.js +16 -0
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldControlWrapper.js.map +1 -0
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldHelperText.css.js +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldHelperText.js +24 -9
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldLabel.css.js +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldLabel.js +16 -10
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldLabel.js.map +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldNext.css.js +1 -1
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldNext.js +11 -44
- package/dist-cjs/packages/lab/src/form-field-next/FormFieldNext.js.map +1 -1
- package/dist-cjs/packages/lab/src/index.js +6 -2
- package/dist-cjs/packages/lab/src/index.js.map +1 -1
- package/dist-cjs/packages/lab/src/input-next/InputNext.css.js +1 -1
- package/dist-cjs/packages/lab/src/input-next/InputNext.js +46 -36
- package/dist-cjs/packages/lab/src/input-next/InputNext.js.map +1 -1
- package/dist-cjs/packages/lab/src/status-adornment/ErrorAdornment.js +24 -0
- package/dist-cjs/packages/lab/src/status-adornment/ErrorAdornment.js.map +1 -0
- package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.css.js +9 -0
- package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.css.js.map +1 -0
- package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.js +39 -0
- package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.js.map +1 -0
- package/dist-cjs/packages/lab/src/status-adornment/SuccessAdornment.js +24 -0
- package/dist-cjs/packages/lab/src/status-adornment/SuccessAdornment.js.map +1 -0
- package/dist-cjs/packages/lab/src/status-adornment/WarningAdornment.js +22 -0
- package/dist-cjs/packages/lab/src/status-adornment/WarningAdornment.js.map +1 -0
- package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js.map +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js +7 -0
- package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js.map +1 -0
- package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js +12 -0
- package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js.map +1 -0
- package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js +26 -11
- package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js.map +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js +16 -10
- package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js.map +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js +1 -1
- package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js +12 -45
- package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js.map +1 -1
- package/dist-es/packages/lab/src/index.js +3 -2
- package/dist-es/packages/lab/src/index.js.map +1 -1
- package/dist-es/packages/lab/src/input-next/InputNext.css.js +1 -1
- package/dist-es/packages/lab/src/input-next/InputNext.js +47 -37
- package/dist-es/packages/lab/src/input-next/InputNext.js.map +1 -1
- package/dist-es/packages/lab/src/status-adornment/ErrorAdornment.js +20 -0
- package/dist-es/packages/lab/src/status-adornment/ErrorAdornment.js.map +1 -0
- package/dist-es/packages/lab/src/status-adornment/StatusAdornment.css.js +7 -0
- package/dist-es/packages/lab/src/status-adornment/StatusAdornment.css.js.map +1 -0
- package/dist-es/packages/lab/src/status-adornment/StatusAdornment.js +35 -0
- package/dist-es/packages/lab/src/status-adornment/StatusAdornment.js.map +1 -0
- package/dist-es/packages/lab/src/status-adornment/SuccessAdornment.js +20 -0
- package/dist-es/packages/lab/src/status-adornment/SuccessAdornment.js.map +1 -0
- package/dist-es/packages/lab/src/status-adornment/WarningAdornment.js +18 -0
- package/dist-es/packages/lab/src/status-adornment/WarningAdornment.js.map +1 -0
- package/dist-types/form-field-context/FormFieldContextNext.d.ts +5 -2
- package/dist-types/form-field-next/FormFieldControlWrapper.d.ts +3 -0
- package/dist-types/form-field-next/FormFieldHelperText.d.ts +1 -6
- package/dist-types/form-field-next/FormFieldLabel.d.ts +1 -11
- package/dist-types/form-field-next/FormFieldNext.d.ts +9 -19
- package/dist-types/form-field-next/index.d.ts +1 -0
- package/dist-types/index.d.ts +1 -1
- package/dist-types/input-next/InputNext.d.ts +14 -7
- package/dist-types/status-adornment/ErrorAdornment.d.ts +4 -0
- package/dist-types/status-adornment/StatusAdornment.d.ts +13 -0
- package/dist-types/status-adornment/SuccessAdornment.d.ts +4 -0
- package/dist-types/status-adornment/WarningAdornment.d.ts +4 -0
- package/dist-types/status-adornment/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { a11yValueAriaProps } from \"../form-field-next\";\n\nexport interface FormFieldContextNextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContextNext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextNextValue\n);\n"],"names":["createContext"],"mappings":";;;;;;AAUO,MAAM,oBAAuB,GAAAA,kBAAA;AAAA,EAClC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
|
+
|
|
5
|
+
var css_248z = ".saltFormFieldControlWrapper {\n align-items: center;\n display: grid;\n grid-auto-columns: minmax(min-content, 1fr);\n grid-auto-flow: column;\n grid-column-gap: var(--salt-size-unit);\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=FormFieldControlWrapper.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldControlWrapper.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var core = require('@salt-ds/core');
|
|
7
|
+
require('./FormFieldControlWrapper.css.js');
|
|
8
|
+
|
|
9
|
+
const withBaseName = core.makePrefixer("saltFormFieldControlWrapper");
|
|
10
|
+
const FormFieldControlWrapper = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
11
|
+
className: withBaseName(),
|
|
12
|
+
children
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
exports.FormFieldControlWrapper = FormFieldControlWrapper;
|
|
16
|
+
//# sourceMappingURL=FormFieldControlWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldControlWrapper.js","sources":["../src/form-field-next/FormFieldControlWrapper.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./FormFieldControlWrapper.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldControlWrapper\");\n\nexport const FormFieldControlWrapper = ({ children }: PropsWithChildren) => (\n <div className={withBaseName()}>{children}</div>\n);\n"],"names":["makePrefixer","jsx"],"mappings":";;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,6BAA6B,CAAA,CAAA;AAExD,MAAM,uBAA0B,GAAA,CAAC,EAAE,QAAA,uBACvCC,cAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,YAAa,EAAA;AAAA,EAAI,QAAA;AAAA,CAAS;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = ".saltFormFieldHelperText.saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n
|
|
5
|
+
var css_248z = ".saltFormFieldHelperText {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-size-adornmentGap);\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var core = require('@salt-ds/core');
|
|
8
|
+
require('../form-field-context/FormFieldContext.js');
|
|
9
|
+
require('../form-field-context/FormFieldContextNext.js');
|
|
10
|
+
require('react');
|
|
11
|
+
var useFormFieldPropsNext = require('../form-field-context/useFormFieldPropsNext.js');
|
|
8
12
|
require('./FormFieldHelperText.css.js');
|
|
9
13
|
|
|
10
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -14,17 +18,28 @@ var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
|
14
18
|
const withBaseName = core.makePrefixer("saltFormFieldHelperText");
|
|
15
19
|
const FormFieldHelperText = ({
|
|
16
20
|
className,
|
|
17
|
-
|
|
18
|
-
helperText,
|
|
21
|
+
children,
|
|
19
22
|
...restProps
|
|
20
23
|
}) => {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const { disabled, readOnly, validationStatus } = useFormFieldPropsNext.useFormFieldPropsNext();
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
26
|
+
className: clsx__default["default"](
|
|
27
|
+
withBaseName(),
|
|
28
|
+
{ [withBaseName("withValidation")]: validationStatus },
|
|
29
|
+
className
|
|
30
|
+
),
|
|
31
|
+
children: [
|
|
32
|
+
!disabled && !readOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
|
|
33
|
+
status: validationStatus
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Text, {
|
|
36
|
+
disabled,
|
|
37
|
+
variant: "secondary",
|
|
38
|
+
styleAs: "label",
|
|
39
|
+
...restProps,
|
|
40
|
+
children
|
|
41
|
+
})
|
|
42
|
+
]
|
|
28
43
|
});
|
|
29
44
|
};
|
|
30
45
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, Text, TextProps } from \"@salt-ds/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, StatusIndicator, Text, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const { disabled, readOnly, validationStatus } = useFormFieldPropsNext();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator status={validationStatus} />\n )}\n <Text\n disabled={disabled}\n variant=\"secondary\"\n styleAs=\"label\"\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["makePrefixer","useFormFieldPropsNext","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,QAAU,EAAA,gBAAA,KAAqBC,2CAAsB,EAAA,CAAA;AAEvE,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxBC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5CD,cAAA,CAAAE,SAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = ".saltFormFieldLabel.saltText {\n align-self: center;\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n --inputNext-borderColor: var(--
|
|
5
|
+
var css_248z = ".saltFormFieldLabel.saltText {\n align-self: center;\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n --inputNext-borderColor: var(--inputNext-borderColor-hover);\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -5,22 +5,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var core = require('@salt-ds/core');
|
|
8
|
+
require('../form-field-context/FormFieldContext.js');
|
|
9
|
+
require('../form-field-context/FormFieldContextNext.js');
|
|
10
|
+
require('react');
|
|
11
|
+
var useFormFieldPropsNext = require('../form-field-context/useFormFieldPropsNext.js');
|
|
8
12
|
require('./FormFieldLabel.css.js');
|
|
9
13
|
|
|
10
14
|
const withBaseName = core.makePrefixer("saltFormFieldLabel");
|
|
11
15
|
const FormFieldLabel = ({
|
|
12
16
|
className,
|
|
13
|
-
|
|
14
|
-
label,
|
|
17
|
+
children,
|
|
15
18
|
...restProps
|
|
16
|
-
}) =>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
}) => {
|
|
20
|
+
const { disabled } = useFormFieldPropsNext.useFormFieldPropsNext();
|
|
21
|
+
return /* @__PURE__ */ jsxRuntime.jsx(core.Label, {
|
|
22
|
+
as: "label",
|
|
23
|
+
className: clsx.clsx(withBaseName(), className),
|
|
24
|
+
disabled,
|
|
25
|
+
variant: "secondary",
|
|
26
|
+
...restProps,
|
|
27
|
+
children
|
|
28
|
+
});
|
|
29
|
+
};
|
|
24
30
|
|
|
25
31
|
exports.FormFieldLabel = FormFieldLabel;
|
|
26
32
|
//# sourceMappingURL=FormFieldLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\nexport
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const { disabled } = useFormFieldPropsNext();\n\n return (\n <Label\n as=\"label\"\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n variant=\"secondary\"\n {...restProps}\n >\n {children}\n </Label>\n );\n};\n"],"names":["makePrefixer","useFormFieldPropsNext","jsx","Label","clsx"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,2CAAsB,EAAA,CAAA;AAE3C,EAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = ".saltFormFieldNext {\n display: inline-grid;\n position: relative;\n column-gap: var(--salt-size-adornmentGap);\n row-gap: var(--salt-size-adornmentGap);\n vertical-align: top;\n width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n align-self: center;\n grid-template-columns:
|
|
5
|
+
var css_248z = ".saltFormFieldNext {\n display: inline-grid;\n position: relative;\n column-gap: var(--salt-size-adornmentGap);\n row-gap: var(--salt-size-adornmentGap);\n vertical-align: top;\n width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n align-self: center;\n grid-template-columns: 40% 1fr;\n}\n\n.saltFormFieldNext-labelTop {\n}\n\n.saltFormFieldNext-controls {\n align-items: center;\n display: grid;\n grid-auto-columns: minmax(0, 1fr);\n grid-auto-flow: column;\n grid-column-gap: var(--salt-size-adornmentGap);\n}\n\n.saltFormFieldNext > * {\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldNext > .saltFormFieldLabel {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldNext-labelLeft > * {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldNext > .saltFormFieldHelperText {\n grid-row-start: 3;\n grid-row-end: 4;\n}\n\n.saltFormFieldNext.saltFormFieldNext-labelLeft > .saltFormFieldHelperText {\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldNext-labelLeft > .saltFormFieldLabel ~ * {\n grid-column-start: 2;\n grid-column-end: 2;\n}\n\n.saltFormFieldNext-disabled .saltInputNext-focused {\n outline: none;\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -8,49 +8,31 @@ var React = require('react');
|
|
|
8
8
|
var core = require('@salt-ds/core');
|
|
9
9
|
require('../form-field-context/FormFieldContext.js');
|
|
10
10
|
var FormFieldContextNext = require('../form-field-context/FormFieldContextNext.js');
|
|
11
|
-
var FormFieldLabel = require('./FormFieldLabel.js');
|
|
12
|
-
var FormFieldHelperText = require('./FormFieldHelperText.js');
|
|
13
11
|
require('./FormFieldNext.css.js');
|
|
14
12
|
|
|
15
|
-
const useA11yValue = ({
|
|
16
|
-
disabled,
|
|
17
|
-
labelId,
|
|
18
|
-
helperTextId,
|
|
19
|
-
readOnly
|
|
20
|
-
}) => {
|
|
21
|
-
return React.useMemo(
|
|
22
|
-
() => ({
|
|
23
|
-
"aria-labelledby": labelId,
|
|
24
|
-
"aria-describedby": helperTextId,
|
|
25
|
-
disabled,
|
|
26
|
-
readOnly
|
|
27
|
-
}),
|
|
28
|
-
[labelId, disabled, helperTextId, readOnly]
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
13
|
const withBaseName = core.makePrefixer("saltFormFieldNext");
|
|
32
14
|
const FormField = React.forwardRef(
|
|
33
15
|
({
|
|
34
16
|
children,
|
|
35
17
|
className,
|
|
36
18
|
disabled = false,
|
|
37
|
-
helperText,
|
|
38
|
-
label,
|
|
39
19
|
labelPlacement = "top",
|
|
40
20
|
onBlur,
|
|
41
21
|
onFocus,
|
|
42
22
|
readOnly = false,
|
|
43
23
|
id: idProp,
|
|
24
|
+
validationStatus,
|
|
44
25
|
...restProps
|
|
45
26
|
}, ref) => {
|
|
46
27
|
const labelId = core.useId();
|
|
47
28
|
const helperTextId = core.useId();
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
29
|
+
const a11yProps = React.useMemo(
|
|
30
|
+
() => ({
|
|
31
|
+
"aria-labelledby": labelId,
|
|
32
|
+
"aria-describedby": helperTextId
|
|
33
|
+
}),
|
|
34
|
+
[labelId, helperTextId]
|
|
35
|
+
);
|
|
54
36
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
55
37
|
ref,
|
|
56
38
|
className: clsx.clsx(
|
|
@@ -63,24 +45,9 @@ const FormField = React.forwardRef(
|
|
|
63
45
|
className
|
|
64
46
|
),
|
|
65
47
|
...restProps,
|
|
66
|
-
children: /* @__PURE__ */ jsxRuntime.
|
|
67
|
-
value: { a11yProps
|
|
68
|
-
children
|
|
69
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, {
|
|
70
|
-
id: labelId,
|
|
71
|
-
disabled,
|
|
72
|
-
label
|
|
73
|
-
}),
|
|
74
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
75
|
-
className: withBaseName("controls"),
|
|
76
|
-
children
|
|
77
|
-
}),
|
|
78
|
-
helperText && /* @__PURE__ */ jsxRuntime.jsx(FormFieldHelperText.FormFieldHelperText, {
|
|
79
|
-
id: helperTextId,
|
|
80
|
-
disabled,
|
|
81
|
-
helperText
|
|
82
|
-
})
|
|
83
|
-
]
|
|
48
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldContextNext.FormFieldContextNext.Provider, {
|
|
49
|
+
value: { a11yProps, disabled, readOnly, validationStatus },
|
|
50
|
+
children
|
|
84
51
|
})
|
|
85
52
|
});
|
|
86
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\
|
|
1
|
+
{"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\n\nimport \"./FormFieldNext.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * Disabled prop\n */\n disabled?: boolean;\n /**\n * Location of the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Readonly prop\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n */\n id?: string;\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltFormFieldNext\");\n\nexport const FormField = forwardRef(\n (\n {\n children,\n className,\n disabled = false,\n labelPlacement = \"top\",\n onBlur,\n onFocus,\n readOnly = false,\n id: idProp,\n validationStatus,\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId();\n const helperTextId = useId();\n\n const a11yProps = useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n }),\n [labelId, helperTextId]\n );\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className\n )}\n {...restProps}\n >\n <FormFieldContextNext.Provider\n value={{ a11yProps, disabled, readOnly, validationStatus }}\n >\n {children}\n </FormFieldContextNext.Provider>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","useId","useMemo","jsx","clsx","capitalize","FormFieldContextNext"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUC,UAAM,EAAA,CAAA;AACtB,IAAA,MAAM,eAAeA,UAAM,EAAA,CAAA;AAE3B,IAAA,MAAM,SAAY,GAAAC,aAAA;AAAA,MAChB,OAAO;AAAA,QACL,iBAAmB,EAAA,OAAA;AAAA,QACnB,kBAAoB,EAAA,YAAA;AAAA,OACtB,CAAA;AAAA,MACA,CAAC,SAAS,YAAY,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,eAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,0CAAqB,QAArB,EAAA;AAAA,QACC,KAAO,EAAA,EAAE,SAAW,EAAA,QAAA,EAAU,UAAU,gBAAiB,EAAA;AAAA,QAExD,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -82,9 +82,10 @@ var FileDropZone = require('./file-drop-zone/FileDropZone.js');
|
|
|
82
82
|
var validators = require('./file-drop-zone/validators.js');
|
|
83
83
|
var FormField = require('./form-field/FormField.js');
|
|
84
84
|
var FormLabel = require('./form-field/FormLabel.js');
|
|
85
|
+
var FormFieldControlWrapper = require('./form-field-next/FormFieldControlWrapper.js');
|
|
85
86
|
var FormFieldNext = require('./form-field-next/FormFieldNext.js');
|
|
86
|
-
require('./form-field-next/FormFieldHelperText.js');
|
|
87
|
-
require('./form-field-next/FormFieldLabel.js');
|
|
87
|
+
var FormFieldHelperText = require('./form-field-next/FormFieldHelperText.js');
|
|
88
|
+
var FormFieldLabel = require('./form-field-next/FormFieldLabel.js');
|
|
88
89
|
var FormFieldContext = require('./form-field-context/FormFieldContext.js');
|
|
89
90
|
var FormFieldContextNext = require('./form-field-context/FormFieldContextNext.js');
|
|
90
91
|
var useFormFieldProps = require('./form-field-context/useFormFieldProps.js');
|
|
@@ -248,7 +249,10 @@ exports.createTotalSizeValidator = validators.createTotalSizeValidator;
|
|
|
248
249
|
exports.FormField = FormField.FormField;
|
|
249
250
|
exports.useFormField = FormField.useFormField;
|
|
250
251
|
exports.FormLabel = FormLabel.FormLabel;
|
|
252
|
+
exports.FormFieldControlWrapper = FormFieldControlWrapper.FormFieldControlWrapper;
|
|
251
253
|
exports.FormFieldNext = FormFieldNext.FormField;
|
|
254
|
+
exports.FormFieldHelperText = FormFieldHelperText.FormFieldHelperText;
|
|
255
|
+
exports.FormFieldLabel = FormFieldLabel.FormFieldLabel;
|
|
252
256
|
exports.FormFieldContext = FormFieldContext.FormFieldContext;
|
|
253
257
|
exports.FormFieldContextNext = FormFieldContextNext.FormFieldContextNext;
|
|
254
258
|
exports.useFormFieldProps = useFormFieldProps.useFormFieldProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n --inputNext-borderColor: var(--salt-editable-borderColor);\n --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n align-items: center;\n background: var(--saltInputNext-background, var(--inputNext-background));\n border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n border-radius: var(--saltInputNext-borderRadius, 0);\n color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n height: var(--saltInputNext-height, var(--salt-size-base));\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n min-width: var(--saltInputNext-minWidth, 8em);\n padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n position: var(--saltInputNext-position, relative);\n width: 100%;\n}\n\n.saltInputNext:hover {\n --inputNext-background: var(--inputNext-background-hover);\n --inputNext-borderColor: var(--
|
|
5
|
+
var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n --inputNext-borderColor: var(--salt-editable-borderColor);\n --inputNext-borderColor-hover: var(--salt-editable-borderColor-hover);\n --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n align-items: center;\n background: var(--saltInputNext-background, var(--inputNext-background));\n border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n border-radius: var(--saltInputNext-borderRadius, 0);\n color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n height: var(--saltInputNext-height, var(--salt-size-base));\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n min-width: var(--saltInputNext-minWidth, 8em);\n padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n position: var(--saltInputNext-position, relative);\n width: 100%;\n}\n\n.saltInputNext:hover {\n --inputNext-background: var(--inputNext-background-hover);\n --inputNext-borderColor: var(--inputNext-borderColor-hover);\n --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n --inputNext-cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInputNext:active {\n --inputNext-background: var(--inputNext-background-active);\n --inputNext-borderColor: var(--salt-editable-borderColor-active);\n --inputNext-borderStyle: var(--salt-editable-borderStyle-active);\n --inputNext-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInputNext-primary {\n --inputNext-background: var(--salt-editable-primary-background);\n --inputNext-background-active: var(--salt-editable-primary-background-active);\n --inputNext-background-hover: var(--salt-editable-primary-background-hover);\n --inputNext-background-disabled: var(--salt-editable-primary-background-disabled);\n --inputNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInputNext-secondary {\n --inputNext-background: var(--salt-editable-secondary-background);\n --inputNext-background-active: var(--salt-editable-secondary-background-active);\n --inputNext-background-hover: var(--salt-editable-secondary-background-active);\n --inputNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n --inputNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInputNext-error,\n.saltInputNext-error:hover {\n --inputNext-background: var(--salt-status-error-background);\n --inputNext-outlineColor: var(--salt-status-error-borderColor);\n --inputNext-borderColor: var(--salt-status-error-borderColor);\n --inputNext-borderColor-hover: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInputNext-warning,\n.saltInputNext-warning:hover {\n --inputNext-background: var(--salt-status-warning-background);\n --inputNext-outlineColor: var(--salt-status-warning-borderColor);\n --inputNext-borderColor: var(--salt-status-warning-borderColor);\n --inputNext-borderColor-hover: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInputNext-success,\n.saltInputNext-success:hover {\n --inputNext-background: var(--salt-status-success-background);\n --inputNext-outlineColor: var(--salt-status-success-borderColor);\n --inputNext-borderColor: var(--salt-status-success-borderColor);\n --inputNext-borderColor-hover: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInputNext-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: var(--saltInputNext-cursor, var(--inputNext-cursor));\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInputNext-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--saltInputNext-textAlign, left);\n width: 100%;\n}\n\n/* Reset in the next class */\n.saltInputNext-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInputNext-input::selection {\n background: var(--saltInputNext-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Styling when focused */\n.saltInputNext-focused {\n --inputNext-outlineColor: var(--salt-focused-outlineColor);\n\n outline-style: var(--saltInputNext-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--saltInputNext-focused-outlineWidth, var(--salt-focused-outlineWidth));\n outline-color: var(--saltInputNext-focused-outlineColor, var(--inputNext-outlineColor));\n outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInputNext.saltInputNext-readOnly {\n --inputNext-background: var(--inputNext-background-readonly);\n --inputNext-background-hover: var(--inputNext-background-readonly);\n --inputNext-borderColor: var(--salt-editable-borderColor-readonly);\n --inputNext-borderColor-hover: var(--salt-editable-borderColor-readonly);\n --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n --inputNext-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInputNext-focused.saltInputNext-readOnly,\n.saltInputNext-disabled .saltInputNext-focused {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input,\n.saltInputNext.saltInputNext-disabled,\n.saltInputNext.saltInputNext-disabled:hover,\n.saltInputNext.saltInputNext-disabled:active {\n --inputNext-background: var(--inputNext-background-disabled);\n --inputNext-borderColor: var(--salt-editable-borderColor-disabled);\n --inputNext-borderColor-hover: var(--salt-editable-borderColor-disabled);\n --inputNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInputNext-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n/* Style applied to input if adornment provided */\n.saltInputNext-withAdornment {\n padding-right: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to start adornments */\n.saltInputNext-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-size-adornmentGap);\n column-gap: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to end adornments */\n.saltInputNext-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-size-adornmentGap);\n column-gap: var(--salt-size-adornmentGap);\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -9,6 +9,7 @@ var core = require('@salt-ds/core');
|
|
|
9
9
|
require('../form-field-context/FormFieldContext.js');
|
|
10
10
|
require('../form-field-context/FormFieldContextNext.js');
|
|
11
11
|
var useFormFieldPropsNext = require('../form-field-context/useFormFieldPropsNext.js');
|
|
12
|
+
var StatusAdornment = require('../status-adornment/StatusAdornment.js');
|
|
12
13
|
require('./InputNext.css.js');
|
|
13
14
|
|
|
14
15
|
const withBaseName = core.makePrefixer("saltInputNext");
|
|
@@ -30,27 +31,28 @@ const Input = React.forwardRef(function Input2({
|
|
|
30
31
|
"aria-owns": ariaOwns,
|
|
31
32
|
className: classNameProp,
|
|
32
33
|
disabled,
|
|
34
|
+
endAdornment,
|
|
33
35
|
id,
|
|
34
36
|
inputProps: inputPropsProp,
|
|
35
|
-
onChange,
|
|
36
37
|
readOnly: readOnlyProp,
|
|
37
38
|
role,
|
|
39
|
+
startAdornment,
|
|
38
40
|
style,
|
|
39
|
-
type = "text",
|
|
40
41
|
value: valueProp,
|
|
41
42
|
defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
|
|
43
|
+
validationStatus: validationStatusProp,
|
|
42
44
|
variant = "primary",
|
|
43
45
|
...other
|
|
44
46
|
}, ref) {
|
|
45
47
|
const {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
} = {}
|
|
48
|
+
disabled: formFieldDisabled,
|
|
49
|
+
readOnly: formFieldReadOnly,
|
|
50
|
+
validationStatus: formFieldValidationStatus,
|
|
51
|
+
a11yProps
|
|
51
52
|
} = useFormFieldPropsNext.useFormFieldPropsNext();
|
|
52
|
-
const isDisabled = disabled ||
|
|
53
|
-
const isReadOnly = readOnlyProp ||
|
|
53
|
+
const isDisabled = disabled || formFieldDisabled;
|
|
54
|
+
const isReadOnly = readOnlyProp || formFieldReadOnly;
|
|
55
|
+
const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
|
|
54
56
|
const [focused, setFocused] = React.useState(false);
|
|
55
57
|
const misplacedAriaProps = {
|
|
56
58
|
"aria-activedescendant": ariaActiveDescendant,
|
|
@@ -59,20 +61,11 @@ const Input = React.forwardRef(function Input2({
|
|
|
59
61
|
role
|
|
60
62
|
};
|
|
61
63
|
const inputProps = mergeA11yProps(
|
|
62
|
-
|
|
64
|
+
a11yProps,
|
|
63
65
|
inputPropsProp,
|
|
64
66
|
misplacedAriaProps
|
|
65
67
|
);
|
|
66
|
-
const {
|
|
67
|
-
onBlur,
|
|
68
|
-
onFocus,
|
|
69
|
-
onKeyDown,
|
|
70
|
-
onKeyUp,
|
|
71
|
-
onMouseUp,
|
|
72
|
-
onMouseMove,
|
|
73
|
-
onMouseDown,
|
|
74
|
-
...restInputProps
|
|
75
|
-
} = inputProps;
|
|
68
|
+
const { onBlur, onChange, onFocus, ...restInputProps } = inputProps;
|
|
76
69
|
const [value, setValue] = core.useControlled({
|
|
77
70
|
controlled: valueProp,
|
|
78
71
|
default: defaultValueProp,
|
|
@@ -82,7 +75,7 @@ const Input = React.forwardRef(function Input2({
|
|
|
82
75
|
const handleChange = (event) => {
|
|
83
76
|
const value2 = event.target.value;
|
|
84
77
|
setValue(value2);
|
|
85
|
-
onChange == null ? void 0 : onChange(event
|
|
78
|
+
onChange == null ? void 0 : onChange(event);
|
|
86
79
|
};
|
|
87
80
|
const handleBlur = (event) => {
|
|
88
81
|
onBlur == null ? void 0 : onBlur(event);
|
|
@@ -92,33 +85,50 @@ const Input = React.forwardRef(function Input2({
|
|
|
92
85
|
onFocus == null ? void 0 : onFocus(event);
|
|
93
86
|
setFocused(true);
|
|
94
87
|
};
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
88
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
96
89
|
className: clsx.clsx(
|
|
97
90
|
withBaseName(),
|
|
98
91
|
{
|
|
99
92
|
[withBaseName("focused")]: !isDisabled && focused,
|
|
100
93
|
[withBaseName("disabled")]: isDisabled,
|
|
101
94
|
[withBaseName("readOnly")]: isReadOnly,
|
|
95
|
+
[withBaseName(validationStatus || "")]: validationStatus,
|
|
102
96
|
[withBaseName(variant)]: variant
|
|
103
97
|
},
|
|
104
98
|
classNameProp
|
|
105
99
|
),
|
|
106
100
|
style,
|
|
107
101
|
...other,
|
|
108
|
-
children:
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
102
|
+
children: [
|
|
103
|
+
startAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
104
|
+
className: withBaseName("startAdornmentContainer"),
|
|
105
|
+
children: startAdornment
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
108
|
+
id,
|
|
109
|
+
className: clsx.clsx(
|
|
110
|
+
withBaseName("input"),
|
|
111
|
+
{ [withBaseName("withAdornment")]: validationStatus },
|
|
112
|
+
inputProps == null ? void 0 : inputProps.className
|
|
113
|
+
),
|
|
114
|
+
disabled: isDisabled,
|
|
115
|
+
readOnly: isReadOnly,
|
|
116
|
+
ref,
|
|
117
|
+
value,
|
|
118
|
+
tabIndex: isReadOnly || isDisabled ? -1 : 0,
|
|
119
|
+
onBlur: handleBlur,
|
|
120
|
+
onChange: handleChange,
|
|
121
|
+
onFocus: !isDisabled ? handleFocus : void 0,
|
|
122
|
+
...restInputProps
|
|
123
|
+
}),
|
|
124
|
+
!isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(StatusAdornment.StatusAdornment, {
|
|
125
|
+
status: validationStatus
|
|
126
|
+
}),
|
|
127
|
+
endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
128
|
+
className: withBaseName("endAdornmentContainer"),
|
|
129
|
+
children: endAdornment
|
|
130
|
+
})
|
|
131
|
+
]
|
|
122
132
|
});
|
|
123
133
|
});
|
|
124
134
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n AriaAttributes,\n ChangeEvent,\n
|
|
1
|
+
{"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n AriaAttributes,\n ChangeEvent,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n ReactNode,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport \"./InputNext.css\";\n\nconst withBaseName = makePrefixer(\"saltInputNext\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"defaultValue\"> {\n /**\n * The value of the `input` element, required for an uncontrolled component.\n */\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /**\n * If `true`, the component is disabled.\n */\n disabled?: HTMLInputElement[\"disabled\"];\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: HTMLInputElement[\"value\"];\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<\n ReturnType<typeof useFormFieldPropsNext>[\"a11yProps\"]\n > = {},\n inputProps: InputProps[\"inputProps\"] = {},\n misplacedAriaProps: AriaAttributes\n) {\n const ariaLabelledBy = clsx(\n a11yProps[\"aria-labelledby\"],\n inputProps[\"aria-labelledby\"]\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // TODO: look at this - The weird filtering is due to TokenizedInputBase\n \"aria-label\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : undefined,\n };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n inputProps: inputPropsProp,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref\n) {\n const {\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n a11yProps,\n } = useFormFieldPropsNext();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n a11yProps,\n inputPropsProp,\n misplacedAriaProps\n );\n\n const { onBlur, onChange, onFocus, ...restInputProps } = inputProps;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(variant)]: variant,\n },\n classNameProp\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n id={id}\n className={clsx(\n withBaseName(\"input\"),\n { [withBaseName(\"withAdornment\")]: validationStatus },\n inputProps?.className\n )}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={ref}\n value={value}\n tabIndex={isReadOnly || isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n {...restInputProps}\n />\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","clsx","forwardRef","Input","useFormFieldPropsNext","useState","useControlled","value","jsxs","jsx","StatusAdornment"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AA4CjD,SAAS,eACP,SAEI,GAAA,IACJ,UAAuC,GAAA,IACvC,kBACA,EAAA;AACA,EAAA,MAAM,cAAiB,GAAAC,SAAA;AAAA,IACrB,SAAU,CAAA,iBAAA,CAAA;AAAA,IACV,UAAW,CAAA,iBAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,kBAAA;AAAA,IACH,GAAG,SAAA;AAAA,IACH,GAAG,UAAA;AAAA,IAEH,YAAc,EAAA,cAAA,GACV,KAAM,CAAA,IAAA,CAAK,IAAI,GAAI,CAAA,cAAA,CAAe,KAAM,CAAA,GAAG,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CACvD,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AACF,CAAA;AAEa,MAAA,KAAA,GAAQC,gBAAyC,CAAA,SAASC,MACrE,CAAA;AAAA,EACE,uBAAyB,EAAA,oBAAA;AAAA,EACzB,eAAiB,EAAA,YAAA;AAAA,EACjB,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,YAAA;AAAA,EACA,EAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EAGP,YAAc,EAAA,gBAAA,GAAmB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,KAAA,CAAA;AAAA,EAChE,gBAAkB,EAAA,oBAAA;AAAA,EAClB,OAAU,GAAA,SAAA;AAAA,EACP,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,IAClB,SAAA;AAAA,MACEC,2CAAsB,EAAA,CAAA;AAE1B,EAAA,MAAM,aAAa,QAAY,IAAA,iBAAA,CAAA;AAC/B,EAAA,MAAM,aAAa,YAAgB,IAAA,iBAAA,CAAA;AAEnC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE5C,EAAA,MAAM,kBAAqB,GAAA;AAAA,IACzB,uBAAyB,EAAA,oBAAA;AAAA,IACzB,eAAiB,EAAA,YAAA;AAAA,IACjB,WAAa,EAAA,QAAA;AAAA,IACb,IAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,UAAa,GAAA,cAAA;AAAA,IACjB,SAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,OAAA,EAAA,GAAY,gBAAmB,GAAA,UAAA,CAAA;AAEzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,gBAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA,CAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAP,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,CAAC,UAAc,IAAA,OAAA;AAAA,QAC1C,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,OAC3B;AAAA,MACA,aAAA;AAAA,KACF;AAAA,IACA,KAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,cAAA,oBACEQ,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,yBAAyB,CAAA;AAAA,QACnD,QAAA,EAAA,cAAA;AAAA,OACH,CAAA;AAAA,sBAEDA,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAR,SAAA;AAAA,UACT,aAAa,OAAO,CAAA;AAAA,UACpB,EAAE,CAAC,YAAa,CAAA,eAAe,IAAI,gBAAiB,EAAA;AAAA,UACpD,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,SAAA;AAAA,SACd;AAAA,QACA,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,UAAA;AAAA,QACV,GAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA,EAAU,UAAc,IAAA,UAAA,GAAa,CAAK,CAAA,GAAA,CAAA;AAAA,QAC1C,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,YAAA;AAAA,QACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AAAA,QACpC,GAAG,cAAA;AAAA,OACN,CAAA;AAAA,MACC,CAAC,UAAA,IAAc,CAAC,UAAA,IAAc,oCAC5BQ,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,MAE5C,gCACED,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,uBAAuB,CAAA;AAAA,QACjD,QAAA,EAAA,YAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
|
|
8
|
+
const ErrorAdornmentIcon = React.forwardRef(function ErrorAdornmentIcon2({ children, className, ...rest }, ref) {
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
10
|
+
className,
|
|
11
|
+
...rest,
|
|
12
|
+
role: "img",
|
|
13
|
+
ref,
|
|
14
|
+
viewBox: "0 0 8 8",
|
|
15
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
16
|
+
"fill-rule": "evenodd",
|
|
17
|
+
"clip-rule": "evenodd",
|
|
18
|
+
d: "M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z"
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
exports.ErrorAdornmentIcon = ErrorAdornmentIcon;
|
|
24
|
+
//# sourceMappingURL=ErrorAdornment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorAdornment.js","sources":["../src/status-adornment/ErrorAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type ErrorAdornmentIconProps = IconProps;\n\nexport const ErrorAdornmentIcon = forwardRef<\n SVGSVGElement,\n ErrorAdornmentIconProps\n>(function ErrorAdornmentIcon(\n { children, className, ...rest }: ErrorAdornmentIconProps,\n ref\n) {\n return (\n <svg className={className} {...rest} role=\"img\" ref={ref} viewBox=\"0 0 8 8\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z\"\n />\n </svg>\n );\n});\n"],"names":["forwardRef","ErrorAdornmentIcon","jsx"],"mappings":";;;;;;;AAKa,MAAA,kBAAA,GAAqBA,iBAGhC,SAASC,mBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,IAAuB,GAAG,IAAA;AAAA,IAAM,IAAK,EAAA,KAAA;AAAA,IAAM,GAAA;AAAA,IAAU,OAAQ,EAAA,SAAA;AAAA,IAChE,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,WAAU,EAAA,SAAA;AAAA,MACV,WAAU,EAAA,SAAA;AAAA,MACV,CAAE,EAAA,uGAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
|
+
|
|
5
|
+
var css_248z = ".saltStatusAdornment {\n fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n display: inline-block;\n position: relative;\n height: var(--salt-icon-size-status-adornment);\n min-height: var(--salt-icon-size-status-adornment);\n}\n\n.saltStatusAdornment-error {\n --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=StatusAdornment.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusAdornment.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|