@rjsf/fluentui-rc 5.14.1

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@rjsf/fluentui-rc",
+  "version": "5.14.1",
+  "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
+  "scripts": {
+    "build:ts": "tsc -b",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
+    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "cs-check": "prettier -l \"{src,test,testSnap}/**/*.[jt]s?(x)\"",
+    "cs-format": "prettier \"{src,test,testSnap}/**/*.[jt]s?(x)\" --write",
+    "lint": "eslint src test",
+    "precommit": "lint-staged",
+    "publish-to-npm": "npm run build && npm publish",
+    "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest",
+    "test:update": "jest --u",
+    "test:watch": "jest --watch",
+    "test-coverage": "jest --coverage"
+  },
+  "lint-staged": {
+    "{src,test}/**/*.[jt]s?(x)": [
+      "eslint --fix"
+    ]
+  },
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "src"
+  ],
+  "engineStrict": false,
+  "engines": {
+    "node": ">=14"
+  },
+  "peerDependencies": {
+    "@rjsf/utils": "^5.12.x",
+    "react": "^16.14.0 || >=17"
+  },
+  "dependencies": {
+    "@fluentui/react-components": "^9.35.0",
+    "@fluentui/react-icons": "^2.0.220",
+    "@fluentui/react-migration-v0-v9": "^9.0.42"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.17",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@rjsf/core": "^5.14.1",
+    "@rjsf/snapshot-tests": "^5.14.1",
+    "@rjsf/utils": "^5.14.1",
+    "@rjsf/validator-ajv8": "^5.14.1",
+    "@types/jest": "^29.5.7",
+    "@types/react": "^17.0.65",
+    "@types/react-dom": "^17.0.20",
+    "@types/react-test-renderer": "^17.0.3",
+    "babel-jest": "^29.6.4",
+    "esbuild": "^0.18.20",
+    "eslint": "^8.48.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.29.0",
+    "typescript": "^4.9.5"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
+  },
+  "author": "Marc Veens <veens.marc@gmail.com>",
+  "contributors": [],
+  "keywords": [
+    "react",
+    "form",
+    "json-schema",
+    "fluentui",
+    "fluentui-rc",
+    "rjsf-fluentui-rc"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/rjsf-team/react-jsonschema-form",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "7eb830fc26a09dcd62f2079c45c982537379c79c"
+}

package/src/AddButton/AddButton.tsx

@@ -0,0 +1,12 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { Button } from '@fluentui/react-components';
+import { AddRegular } from '@fluentui/react-icons';
+
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  uiSchema,
+  registry,
+  ...props
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return <Button {...props} icon={<AddRegular />} title={translateString(TranslatableString.AddItemButton)} />;
+}

package/src/AddButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AddButton';
+export * from './AddButton';

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,72 @@
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Flex } from '@fluentui/react-migration-v0-v9';
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+
+  return (
+    <Flex vAlign='end'>
+      <Flex>{children}</Flex>
+      {hasToolbar && (
+        <Flex style={{ marginLeft: '8px' }}>
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveUpButton
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onReorderClick(index, index - 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onReorderClick(index, index + 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasCopy && (
+            <CopyButton
+              disabled={disabled || readonly}
+              onClick={onCopyIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              disabled={disabled || readonly}
+              onClick={onDropIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+        </Flex>
+      )}
+    </Flex>
+  );
+}

package/src/ArrayFieldItemTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemTemplate';
+export * from './ArrayFieldItemTemplate';

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -0,0 +1,87 @@
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import { Flex } from '@fluentui/react-migration-v0-v9';
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  arrayItemList: {
+    ...shorthands.gap('12px'),
+  },
+});
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
+    props;
+  const classes = useStyles();
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <>
+      <ArrayFieldTitleTemplate
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        schema={schema}
+        uiSchema={uiSchema}
+        required={required}
+        registry={registry}
+      />
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <Flex column key={`array-item-list-${idSchema.$id}`} className={classes.arrayItemList}>
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
+        {canAdd && (
+          <Flex hAlign='end'>
+            <AddButton
+              className='array-item-add'
+              onClick={onAddClick}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Flex>
+        )}
+      </Flex>
+    </>
+  );
+}

