@rjsf/fluent-ui
Version:
Fluent UI theme, fields and widgets for react-jsonschema-form
1,360 lines (1,326 loc) • 41.6 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Form: () => FuiForm_default,
Templates: () => Templates_default,
Theme: () => Theme_default,
Widgets: () => Widgets_default,
default: () => src_default,
generateForm: () => generateForm,
generateTemplates: () => generateTemplates,
generateTheme: () => generateTheme,
generateWidgets: () => generateWidgets
});
module.exports = __toCommonJS(src_exports);
var import_react22 = require("@fluentui/react");
// src/FuiForm/FuiForm.ts
var import_core = require("@rjsf/core");
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
var import_jsx_runtime = require("react/jsx-runtime");
function ArrayFieldItemTemplate(props) {
const {
children,
disabled,
hasToolbar,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
uiSchema,
registry
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ms-Grid", dir: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ms-Grid-row", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ms-Grid-col ms-sm6 ms-md8 ms-lg9", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ms-Grid-row", children }) }),
hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ms-Grid-col ms-sm6 ms-md4 ms-lg3", style: { textAlign: "right" }, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveUpButton2,
{
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveDownButton2,
{
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CopyButton2,
{
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RemoveButton2,
{
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] })
] }) });
}
// src/AddButton/AddButton.tsx
var import_utils = require("@rjsf/utils");
var import_react = require("@fluentui/react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var addIcon = { iconName: "Add" };
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react.CommandBarButton,
{
style: { height: "32px" },
iconProps: addIcon,
text: translateString(import_utils.TranslatableString.AddItemButton),
className: props.className,
onClick: props.onClick,
disabled: props.disabled
}
);
}
// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
var import_utils2 = require("@rjsf/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var rightJustify = {
float: "right"
};
function ArrayFieldTemplate(props) {
const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
const uiOptions = (0, import_utils2.getUiOptions)(uiSchema);
const ArrayFieldDescriptionTemplate = (0, import_utils2.getTemplate)(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = (0, import_utils2.getTemplate)(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = (0, import_utils2.getTemplate)(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
items.length > 0 && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)),
canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: rightJustify, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
AddButton2,
{
className: "array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
) })
] });
}
// src/BaseInputTemplate/BaseInputTemplate.tsx
var import_react2 = require("@fluentui/react");
var import_utils3 = require("@rjsf/utils");
var import_pick = __toESM(require("lodash/pick"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var allowedProps = [
"multiline",
"resizable",
"autoAdjustHeight",
"underlined",
"borderless",
"label",
"onRenderLabel",
"description",
"onRenderDescription",
"prefix",
"suffix",
"onRenderPrefix",
"onRenderSuffix",
"iconProps",
"defaultValue",
"value",
"disabled",
"readOnly",
"errorMessage",
"onChange",
"onNotifyValidationResult",
"onGetErrorMessage",
"deferredValidationTime",
"className",
"inputClassName",
"ariaLabel",
"validateOnFocusIn",
"validateOnFocusOut",
"validateOnLoad",
"theme",
"styles",
"autoComplete",
"mask",
"maskChar",
"maskFormat",
"type",
"list"
];
function BaseInputTemplate({
id,
placeholder,
required,
readonly,
disabled,
label,
hideLabel,
value,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
type,
rawErrors,
multiline
}) {
const inputProps = (0, import_utils3.getInputProps)(schema, type, options);
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const uiProps = (0, import_pick.default)(options.props || {}, allowedProps);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react2.TextField,
{
id,
name: id,
placeholder,
label: (0, import_utils3.labelValue)(label, hideLabel),
autoFocus: autofocus,
required,
disabled,
readOnly: readonly,
multiline,
...inputProps,
value: value || value === 0 ? value : "",
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
errorMessage: (rawErrors || []).join("\n"),
list: schema.examples ? (0, import_utils3.examplesId)(id) : void 0,
...uiProps,
"aria-describedby": (0, import_utils3.ariaDescribedByIds)(id, !!schema.examples)
}
),
Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("datalist", { id: (0, import_utils3.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: example }, example);
}) })
] });
}
// src/DescriptionField/DescriptionField.tsx
var import_react3 = require("@fluentui/react");
var import_jsx_runtime5 = require("react/jsx-runtime");
function DescriptionField({ description, id }) {
if (description) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.Text, { id, children: description });
}
return null;
}
// src/ErrorList/ErrorList.tsx
var import_react4 = require("@fluentui/react");
var import_utils4 = require("@rjsf/utils");
var import_jsx_runtime6 = require("react/jsx-runtime");
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: errors.map((error, i) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_react4.MessageBar,
{
messageBarType: import_react4.MessageBarType.error,
isMultiline: false,
dismissButtonAriaLabel: translateString(import_utils4.TranslatableString.CloseLabel),
children: error.stack
},
i
);
}) });
}
// src/IconButton/IconButton.tsx
var import_react5 = require("@fluentui/react");
var import_utils5 = require("@rjsf/utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
function FluentIconButton(props) {
const iconProps = {
iconName: props.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.IconButton, { disabled: props.disabled, onClick: props.onClick, iconProps, color: "secondary" });
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FluentIconButton, { title: translateString(import_utils5.TranslatableString.CopyButton), ...props, icon: "Copy" });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FluentIconButton, { title: translateString(import_utils5.TranslatableString.MoveDownButton), ...props, icon: "Down" });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FluentIconButton, { title: translateString(import_utils5.TranslatableString.MoveUpButton), ...props, icon: "Up" });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FluentIconButton, { title: translateString(import_utils5.TranslatableString.RemoveButton), ...props, icon: "Delete" });
}
// src/FieldErrorTemplate/FieldErrorTemplate.tsx
var import_utils6 = require("@rjsf/utils");
var import_react6 = require("@fluentui/react");
var import_jsx_runtime8 = require("react/jsx-runtime");
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = (0, import_utils6.errorId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.List, { id, items: errors });
}
// src/FieldHelpTemplate/FieldHelpTemplate.tsx
var import_utils7 = require("@rjsf/utils");
var import_react7 = require("@fluentui/react");
var import_jsx_runtime9 = require("react/jsx-runtime");
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
if (!help) {
return null;
}
const id = (0, import_utils7.helpId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Text, { id, children: help });
}
// src/FieldTemplate/FieldTemplate.tsx
var import_utils8 = require("@rjsf/utils");
var import_react8 = require("@fluentui/react");
var import_jsx_runtime10 = require("react/jsx-runtime");
function FieldTemplate(props) {
const { children, errors, help, displayLabel, description, rawDescription, hidden, uiSchema, registry } = props;
const uiOptions = (0, import_utils8.getUiOptions)(uiSchema);
const WrapIfAdditionalTemplate2 = (0, import_utils8.getTemplate)(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "none" }, children });
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(WrapIfAdditionalTemplate2, { ...props, children: [
children,
displayLabel && rawDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react8.Text, { children: description }),
errors,
help
] });
}
// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
var import_utils9 = require("@rjsf/utils");
var import_jsx_runtime11 = require("react/jsx-runtime");
var rightJustify2 = {
float: "right"
};
function ObjectFieldTemplate({
description,
title,
properties,
required,
disabled,
readonly,
schema,
uiSchema,
idSchema,
formData,
onAddClick,
registry
}) {
const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
const TitleFieldTemplate = (0, import_utils9.getTemplate)("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = (0, import_utils9.getTemplate)(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
TitleFieldTemplate,
{
id: (0, import_utils9.titleId)(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils9.descriptionId)(idSchema),
schema,
uiSchema,
description,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ms-Grid", dir: "ltr", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ms-Grid-row", children: properties.map((element) => element.content) }),
(0, import_utils9.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: rightJustify2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
AddButton2,
{
className: "object-property-expand",
onClick: onAddClick(schema),
disabled: disabled || readonly,
uiSchema,
registry
}
) })
] })
] });
}
// src/SubmitButton/SubmitButton.tsx
var import_utils10 = require("@rjsf/utils");
var import_react9 = require("@fluentui/react");
var import_jsx_runtime12 = require("react/jsx-runtime");
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps } = (0, import_utils10.getSubmitButtonOptions)(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("br", {}),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ms-Grid-col ms-sm12", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react9.PrimaryButton, { text: submitText, type: "submit", ...submitButtonProps }) })
] });
}
// src/TitleField/TitleField.tsx
var import_react10 = require("@fluentui/react");
var import_jsx_runtime13 = require("react/jsx-runtime");
var styles = {
root: [
{
fontSize: 24,
marginBottom: 20,
paddingBottom: 0
}
]
};
function TitleField({
id,
title
}) {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react10.Label, { id, styles, children: title });
}
// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
var import_react11 = require("@fluentui/react");
var import_utils11 = require("@rjsf/utils");
var import_jsx_runtime14 = require("react/jsx-runtime");
function WrapIfAdditionalTemplate(props) {
const {
children,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
registry,
required,
schema,
style,
uiSchema
} = props;
const { templates, translateString } = registry;
let { classNames = "" } = props;
classNames = "ms-Grid-col ms-sm12 " + classNames.replace("form-group", "");
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(import_utils11.TranslatableString.KeyLabel, [label]);
const additional = import_utils11.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, style: { ...style, marginBottom: 15 }, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, style: { ...style, marginBottom: 15 }, dir: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ms-Grid-row", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ms-Grid-col ms-sm4 ms-md4 ms-lg5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
import_react11.TextField,
{
required,
label: keyLabel,
defaultValue: label,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0,
type: "text"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ms-Grid-col ms-sm4 ms-md4 ms-lg5", children }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ms-Grid-col ms-sm4 ms-md4 ms-lg2", style: { textAlign: "right" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
RemoveButton2,
{
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema,
registry
}
) })
] }, `${id}-key`) });
}
// src/Templates/Templates.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
CopyButton,
AddButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
// src/CheckboxWidget/CheckboxWidget.tsx
var import_react12 = require("react");
var import_react13 = require("@fluentui/react");
var import_utils12 = require("@rjsf/utils");
var import_pick2 = __toESM(require("lodash/pick"));
var import_jsx_runtime15 = require("react/jsx-runtime");
var allowedProps2 = [
"ariaDescribedBy",
"ariaLabel",
"ariaPositionInSet",
"ariaSetSize",
"boxSide",
"checked",
"checkmarkIconProps",
"className",
"componentRef",
"defaultChecked",
"defaultIndeterminate",
"disabled",
"indeterminate",
"inputProps",
/* Backward compatibility with fluentui v7 */
"keytipProps",
"label",
"onChange",
"onRenderLabel",
"styles",
"theme"
];
function CheckboxWidget(props) {
const {
id,
value,
// required,
disabled,
readonly,
label,
hideLabel,
schema,
autofocus,
onChange,
onBlur,
onFocus,
options,
registry,
uiSchema
} = props;
const DescriptionFieldTemplate = (0, import_utils12.getTemplate)(
"DescriptionFieldTemplate",
registry,
options
);
const _onChange = (0, import_react12.useCallback)(
(_, checked) => {
onChange(checked);
},
[onChange]
);
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const uiProps = (0, import_pick2.default)(options.props || {}, allowedProps2);
const description = options.description ?? schema.description;
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
!hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils12.descriptionId)(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_react13.Checkbox,
{
id,
name: id,
label: (0, import_utils12.labelValue)(label || void 0, hideLabel),
disabled: disabled || readonly,
inputProps: {
autoFocus: autofocus,
onBlur: _onBlur,
onFocus: _onFocus
},
checked: typeof value === "undefined" ? false : value,
onChange: _onChange,
...uiProps,
"aria-describedby": (0, import_utils12.ariaDescribedByIds)(id),
...{
autoFocus: autofocus,
onBlur: _onBlur,
onFocus: _onFocus
}
}
)
] });
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
var import_react15 = require("@fluentui/react");
var import_utils13 = require("@rjsf/utils");
var import_pick3 = __toESM(require("lodash/pick"));
// src/FluentLabel/FluentLabel.tsx
var import_react14 = require("@fluentui/react");
var import_jsx_runtime16 = require("react/jsx-runtime");
var styles_red = {
// TODO: get this color from theme.
color: "rgb(164, 38, 44)",
fontSize: 12,
fontWeight: "normal",
fontFamily: `"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif`
};
function FluentLabel({ label, required, id }) {
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react14.Label, { htmlFor: id, children: [
label,
required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: styles_red, children: "\xA0*" })
] });
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
function CheckboxesWidget({
label,
hideLabel,
id,
disabled,
options,
value,
autofocus,
readonly,
required,
onChange,
onBlur,
onFocus,
rawErrors = []
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
const checkboxesValues = Array.isArray(value) ? value : [value];
const _onChange = (index) => (_ev, checked) => {
if (checked) {
onChange((0, import_utils13.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
} else {
onChange((0, import_utils13.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
}
};
const _onBlur = ({ target }) => onBlur(id, (0, import_utils13.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const _onFocus = ({ target }) => onFocus(id, (0, import_utils13.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const uiProps = (0, import_pick3.default)(options.props || {}, allowedProps2);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
(0, import_utils13.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FluentLabel, { label: label || void 0, required }), hideLabel),
Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = (0, import_utils13.enumOptionsIsSelected)(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react15.Checkbox,
{
id: (0, import_utils13.optionId)(id, index),
name: id,
checked,
label: option.label,
disabled: disabled || itemDisabled || readonly,
inputProps: {
autoFocus: autofocus && index === 0,
onBlur: _onBlur,
onFocus: _onFocus
},
onChange: _onChange(index),
...uiProps,
"aria-describedby": (0, import_utils13.ariaDescribedByIds)(id),
...{
autoFocus: autofocus && index === 0,
onBlur: _onBlur,
onFocus: _onFocus
}
},
index
);
}),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: styles_red, children: (rawErrors || []).join("\n") })
] });
}
// src/ColorWidget/ColorWidget.tsx
var import_react16 = require("@fluentui/react");
var import_utils14 = require("@rjsf/utils");
var import_pick4 = __toESM(require("lodash/pick"));
var import_jsx_runtime18 = require("react/jsx-runtime");
var allowedProps3 = [
"componentRef",
"color",
"strings",
"onChange",
"alphaType",
"alphaSliderHidden",
"hexLabel",
"redLabel",
"greenLabel",
"blueLabel",
"alphaLabel",
"className",
"theme",
"styles",
"showPreview"
];
function ColorWidget({
id,
options,
value,
required,
label,
hideLabel,
onChange
}) {
const updateColor = (_ev, colorObj) => {
onChange(colorObj.hex);
};
const uiProps = { id, ...(0, import_pick4.default)(options.props || {}, allowedProps3) };
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
(0, import_utils14.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FluentLabel, { label: label || void 0, required, id }), hideLabel),
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_react16.ColorPicker,
{
color: (0, import_react16.getColorFromString)(value),
onChange: updateColor,
alphaType: "alpha",
showPreview: true,
...uiProps,
"aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
}
)
] });
}
// src/DateWidget/DateWidget.tsx
var import_utils15 = require("@rjsf/utils");
var import_react17 = require("@fluentui/react");
var import_pick5 = __toESM(require("lodash/pick"));
var import_jsx_runtime19 = require("react/jsx-runtime");
var allowedProps4 = [
"componentRef",
"styles",
"theme",
"calloutProps",
"calendarProps",
"textField",
"calendarAs",
"onSelectDate",
"label",
"isRequired",
"disabled",
"ariaLabel",
"underlined",
"pickerAriaLabel",
"isMonthPickerVisible",
"showMonthPickerAsOverlay",
"allowTextInput",
"disableAutoFocus",
"placeholder",
"today",
"value",
"formatDate",
"parseDateFromString",
"firstDayOfWeek",
"strings",
"highlightCurrentMonth",
"highlightSelectedMonth",
"showWeekNumbers",
"firstWeekOfYear",
"showGoToToday",
"borderless",
"className",
"dateTimeFormatter",
"minDate",
"maxDate",
"initialPickerDate",
"allFocusable",
"onAfterMenuDismiss",
"showCloseButton",
"tabIndex"
];
var controlClass = (0, import_react17.mergeStyleSets)({
control: {
margin: "0 0 15px 0"
}
});
var formatDate = (date) => {
if (!date) {
return "";
}
const yyyy = (0, import_utils15.pad)(date.getFullYear(), 4);
const MM = (0, import_utils15.pad)(date.getMonth() + 1, 2);
const dd = (0, import_utils15.pad)(date.getDate(), 2);
return `${yyyy}-${MM}-${dd}`;
};
var parseDate = (dateStr) => {
if (!dateStr) {
return void 0;
}
const [year, month, day] = dateStr.split("-").map((e) => parseInt(e));
const dt = new Date(year, month - 1, day);
return dt;
};
function DateWidget({
id,
required,
label,
hideLabel,
value,
onChange,
onBlur,
onFocus,
options,
placeholder,
registry
}) {
const { translateString } = registry;
const _onSelectDate = (date) => {
if (date) {
const formatted = formatDate(date);
formatted && onChange(formatted);
}
};
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const uiProps = (0, import_pick5.default)(options.props || {}, allowedProps4);
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react17.DatePicker,
{
id,
className: controlClass.control,
firstDayOfWeek: import_react17.DayOfWeek.Sunday,
placeholder,
ariaLabel: translateString(import_utils15.TranslatableString.AriaDateLabel),
isRequired: required,
label: (0, import_utils15.labelValue)(label, hideLabel),
onSelectDate: _onSelectDate,
onBlur: _onBlur,
onFocus: _onFocus,
value: parseDate(value),
...uiProps,
"aria-describedby": (0, import_utils15.ariaDescribedByIds)(id)
}
);
}
// src/DateTimeWidget/DateTimeWidget.tsx
var import_utils16 = require("@rjsf/utils");
var import_jsx_runtime20 = require("react/jsx-runtime");
function DateTimeWidget(props) {
const { registry } = props;
const uiProps = props.options["props"] || {};
const options = {
...props.options,
props: {
type: "datetime-local",
...uiProps
}
};
const BaseInputTemplate2 = (0, import_utils16.getTemplate)("BaseInputTemplate", registry, options);
const value = (0, import_utils16.utcToLocal)(props.value);
const onChange = (value2) => {
props.onChange((0, import_utils16.localToUTC)(value2));
};
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseInputTemplate2, { ...props, options, value, onChange });
}
// src/RadioWidget/RadioWidget.tsx
var import_react18 = require("@fluentui/react");
var import_utils17 = require("@rjsf/utils");
var import_pick6 = __toESM(require("lodash/pick"));
var import_jsx_runtime21 = require("react/jsx-runtime");
var allowedProps5 = [
"componentRef",
"options",
"defaultSelectedKey",
"selectedKey",
"onChange",
"label",
/* Backward compatibility with fluentui v7 */
"onChanged",
"theme",
"styles",
"ariaLabelledBy"
];
function RadioWidget({
id,
options,
value,
required,
label,
hideLabel,
onChange,
onBlur,
onFocus,
disabled,
readonly
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
function _onChange(_ev, option) {
if (option) {
onChange((0, import_utils17.enumOptionsValueForIndex)(option.key, enumOptions, emptyValue));
}
}
const _onBlur = ({ target }) => onBlur(id, (0, import_utils17.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const _onFocus = ({ target }) => onFocus(id, (0, import_utils17.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const newOptions = Array.isArray(enumOptions) ? enumOptions.map((option, index) => ({
key: String(index),
name: id,
id: (0, import_utils17.optionId)(id, index),
text: option.label,
disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
"aria-describedby": (0, import_utils17.ariaDescribedByIds)(id)
})) : [];
const selectedIndex = (0, import_utils17.enumOptionsIndexForValue)(value, enumOptions);
const uiProps = (0, import_pick6.default)(options.props || {}, allowedProps5);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_react18.ChoiceGroup,
{
id,
name: id,
options: newOptions,
disabled: disabled || readonly,
onChange: _onChange,
onFocus: _onFocus,
onBlur: _onBlur,
label: (0, import_utils17.labelValue)(label, hideLabel || !label),
required,
selectedKey: selectedIndex,
...uiProps
}
);
}
// src/RangeWidget/RangeWidget.tsx
var import_react19 = require("@fluentui/react");
var import_utils18 = require("@rjsf/utils");
var import_pick7 = __toESM(require("lodash/pick"));
var import_jsx_runtime22 = require("react/jsx-runtime");
var allowedProps6 = [
"componentRef",
"styles?",
"theme",
"label",
"defaultValue",
"value",
"min",
"max",
"step",
"showValue",
"onChange",
"ariaLabel",
"ariaValueText",
"vertical",
"disabled",
"snapToStep",
"className",
"buttonProps",
"valueFormat",
"originFromZero"
];
function RangeWidget({
value,
readonly,
disabled,
options,
schema,
onChange,
required,
label,
hideLabel,
id
}) {
const sliderProps = { value, label, id, ...(0, import_utils18.rangeSpec)(schema) };
const _onChange = (value2) => onChange(value2);
const uiProps = { id, ...(0, import_pick7.default)(options.props || {}, allowedProps6) };
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
(0, import_utils18.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FluentLabel, { label: label || void 0, required, id }), hideLabel),
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_react19.Slider,
{
disabled: disabled || readonly,
min: sliderProps.min,
max: sliderProps.max,
step: sliderProps.step,
onChange: _onChange,
snapToStep: true,
...uiProps,
"aria-describedby": (0, import_utils18.ariaDescribedByIds)(id)
}
)
] });
}
// src/SelectWidget/SelectWidget.tsx
var import_react20 = require("@fluentui/react");
var import_utils19 = require("@rjsf/utils");
var import_pick8 = __toESM(require("lodash/pick"));
var import_jsx_runtime23 = require("react/jsx-runtime");
var allowedProps7 = [
"placeHolder",
"options",
"onChange",
"onChanged",
"onRenderLabel",
"onRenderPlaceholder",
"onRenderPlaceHolder",
"onRenderTitle",
"onRenderCaretDown",
"dropdownWidth",
"responsiveMode",
"defaultSelectedKeys",
"selectedKeys",
"multiselectDelimiter",
"notifyOnReselect",
"isDisabled",
"keytipProps",
"theme",
"styles",
// ISelectableDroppableTextProps
"componentRef",
"label",
"ariaLabel",
"id",
"className",
"defaultSelectedKey",
"selectedKey",
"multiSelect",
"options",
"onRenderContainer",
"onRenderList",
"onRenderItem",
"onRenderOption",
"onDismiss",
"disabled",
"required",
"calloutProps",
"panelProps",
"errorMessage",
"placeholder",
"openOnKeyboardFocus"
];
function SelectWidget({
id,
options,
label,
hideLabel,
required,
disabled,
readonly,
value,
multiple,
onChange,
onBlur,
onFocus
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
const _onChange = (_ev, item) => {
if (!item) {
return;
}
if (multiple) {
const valueOrDefault = value || [];
if (item.selected) {
onChange((0, import_utils19.enumOptionsSelectValue)(item.key, valueOrDefault, enumOptions));
} else {
onChange((0, import_utils19.enumOptionsDeselectValue)(item.key, valueOrDefault, enumOptions));
}
} else {
onChange((0, import_utils19.enumOptionsValueForIndex)(item.key, enumOptions, emptyValue));
}
};
const _onBlur = (e) => onBlur(id, (0, import_utils19.enumOptionsValueForIndex)(e.target.value, enumOptions, emptyValue));
const _onFocus = (e) => onFocus(id, (0, import_utils19.enumOptionsValueForIndex)(e.target.value, enumOptions, emptyValue));
const newOptions = Array.isArray(enumOptions) ? enumOptions.map((option, index) => ({
key: String(index),
text: option.label,
disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1
})) : [];
const uiProps = (0, import_pick8.default)(options.props || {}, allowedProps7);
const selectedIndexes = (0, import_utils19.enumOptionsIndexForValue)(value, enumOptions, multiple);
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_react20.Dropdown,
{
id,
label: (0, import_utils19.labelValue)(label, hideLabel),
multiSelect: multiple,
defaultSelectedKey: multiple ? void 0 : selectedIndexes,
defaultSelectedKeys: multiple ? selectedIndexes : void 0,
required,
options: newOptions,
disabled: disabled || readonly,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
...uiProps,
"aria-describedby": (0, import_utils19.ariaDescribedByIds)(id)
}
);
}
// src/TextareaWidget/TextareaWidget.tsx
var import_utils20 = require("@rjsf/utils");
var import_jsx_runtime24 = require("react/jsx-runtime");
function TextareaWidget(props) {
const { uiSchema, registry } = props;
const options = (0, import_utils20.getUiOptions)(uiSchema);
const BaseInputTemplate2 = (0, import_utils20.getTemplate)("BaseInputTemplate", registry, options);
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BaseInputTemplate2, { ...props, multiline: true });
}
// src/UpDownWidget/UpDownWidget.tsx
var import_react21 = require("@fluentui/react");
var import_utils21 = require("@rjsf/utils");
var import_pick9 = __toESM(require("lodash/pick"));
var import_jsx_runtime25 = require("react/jsx-runtime");
var allowedProps8 = [
"ariaDescribedBy",
"ariaLabel",
"ariaPositionInSet",
"ariaSetSize",
"ariaValueNow",
"ariaValueText",
"className",
"componentRef",
"decrementButtonAriaLabel",
"decrementButtonIcon",
"defaultValue",
"disabled",
"downArrowButtonStyles",
/* Backward compatibility with fluentui v7 */
"getClassNames",
"iconButtonProps",
"iconProps",
"incrementButtonAriaLabel",
"incrementButtonIcon",
"inputProps",
"keytipProps",
"label",
"labelPosition",
"max",
"min",
"onBlur",
"onDecrement",
"onFocus",
"onIncrement",
"onValidate",
"precision",
"step",
"styles",
"theme",
"title",
"upArrowButtonStyles",
"value"
];
function UpDownWidget({
id,
required,
readonly,
disabled,
label,
hideLabel,
value,
onChange,
onBlur,
onFocus,
options,
schema,
registry
}) {
const { translateString } = registry;
const _onChange = (ev, newValue) => {
if (newValue) {
onChange(Number(newValue));
} else if ("value" in ev.target) {
onChange(Number(ev.target.value));
}
};
let { min, max, step } = (0, import_utils21.rangeSpec)(schema);
if (min === void 0) {
min = -1 * Infinity;
}
if (max === void 0) {
max = Infinity;
}
if (step === void 0) {
step = 1;
}
const _onIncrement = (value2) => {
if (Number(value2) + step <= max) {
onChange(Number(value2) + step);
}
};
const _onDecrement = (value2) => {
if (Number(value2) - step >= min) {
onChange(Number(value2) - step);
}
};
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const uiProps = (0, import_pick9.default)(options.props || {}, allowedProps8);
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
(0, import_utils21.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FluentLabel, { label: label || void 0, required, id }), hideLabel),
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_react21.SpinButton,
{
id,
min,
max,
step,
incrementButtonAriaLabel: translateString(import_utils21.TranslatableString.IncrementAriaLabel),
decrementButtonAriaLabel: translateString(import_utils21.TranslatableString.DecrementAriaLabel),
disabled: disabled || readonly,
value: value || value === 0 ? value : "",
onBlur: _onBlur,
onFocus: _onFocus,
onChange: _onChange,
onIncrement: _onIncrement,
onDecrement: _onDecrement,
...uiProps,
"aria-describedby": (0, import_utils21.ariaDescribedByIds)(id)
}
)
] });
}
// src/Widgets/Widgets.ts
function generateWidgets() {
return {
CheckboxWidget,
CheckboxesWidget,
ColorWidget,
DateWidget,
DateTimeWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget,
UpDownWidget
};
}
var Widgets_default = generateWidgets();
// src/Theme/Theme.ts
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets()
};
}
var Theme_default = generateTheme();
// src/FuiForm/FuiForm.ts
function generateForm() {
return (0, import_core.withTheme)(generateTheme());
}
var FuiForm_default = generateForm();
// src/index.ts
(0, import_react22.initializeIcons)();
var src_default = FuiForm_default;
//# sourceMappingURL=index.js.map