@fluentui/react-field 9.0.0-alpha.9 → 9.0.0-beta.1

package/lib-amd/components/Field/useField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n  FieldConfig,\n  FieldControl,\n  FieldProps,\n  FieldPropsWithOptionalComponentProps,\n  FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldControl>>(props: Props) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\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 control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n  const { orientation = 'vertical', validationState } = fieldProps;\n  const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n  const baseId = useId('field-');\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      id: baseId + '__control',\n      ...controlProps,\n    },\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  // Hook up aria props on the control\n  if (label && labelConnection === 'aria-labelledby') {\n    control['aria-labelledby'] ??= label.id;\n  }\n\n  if (validationState === 'error' && ariaInvalidOnError) {\n    control['aria-invalid'] ??= true;\n    if (validationMessage) {\n      control['aria-errormessage'] ??= validationMessage.id;\n    }\n    if (hint) {\n      control['aria-describedby'] ??= hint.id;\n    }\n  } else {\n    // If the state is not an error, then the control is described by the validation message, or hint, or both\n    const describedby = validationMessage || hint;\n    if (describedby) {\n      control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n    }\n  }\n\n  const state: FieldState<FieldControl> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"]}

package/lib-amd/components/Field/useFieldStyles.js

@@ -1,97 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
-    var getFieldClassNames = function (name) { return ({
-        root: "fui-" + name,
-        control: "fui-" + name + "__control",
-        label: "fui-" + name + "__label",
-        validationMessage: "fui-" + name + "__validationMessage",
-        validationMessageIcon: "fui-" + name + "__validationMessageIcon",
-        hint: "fui-" + name + "__hint",
-    }); };
-    exports.getFieldClassNames = getFieldClassNames;
-    /**
-     * Styles for the root slot
-     */
-    var useRootStyles = react_1.makeStyles({
-        base: {
-            display: 'grid',
-            gridAutoFlow: 'row',
-            justifyItems: 'start',
-        },
-        horizontal: {
-            gridTemplateRows: 'auto auto auto auto',
-            gridTemplateColumns: '1fr 2fr',
-        },
-        secondColumn: {
-            gridColumnStart: '2',
-        },
-    });
-    var useLabelStyles = react_1.makeStyles({
-        base: {
-            marginTop: react_theme_1.tokens.spacingVerticalXXS,
-            marginBottom: react_theme_1.tokens.spacingVerticalXXS,
-        },
-        horizontal: {
-            gridRowStart: '1',
-            gridRowEnd: '-1',
-            marginRight: react_theme_1.tokens.spacingHorizontalM,
-            alignSelf: 'start',
-            justifySelf: 'stretch',
-        },
-    });
-    var useSecondaryTextStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1),
-        error: {
-            color: react_theme_1.tokens.colorPaletteRedForeground1,
-        },
-    });
-    var useValidationMessageIconStyles = react_1.makeStyles({
-        base: {
-            fontSize: '12px',
-            lineHeight: '12px',
-            verticalAlign: 'middle',
-            marginRight: react_theme_1.tokens.spacingHorizontalXS,
-        },
-        error: {
-            color: react_theme_1.tokens.colorPaletteRedForeground1,
-        },
-        warning: {
-            color: react_theme_1.tokens.colorPaletteDarkOrangeForeground1,
-        },
-        success: {
-            color: react_theme_1.tokens.colorPaletteGreenForeground1,
-        },
-    });
-    /**
-     * Apply styling to the Field slots based on the state
-     */
-    var useFieldStyles_unstable = function (state) {
-        var classNames = state.classNames;
-        var validationState = state.validationState;
-        var horizontal = state.orientation === 'horizontal';
-        var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
-        if (state.control) {
-            state.control.className = react_1.mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
-        }
-        var labelStyles = useLabelStyles();
-        if (state.label) {
-            state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
-        }
-        var validationMessageIconStyles = useValidationMessageIconStyles();
-        if (state.validationMessageIcon) {
-            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
-        }
-        var secondaryTextStyles = useSecondaryTextStyles();
-        if (state.validationMessage) {
-            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
-        }
-        if (state.hint) {
-            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
-        }
-    };
-    exports.useFieldStyles_unstable = useFieldStyles_unstable;
-});
-//# sourceMappingURL=useFieldStyles.js.map

package/lib-amd/components/Field/useFieldStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\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: '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 FieldControl>(state: FieldState<T>) => {\n  const classNames = state.classNames;\n  const validationState: FieldProps<FieldControl>['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"]}

package/lib-amd/index.js

@@ -1,10 +0,0 @@
-define(["require", "exports", "./Field"], function (require, exports, Field_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.getFieldClassNames = void 0;
-    Object.defineProperty(exports, "getFieldClassNames", { enumerable: true, get: function () { return Field_1.getFieldClassNames; } });
-    Object.defineProperty(exports, "renderField_unstable", { enumerable: true, get: function () { return Field_1.renderField_unstable; } });
-    Object.defineProperty(exports, "useFieldStyles_unstable", { enumerable: true, get: function () { return Field_1.useFieldStyles_unstable; } });
-    Object.defineProperty(exports, "useField_unstable", { enumerable: true, get: function () { return Field_1.useField_unstable; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,2GAAA,kBAAkB,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"]}

package/lib-commonjs/components/Field/SlotComponent.types.js

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=SlotComponent.types.js.map

package/lib-commonjs/components/Field/SlotComponent.types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}