Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Field: function() {
return _index.Field;
},
fieldClassNames: function() {
return _index.fieldClassNames;
},
renderField_unstable: function() {
return _index.renderField_unstable;
},
useFieldStyles_unstable: function() {
return _index.useFieldStyles_unstable;
},
useField_unstable: function() {
return _index.useField_unstable;
}
});
const _index = require("./components/Field/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n FieldContextValue,\n FieldContextValues,\n FieldControlProps,\n FieldProps,\n FieldSlots,\n FieldState,\n} from './components/Field/index';\nexport {\n Field,\n fieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASEA,KAAK;eAALA,YAAK;;IACLC,eAAe;eAAfA,sBAAe;;IACfC,oBAAoB;eAApBA,2BAAoB;;IACpBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iBAAiB;eAAjBA,wBAAiB;;;uBACZ"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Field", {
enumerable: true,
get: function() {
return Field;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderField = require("./renderField");
const _useField = require("./useField");
const _useFieldStylesstyles = require("./useFieldStyles.styles");
const _index = require("../../contexts/index");
const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useField.useField_unstable)(props, ref);
(0, _useFieldStylesstyles.useFieldStyles_unstable)(state);
const context = (0, _index.useFieldContextValues_unstable)(state);
return (0, _renderField.renderField_unstable)(state, context);
});
Field.displayName = 'Field';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","context","useFieldContextValues_unstable","renderField_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BAGc;0BACH;sCACM;uBACO;AAExC,MAAMA,QAAAA,WAAAA,GAAyCC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQC,IAAAA,2BAAAA,EAAkBH,OAAOC;IACvCG,IAAAA,6CAAAA,EAAwBF;IACxB,MAAMG,UAAUC,IAAAA,qCAAAA,EAA+BJ;IAC/C,OAAOK,IAAAA,iCAAAA,EAAqBL,OAAOG;AACrC;AAEAR,MAAMW,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n *\n * For other controls, there are two options:\n * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n * `<Field>{(props) => <MyInput {...props} />}</Field>`\n * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n * `props = useFieldControlProps_unstable(props);`\n */\n children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n * announced by screen readers.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n Pick<FieldProps, 'children'> & {\n /**\n * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n */\n generatedControlId: string;\n };\n\nexport type FieldContextValue = Readonly<\n Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n /** The label's for prop. Undefined if there is no label. */\n labelFor?: string;\n /** The label's id prop. Undefined if there is no label. */\n labelId?: string;\n /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n validationMessageId?: string;\n /** The hint's id prop. Undefined if there is no hint. */\n hintId?: string;\n }\n>;\n\nexport type FieldContextValues = {\n field: FieldContextValue;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Field: function() {
return _Field.Field;
},
fieldClassNames: function() {
return _useFieldStylesstyles.fieldClassNames;
},
renderField_unstable: function() {
return _renderField.renderField_unstable;
},
useFieldStyles_unstable: function() {
return _useFieldStylesstyles.useFieldStyles_unstable;
},
useField_unstable: function() {
return _useField.useField_unstable;
}
});
const _Field = require("./Field");
const _renderField = require("./renderField");
const _useField = require("./useField");
const _useFieldStylesstyles = require("./useFieldStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n FieldContextValue,\n FieldContextValues,\n FieldControlProps,\n FieldProps,\n FieldSlots,\n FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQSA,KAAK;eAALA,YAAK;;IAGLC,eAAe;eAAfA,qCAAe;;IAFfC,oBAAoB;eAApBA,iCAAoB;;IAEHC,uBAAuB;eAAvBA,6CAAuB;;IADxCC,iBAAiB;eAAjBA,2BAAiB;;;uBAFJ;6BACe;0BACH;sCACuB"}
@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderField_unstable", {
enumerable: true,
get: function() {
return renderField_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../../contexts/index");
const renderField_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
let { children } = state;
if (typeof children === 'function') {
children = children((0, _index.getFieldControlProps)(contextValues.field) || {});
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.FieldContextProvider, {
value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
children,
state.validationMessage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.validationMessage, {
children: [
state.validationMessageIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.validationMessageIcon, {}),
state.validationMessage.children
]
}),
state.hint && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.hint, {})
]
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues) => {\n assertSlots<FieldSlots>(state);\n\n let { children } = state;\n if (typeof children === 'function') {\n children = children(getFieldControlProps(contextValues.field) || {});\n }\n\n return (\n <FieldContextProvider value={contextValues?.field}>\n <state.root>\n {state.label && <state.label />}\n {children}\n {state.validationMessage && (\n <state.validationMessage>\n {state.validationMessageIcon && <state.validationMessageIcon />}\n {state.validationMessage.children}\n </state.validationMessage>\n )}\n\n {state.hint && <state.hint />}\n </state.root>\n </FieldContextProvider>\n );\n};\n"],"names":["renderField_unstable","state","contextValues","assertSlots","children","getFieldControlProps","field","_jsx","FieldContextProvider","value","_jsxs","root","label","validationMessage","validationMessageIcon","hint"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;uBAC+B;AAMpD,MAAMA,uBAAuB,CAACC,OAAmBC;IACtDC,IAAAA,2BAAAA,EAAwBF;IAExB,IAAI,EAAEG,QAAQ,EAAE,GAAGH;IACnB,IAAI,OAAOG,aAAa,YAAY;QAClCA,WAAWA,SAASC,IAAAA,2BAAAA,EAAqBH,cAAcI,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,GACEC,IAAAA,eAAA,EAACC,2BAAAA,EAAAA;QAAqBC,OAAOP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeI,KAAK;kBAC/C,WAAA,GAAAI,IAAAA,gBAAA,EAACT,MAAMU,IAAI,EAAA;;gBACRV,MAAMW,KAAK,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACN,MAAMW,KAAK,EAAA,CAAA;gBAC3BR;gBACAH,MAAMY,iBAAiB,IAAA,WAAA,GACtBH,IAAAA,gBAAA,EAACT,MAAMY,iBAAiB,EAAA;;wBACrBZ,MAAMa,qBAAqB,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACN,MAAMa,qBAAqB,EAAA,CAAA;wBAC3Db,MAAMY,iBAAiB,CAACT,QAAQ;;;gBAIpCH,MAAMc,IAAI,IAAA,WAAA,GAAIR,IAAAA,eAAA,EAACN,MAAMc,IAAI,EAAA,CAAA;;;;AAIlC"}
@@ -0,0 +1,84 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useField_unstable", {
enumerable: true,
get: function() {
return useField_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const _reactlabel = require("@fluentui/react-label");
const _reactutilities = require("@fluentui/react-utilities");
const validationMessageIcons = {
error: /*#__PURE__*/ _react.createElement(_reacticons.ErrorCircle12Filled, null),
warning: /*#__PURE__*/ _react.createElement(_reacticons.Warning12Filled, null),
success: /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircle12Filled, null),
none: undefined
};
const useField_unstable = (props, ref)=>{
const { children, orientation = 'vertical', required = false, validationState = props.validationMessage ? 'error' : 'none', size = 'medium' } = props;
const baseId = (0, _reactutilities.useId)('field-');
const generatedControlId = baseId + '__control';
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
...props,
ref
}, /*excludedPropNames:*/ [
'children'
]), {
elementType: 'div'
});
const label = _reactutilities.slot.optional(props.label, {
defaultProps: {
htmlFor: generatedControlId,
id: baseId + '__label',
required,
size
},
elementType: _reactlabel.Label
});
const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
defaultProps: {
id: baseId + '__validationMessage',
role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
},
elementType: 'div'
});
const hint = _reactutilities.slot.optional(props.hint, {
defaultProps: {
id: baseId + '__hint'
},
elementType: 'div'
});
const defaultIcon = validationMessageIcons[validationState];
const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
renderByDefault: !!defaultIcon,
defaultProps: {
children: defaultIcon
},
elementType: 'span'
});
return {
children,
generatedControlId,
orientation,
required,
size,
validationState,
components: {
root: 'div',
label: _reactlabel.Label,
validationMessage: 'div',
validationMessageIcon: 'span',
hint: 'div'
},
root,
label,
validationMessageIcon,
validationMessage,
hint
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required = false,\n validationState = props.validationMessage ? 'error' : 'none',\n size = 'medium',\n } = props;\n\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n\n const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n elementType: 'div',\n });\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n elementType: Label,\n });\n const validationMessage = slot.optional(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n },\n elementType: 'div',\n });\n const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n renderByDefault: !!defaultIcon,\n defaultProps: { children: defaultIcon },\n elementType: 'span',\n });\n\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\n validationState,\n components: { root: 'div', label: Label, validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"names":["useField_unstable","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","generatedControlId","root","slot","always","getIntrinsicElementProps","elementType","label","optional","defaultProps","htmlFor","id","Label","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuBaA;;;eAAAA;;;;iEAvBU;4BAEuD;4BACxD;gCACgC;AAGtD,MAAMC,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAOC,OAAAC,aAAA,CAACC,+BAAAA,EAAAA;IACRC,SAAAA,WAAAA,GAASH,OAAAC,aAAA,CAACG,2BAAAA,EAAAA;IACVC,SAAAA,WAAAA,GAASL,OAAAC,aAAA,CAACK,mCAAAA,EAAAA;IACVC,MAAMC;AACR;AAWO,MAAMX,oBAAoB,CAACY,OAAmBC;IACnD,MAAM,EACJC,QAAQ,EACRC,cAAc,UAAU,EACxBC,WAAW,KAAK,EAChBC,kBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,EAC5DC,OAAO,QAAQ,EAChB,GAAGP;IAEJ,MAAMQ,SAASC,IAAAA,qBAAAA,EAAM;IACrB,MAAMC,qBAAqBF,SAAS;IAEpC,MAAMG,OAAOC,oBAAAA,CAAKC,MAAM,CAACC,IAAAA,wCAAAA,EAAyB,OAAO;QAAE,GAAGd,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHc,aAAa;IACf;IACA,MAAMC,QAAQJ,oBAAAA,CAAKK,QAAQ,CAACjB,MAAMgB,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAAST;YAAoBU,IAAIZ,SAAS;YAAWJ;YAAUG;QAAK;QACpFQ,aAAaM,iBAAAA;IACf;IACA,MAAMf,oBAAoBM,oBAAAA,CAAKK,QAAQ,CAACjB,MAAMM,iBAAiB,EAAE;QAC/DY,cAAc;YACZE,IAAIZ,SAAS;YACbc,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUN;QACjF;QACAgB,aAAa;IACf;IACA,MAAMQ,OAAOX,oBAAAA,CAAKK,QAAQ,CAACjB,MAAMuB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIZ,SAAS;QAAS;QAAGO,aAAa;IAAM;IACrG,MAAMS,cAAcnC,sBAAsB,CAACgB,gBAAgB;IAC3D,MAAMoB,wBAAwBb,oBAAAA,CAAKK,QAAQ,CAACjB,MAAMyB,qBAAqB,EAAE;QACvEC,iBAAiB,CAAC,CAACF;QACnBN,cAAc;YAAEhB,UAAUsB;QAAY;QACtCT,aAAa;IACf;IAEA,OAAO;QACLb;QACAQ;QACAP;QACAC;QACAG;QACAF;QACAsB,YAAY;YAAEhB,MAAM;YAAOK,OAAOK,iBAAAA;YAAOf,mBAAmB;YAAOmB,uBAAuB;YAAQF,MAAM;QAAM;QAC9GZ;QACAK;QACAS;QACAnB;QACAiB;IACF;AACF"}
@@ -0,0 +1,170 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
fieldClassNames: function() {
return fieldClassNames;
},
useFieldStyles_unstable: function() {
return useFieldStyles_unstable;
}
});
const _react = require("@griffel/react");
const fieldClassNames = {
root: `fui-Field`,
label: `fui-Field__label`,
validationMessage: `fui-Field__validationMessage`,
validationMessageIcon: `fui-Field__validationMessageIcon`,
hint: `fui-Field__hint`
};
// Size of the icon in the validation message
const iconSize = '12px';
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "f13qh94s"
},
horizontal: {
Budl1dq: "f2wwaib",
wkccdc: "f1645dqt"
},
horizontalNoLabel: {
uwmqm3: [
"f15jqgz8",
"fggqkej"
],
Budl1dq: "f1c2z91y"
}
}, {
d: [
".f13qh94s{display:grid;}",
".f2wwaib{grid-template-columns:33% 1fr;}",
".f1645dqt{grid-template-rows:auto auto auto 1fr;}",
".f15jqgz8{padding-left:33%;}",
".fggqkej{padding-right:33%;}",
".f1c2z91y{grid-template-columns:1fr;}"
]
});
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
vertical: {
z8tnut: "fclwglc",
Byoj8tv: "fywfov9",
jrapky: "fyacil5"
},
verticalLarge: {
z8tnut: "f1sl3k7w",
Byoj8tv: "f1brlhvm",
jrapky: "f8l5zjj"
},
horizontal: {
z8tnut: "fp2oml8",
Byoj8tv: "f1tdddsa",
t21cq0: [
"fkujibs",
"f199hnxi"
],
Ijaq50: "f16hsg94",
nk6f5a: "f1nzqi2z"
},
horizontalSmall: {
z8tnut: "f1ywm7hm",
Byoj8tv: "f14wxoun"
},
horizontalLarge: {
z8tnut: "f1hqyr95",
Byoj8tv: "fm4hlj0"
}
}, {
d: [
".fclwglc{padding-top:var(--spacingVerticalXXS);}",
".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
".f1sl3k7w{padding-top:1px;}",
".f1brlhvm{padding-bottom:1px;}",
".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
".fkujibs{margin-right:var(--spacingHorizontalM);}",
".f199hnxi{margin-left:var(--spacingHorizontalM);}",
".f16hsg94{grid-row-start:1;}",
".f1nzqi2z{grid-row-end:-1;}",
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
".f1hqyr95{padding-top:9px;}",
".fm4hlj0{padding-bottom:9px;}"
]
});
const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [
".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
]);
const useSecondaryTextStyles = /*#__PURE__*/ (0, _react.__styles)({
error: {
sj55zd: "f1hcrxcs"
},
withIcon: {
uwmqm3: [
"frawy03",
"fg4c52"
]
}
}, {
d: [
".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}",
".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"
]
});
const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ra7h1uk", "r1rh6bd7", [
".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}",
".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"
]);
const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
error: {
sj55zd: "f1hcrxcs"
},
warning: {
sj55zd: "f1k5f75o"
},
success: {
sj55zd: "ffmvakt"
}
}, {
d: [
".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}",
".ffmvakt{color:var(--colorPaletteGreenForeground1);}"
]
});
const useFieldStyles_unstable = (state)=>{
'use no memo';
const { validationState, size } = state;
const horizontal = state.orientation === 'horizontal';
const rootStyles = useRootStyles();
state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
const labelStyles = useLabelStyles();
if (state.label) {
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
}
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
const validationMessageIconStyles = useValidationMessageIconStyles();
if (state.validationMessageIcon) {
state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
}
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
const secondaryTextStyles = useSecondaryTextStyles();
if (state.validationMessage) {
state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
}
if (state.hint) {
state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FieldContextProvider: function() {
return FieldContextProvider;
},
useFieldContext_unstable: function() {
return useFieldContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const FieldContext = /*#__PURE__*/ _react.createContext(undefined);
const FieldContextProvider = FieldContext.Provider;
const useFieldContext_unstable = ()=>_react.useContext(FieldContext);
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/FieldContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue | undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = () => React.useContext(FieldContext);\n"],"names":["FieldContextProvider","useFieldContext_unstable","FieldContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,oBAAAA;eAAAA;;IAEAC,wBAAAA;eAAAA;;;;iEARU;AAIvB,MAAMC,6BAAeC,OAAMC,aAAa,CAAgCC;AAEjE,MAAML,uBAAuBE,aAAaI,QAAQ;AAElD,MAAML,2BAA2B,IAAME,OAAMI,UAAU,CAACL"}
+30
View File
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FieldContextProvider: function() {
return _FieldContext.FieldContextProvider;
},
getFieldControlProps: function() {
return _useFieldControlProps.getFieldControlProps;
},
useFieldContextValues_unstable: function() {
return _useFieldContextValues.useFieldContextValues_unstable;
},
useFieldContext_unstable: function() {
return _FieldContext.useFieldContext_unstable;
},
useFieldControlProps_unstable: function() {
return _useFieldControlProps.useFieldControlProps_unstable;
}
});
const _FieldContext = require("./FieldContext");
const _useFieldContextValues = require("./useFieldContextValues");
const _useFieldControlProps = require("./useFieldControlProps");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { FieldContextProvider, useFieldContext_unstable } from './FieldContext';\nexport { useFieldContextValues_unstable } from './useFieldContextValues';\nexport type { FieldControlPropsOptions } from './useFieldControlProps';\nexport { getFieldControlProps, useFieldControlProps_unstable } from './useFieldControlProps';\n"],"names":["FieldContextProvider","getFieldControlProps","useFieldContextValues_unstable","useFieldContext_unstable","useFieldControlProps_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,oBAAoB;eAApBA,kCAAoB;;IAGpBC,oBAAoB;eAApBA,0CAAoB;;IAFpBC,8BAA8B;eAA9BA,qDAA8B;;IADRC,wBAAwB;eAAxBA,sCAAwB;;IAGxBC,6BAA6B;eAA7BA,mDAA6B;;;8BAHG;uCAChB;sCAEqB"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFieldContextValues_unstable", {
enumerable: true,
get: function() {
return useFieldContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const useFieldContextValues_unstable = (state)=>{
var _state_label, _state_label1, _state_validationMessage, _state_hint;
const { generatedControlId, orientation, required, size, validationState } = state;
const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
const field = _react.useMemo(()=>({
generatedControlId,
hintId,
labelFor,
labelId,
orientation,
required,
size,
validationMessageId,
validationState
}), [
generatedControlId,
hintId,
labelFor,
labelId,
orientation,
required,
size,
validationMessageId,
validationState
]);
return {
field
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/useFieldContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/**\n * Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"names":["useFieldContextValues_unstable","state","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;AAOhB,MAAMA,iCAAiC,CAACC;QAE5BA,cACDA,eACYA,0BACbA;IAJf,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGL;IAC7E,MAAMM,WAAAA,AAAWN,CAAAA,eAAAA,MAAMO,KAAK,AAALA,MAAK,QAAXP,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaQ,OAAO;IACrC,MAAMC,UAAAA,AAAUT,CAAAA,gBAAAA,MAAMO,KAAK,AAALA,MAAK,QAAXP,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAaU,EAAE;IAC/B,MAAMC,sBAAAA,AAAsBX,CAAAA,2BAAAA,MAAMY,iBAAiB,AAAjBA,MAAiB,QAAvBZ,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBU,EAAE;IACvD,MAAMG,SAAAA,AAASb,CAAAA,cAAAA,MAAMc,IAAI,AAAJA,MAAI,QAAVd,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYU,EAAE;IAE7B,MAAMK,QAA2BC,OAAMC,OAAO,CAC5C,IAAO,CAAA;YACLhB;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;QACF,CAAA,GACA;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IAGpH,OAAO;QAAEU;IAAM;AACjB"}
@@ -0,0 +1,78 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getFieldControlProps: function() {
return getFieldControlProps;
},
useFieldControlProps_unstable: function() {
return useFieldControlProps_unstable;
}
});
const _FieldContext = require("./FieldContext");
function useFieldControlProps_unstable(props, options) {
return getFieldControlProps((0, _FieldContext.useFieldContext_unstable)(), props, options);
}
function getFieldControlProps(context, props, options) {
if (!context) {
return props;
}
// Create a copy of props so we don't modify the original
props = {
...props
};
const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;
if (generatedControlId) {
var _props;
var _id;
(_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
}
// Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
// to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
var _props1, _arialabelledby;
var _;
(_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
}
// The control is described by the validation message, or hint, or both.
// We also preserve and append any aria-describedby from props.
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
if (validationMessageId || hintId) {
// NOTE: Not using ??= since we're merging and overriding the user-provided value.
props['aria-describedby'] = [
validationMessageId,
hintId,
props === null || props === void 0 ? void 0 : props['aria-describedby']
].filter(Boolean).join(' ');
}
if (validationState === 'error') {
var _props2, _ariainvalid;
var _1;
(_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
}
if (required) {
if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
var _props3;
var _required;
(_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
} else {
var _props4, _ariarequired;
var _2;
(_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
}
}
// Include the size prop if this control supports it
if (options === null || options === void 0 ? void 0 : options.supportsSize) {
var _props5;
var _size;
(_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
}
return props;
}
File diff suppressed because one or more lines are too long
+41
View File
@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Field: function() {
return _Field.Field;
},
FieldContextProvider: function() {
return _index.FieldContextProvider;
},
fieldClassNames: function() {
return _Field.fieldClassNames;
},
renderField_unstable: function() {
return _Field.renderField_unstable;
},
useFieldContextValues_unstable: function() {
return _index.useFieldContextValues_unstable;
},
useFieldContext_unstable: function() {
return _index.useFieldContext_unstable;
},
useFieldControlProps_unstable: function() {
return _index.useFieldControlProps_unstable;
},
useFieldStyles_unstable: function() {
return _Field.useFieldStyles_unstable;
},
useField_unstable: function() {
return _Field.useField_unstable;
}
});
const _Field = require("./Field");
const _index = require("./contexts/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n FieldContextValue,\n FieldContextValues,\n FieldControlProps,\n FieldProps,\n FieldSlots,\n FieldState,\n} from './Field';\nexport {\n FieldContextProvider,\n useFieldContext_unstable,\n useFieldContextValues_unstable,\n useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n"],"names":["Field","FieldContextProvider","fieldClassNames","renderField_unstable","useFieldContextValues_unstable","useFieldContext_unstable","useFieldControlProps_unstable","useFieldStyles_unstable","useField_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAUZC,oBAAoB;eAApBA,2BAAoB;;IAVNC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAYnDC,8BAA8B;eAA9BA,qCAA8B;;IAD9BC,wBAAwB;eAAxBA,+BAAwB;;IAExBC,6BAA6B;eAA7BA,oCAA6B;;IAbwBC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;;uBAAQ;uBAclG"}