package/src/ArrayFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTemplate';
+export * from './ArrayFieldTemplate';

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -0,0 +1,99 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import { Input, InputProps, Label, makeStyles } from '@fluentui/react-components';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  labelValue,
+} from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  input: {
+    width: '100%',
+  },
+  label: {
+    paddingTop: '2px',
+    paddingBottom: '2px',
+    marginBottom: '2px',
+  },
+});
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    type,
+    value,
+    label,
+    hideLabel,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+  } = props;
+  const classes = useStyles();
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  return (
+    <>
+      {labelValue(
+        <Label htmlFor={id} required={required} disabled={disabled} className={classes.label}>
+          {label}
+        </Label>,
+        hideLabel
+      )}
+      <Input
+        id={id}
+        name={id}
+        placeholder={placeholder}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled || readonly}
+        {...(inputProps as InputProps)}
+        input={{
+          className: classes.input,
+          // Due to Fluent UI this does not work correctly
+          list: schema.examples ? examplesId<T>(id) : undefined,
+        }}
+        value={value || value === 0 ? value : ''}
+        onChange={onChangeOverride || _onChange}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/BaseInputTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseInputTemplate';
+export * from './BaseInputTemplate';

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,81 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Checkbox } from '@fluentui/react-components';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    schema,
+    id,
+    value,
+    disabled,
+    readonly,
+    label = '',
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    options,
+    uiSchema,
+  } = props;
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue<S>(schema);
+
+  const _onChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const description = options.description ?? schema.description;
+
+  return (
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Checkbox
+        id={id}
+        name={id}
+        label={label}
+        checked={typeof value === 'undefined' ? false : Boolean(value)}
+        required={required}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      />
+    </>
+  );
+}

package/src/CheckboxWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxWidget';
+export * from './CheckboxWidget';

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  labelValue,
+  optionId,
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Label, Checkbox } from '@fluentui/react-components';
+import { Flex } from '@fluentui/react-migration-v0-v9';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  label,
+  hideLabel,
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (checked) {
+        onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
+      }
+    };
+
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  return (
+    <>
+      {labelValue(
+        <Label required={required} htmlFor={id}>
+          {label || undefined}
+        </Label>,
+        hideLabel
+      )}
+      <Flex column={!inline}>
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option, index: number) => {
+            const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            return (
+              <Checkbox
+                key={index}
+                id={optionId(id, index)}
+                name={id}
+                label={option.label}
+                checked={checked}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={_onChange(index)}
+                onBlur={_onBlur}
+                onFocus={_onFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+            );
+          })}
+      </Flex>
+    </>
+  );
+}

package/src/CheckboxesWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxesWidget';
+export * from './CheckboxesWidget';

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,31 @@
+import { Text, makeStyles, tokens } from '@fluentui/react-components';
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  label: {
+    marginTop: tokens.spacingVerticalS,
+    marginBottom: tokens.spacingVerticalM,
+  },
+});
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  const classes = useStyles();
+  if (description) {
+    return (
+      <Text block id={id} className={classes.label}>
+        {description}
+      </Text>
+    );
+  }
+
+  return null;
+}

package/src/DescriptionField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DescriptionField';
+export * from './DescriptionField';

package/src/ErrorList/ErrorList.tsx

@@ -0,0 +1,40 @@
+import { Card, Text, makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  errorCard: {
+    backgroundColor: tokens.colorStatusDangerBackground1,
+    marginBottom: tokens.spacingVerticalL,
+    '&::after': {
+      ...shorthands.borderColor(tokens.colorStatusDangerBorder1),
+    },
+  },
+  errorTitle: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+});
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  const classes = useStyles();
+  return (
+    <Card appearance='outline' className={classes.errorCard}>
+      <Text as='h6' size={400} className={classes.errorTitle}>
+        {translateString(TranslatableString.ErrorsLabel)}
+      </Text>
+      <ul>
+        {errors.map((error, i: number) => {
+          return <li key={i}>{error.stack}</li>;
+        })}
+      </ul>
+    </Card>
+  );
+}

package/src/ErrorList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ErrorList';
+export * from './ErrorList';