@fluentui/react-field 9.0.0-alpha.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +119 -0
- package/CHANGELOG.md +36 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/Spec.md +354 -0
- package/dist/index.d.ts +236 -0
- package/lib/CheckboxField.js +2 -0
- package/lib/CheckboxField.js.map +1 -0
- package/lib/ComboboxField.js +2 -0
- package/lib/ComboboxField.js.map +1 -0
- package/lib/Field.js +2 -0
- package/lib/Field.js.map +1 -0
- package/lib/InputField.js +2 -0
- package/lib/InputField.js.map +1 -0
- package/lib/RadioGroupField.js +2 -0
- package/lib/RadioGroupField.js.map +1 -0
- package/lib/SelectField.js +2 -0
- package/lib/SelectField.js.map +1 -0
- package/lib/SliderField.js +2 -0
- package/lib/SliderField.js.map +1 -0
- package/lib/SpinButtonField.js +2 -0
- package/lib/SpinButtonField.js.map +1 -0
- package/lib/SwitchField.js +2 -0
- package/lib/SwitchField.js.map +1 -0
- package/lib/TextareaField.js +2 -0
- package/lib/TextareaField.js.map +1 -0
- package/lib/components/CheckboxField/CheckboxField.js +32 -0
- package/lib/components/CheckboxField/CheckboxField.js.map +1 -0
- package/lib/components/CheckboxField/index.js +2 -0
- package/lib/components/CheckboxField/index.js.map +1 -0
- package/lib/components/ComboboxField/ComboboxField.js +14 -0
- package/lib/components/ComboboxField/ComboboxField.js.map +1 -0
- package/lib/components/ComboboxField/index.js +2 -0
- package/lib/components/ComboboxField/index.js.map +1 -0
- package/lib/components/Field/Field.types.js +2 -0
- package/lib/components/Field/Field.types.js.map +1 -0
- package/lib/components/Field/SlotComponent.types.js +2 -0
- package/lib/components/Field/SlotComponent.types.js.map +1 -0
- package/lib/components/Field/index.js +5 -0
- package/lib/components/Field/index.js.map +1 -0
- package/lib/components/Field/renderField.js +20 -0
- package/lib/components/Field/renderField.js.map +1 -0
- package/lib/components/Field/useField.js +139 -0
- package/lib/components/Field/useField.js.map +1 -0
- package/lib/components/Field/useFieldStyles.js +121 -0
- package/lib/components/Field/useFieldStyles.js.map +1 -0
- package/lib/components/InputField/InputField.js +14 -0
- package/lib/components/InputField/InputField.js.map +1 -0
- package/lib/components/InputField/index.js +2 -0
- package/lib/components/InputField/index.js.map +1 -0
- package/lib/components/RadioGroupField/RadioGroupField.js +15 -0
- package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -0
- package/lib/components/RadioGroupField/index.js +2 -0
- package/lib/components/RadioGroupField/index.js.map +1 -0
- package/lib/components/SelectField/SelectField.js +14 -0
- package/lib/components/SelectField/SelectField.js.map +1 -0
- package/lib/components/SelectField/index.js +2 -0
- package/lib/components/SelectField/index.js.map +1 -0
- package/lib/components/SliderField/SliderField.js +14 -0
- package/lib/components/SliderField/SliderField.js.map +1 -0
- package/lib/components/SliderField/index.js +2 -0
- package/lib/components/SliderField/index.js.map +1 -0
- package/lib/components/SpinButtonField/SpinButtonField.js +14 -0
- package/lib/components/SpinButtonField/SpinButtonField.js.map +1 -0
- package/lib/components/SpinButtonField/index.js +2 -0
- package/lib/components/SpinButtonField/index.js.map +1 -0
- package/lib/components/SwitchField/SwitchField.js +14 -0
- package/lib/components/SwitchField/SwitchField.js.map +1 -0
- package/lib/components/SwitchField/index.js +2 -0
- package/lib/components/SwitchField/index.js.map +1 -0
- package/lib/components/TextareaField/TextareaField.js +14 -0
- package/lib/components/TextareaField/TextareaField.js.map +1 -0
- package/lib/components/TextareaField/index.js +2 -0
- package/lib/components/TextareaField/index.js.map +1 -0
- package/lib/index.js +11 -0
- package/lib/index.js.map +1 -0
- package/lib-commonjs/CheckboxField.js +10 -0
- package/lib-commonjs/CheckboxField.js.map +1 -0
- package/lib-commonjs/ComboboxField.js +10 -0
- package/lib-commonjs/ComboboxField.js.map +1 -0
- package/lib-commonjs/Field.js +10 -0
- package/lib-commonjs/Field.js.map +1 -0
- package/lib-commonjs/InputField.js +10 -0
- package/lib-commonjs/InputField.js.map +1 -0
- package/lib-commonjs/RadioGroupField.js +10 -0
- package/lib-commonjs/RadioGroupField.js.map +1 -0
- package/lib-commonjs/SelectField.js +10 -0
- package/lib-commonjs/SelectField.js.map +1 -0
- package/lib-commonjs/SliderField.js +10 -0
- package/lib-commonjs/SliderField.js.map +1 -0
- package/lib-commonjs/SpinButtonField.js +10 -0
- package/lib-commonjs/SpinButtonField.js.map +1 -0
- package/lib-commonjs/SwitchField.js +10 -0
- package/lib-commonjs/SwitchField.js.map +1 -0
- package/lib-commonjs/TextareaField.js +10 -0
- package/lib-commonjs/TextareaField.js.map +1 -0
- package/lib-commonjs/components/CheckboxField/CheckboxField.js +42 -0
- package/lib-commonjs/components/CheckboxField/CheckboxField.js.map +1 -0
- package/lib-commonjs/components/CheckboxField/index.js +10 -0
- package/lib-commonjs/components/CheckboxField/index.js.map +1 -0
- package/lib-commonjs/components/ComboboxField/ComboboxField.js +24 -0
- package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -0
- package/lib-commonjs/components/ComboboxField/index.js +10 -0
- package/lib-commonjs/components/ComboboxField/index.js.map +1 -0
- package/lib-commonjs/components/Field/Field.types.js +6 -0
- package/lib-commonjs/components/Field/Field.types.js.map +1 -0
- package/lib-commonjs/components/Field/SlotComponent.types.js +6 -0
- package/lib-commonjs/components/Field/SlotComponent.types.js.map +1 -0
- package/lib-commonjs/components/Field/index.js +16 -0
- package/lib-commonjs/components/Field/index.js.map +1 -0
- package/lib-commonjs/components/Field/renderField.js +31 -0
- package/lib-commonjs/components/Field/renderField.js.map +1 -0
- package/lib-commonjs/components/Field/useField.js +154 -0
- package/lib-commonjs/components/Field/useField.js.map +1 -0
- package/lib-commonjs/components/Field/useFieldStyles.js +134 -0
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -0
- package/lib-commonjs/components/InputField/InputField.js +24 -0
- package/lib-commonjs/components/InputField/InputField.js.map +1 -0
- package/lib-commonjs/components/InputField/index.js +10 -0
- package/lib-commonjs/components/InputField/index.js.map +1 -0
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js +25 -0
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -0
- package/lib-commonjs/components/RadioGroupField/index.js +10 -0
- package/lib-commonjs/components/RadioGroupField/index.js.map +1 -0
- package/lib-commonjs/components/SelectField/SelectField.js +24 -0
- package/lib-commonjs/components/SelectField/SelectField.js.map +1 -0
- package/lib-commonjs/components/SelectField/index.js +10 -0
- package/lib-commonjs/components/SelectField/index.js.map +1 -0
- package/lib-commonjs/components/SliderField/SliderField.js +24 -0
- package/lib-commonjs/components/SliderField/SliderField.js.map +1 -0
- package/lib-commonjs/components/SliderField/index.js +10 -0
- package/lib-commonjs/components/SliderField/index.js.map +1 -0
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js +24 -0
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -0
- package/lib-commonjs/components/SpinButtonField/index.js +10 -0
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -0
- package/lib-commonjs/components/SwitchField/SwitchField.js +24 -0
- package/lib-commonjs/components/SwitchField/SwitchField.js.map +1 -0
- package/lib-commonjs/components/SwitchField/index.js +10 -0
- package/lib-commonjs/components/SwitchField/index.js.map +1 -0
- package/lib-commonjs/components/TextareaField/TextareaField.js +24 -0
- package/lib-commonjs/components/TextareaField/TextareaField.js.map +1 -0
- package/lib-commonjs/components/TextareaField/index.js +10 -0
- package/lib-commonjs/components/TextareaField/index.js.map +1 -0
- package/lib-commonjs/index.js +169 -0
- package/lib-commonjs/index.js.map +1 -0
- package/package.json +64 -0
@@ -0,0 +1,121 @@
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
3
|
+
export const getFieldClassNames = name => ({
|
4
|
+
root: `fui-${name}`,
|
5
|
+
control: `fui-${name}__control`,
|
6
|
+
label: `fui-${name}__label`,
|
7
|
+
validationMessage: `fui-${name}__validationMessage`,
|
8
|
+
validationMessageIcon: `fui-${name}__validationMessageIcon`,
|
9
|
+
hint: `fui-${name}__hint`
|
10
|
+
});
|
11
|
+
/**
|
12
|
+
* Styles for the root slot
|
13
|
+
*/
|
14
|
+
|
15
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
16
|
+
"base": {
|
17
|
+
"mc9l5x": "fwk3njj",
|
18
|
+
"Bxotwcr": "f14np9u9",
|
19
|
+
"B7hvi0a": "f1m2n5bn"
|
20
|
+
},
|
21
|
+
"horizontal": {
|
22
|
+
"wkccdc": "fai812u",
|
23
|
+
"Budl1dq": "fckz59x"
|
24
|
+
},
|
25
|
+
"secondColumn": {
|
26
|
+
"Br312pm": "fd46tj4"
|
27
|
+
}
|
28
|
+
}, {
|
29
|
+
"d": [".fwk3njj{display:inline-grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
|
30
|
+
});
|
31
|
+
|
32
|
+
const useLabelStyles = /*#__PURE__*/__styles({
|
33
|
+
"base": {
|
34
|
+
"B6of3ja": "fg30ohd",
|
35
|
+
"jrapky": "fyacil5"
|
36
|
+
},
|
37
|
+
"horizontal": {
|
38
|
+
"Ijaq50": "f16hsg94",
|
39
|
+
"nk6f5a": "f1nzqi2z",
|
40
|
+
"t21cq0": ["fkujibs", "f199hnxi"],
|
41
|
+
"qb2dma": "f9h729m",
|
42
|
+
"Bdqf98w": "fhb5wj7"
|
43
|
+
}
|
44
|
+
}, {
|
45
|
+
"d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
46
|
+
});
|
47
|
+
|
48
|
+
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
49
|
+
"base": {
|
50
|
+
"B6of3ja": "fg30ohd",
|
51
|
+
"sj55zd": "f11d4kpn",
|
52
|
+
"Bahqtrf": "fk6fouc",
|
53
|
+
"Be2twd7": "fy9rknc",
|
54
|
+
"Bhrd7zp": "figsok6",
|
55
|
+
"Bg96gwp": "fwrc4pm"
|
56
|
+
},
|
57
|
+
"error": {
|
58
|
+
"sj55zd": "f1hcrxcs"
|
59
|
+
}
|
60
|
+
}, {
|
61
|
+
"d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
|
62
|
+
});
|
63
|
+
|
64
|
+
const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
65
|
+
"base": {
|
66
|
+
"Be2twd7": "f1ugzwwg",
|
67
|
+
"Bg96gwp": "fp4gqsa",
|
68
|
+
"ha4doy": "fmrv4ls",
|
69
|
+
"t21cq0": ["fm0x6gh", "fbyavb5"]
|
70
|
+
},
|
71
|
+
"error": {
|
72
|
+
"sj55zd": "f1hcrxcs"
|
73
|
+
},
|
74
|
+
"warning": {
|
75
|
+
"sj55zd": "f1k5f75o"
|
76
|
+
},
|
77
|
+
"success": {
|
78
|
+
"sj55zd": "ffmvakt"
|
79
|
+
}
|
80
|
+
}, {
|
81
|
+
"d": [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
82
|
+
});
|
83
|
+
/**
|
84
|
+
* Apply styling to the Field slots based on the state
|
85
|
+
*/
|
86
|
+
|
87
|
+
|
88
|
+
export const useFieldStyles_unstable = state => {
|
89
|
+
const classNames = state.classNames;
|
90
|
+
const validationState = state.validationState;
|
91
|
+
const horizontal = state.orientation === 'horizontal';
|
92
|
+
const rootStyles = useRootStyles();
|
93
|
+
state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
94
|
+
|
95
|
+
if (state.control) {
|
96
|
+
state.control.className = mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
|
97
|
+
}
|
98
|
+
|
99
|
+
const labelStyles = useLabelStyles();
|
100
|
+
|
101
|
+
if (state.label) {
|
102
|
+
state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
103
|
+
}
|
104
|
+
|
105
|
+
const validationMessageIconStyles = useValidationMessageIconStyles();
|
106
|
+
|
107
|
+
if (state.validationMessageIcon) {
|
108
|
+
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
109
|
+
}
|
110
|
+
|
111
|
+
const secondaryTextStyles = useSecondaryTextStyles();
|
112
|
+
|
113
|
+
if (state.validationMessage) {
|
114
|
+
state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
115
|
+
}
|
116
|
+
|
117
|
+
if (state.hint) {
|
118
|
+
state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
|
119
|
+
}
|
120
|
+
};
|
121
|
+
//# sourceMappingURL=useFieldStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoFlow: 'row',\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldComponent>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldComponent>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Input } from '@fluentui/react-input';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const inputFieldClassNames = /*#__PURE__*/getFieldClassNames('InputField');
|
5
|
+
export const InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: Input,
|
8
|
+
classNames: inputFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
InputField.displayName = 'InputField';
|
14
|
+
//# sourceMappingURL=InputField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,QAAsB,uBAAtB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,oBAAoB,gBAAG,kBAAkB,CAAC,YAAD,CAA/C;AAEP,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,KAAb;IAAoB,UAAU,EAAE;EAAhC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJ+D,CAAzD;AAMP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { Input } from '@fluentui/react-input';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/InputField/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './InputField';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { RadioGroup } from '@fluentui/react-radio';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const radioGroupFieldClassNames = /*#__PURE__*/getFieldClassNames('RadioGroupField');
|
5
|
+
export const RadioGroupField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: RadioGroup,
|
8
|
+
classNames: radioGroupFieldClassNames,
|
9
|
+
labelConnection: 'aria-labelledby'
|
10
|
+
});
|
11
|
+
useFieldStyles_unstable(state);
|
12
|
+
return renderField_unstable(state);
|
13
|
+
});
|
14
|
+
RadioGroupField.displayName = 'RadioGroupField';
|
15
|
+
//# sourceMappingURL=RadioGroupField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,uBAA3B;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,yBAAyB,gBAAG,kBAAkB,CAAC,iBAAD,CAApD;AAEP,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,UAD+B;IAE1C,UAAU,EAAE,yBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAAb,CAA/B;EAKA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CARyE,CAAnE;AAUP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { RadioGroup } from '@fluentui/react-radio';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: RadioGroup,\n classNames: radioGroupFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/RadioGroupField/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './RadioGroupField';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Select } from '@fluentui/react-select';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const selectFieldClassNames = /*#__PURE__*/getFieldClassNames('SelectField');
|
5
|
+
export const SelectField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: Select,
|
8
|
+
classNames: selectFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
SelectField.displayName = 'SelectField';
|
14
|
+
//# sourceMappingURL=SelectField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Select } from '@fluentui/react-select';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SelectField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './SelectField';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Slider } from '@fluentui/react-slider';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const sliderFieldClassNames = /*#__PURE__*/getFieldClassNames('SliderField');
|
5
|
+
export const SliderField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: Slider,
|
8
|
+
classNames: sliderFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
SliderField.displayName = 'SliderField';
|
14
|
+
//# sourceMappingURL=SliderField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/SliderField/SliderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Slider } from '@fluentui/react-slider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SliderFieldProps = FieldProps<typeof Slider>;\n\nexport const sliderFieldClassNames = getFieldClassNames('SliderField');\n\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Slider, classNames: sliderFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSliderField.displayName = 'SliderField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SliderField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './SliderField';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { SpinButton } from '@fluentui/react-spinbutton';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const spinButtonFieldClassNames = /*#__PURE__*/getFieldClassNames('SpinButtonField');
|
5
|
+
export const SpinButtonField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: SpinButton,
|
8
|
+
classNames: spinButtonFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
SpinButtonField.displayName = 'SpinButtonField';
|
14
|
+
//# sourceMappingURL=SpinButtonField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/SpinButtonField/SpinButtonField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,4BAA3B;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,yBAAyB,gBAAG,kBAAkB,CAAC,iBAAD,CAApD;AAEP,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,UAAb;IAAyB,UAAU,EAAE;EAArC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJyE,CAAnE;AAMP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { SpinButton } from '@fluentui/react-spinbutton';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SpinButtonFieldProps = FieldProps<typeof SpinButton>;\n\nexport const spinButtonFieldClassNames = getFieldClassNames('SpinButtonField');\n\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: SpinButton, classNames: spinButtonFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSpinButtonField.displayName = 'SpinButtonField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SpinButtonField/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './SpinButtonField';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Switch } from '@fluentui/react-switch';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const switchFieldClassNames = /*#__PURE__*/getFieldClassNames('SwitchField');
|
5
|
+
export const SwitchField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: Switch,
|
8
|
+
classNames: switchFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
SwitchField.displayName = 'SwitchField';
|
14
|
+
//# sourceMappingURL=SwitchField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Switch } from '@fluentui/react-switch';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SwitchFieldProps = FieldProps<typeof Switch>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SwitchField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './SwitchField';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Textarea } from '@fluentui/react-textarea';
|
3
|
+
import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
|
4
|
+
export const textareaFieldClassNames = /*#__PURE__*/getFieldClassNames('TextareaField');
|
5
|
+
export const TextareaField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
6
|
+
const state = useField_unstable(props, ref, {
|
7
|
+
component: Textarea,
|
8
|
+
classNames: textareaFieldClassNames
|
9
|
+
});
|
10
|
+
useFieldStyles_unstable(state);
|
11
|
+
return renderField_unstable(state);
|
12
|
+
});
|
13
|
+
TextareaField.displayName = 'TextareaField';
|
14
|
+
//# sourceMappingURL=TextareaField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/TextareaField/TextareaField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,0BAAzB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJqE,CAA/D;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Textarea } from '@fluentui/react-textarea';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type TextareaFieldProps = FieldProps<typeof Textarea>;\n\nexport const textareaFieldClassNames = getFieldClassNames('TextareaField');\n\nexport const TextareaField: ForwardRefComponent<TextareaFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Textarea, classNames: textareaFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nTextareaField.displayName = 'TextareaField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TextareaField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './TextareaField';\n"]}
|
package/lib/index.js
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
|
2
|
+
export { CheckboxField, checkboxFieldClassNames } from './CheckboxField';
|
3
|
+
export { ComboboxField, comboboxFieldClassNames } from './ComboboxField';
|
4
|
+
export { InputField, inputFieldClassNames } from './InputField';
|
5
|
+
export { RadioGroupField, radioGroupFieldClassNames } from './RadioGroupField';
|
6
|
+
export { SelectField, selectFieldClassNames } from './SelectField';
|
7
|
+
export { SliderField, sliderFieldClassNames } from './SliderField';
|
8
|
+
export { SpinButtonField, spinButtonFieldClassNames } from './SpinButtonField';
|
9
|
+
export { SwitchField, switchFieldClassNames } from './SwitchField';
|
10
|
+
export { TextareaField, textareaFieldClassNames } from './TextareaField';
|
11
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG/G,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAGzE,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAGzE,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAG/E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAG/E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field';\n\nexport { CheckboxField, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps } from './CheckboxField';\n\nexport { ComboboxField, comboboxFieldClassNames } from './ComboboxField';\nexport type { ComboboxFieldProps } from './ComboboxField';\n\nexport { InputField, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps } from './InputField';\n\nexport { RadioGroupField, radioGroupFieldClassNames } from './RadioGroupField';\nexport type { RadioGroupFieldProps } from './RadioGroupField';\n\nexport { SelectField, selectFieldClassNames } from './SelectField';\nexport type { SelectFieldProps } from './SelectField';\n\nexport { SliderField, sliderFieldClassNames } from './SliderField';\nexport type { SliderFieldProps } from './SliderField';\n\nexport { SpinButtonField, spinButtonFieldClassNames } from './SpinButtonField';\nexport type { SpinButtonFieldProps } from './SpinButtonField';\n\nexport { SwitchField, switchFieldClassNames } from './SwitchField';\nexport type { SwitchFieldProps } from './SwitchField';\n\nexport { TextareaField, textareaFieldClassNames } from './TextareaField';\nexport type { TextareaFieldProps } from './TextareaField';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["CheckboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CheckboxField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["ComboboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ComboboxField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["Field.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Field/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["InputField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/InputField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./components/RadioGroupField/index"), exports);
|
10
|
+
//# sourceMappingURL=RadioGroupField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["RadioGroupField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/RadioGroupField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["SelectField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SelectField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["SliderField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SliderField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./components/SpinButtonField/index"), exports);
|
10
|
+
//# sourceMappingURL=SpinButtonField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["SpinButtonField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SpinButtonField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["SwitchField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SwitchField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["TextareaField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TextareaField/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const react_checkbox_1 = /*#__PURE__*/require("@fluentui/react-checkbox");
|
11
|
+
|
12
|
+
const Field_1 = /*#__PURE__*/require("../../Field");
|
13
|
+
|
14
|
+
exports.checkboxFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('CheckboxField');
|
15
|
+
exports.CheckboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
16
|
+
const {
|
17
|
+
fieldLabel,
|
18
|
+
required,
|
19
|
+
label,
|
20
|
+
control,
|
21
|
+
...restOfProps
|
22
|
+
} = props;
|
23
|
+
props = {
|
24
|
+
// Use the fieldLabel prop as the Field's label
|
25
|
+
label: fieldLabel,
|
26
|
+
// Use the label prop as the Checkbox's label
|
27
|
+
control: {
|
28
|
+
label,
|
29
|
+
required,
|
30
|
+
...control
|
31
|
+
},
|
32
|
+
...restOfProps
|
33
|
+
};
|
34
|
+
const state = Field_1.useField_unstable(props, ref, {
|
35
|
+
component: react_checkbox_1.Checkbox,
|
36
|
+
classNames: exports.checkboxFieldClassNames
|
37
|
+
});
|
38
|
+
Field_1.useFieldStyles_unstable(state);
|
39
|
+
return Field_1.renderField_unstable(state);
|
40
|
+
});
|
41
|
+
exports.CheckboxField.displayName = 'CheckboxField';
|
42
|
+
//# sourceMappingURL=CheckboxField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,OAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,gBAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n /**\n * The Checkbox's label.\n */\n label?: CheckboxProps['label'];\n\n /**\n * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n * It is recommended to only set the `label` prop, and not `fieldLabel`.\n */\n fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n props = {\n // Use the fieldLabel prop as the Field's label\n label: fieldLabel,\n // Use the label prop as the Checkbox's label\n control: { label, required, ...control },\n ...restOfProps,\n };\n\n const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/CheckboxField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CheckboxField';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.ComboboxField = exports.comboboxFieldClassNames = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const react_combobox_1 = /*#__PURE__*/require("@fluentui/react-combobox");
|
11
|
+
|
12
|
+
const Field_1 = /*#__PURE__*/require("../../Field");
|
13
|
+
|
14
|
+
exports.comboboxFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('ComboboxField');
|
15
|
+
exports.ComboboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
16
|
+
const state = Field_1.useField_unstable(props, ref, {
|
17
|
+
component: react_combobox_1.Combobox,
|
18
|
+
classNames: exports.comboboxFieldClassNames
|
19
|
+
});
|
20
|
+
Field_1.useFieldStyles_unstable(state);
|
21
|
+
return Field_1.renderField_unstable(state);
|
22
|
+
});
|
23
|
+
exports.ComboboxField.displayName = 'ComboboxField';
|
24
|
+
//# sourceMappingURL=ComboboxField.js.map
|