@keystatic/core

TypesSource
Search for an npm package
import { z as useFieldSpan, s as strings, A as useArrayFieldValidationMessage, B as ArrayFieldListView, D as FormValueContentFromPreviewProps, o as getInitialPropsValue, h as createGetPreviewProps, m as clientSideValidateProp, E as valueToUpdater, G as isValidURL, H as useIsInDocumentEditor, I as useObjectURL, J as getUploadedFile, K as getSrcPrefix, L as ImageFieldInput, v as pluralize, M as document, N as mdx, O as markdoc } from './index-9799c761.js';
export { V as BlockWrapper, W as ToolbarSeparator, R as collection, Q as config, U as singleton } from './index-9799c761.js';
export { c as component } from './api-2187d4d8.js';
import { a$ as basicFormFieldWithSimpleReaderParse, ar as FieldDataError, am as useImageLibraryURL, W as useEventCallback, z as useConfig, b2 as emptyImageData, b3 as ImageDimensionsInput, b4 as parseImageData, b5 as loadImageData, b6 as UploadImageButton, o as object, b0 as text, b7 as assertRequired, a_ as fixPath, a as useTree, b8 as SlugFieldContext, b9 as PathContext, ba as validateText } from './index-269488d0.js';
export { aK as NotEditable } from './index-269488d0.js';
import { c } from './react-compiler-runtime-0011f46e.js';
import { Picker, Item } from '@keystar/ui/picker';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { ActionButton, ButtonGroup, Button, ClearButton } from '@keystar/ui/button';
import { Dialog, DialogContainer, useDialogContainer } from '@keystar/ui/dialog';
import { FieldLabel, FieldDescription, FieldMessage } from '@keystar/ui/field';
import { VStack, Flex, Box } from '@keystar/ui/layout';
import { MenuTrigger, Menu, Item as Item$1 } from '@keystar/ui/menu';
import { Content } from '@keystar/ui/slots';
import { Heading, Text } from '@keystar/ui/typography';
import { useLocalizedStringFormatter } from '@react-aria/i18n';
import { useField } from '@react-aria/label';
import { useState, useId, useMemo, useEffect, useReducer, useContext } from 'react';
import { Checkbox } from '@keystar/ui/checkbox';
import { NumberField } from '@keystar/ui/number-field';
import { TextField, TextArea } from '@keystar/ui/text-field';
import { Icon } from '@keystar/ui/icon';
import { imageIcon } from '@keystar/ui/icon/icons/imageIcon';
import { TextLink } from '@keystar/ui/link';
import { ProgressCircle } from '@keystar/ui/progress';
import { tokenSchema, css, containerQueries } from '@keystar/ui/style';
import '@braintree/sanitize-url';
import { Item as Item$2 } from '@react-stately/collections';
import { ActionBarContainer, ActionBar } from '@keystar/ui/action-bar';
import { Combobox, Item as Item$3 } from '@keystar/ui/combobox';
import { useDragAndDrop, move } from '@keystar/ui/drag-and-drop';
import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
import { ListView } from '@keystar/ui/list-view';
import { isString } from 'emery';
import { filter } from 'minimatch';
import { refreshCwIcon } from '@keystar/ui/icon/icons/refreshCwIcon';
import slugify from '@sindresorhus/slugify';
import { i as integer } from './index-d82d90ab.js';
import { u as useSlugsInCollection } from './useSlugsInCollection-56c61c3b.js';
import '@markdoc/markdoc/dist/index.mjs';
import 'prosemirror-commands';
import 'prosemirror-state';
import 'prosemirror-transform';
import '@keystar/ui/editor';
import '@keystar/ui/icon/icons/boldIcon';
import '@keystar/ui/icon/icons/chevronDownIcon';
import '@keystar/ui/icon/icons/codeIcon';
import '@keystar/ui/icon/icons/italicIcon';
import '@keystar/ui/icon/icons/listIcon';
import '@keystar/ui/icon/icons/listOrderedIcon';
import '@keystar/ui/icon/icons/minusIcon';
import '@keystar/ui/icon/icons/plusIcon';
import '@keystar/ui/icon/icons/quoteIcon';
import '@keystar/ui/icon/icons/removeFormattingIcon';
import '@keystar/ui/icon/icons/strikethroughIcon';
import '@keystar/ui/icon/icons/tableIcon';
import '@keystar/ui/tooltip';
import '@keystar/ui/icon/icons/fileCodeIcon';
import '@keystar/ui/icon/icons/heading1Icon';
import '@keystar/ui/icon/icons/heading2Icon';
import '@keystar/ui/icon/icons/heading3Icon';
import '@keystar/ui/icon/icons/heading4Icon';
import '@keystar/ui/icon/icons/heading5Icon';
import '@keystar/ui/icon/icons/heading6Icon';
import '@keystar/ui/icon/icons/separatorHorizontalIcon';
import 'prosemirror-model';
import 'slate';
import 'slate-react';
import 'is-hotkey';
import '@keystar/ui/split-view';
import '@keystar/ui/icon/icons/panelLeftOpenIcon';
import '@keystar/ui/icon/icons/panelLeftCloseIcon';
import '@keystar/ui/icon/icons/panelRightOpenIcon';
import '@keystar/ui/icon/icons/panelRightCloseIcon';
import '@react-aria/overlays';
import '@react-aria/utils';
import '@react-stately/overlays';
import '@keystar/ui/badge';
import '@keystar/ui/nav-list';
import '@keystar/ui/overlays';
import '@keystar/ui/status-light';
import '@keystar/ui/utils';
import '@keystar/ui/core';
import '@ts-gql/tag/no-transform';
import 'urql';
import '@keystar/ui/avatar';
import '@keystar/ui/icon/icons/logOutIcon';
import '@keystar/ui/icon/icons/gitPullRequestIcon';
import '@keystar/ui/icon/icons/gitBranchPlusIcon';
import '@keystar/ui/icon/icons/githubIcon';
import '@keystar/ui/icon/icons/gitForkIcon';
import '@keystar/ui/icon/icons/monitorIcon';
import '@keystar/ui/icon/icons/moonIcon';
import '@keystar/ui/icon/icons/sunIcon';
import '@keystar/ui/icon/icons/userIcon';
import '@keystar/ui/icon/icons/gitBranchIcon';
import '@keystar/ui/radio';
import '@keystar/ui/icon/icons/editIcon';
import '@keystar/ui/icon/icons/externalLinkIcon';
import '@keystar/ui/icon/icons/linkIcon';
import '@keystar/ui/icon/icons/unlinkIcon';
import '@keystar/ui/action-group';
import '@keystar/ui/icon/icons/maximizeIcon';
import '@keystar/ui/icon/icons/minimizeIcon';
import '@keystar/ui/icon/icons/subscriptIcon';
import '@keystar/ui/icon/icons/superscriptIcon';
import '@keystar/ui/icon/icons/typeIcon';
import '@keystar/ui/icon/icons/underlineIcon';
import '@keystar/ui/icon/icons/alignLeftIcon';
import '@keystar/ui/icon/icons/alignRightIcon';
import '@keystar/ui/icon/icons/alignCenterIcon';
import 'match-sorter';
import 'emery/assertions';
import '@keystar/ui/icon/icons/trashIcon';
import '@emotion/weak-memoize';
import '@keystar/ui/icon/icons/columnsIcon';
import '@keystar/ui/icon/icons/fileUpIcon';
import 'y-prosemirror';
import '@keystar/ui/icon/icons/sheetIcon';
import 'scroll-into-view-if-needed';
import '@react-stately/list';
import '@keystar/ui/listbox';
import 'slate-history';
import 'mdast-util-from-markdown';
import 'mdast-util-gfm-autolink-literal';
import 'micromark-extension-gfm-autolink-literal';
import 'mdast-util-gfm-strikethrough';
import 'micromark-extension-gfm-strikethrough';
import './base64-3538d789.js';
import 'prosemirror-view';
import '@react-aria/selection';
import 'prosemirror-tables';
import '@keystar/ui/icon/icons/pencilIcon';
import 'react-dom';
import 'prosemirror-history';
import 'prosemirror-keymap';
import 'escape-string-regexp';
import 'mdast-util-to-markdown';
import 'mdast-util-gfm-table';
import 'mdast-util-mdx';
import 'micromark-extension-gfm-table';
import 'micromark-extension-mdxjs';
import 'unist-util-visit';
import 'superstruct';
import '@keystar/ui/icon/icons/link2Icon';
import '@keystar/ui/icon/icons/link2OffIcon';
import '@keystar/ui/icon/icons/undo2Icon';
import '@keystar/ui/toast';
import 'y-protocols/awareness';
import 'yjs';
import '@toeverything/y-indexeddb';
import 'lib0/broadcastchannel';
import 'lib0/time';
import 'lib0/encoding';
import 'lib0/decoding';
import 'y-protocols/sync';
import 'y-protocols/auth';
import 'lib0/mutex';
import 'lib0/math';
import 'cookie';
import 'idb-keyval';
import 'lru-cache';
import 'partysocket/ws';
import 'lib0/encoding.js';
function array(element, opts) {
var _opts$label;
return {
kind: 'array',
element,
label: (_opts$label = opts === null || opts === void 0 ? void 0 : opts.label) !== null && _opts$label !== void 0 ? _opts$label : 'Items',
description: opts === null || opts === void 0 ? void 0 : opts.description,
itemLabel: opts === null || opts === void 0 ? void 0 : opts.itemLabel,
asChildTag: opts === null || opts === void 0 ? void 0 : opts.asChildTag,
slugField: opts === null || opts === void 0 ? void 0 : opts.slugField,
validation: opts === null || opts === void 0 ? void 0 : opts.validation
};
}
function SelectFieldInput(props) {
const $ = c(13);
const fieldSpan = useFieldSpan();
let t0;
if ($[0] !== props) {
t0 = key => {
props.onChange(key);
};
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];
}
const t1 = fieldSpan === 12 ? "alias.singleLineWidth" : "auto";
let t2;
if ($[2] !== t1) {
t2 = {
mobile: "auto",
tablet: t1
};
$[2] = t1;
$[3] = t2;
} else {
t2 = $[3];
}
let t3;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t3 = item => /*#__PURE__*/jsx(Item, {
children: item.label
}, item.value);
$[4] = t3;
} else {
t3 = $[4];
}
let t4;
if ($[5] !== props.label || $[6] !== props.description || $[7] !== props.options || $[8] !== props.value || $[9] !== props.autoFocus || $[10] !== t0 || $[11] !== t2) {
t4 = /*#__PURE__*/jsx(Picker, {
label: props.label,
description: props.description,
items: props.options,
selectedKey: props.value,
onSelectionChange: t0,
autoFocus: props.autoFocus,
width: t2,
children: t3
});
$[5] = props.label;
$[6] = props.description;
$[7] = props.options;
$[8] = props.value;
$[9] = props.autoFocus;
$[10] = t0;
$[11] = t2;
$[12] = t4;
} else {
t4 = $[12];
}
return t4;
}
function select({
label,
options,
defaultValue,
description
}) {
const optionValuesSet = new Set(options.map(x => x.value));
if (!optionValuesSet.has(defaultValue)) {
throw new Error(`A defaultValue of ${defaultValue} was provided to a select field but it does not match the value of one of the options provided`);
}
const field = basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(SelectFieldInput, {
label: label,
options: options,
description: description,
...props
});
},
defaultValue() {
return defaultValue;
},
parse(value) {
if (value === undefined) {
return defaultValue;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
if (!optionValuesSet.has(value)) {
throw new FieldDataError('Must be a valid option');
}
return value;
},
validate(value) {
return value;
},
serialize(value) {
return {
value
};
}
});
return {
...field,
options
};
}
function BlocksFieldInput(props) {
var _props$schema$validat, _props$schema$validat2;
const $ = c(77);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = {
kind: "closed"
};
$[0] = t0;
} else {
t0 = $[0];
}
const [modalState, setModalState] = useState(t0);
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = () => {
setModalState({
kind: "closed"
});
};
$[1] = t1;
} else {
t1 = $[1];
}
const dismiss = t1;
const minLength = (_props$schema$validat = (_props$schema$validat2 = props.schema.validation) === null || _props$schema$validat2 === void 0 || (_props$schema$validat2 = _props$schema$validat2.length) === null || _props$schema$validat2 === void 0 ? void 0 : _props$schema$validat2.min) !== null && _props$schema$validat !== void 0 ? _props$schema$validat : 0;
const formId = useId();
const stringFormatter = useLocalizedStringFormatter(strings);
const errorMessage = useArrayFieldValidationMessage(props);
const t2 = !!errorMessage;
let t3;
if ($[2] !== props.schema.description || $[3] !== props.schema.label || $[4] !== errorMessage || $[5] !== t2) {
t3 = {
description: props.schema.description,
errorMessage,
isInvalid: t2,
label: props.schema.label,
labelElementType: "span"
};
$[2] = props.schema.description;
$[3] = props.schema.label;
$[4] = errorMessage;
$[5] = t2;
$[6] = t3;
} else {
t3 = $[6];
}
const {
descriptionProps,
errorMessageProps,
fieldProps: groupProps,
labelProps
} = useField(t3);
const t4 = minLength > 0;
let t5;
if ($[7] !== t4 || $[8] !== labelProps || $[9] !== props.schema.label) {
t5 = /*#__PURE__*/jsx(FieldLabel, {
elementType: "span",
isRequired: t4,
supplementRequiredState: true,
...labelProps,
children: props.schema.label
});
$[7] = t4;
$[8] = labelProps;
$[9] = props.schema.label;
$[10] = t5;
} else {
t5 = $[10];
}
let t6;
if ($[11] !== props.schema.description || $[12] !== descriptionProps) {
t6 = props.schema.description && /*#__PURE__*/jsx(FieldDescription, {
...descriptionProps,
children: props.schema.description
});
$[11] = props.schema.description;
$[12] = descriptionProps;
$[13] = t6;
} else {
t6 = $[13];
}
let t7;
if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
t7 = /*#__PURE__*/jsx(ActionButton, {
alignSelf: "start",
children: "Add"
});
$[14] = t7;
} else {
t7 = $[14];
}
let t8;
if ($[15] !== props.schema.element.discriminant.options) {
t8 = discriminant => {
var _props$schema$element;
const val = (_props$schema$element = props.schema.element.discriminant.options.find(x => x.value.toString() === discriminant.toString())) === null || _props$schema$element === void 0 ? void 0 : _props$schema$element.value;
if (val === undefined) {
return;
}
setModalState({
kind: "new",
discriminant: val
});
};
$[15] = props.schema.element.discriminant.options;
$[16] = t8;
} else {
t8 = $[16];
}
let t9;
if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
t9 = item => /*#__PURE__*/jsx(Item$1, {
children: item.label
}, item.value.toString());
$[17] = t9;
} else {
t9 = $[17];
}
let t10;
if ($[18] !== props.schema.element.discriminant.options || $[19] !== t8) {
t10 = /*#__PURE__*/jsxs(MenuTrigger, {
children: [t7, /*#__PURE__*/jsx(Menu, {
items: props.schema.element.discriminant.options,
onAction: t8,
children: t9
})]
});
$[18] = props.schema.element.discriminant.options;
$[19] = t8;
$[20] = t10;
} else {
t10 = $[20];
}
let t11;
if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
t11 = idx => {
setModalState({
kind: "edit",
idx
});
};
$[21] = t11;
} else {
t11 = $[21];
}
let t12;
if ($[22] !== props) {
t12 = /*#__PURE__*/jsx(ArrayFieldListView, {
...props,
"aria-label": props.schema.label,
onOpenItem: t11
});
$[22] = props;
$[23] = t12;
} else {
t12 = $[23];
}
let t13;
if ($[24] !== errorMessage || $[25] !== errorMessageProps) {
t13 = errorMessage && /*#__PURE__*/jsx(FieldMessage, {
...errorMessageProps,
children: errorMessage
});
$[24] = errorMessage;
$[25] = errorMessageProps;
$[26] = t13;
} else {
t13 = $[26];
}
let t14;
bb0: {
if (modalState.kind === "closed") {
t14 = null;
break bb0;
}
if (modalState.kind === "edit") {
const idx_0 = modalState.idx;
const previewProps = props.elements[idx_0].value;
const {
discriminant: discriminant_0
} = props.elements[idx_0];
let t15;
if ($[27] !== discriminant_0 || $[28] !== props.schema.element.discriminant.options) {
var _props$schema$element2;
t15 = (_props$schema$element2 = props.schema.element.discriminant.options.find(x_0 => x_0.value === discriminant_0)) === null || _props$schema$element2 === void 0 ? void 0 : _props$schema$element2.label;
$[27] = discriminant_0;
$[28] = props.schema.element.discriminant.options;
$[29] = t15;
} else {
t15 = $[29];
}
let t16;
if ($[30] !== t15) {
t16 = /*#__PURE__*/jsxs(Heading, {
children: ["Edit", " ", t15]
});
$[30] = t15;
$[31] = t16;
} else {
t16 = $[31];
}
let t17;
if ($[32] !== formId || $[33] !== previewProps || $[34] !== idx_0) {
t17 = /*#__PURE__*/jsx(BlocksEditItemModalContent, {
formId: formId,
onClose: dismiss,
previewProps: previewProps,
modalStateIndex: idx_0
});
$[32] = formId;
$[33] = previewProps;
$[34] = idx_0;
$[35] = t17;
} else {
t17 = $[35];
}
let t18;
if ($[36] !== formId) {
t18 = /*#__PURE__*/jsx(ButtonGroup, {
children: /*#__PURE__*/jsx(Button, {
form: formId,
prominence: "high",
type: "submit",
children: "Done"
})
});
$[36] = formId;
$[37] = t18;
} else {
t18 = $[37];
}
let t19;
if ($[38] !== t16 || $[39] !== t17 || $[40] !== t18) {
t19 = /*#__PURE__*/jsxs(Dialog, {
children: [t16, t17, t18]
});
$[38] = t16;
$[39] = t17;
$[40] = t18;
$[41] = t19;
} else {
t19 = $[41];
}
t14 = t19;
break bb0;
}
const discriminant_1 = modalState.discriminant;
let t15;
if ($[42] !== discriminant_1 || $[43] !== props.schema.element.discriminant.options) {
var _props$schema$element3;
t15 = (_props$schema$element3 = props.schema.element.discriminant.options.find(x_1 => x_1.value === discriminant_1)) === null || _props$schema$element3 === void 0 ? void 0 : _props$schema$element3.label;
$[42] = discriminant_1;
$[43] = props.schema.element.discriminant.options;
$[44] = t15;
} else {
t15 = $[44];
}
let t16;
if ($[45] !== t15) {
t16 = /*#__PURE__*/jsxs(Heading, {
children: ["Add", " ", t15]
});
$[45] = t15;
$[46] = t16;
} else {
t16 = $[46];
}
let t17;
if ($[47] !== discriminant_1 || $[48] !== formId || $[49] !== props) {
t17 = /*#__PURE__*/jsx(Content, {
children: /*#__PURE__*/jsx(BlocksAddItemModalContent, {
discriminant: discriminant_1,
formId: formId,
previewProps: props
})
});
$[47] = discriminant_1;
$[48] = formId;
$[49] = props;
$[50] = t17;
} else {
t17 = $[50];
}
let t18;
if ($[51] !== stringFormatter) {
t18 = stringFormatter.format("cancel");
$[51] = stringFormatter;
$[52] = t18;
} else {
t18 = $[52];
}
let t19;
if ($[53] !== t18) {
t19 = /*#__PURE__*/jsx(Button, {
onPress: dismiss,
children: t18
});
$[53] = t18;
$[54] = t19;
} else {
t19 = $[54];
}
let t20;
if ($[55] !== stringFormatter) {
t20 = stringFormatter.format("add");
$[55] = stringFormatter;
$[56] = t20;
} else {
t20 = $[56];
}
let t21;
if ($[57] !== formId || $[58] !== t20) {
t21 = /*#__PURE__*/jsx(Button, {
form: formId,
prominence: "high",
type: "submit",
children: t20
});
$[57] = formId;
$[58] = t20;
$[59] = t21;
} else {
t21 = $[59];
}
let t22;
if ($[60] !== t19 || $[61] !== t21) {
t22 = /*#__PURE__*/jsxs(ButtonGroup, {
children: [t19, t21]
});
$[60] = t19;
$[61] = t21;
$[62] = t22;
} else {
t22 = $[62];
}
let t23;
if ($[63] !== t16 || $[64] !== t17 || $[65] !== t22) {
t23 = /*#__PURE__*/jsxs(Dialog, {
children: [t16, t17, t22]
});
$[63] = t16;
$[64] = t17;
$[65] = t22;
$[66] = t23;
} else {
t23 = $[66];
}
t14 = t23;
}
let t15;
if ($[67] !== t14) {
t15 = /*#__PURE__*/jsx(DialogContainer, {
onDismiss: dismiss,
children: t14
});
$[67] = t14;
$[68] = t15;
} else {
t15 = $[68];
}
let t16;
if ($[69] !== groupProps || $[70] !== t5 || $[71] !== t6 || $[72] !== t10 || $[73] !== t12 || $[74] !== t13 || $[75] !== t15) {
t16 = /*#__PURE__*/jsxs(VStack, {
gap: "medium",
role: "group",
minWidth: 0,
...groupProps,
children: [t5, t6, t10, t12, t13, t15]
});
$[69] = groupProps;
$[70] = t5;
$[71] = t6;
$[72] = t10;
$[73] = t12;
$[74] = t13;
$[75] = t15;
$[76] = t16;
} else {
t16 = $[76];
}
return t16;
}
function BlocksEditItemModalContent(props) {
const $ = c(8);
let t0;
if ($[0] !== props) {
t0 = event => {
if (event.target !== event.currentTarget) {
return;
}
event.preventDefault();
props.onClose();
};
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];
}
let t1;
if ($[2] !== props.previewProps) {
t1 = /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
autoFocus: true,
...props.previewProps
});
$[2] = props.previewProps;
$[3] = t1;
} else {
t1 = $[3];
}
let t2;
if ($[4] !== props.formId || $[5] !== t0 || $[6] !== t1) {
t2 = /*#__PURE__*/jsx(Content, {
children: /*#__PURE__*/jsx(VStack, {
id: props.formId,
elementType: "form",
onSubmit: t0,
gap: "xxlarge",
children: t1
})
});
$[4] = props.formId;
$[5] = t0;
$[6] = t1;
$[7] = t2;
} else {
t2 = $[7];
}
return t2;
}
function BlocksAddItemModalContent(props) {
const schema = props.previewProps.schema.element.values[props.discriminant.toString()];
const [value, setValue] = useState(() => getInitialPropsValue(schema));
const [forceValidation, setForceValidation] = useState(false);
const previewProps = useMemo(() => createGetPreviewProps(schema, setValue, () => undefined), [schema, setValue])(value);
const {
dismiss
} = useDialogContainer();
return /*#__PURE__*/jsx(VStack, {
id: props.formId,
elementType: "form",
onSubmit: event => {
if (event.target !== event.currentTarget) return;
event.preventDefault();
if (!clientSideValidateProp(schema, value, undefined)) {
setForceValidation(true);
return;
}
props.previewProps.onChange([...props.previewProps.elements.map(x => ({
key: x.key
})), {
key: undefined,
value: valueToUpdater({
value,
discriminant: props.discriminant
}, props.previewProps.schema.element)
}]);
dismiss();
},
gap: "xxlarge",
children: /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
forceValidation: forceValidation,
autoFocus: true,
...previewProps
})
});
}
function blocks(blocks, opts) {
const entries = Object.entries(blocks);
if (!entries.length) {
throw new Error('fields.blocks must have at least one entry');
}
const select$1 = select({
label: 'Kind',
defaultValue: entries[0][0],
options: Object.entries(blocks).map(([key, {
label
}]) => ({
label,
value: key
}))
});
const element = conditional(select$1, Object.fromEntries(entries.map(([key, {
schema
}]) => [key, schema])));
return {
...array(element, {
label: opts.label,
description: opts.description,
validation: opts.validation,
itemLabel(props) {
const kind = props.discriminant;
const block = blocks[kind];
if (!block.itemLabel) return block.label;
return block.itemLabel(props.value);
}
}),
Input: BlocksFieldInput
};
}
function CheckboxFieldInput(props) {
const $ = c(10);
let t0;
if ($[0] !== props.label) {
t0 = /*#__PURE__*/jsx(Text, {
children: props.label
});
$[0] = props.label;
$[1] = t0;
} else {
t0 = $[1];
}
let t1;
if ($[2] !== props.description) {
t1 = props.description && /*#__PURE__*/jsx(Text, {
slot: "description",
children: props.description
});
$[2] = props.description;
$[3] = t1;
} else {
t1 = $[3];
}
let t2;
if ($[4] !== props.value || $[5] !== props.onChange || $[6] !== props.autoFocus || $[7] !== t0 || $[8] !== t1) {
t2 = /*#__PURE__*/jsxs(Checkbox, {
isSelected: props.value,
onChange: props.onChange,
autoFocus: props.autoFocus,
children: [t0, t1]
});
$[4] = props.value;
$[5] = props.onChange;
$[6] = props.autoFocus;
$[7] = t0;
$[8] = t1;
$[9] = t2;
} else {
t2 = $[9];
}
return t2;
}
function checkbox({
label,
defaultValue = false,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(CheckboxFieldInput, {
...props,
label: label,
description: description
});
},
defaultValue() {
return defaultValue;
},
parse(value) {
if (value === undefined) return defaultValue;
if (typeof value !== 'boolean') {
throw new FieldDataError('Must be a boolean');
}
return value;
},
validate(value) {
return value;
},
serialize(value) {
return {
value
};
}
});
}
function child(options) {
return {
kind: 'child',
options: options.kind === 'block' ? {
...options,
dividers: options.dividers,
formatting: options.formatting === 'inherit' ? {
blockTypes: 'inherit',
headingLevels: 'inherit',
inlineMarks: 'inherit',
listTypes: 'inherit',
alignment: 'inherit',
softBreaks: 'inherit'
} : options.formatting,
links: options.links,
images: options.images,
tables: options.tables,
componentBlocks: options.componentBlocks
} : {
kind: 'inline',
placeholder: options.placeholder,
formatting: options.formatting === 'inherit' ? {
inlineMarks: 'inherit',
softBreaks: 'inherit'
} : options.formatting,
links: options.links
}
};
}
function ImageField(props) {
const $ = c(41);
const {
image,
onChange
} = props;
const [status, setStatus] = useState(image.src ? "good" : "");
const imageLibraryURL = useImageLibraryURL();
let t0;
if ($[0] !== props) {
t0 = event => {
event.preventDefault();
const text = event.clipboardData.getData("text/plain");
const parsed = parseImageData(text);
props.onChange(parsed);
};
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];
}
const onPaste = t0;
let t1;
if ($[2] !== onChange) {
t1 = data => {
onChange(data);
setStatus("good");
};
$[2] = onChange;
$[3] = t1;
} else {
t1 = $[3];
}
const onLoad = useEventCallback(t1);
const config = useConfig();
const hasSetFields = !!(props.image.alt || props.image.width || props.image.height);
let t2;
let t3;
if ($[4] !== props.image.src || $[5] !== hasSetFields || $[6] !== config || $[7] !== onLoad) {
t2 = () => {
if (!props.image.src) {
setStatus("");
return;
}
if (!isValidURL(props.image.src)) {
return;
}
if (hasSetFields) {
setStatus("good");
return;
}
setStatus("loading");
loadImageData(props.image.src, config).then(newData => {
onLoad(newData);
}).catch(() => {
setStatus("error");
});
};
t3 = [config, hasSetFields, onLoad, props.image.src];
$[4] = props.image.src;
$[5] = hasSetFields;
$[6] = config;
$[7] = onLoad;
$[8] = t2;
$[9] = t3;
} else {
t2 = $[8];
t3 = $[9];
}
useEffect(t2, t3);
const [blurred, setBlurred] = useState(false);
const errorMessage = (blurred || props.forceValidation) && props.isRequired && !image.src ? "Image URL is required." : undefined;
let t4;
if ($[10] !== props) {
t4 = e => {
if (e.code === "Backspace" || e.code === "Delete") {
props.onChange(emptyImageData);
}
};
$[10] = props;
$[11] = t4;
} else {
t4 = $[11];
}
let t5;
if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
t5 = () => setBlurred(true);
$[12] = t5;
} else {
t5 = $[12];
}
let t6;
if ($[13] !== imageLibraryURL) {
t6 = /*#__PURE__*/jsxs(Text, {
children: ["Upload an image, or copy a URL from the", " ", /*#__PURE__*/jsx(TextLink, {
prominence: "high",
href: imageLibraryURL,
target: "_blank",
rel: "noreferrer",
children: "Image\xA0Library"
}), " ", "and paste it into this field."]
});
$[13] = imageLibraryURL;
$[14] = t6;
} else {
t6 = $[14];
}
let t7;
if ($[15] !== status || $[16] !== image || $[17] !== props) {
t7 = status === "loading" ? /*#__PURE__*/jsx(Flex, {
height: "element.regular",
width: "element.regular",
alignItems: "center",
justifyContent: "center",
children: /*#__PURE__*/jsx(ProgressCircle, {
size: "small",
"aria-label": "Checking\u2026",
isIndeterminate: true
})
}) : image.src ? /*#__PURE__*/jsx(ClearButton, {
onPress: () => {
props.onChange(emptyImageData);
setStatus("");
},
preventFocus: true
}) : null;
$[15] = status;
$[16] = image;
$[17] = props;
$[18] = t7;
} else {
t7 = $[18];
}
let t8;
if ($[19] !== props.isRequired || $[20] !== props.autoFocus || $[21] !== errorMessage || $[22] !== onPaste || $[23] !== t4 || $[24] !== image.src || $[25] !== t6 || $[26] !== t7) {
t8 = /*#__PURE__*/jsx(TextField, {
label: "Image URL",
isRequired: props.isRequired,
errorMessage: errorMessage,
autoFocus: props.autoFocus,
onPaste: onPaste,
onKeyDown: t4,
onBlur: t5,
value: image.src,
description: t6,
endElement: t7
});
$[19] = props.isRequired;
$[20] = props.autoFocus;
$[21] = errorMessage;
$[22] = onPaste;
$[23] = t4;
$[24] = image.src;
$[25] = t6;
$[26] = t7;
$[27] = t8;
} else {
t8 = $[27];
}
let t9;
if ($[28] !== onChange) {
t9 = /*#__PURE__*/jsx(UploadImageButton, {
alignSelf: "start",
onUploaded: data_0 => {
onChange(data_0);
}
});
$[28] = onChange;
$[29] = t9;
} else {
t9 = $[29];
}
let t10;
if ($[30] !== t8 || $[31] !== t9) {
t10 = /*#__PURE__*/jsxs(VStack, {
gap: "medium",
children: [t8, t9]
});
$[30] = t8;
$[31] = t9;
$[32] = t10;
} else {
t10 = $[32];
}
let t11;
if ($[33] !== status || $[34] !== image || $[35] !== props || $[36] !== onChange) {
t11 = status === "good" ? /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(Box, {
alignSelf: "start",
backgroundColor: "canvas",
borderRadius: "regular",
border: "neutral",
padding: "regular",
children: /*#__PURE__*/jsx("img", {
alt: image.alt,
src: image.src,
style: {
display: "block",
maxHeight: tokenSchema.size.alias.singleLineWidth,
maxWidth: "100%"
}
})
}), /*#__PURE__*/jsx(TextArea, {
label: "Alt text",
value: image.alt,
onChange: alt => props.onChange({
...image,
alt
})
}), /*#__PURE__*/jsx(ImageDimensionsInput, {
src: image.src,
image: image,
onChange: dimensions => {
onChange({
...props.image,
...dimensions
});
}
})]
}) : /*#__PURE__*/jsxs(VStack, {
"aria-hidden": true,
alignItems: "center",
backgroundColor: "surface",
borderRadius: "regular",
gap: "medium",
paddingX: "large",
paddingY: "xlarge",
children: [/*#__PURE__*/jsx(Icon, {
src: imageIcon,
color: "neutralSecondary",
size: "medium"
}), /*#__PURE__*/jsx(Text, {
align: "center",
color: "neutralSecondary",
size: "small",
children: "Awaiting URL to display image preview and information\u2026"
})]
});
$[33] = status;
$[34] = image;
$[35] = props;
$[36] = onChange;
$[37] = t11;
} else {
t11 = $[37];
}
let t12;
if ($[38] !== t10 || $[39] !== t11) {
t12 = /*#__PURE__*/jsxs(VStack, {
gap: "xlarge",
padding: "large",
children: [t10, t11]
});
$[38] = t10;
$[39] = t11;
$[40] = t12;
} else {
t12 = $[40];
}
return t12;
}
function CloudImageFieldInput(props) {
var _props$fields$width$v, _props$fields$height$;
const $ = c(27);
const labelId = useId();
const descriptionId = useId();
const t0 = props.schema.description ? descriptionId : undefined;
let t1;
if ($[0] !== labelId || $[1] !== props.schema.label) {
t1 = /*#__PURE__*/jsx(Text, {
color: "neutralEmphasis",
size: "medium",
weight: "medium",
id: labelId,
children: props.schema.label
});
$[0] = labelId;
$[1] = props.schema.label;
$[2] = t1;
} else {
t1 = $[2];
}
let t2;
if ($[3] !== props.schema.description || $[4] !== descriptionId) {
t2 = !!props.schema.description && /*#__PURE__*/jsx(Text, {
id: descriptionId,
size: "regular",
color: "neutralSecondary",
children: props.schema.description
});
$[3] = props.schema.description;
$[4] = descriptionId;
$[5] = t2;
} else {
t2 = $[5];
}
let t3;
if ($[6] !== t1 || $[7] !== t2) {
t3 = /*#__PURE__*/jsxs(VStack, {
backgroundColor: "surface",
borderBottom: "muted",
borderTopStartRadius: "medium",
borderTopEndRadius: "medium",
gap: "medium",
minWidth: 0,
padding: "large",
children: [t1, t2]
});
$[6] = t1;
$[7] = t2;
$[8] = t3;
} else {
t3 = $[8];
}
const t4 = (_props$fields$width$v = props.fields.width.value) !== null && _props$fields$width$v !== void 0 ? _props$fields$width$v : undefined;
const t5 = (_props$fields$height$ = props.fields.height.value) !== null && _props$fields$height$ !== void 0 ? _props$fields$height$ : undefined;
let t6;
if ($[9] !== props.fields.src.value || $[10] !== props.fields.alt.value || $[11] !== t4 || $[12] !== t5) {
t6 = {
src: props.fields.src.value,
alt: props.fields.alt.value,
width: t4,
height: t5
};
$[9] = props.fields.src.value;
$[10] = props.fields.alt.value;
$[11] = t4;
$[12] = t5;
$[13] = t6;
} else {
t6 = $[13];
}
let t7;
if ($[14] !== props) {
t7 = data => {
var _data$width, _data$height;
props.onChange({
src: data.src,
alt: data.alt,
width: (_data$width = data.width) !== null && _data$width !== void 0 ? _data$width : null,
height: (_data$height = data.height) !== null && _data$height !== void 0 ? _data$height : null
});
};
$[14] = props;
$[15] = t7;
} else {
t7 = $[15];
}
let t8;
if ($[16] !== t6 || $[17] !== t7 || $[18] !== props.autoFocus || $[19] !== props.isRequired || $[20] !== props.forceValidation) {
t8 = /*#__PURE__*/jsx(ImageField, {
image: t6,
onChange: t7,
autoFocus: props.autoFocus,
isRequired: props.isRequired,
forceValidation: props.forceValidation
});
$[16] = t6;
$[17] = t7;
$[18] = props.autoFocus;
$[19] = props.isRequired;
$[20] = props.forceValidation;
$[21] = t8;
} else {
t8 = $[21];
}
let t9;
if ($[22] !== labelId || $[23] !== t0 || $[24] !== t3 || $[25] !== t8) {
t9 = /*#__PURE__*/jsxs(VStack, {
"aria-labelledby": labelId,
"aria-describedby": t0,
border: "muted",
borderRadius: "medium",
minWidth: 0,
role: "group",
children: [t3, t8]
});
$[22] = labelId;
$[23] = t0;
$[24] = t3;
$[25] = t8;
$[26] = t9;
} else {
t9 = $[26];
}
return t9;
}
function cloudImage({
label,
description,
validation
}) {
return {
...object({
src: text({
label: 'URL',
validation: {
length: {
min: validation !== null && validation !== void 0 && validation.isRequired ? 1 : 0
}
}
}),
alt: text({
label: 'Alt text'
}),
height: integer({
label: 'Height'
}),
width: integer({
label: 'Width'
})
}, {
label,
description
}),
Input(props) {
return /*#__PURE__*/jsx(CloudImageFieldInput, {
...props,
isRequired: validation === null || validation === void 0 ? void 0 : validation.isRequired
});
}
};
}
function conditional(discriminant, values) {
return {
kind: 'conditional',
discriminant,
values: values
};
}
function validateDate(validation, value, label) {
if (value !== null && !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
return `${label} is not a valid date`;
}
if (validation !== null && validation !== void 0 && validation.isRequired && value === null) {
return `${label} is required`;
}
if ((validation !== null && validation !== void 0 && validation.min || validation !== null && validation !== void 0 && validation.max) && value !== null) {
const date = new Date(value);
if ((validation === null || validation === void 0 ? void 0 : validation.min) !== undefined) {
const min = new Date(validation.min);
if (date < min) {
return `${label} must be after ${min.toLocaleDateString()}`;
}
}
if ((validation === null || validation === void 0 ? void 0 : validation.max) !== undefined) {
const max = new Date(validation.max);
if (date > max) {
return `${label} must be no later than ${max.toLocaleDateString()}`;
}
}
}
}
function DateFieldInput(props) {
var _props$validation;
const $ = c(15);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
let t1;
if ($[1] !== props) {
t1 = val => {
props.onChange(val === "" ? null : val);
};
$[1] = props;
$[2] = t1;
} else {
t1 = $[2];
}
const t2 = props.value === null ? "" : props.value;
const t3 = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.isRequired;
let t4;
if ($[3] !== blurred || $[4] !== props) {
t4 = blurred || props.forceValidation ? validateDate(props.validation, props.value, props.label) : undefined;
$[3] = blurred;
$[4] = props;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== props.label || $[7] !== props.description || $[8] !== props.autoFocus || $[9] !== t1 || $[10] !== t2 || $[11] !== onBlur || $[12] !== t3 || $[13] !== t4) {
t5 = /*#__PURE__*/jsx(TextField, {
label: props.label,
description: props.description,
type: "date",
onChange: t1,
autoFocus: props.autoFocus,
value: t2,
onBlur: onBlur,
isRequired: t3,
errorMessage: t4
});
$[6] = props.label;
$[7] = props.description;
$[8] = props.autoFocus;
$[9] = t1;
$[10] = t2;
$[11] = onBlur;
$[12] = t3;
$[13] = t4;
$[14] = t5;
} else {
t5 = $[14];
}
return t5;
}
function date({
label,
defaultValue,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(DateFieldInput, {
validation: validation,
label: label,
description: description,
...props
});
},
defaultValue() {
if (defaultValue === undefined) {
return null;
}
if (typeof defaultValue === 'string') {
return defaultValue;
}
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
parse(value) {
if (value === undefined) {
return null;
}
if (value instanceof Date) {
const year = value.getUTCFullYear();
const month = String(value.getUTCMonth() + 1).padStart(2, '0');
const day = String(value.getUTCDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
return value;
},
serialize(value) {
if (value === null) return {
value: undefined
};
const date = new Date(value);
date.toISOString = () => value;
date.toString = () => value;
return {
value: date
};
},
validate(value) {
const message = validateDate(validation, value, label);
if (message !== undefined) {
throw new FieldDataError(message);
}
assertRequired(value, validation, label);
return value;
}
});
}
function validateDatetime(validation, value, label) {
if (value !== null && !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value)) {
return `${label} is not a valid datetime`;
}
if (validation !== null && validation !== void 0 && validation.isRequired && value === null) {
return `${label} is required`;
}
if ((validation !== null && validation !== void 0 && validation.min || validation !== null && validation !== void 0 && validation.max) && value !== null) {
const datetime = new Date(value);
if ((validation === null || validation === void 0 ? void 0 : validation.min) !== undefined) {
const min = new Date(validation.min);
if (datetime < min) {
return `${label} must be after ${min.toISOString()}`;
}
}
if ((validation === null || validation === void 0 ? void 0 : validation.max) !== undefined) {
const max = new Date(validation.max);
if (datetime > max) {
return `${label} must be no later than ${max.toISOString()}`;
}
}
}
}
function DatetimeFieldInput(props) {
var _props$validation;
const $ = c(15);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
let t1;
if ($[1] !== props) {
t1 = val => {
props.onChange(val === "" ? null : val);
};
$[1] = props;
$[2] = t1;
} else {
t1 = $[2];
}
const t2 = props.value === null ? "" : props.value;
const t3 = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.isRequired;
let t4;
if ($[3] !== blurred || $[4] !== props) {
t4 = blurred || props.forceValidation ? validateDatetime(props.validation, props.value, props.label) : undefined;
$[3] = blurred;
$[4] = props;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== props.label || $[7] !== props.description || $[8] !== props.autoFocus || $[9] !== t1 || $[10] !== t2 || $[11] !== onBlur || $[12] !== t3 || $[13] !== t4) {
t5 = /*#__PURE__*/jsx(TextField, {
label: props.label,
description: props.description,
type: "datetime-local",
onChange: t1,
autoFocus: props.autoFocus,
value: t2,
onBlur: onBlur,
isRequired: t3,
errorMessage: t4
});
$[6] = props.label;
$[7] = props.description;
$[8] = props.autoFocus;
$[9] = t1;
$[10] = t2;
$[11] = onBlur;
$[12] = t3;
$[13] = t4;
$[14] = t5;
} else {
t5 = $[14];
}
return t5;
}
function datetime({
label,
defaultValue,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(DatetimeFieldInput, {
validation: validation,
label: label,
description: description,
...props
});
},
defaultValue() {
if (defaultValue === undefined) {
return null;
}
if (typeof defaultValue === 'string') {
return defaultValue;
}
if (defaultValue.kind === 'now') {
const now = new Date();
return new Date(now.getTime() - now.getTimezoneOffset() * 60 * 1000).toISOString().slice(0, -8);
}
return null;
},
parse(value) {
if (value === undefined) {
return null;
}
if (value instanceof Date) {
return value.toISOString().slice(0, -8);
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string or date');
}
return value;
},
serialize(value) {
if (value === null) return {
value: undefined
};
const date = new Date(value + 'Z');
date.toJSON = () => date.toISOString().slice(0, -8);
date.toString = () => date.toISOString().slice(0, -8);
return {
value: date
};
},
validate(value) {
const message = validateDatetime(validation, value, label);
if (message !== undefined) {
throw new FieldDataError(message);
}
assertRequired(value, validation, label);
return value;
}
});
}
function empty() {
return basicFormFieldWithSimpleReaderParse({
Input() {
return null;
},
defaultValue() {
return null;
},
parse() {
return null;
},
serialize() {
return {
value: undefined
};
},
validate(value) {
return value;
},
label: 'Empty'
});
}
/**
* @deprecated `emptyDocument` has been replaced with the `emptyContent` field
*/
function emptyDocument() {
return {
kind: 'form',
formKind: 'content',
Input() {
return null;
},
defaultValue() {
return null;
},
parse() {
return null;
},
contentExtension: '.mdoc',
serialize() {
return {
value: undefined,
content: new Uint8Array(),
external: new Map(),
other: new Map()
};
},
validate(value) {
return value;
},
reader: {
parse() {
return null;
}
}
};
}
function emptyContent(opts) {
return {
kind: 'form',
formKind: 'content',
Input() {
return null;
},
defaultValue() {
return null;
},
parse() {
return null;
},
contentExtension: `.${opts.extension}`,
serialize() {
return {
value: undefined,
content: new Uint8Array(),
external: new Map(),
other: new Map()
};
},
validate(value) {
return value;
},
reader: {
parse() {
return null;
}
}
};
}
function FileFieldInput(props) {
var _props$validation;
const $ = c(34);
const {
value
} = props;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
const isInEditor = useIsInDocumentEditor();
const objectUrl = useObjectURL(value === null ? null : value.data, undefined);
const labelId = useId();
const descriptionId = useId();
const t1 = props.description ? descriptionId : undefined;
const t2 = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.isRequired;
let t3;
if ($[1] !== labelId || $[2] !== t2 || $[3] !== props.label) {
t3 = /*#__PURE__*/jsx(FieldLabel, {
id: labelId,
elementType: "span",
isRequired: t2,
children: props.label
});
$[1] = labelId;
$[2] = t2;
$[3] = props.label;
$[4] = t3;
} else {
t3 = $[4];
}
let t4;
if ($[5] !== props.description || $[6] !== descriptionId) {
t4 = props.description && /*#__PURE__*/jsx(FieldDescription, {
id: descriptionId,
children: props.description
});
$[5] = props.description;
$[6] = descriptionId;
$[7] = t4;
} else {
t4 = $[7];
}
let t5;
if ($[8] !== props) {
t5 = /*#__PURE__*/jsx(ActionButton, {
onPress: async () => {
const file = await getUploadedFile("");
if (file) {
var _file$filename$match$, _file$filename$match;
props.onChange({
data: file.content,
filename: props.transformFilename ? props.transformFilename(file.filename) : file.filename,
extension: (_file$filename$match$ = (_file$filename$match = file.filename.match(/\.([^.]+$)/)) === null || _file$filename$match === void 0 ? void 0 : _file$filename$match[1]) !== null && _file$filename$match$ !== void 0 ? _file$filename$match$ : ""
});
}
},
children: "Choose file"
});
$[8] = props;
$[9] = t5;
} else {
t5 = $[9];
}
let t6;
if ($[10] !== value || $[11] !== props || $[12] !== onBlur || $[13] !== objectUrl) {
t6 = value !== null && /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(ActionButton, {
prominence: "low",
onPress: () => {
props.onChange(null);
onBlur();
},
children: "Remove"
}), objectUrl && /*#__PURE__*/jsx(Button, {
href: objectUrl,
download: value.filename,
prominence: "low",
children: "Download"
})]
});
$[10] = value;
$[11] = props;
$[12] = onBlur;
$[13] = objectUrl;
$[14] = t6;
} else {
t6 = $[14];
}
let t7;
if ($[15] !== t5 || $[16] !== t6) {
t7 = /*#__PURE__*/jsxs(ButtonGroup, {
children: [t5, t6]
});
$[15] = t5;
$[16] = t6;
$[17] = t7;
} else {
t7 = $[17];
}
let t8;
if ($[18] !== isInEditor || $[19] !== value || $[20] !== props) {
t8 = isInEditor && value !== null && /*#__PURE__*/jsx(TextField, {
label: "Filename",
onChange: filename => {
props.onChange({
...value,
filename
});
},
value: value.filename
});
$[18] = isInEditor;
$[19] = value;
$[20] = props;
$[21] = t8;
} else {
t8 = $[21];
}
let t9;
if ($[22] !== props || $[23] !== blurred || $[24] !== value) {
var _props$validation2;
t9 = (props.forceValidation || blurred) && ((_props$validation2 = props.validation) === null || _props$validation2 === void 0 ? void 0 : _props$validation2.isRequired) && value === null && /*#__PURE__*/jsxs(FieldMessage, {
children: [props.label, " is required"]
});
$[22] = props;
$[23] = blurred;
$[24] = value;
$[25] = t9;
} else {
t9 = $[25];
}
let t10;
if ($[26] !== t1 || $[27] !== labelId || $[28] !== t3 || $[29] !== t4 || $[30] !== t7 || $[31] !== t8 || $[32] !== t9) {
t10 = /*#__PURE__*/jsxs(Flex, {
"aria-describedby": t1,
"aria-labelledby": labelId,
direction: "column",
gap: "medium",
role: "group",
children: [t3, t4, t7, t8, t9]
});
$[26] = t1;
$[27] = labelId;
$[28] = t3;
$[29] = t4;
$[30] = t7;
$[31] = t8;
$[32] = t9;
$[33] = t10;
} else {
t10 = $[33];
}
return t10;
}
function file({
label,
directory,
validation,
description,
publicPath,
transformFilename
}) {
return {
kind: 'form',
formKind: 'asset',
label,
Input(props) {
return /*#__PURE__*/jsx(FileFieldInput, {
label: label,
description: description,
validation: validation,
transformFilename: transformFilename,
...props
});
},
defaultValue() {
return null;
},
filename(value, args) {
if (typeof value === 'string') {
return value.slice(getSrcPrefix(publicPath, args.slug).length);
}
return undefined;
},
parse(value, args) {
var _value$match$, _value$match;
if (value === undefined) {
return null;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
if (args.asset === undefined) {
return null;
}
return {
data: args.asset,
filename: value.slice(getSrcPrefix(publicPath, args.slug).length),
extension: (_value$match$ = (_value$match = value.match(/\.([^.]+$)/)) === null || _value$match === void 0 ? void 0 : _value$match[1]) !== null && _value$match$ !== void 0 ? _value$match$ : ''
};
},
validate(value) {
assertRequired(value, validation, label);
return value;
},
serialize(value, args) {
if (value === null) {
return {
value: undefined,
asset: undefined
};
}
const filename = args.suggestedFilenamePrefix ? args.suggestedFilenamePrefix + '.' + value.extension : value.filename;
return {
value: `${getSrcPrefix(publicPath, args.slug)}${filename}`,
asset: {
filename,
content: value.data
}
};
},
directory: directory ? fixPath(directory) : undefined,
reader: {
parse(value) {
if (typeof value !== 'string' && value !== undefined) {
throw new FieldDataError('Must be a string');
}
const val = value === undefined ? null : value;
assertRequired(val, validation, label);
return val;
}
}
};
}
function image({
label,
directory,
validation,
description,
publicPath,
transformFilename
}) {
return {
kind: 'form',
formKind: 'asset',
label,
Input(props) {
return /*#__PURE__*/jsx(ImageFieldInput, {
label: label,
description: description,
validation: validation,
transformFilename: transformFilename,
...props
});
},
defaultValue() {
return null;
},
filename(value, args) {
if (typeof value === 'string') {
return value.slice(getSrcPrefix(publicPath, args.slug).length);
}
return undefined;
},
parse(value, args) {
var _value$match$, _value$match;
if (value === undefined) {
return null;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
if (args.asset === undefined) {
return null;
}
return {
data: args.asset,
filename: value.slice(getSrcPrefix(publicPath, args.slug).length),
extension: (_value$match$ = (_value$match = value.match(/\.([^.]+$)/)) === null || _value$match === void 0 ? void 0 : _value$match[1]) !== null && _value$match$ !== void 0 ? _value$match$ : ''
};
},
validate(value) {
assertRequired(value, validation, label);
return value;
},
serialize(value, args) {
if (value === null) {
return {
value: undefined,
asset: undefined
};
}
const filename = args.suggestedFilenamePrefix ? args.suggestedFilenamePrefix + '.' + value.extension : value.filename;
return {
value: `${getSrcPrefix(publicPath, args.slug)}${filename}`,
asset: {
filename,
content: value.data
}
};
},
directory: directory ? fixPath(directory) : undefined,
reader: {
parse(value) {
if (typeof value !== 'string' && value !== undefined) {
throw new FieldDataError('Must be a string');
}
const val = value === undefined ? null : value;
assertRequired(val, validation, label);
return val;
}
}
};
}
function validateMultiRelationshipLength(validation, value) {
var _validation$length$mi, _validation$length, _validation$length$ma, _validation$length2;
const minLength = (_validation$length$mi = validation === null || validation === void 0 || (_validation$length = validation.length) === null || _validation$length === void 0 ? void 0 : _validation$length.min) !== null && _validation$length$mi !== void 0 ? _validation$length$mi : 0;
if (value.length < minLength) {
return `Must have at least ${pluralize(minLength, {
singular: 'item'
})}.`;
}
const maxLength = (_validation$length$ma = validation === null || validation === void 0 || (_validation$length2 = validation.length) === null || _validation$length2 === void 0 ? void 0 : _validation$length2.max) !== null && _validation$length$ma !== void 0 ? _validation$length$ma : Infinity;
if (value.length > maxLength) {
return `Must have at most ${pluralize(maxLength, {
singular: 'item'
})}.`;
}
}
function MultiRelationshipInput(props) {
var _props$validation;
const valAsObjects = useMemo(() => {
return props.value.map(key => ({
key
}));
}, [props.value]);
const [blurred, onBlur] = useReducer(() => true, false);
const slugs = useSlugsInCollection(props.collection);
const options = useMemo(() => {
return slugs.map(slug => ({
slug
}));
}, [slugs]);
const _errorMessage = (props.forceValidation || blurred) && validateMultiRelationshipLength(props.validation, props.value);
// this state & effect shouldn't really exist
// it's here because react-aria/stately calls onSelectionChange with null
// after selecting an item if we immediately remove the error message
// so we delay it with an effect
const [errorMessage, setErrorMessage] = useState(_errorMessage);
useEffect(() => {
setErrorMessage(_errorMessage);
}, [_errorMessage]);
const items = useMemo(() => {
const elementSet = new Set(props.value);
return options.filter(option => !elementSet.has(option.slug));
}, [props.value, options]);
return /*#__PURE__*/jsxs(VStack, {
gap: "medium",
minWidth: 0,
children: [/*#__PURE__*/jsx(Combobox, {
label: props.label,
description: props.description,
selectedKey: null,
placeholder: items.length === 0 ? 'All selected' : undefined,
onSelectionChange: key_0 => {
if (typeof key_0 === 'string') {
props.onChange([...props.value, key_0]);
}
},
disabledKeys: ['No more items…'],
onBlur: onBlur,
autoFocus: props.autoFocus,
defaultItems: items.length ? items : [{
slug: 'No more items…'
}],
isReadOnly: items.length === 0,
isRequired: ((_props$validation = props.validation) === null || _props$validation === void 0 || (_props$validation = _props$validation.length) === null || _props$validation === void 0 ? void 0 : _props$validation.min) !== undefined && props.validation.length.min >= 1,
errorMessage: errorMessage,
width: "auto",
children: item => /*#__PURE__*/jsx(Item$2, {
children: item.slug
}, item.slug)
}), /*#__PURE__*/jsx(MultiRelationshipListView, {
autoFocus: props.autoFocus,
forceValidation: props.forceValidation,
onChange: value => {
props.onChange(value.map(x => x.key));
},
elements: valAsObjects,
"aria-label": props.label
}) ]
});
}
function MultiRelationshipListView(props) {
const [selectedKeys, setSelectedKeys] = useState(() => new Set([]));
let onMove = (keys, target) => {
const targetIndex = props.elements.findIndex(x => x.key === target.key);
if (targetIndex === -1) return;
const allKeys = props.elements.map(x_0 => ({
key: x_0.key
}));
const indexToMoveTo = target.dropPosition === 'before' ? targetIndex : targetIndex + 1;
const indices = keys.map(key => allKeys.findIndex(x_1 => x_1.key === key));
props.onChange(move(allKeys, indices, indexToMoveTo));
};
const dragType = useMemo(() => Math.random().toString(36), []);
let {
dragAndDropHooks
} = useDragAndDrop({
getItems(keys_0) {
// Use a drag type so the items can only be reordered within this list
// and not dragged elsewhere.
return [...keys_0].map(key_0 => {
key_0 = JSON.stringify(key_0);
return {
[dragType]: key_0,
'text/plain': key_0
};
});
},
getAllowedDropOperations() {
return ['move', 'cancel'];
},
async onDrop(e) {
if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
let keys_1 = [];
for (let item of e.items) {
if (item.kind === 'text') {
let key_1;
if (item.types.has(dragType)) {
key_1 = JSON.parse(await item.getText(dragType));
keys_1.push(key_1);
} else if (item.types.has('text/plain')) {
// Fallback for Chrome Android case: https://bugs.chromium.org/p/chromium/issues/detail?id=1293803
// Multiple drag items are contained in a single string so we need to split them out
key_1 = await item.getText('text/plain');
keys_1 = key_1.split('\n').map(val => val.replaceAll('"', ''));
}
}
}
onMove(keys_1, e.target);
}
},
getDropOperation(target_0) {
if (target_0.type === 'root' || target_0.dropPosition === 'on') {
return 'cancel';
}
return 'move';
}
});
return /*#__PURE__*/jsxs(ActionBarContainer, {
maxHeight: "scale.3400",
minHeight: "scale.1600",
children: [/*#__PURE__*/jsx(ListView, {
"aria-label": props['aria-label'],
items: props.elements,
dragAndDropHooks: dragAndDropHooks,
selectionMode: "multiple",
onSelectionChange: setSelectedKeys,
selectedKeys: selectedKeys,
renderEmptyState: arrayFieldEmptyState
// density="compact"
,
UNSAFE_className: css({
borderRadius: tokenSchema.size.radius.regular
}),
children: item_0 => {
const label = item_0.key;
return /*#__PURE__*/jsx(Item$2, {
textValue: label,
children: label
}, item_0.key);
}
}), /*#__PURE__*/jsx(ActionBar, {
selectedItemCount: selectedKeys === 'all' ? 'all' : selectedKeys.size,
onClearSelection: () => setSelectedKeys(new Set()),
onAction: key_2 => {
if (key_2 === 'delete') {
let newItems = props.elements;
if (selectedKeys instanceof Set) {
newItems = props.elements.filter(item_1 => !selectedKeys.has(item_1.key));
} else if (selectedKeys === 'all') {
newItems = [];
}
props.onChange(newItems);
setSelectedKeys(new Set());
}
},
children: /*#__PURE__*/jsxs(Item$2, {
textValue: "Remove",
children: [/*#__PURE__*/jsx(Icon, {
src: trash2Icon
}), /*#__PURE__*/jsx(Text, {
children: "Remove"
})]
}, "delete")
})]
});
}
function arrayFieldEmptyState() {
return /*#__PURE__*/jsx(VStack, {
gap: "large",
alignItems: "center",
justifyContent: "center",
height: "100%",
padding: "regular",
children: /*#__PURE__*/jsx(Text, {
align: "center",
color: "neutralTertiary",
children: "No items selected\u2026"
})
});
}
function multiRelationship({
label,
collection,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(MultiRelationshipInput, {
label: label,
collection: collection,
description: description,
validation: validation,
...props
});
},
defaultValue() {
return [];
},
parse(value) {
if (value === undefined) {
return [];
}
if (!Array.isArray(value) || !value.every(isString)) {
throw new FieldDataError('Must be an array of strings');
}
return value;
},
validate(value) {
const error = validateMultiRelationshipLength(validation, value);
if (error) {
throw new FieldDataError(error);
}
return value;
},
serialize(value) {
return {
value
};
}
});
}
function MultiselectFieldInput(props) {
const $ = c(14);
const labelId = useId();
const descriptionId = useId();
const t0 = props.description ? descriptionId : undefined;
let t1;
if ($[0] !== labelId || $[1] !== props.label) {
t1 = /*#__PURE__*/jsx(FieldLabel, {
elementType: "span",
id: labelId,
children: props.label
});
$[0] = labelId;
$[1] = props.label;
$[2] = t1;
} else {
t1 = $[2];
}
let t2;
if ($[3] !== props.description || $[4] !== descriptionId) {
t2 = props.description && /*#__PURE__*/jsx(Text, {
id: descriptionId,
size: "small",
color: "neutralSecondary",
children: props.description
});
$[3] = props.description;
$[4] = descriptionId;
$[5] = t2;
} else {
t2 = $[5];
}
let t3;
if ($[6] !== props) {
t3 = props.options.map(option => /*#__PURE__*/jsx(Checkbox, {
isSelected: props.value.includes(option.value),
onChange: () => {
if (props.value.includes(option.value)) {
props.onChange(props.value.filter(x => x !== option.value));
} else {
props.onChange([...props.value, option.value]);
}
},
children: option.label
}, option.value));
$[6] = props;
$[7] = t3;
} else {
t3 = $[7];
}
let t4;
if ($[8] !== labelId || $[9] !== t0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
t4 = /*#__PURE__*/jsxs(Flex, {
role: "group",
"aria-labelledby": labelId,
"aria-describedby": t0,
direction: "column",
gap: "medium",
children: [t1, t2, t3]
});
$[8] = labelId;
$[9] = t0;
$[10] = t1;
$[11] = t2;
$[12] = t3;
$[13] = t4;
} else {
t4 = $[13];
}
return t4;
}
function multiselect({
label,
options,
defaultValue = [],
description
}) {
const valuesToOption = new Map(options.map(x => [x.value, x]));
const field = basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(MultiselectFieldInput, {
label: label,
description: description,
options: options,
...props
});
},
defaultValue() {
return defaultValue;
},
parse(value) {
if (value === undefined) {
return [];
}
if (!Array.isArray(value)) {
throw new FieldDataError('Must be an array of options');
}
if (!value.every(x => typeof x === 'string' && valuesToOption.has(x))) {
throw new FieldDataError(`Must be an array with one of ${options.map(x => x.value).join(', ')}`);
}
return value;
},
validate(value) {
return value;
},
serialize(value) {
return {
value
};
}
});
return {
...field,
options
};
}
function validateNumber(validation, value, step, label) {
if (value !== null && typeof value !== 'number') {
return `${label} must be a number`;
}
if (validation !== null && validation !== void 0 && validation.isRequired && value === null) {
return `${label} is required`;
}
if (value !== null) {
if ((validation === null || validation === void 0 ? void 0 : validation.min) !== undefined && value < validation.min) {
return `${label} must be at least ${validation.min}`;
}
if ((validation === null || validation === void 0 ? void 0 : validation.max) !== undefined && value > validation.max) {
return `${label} must be at most ${validation.max}`;
}
if (step !== undefined && (validation === null || validation === void 0 ? void 0 : validation.validateStep) !== undefined && !isAtStep(value, step)) {
return `${label} must be a multiple of ${step}`;
}
}
}
function decimalPlaces(value) {
const stringified = value.toString();
const indexOfDecimal = stringified.indexOf('.');
if (indexOfDecimal === -1) {
const indexOfE = stringified.indexOf('e-');
return indexOfE === -1 ? 0 : parseInt(stringified.slice(indexOfE + 2));
}
return stringified.length - indexOfDecimal - 1;
}
function isAtStep(value, step) {
const dc = Math.max(decimalPlaces(step), decimalPlaces(value));
const base = Math.pow(10, dc);
return value * base % (step * base) === 0;
}
function NumberFieldInput(props) {
var _props$validation;
const $ = c(16);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
const t1 = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.isRequired;
let t2;
if ($[1] !== props || $[2] !== blurred) {
t2 = props.forceValidation || blurred ? validateNumber(props.validation, props.value, props.step, props.label) : undefined;
$[1] = props;
$[2] = blurred;
$[3] = t2;
} else {
t2 = $[3];
}
const t3 = props.value === null ? undefined : props.value;
let t4;
if ($[4] !== props) {
t4 = val => {
props.onChange(val === undefined ? null : val);
};
$[4] = props;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== props.label || $[7] !== props.description || $[8] !== props.autoFocus || $[9] !== props.step || $[10] !== t1 || $[11] !== t2 || $[12] !== onBlur || $[13] !== t3 || $[14] !== t4) {
t5 = /*#__PURE__*/jsx(NumberField, {
label: props.label,
description: props.description,
isRequired: t1,
errorMessage: t2,
onBlur: onBlur,
autoFocus: props.autoFocus,
step: props.step,
value: t3,
onChange: t4
});
$[6] = props.label;
$[7] = props.description;
$[8] = props.autoFocus;
$[9] = props.step;
$[10] = t1;
$[11] = t2;
$[12] = onBlur;
$[13] = t3;
$[14] = t4;
$[15] = t5;
} else {
t5 = $[15];
}
return t5;
}
function number({
label,
defaultValue,
step,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(NumberFieldInput, {
label: label,
description: description,
validation: validation,
step: step,
...props
});
},
defaultValue() {
return defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
},
parse(value) {
if (value === undefined) {
return null;
}
if (typeof value === 'number') {
return value;
}
throw new FieldDataError('Must be a number');
},
validate(value) {
const message = validateNumber(validation, value, step, label);
if (message !== undefined) {
throw new FieldDataError(message);
}
assertRequired(value, validation, label);
return value;
},
serialize(value) {
return {
value: value === null ? undefined : value
};
}
});
}
function PathReferenceInput(props) {
var _props$validation, _props$validation2;
const $ = c(24);
let t0;
let t1;
if ($[0] !== props.pattern) {
t1 = props.pattern ? filter(props.pattern) : () => true;
$[0] = props.pattern;
$[1] = t1;
} else {
t1 = $[1];
}
t0 = t1;
const match = t0;
let t2;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t2 = () => true;
$[2] = t2;
} else {
t2 = $[2];
}
const [blurred, onBlur] = useReducer(t2, false);
const tree = useTree().current;
let t3;
let t4;
if ($[3] !== tree || $[4] !== match) {
const files = tree.kind === "loaded" ? [...tree.data.entries.values()] : [];
let t5;
if ($[6] !== match) {
t5 = val => match(val.path);
$[6] = match;
$[7] = t5;
} else {
t5 = $[7];
}
t4 = files.filter(t5);
$[3] = tree;
$[4] = match;
$[5] = t4;
} else {
t4 = $[5];
}
t3 = t4;
const options = t3;
const _errorMessage = (props.forceValidation || blurred) && (_props$validation = props.validation) !== null && _props$validation !== void 0 && _props$validation.isRequired && props.value === null ? `${props.label} is required` : undefined;
const [errorMessage, setErrorMessage] = useState(_errorMessage);
let t5;
let t6;
if ($[8] !== _errorMessage) {
t5 = () => {
setErrorMessage(_errorMessage);
};
t6 = [_errorMessage];
$[8] = _errorMessage;
$[9] = t5;
$[10] = t6;
} else {
t5 = $[9];
t6 = $[10];
}
useEffect(t5, t6);
let t7;
if ($[11] !== props) {
t7 = key => {
if (typeof key === "string" || key === null) {
props.onChange(key);
}
};
$[11] = props;
$[12] = t7;
} else {
t7 = $[12];
}
const t8 = (_props$validation2 = props.validation) === null || _props$validation2 === void 0 ? void 0 : _props$validation2.isRequired;
let t9;
if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
t9 = item => /*#__PURE__*/jsx(Item$3, {
children: item.path
}, item.path);
$[13] = t9;
} else {
t9 = $[13];
}
let t10;
if ($[14] !== props.label || $[15] !== props.description || $[16] !== props.value || $[17] !== props.autoFocus || $[18] !== t7 || $[19] !== onBlur || $[20] !== t8 || $[21] !== errorMessage || $[22] !== options) {
t10 = /*#__PURE__*/jsx(Combobox, {
label: props.label,
description: props.description,
selectedKey: props.value,
onSelectionChange: t7,
onBlur: onBlur,
isRequired: t8,
errorMessage: errorMessage,
autoFocus: props.autoFocus,
defaultItems: options,
width: "auto",
children: t9
});
$[14] = props.label;
$[15] = props.description;
$[16] = props.value;
$[17] = props.autoFocus;
$[18] = t7;
$[19] = onBlur;
$[20] = t8;
$[21] = errorMessage;
$[22] = options;
$[23] = t10;
} else {
t10 = $[23];
}
return t10;
}
function pathReference({
label,
pattern,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(PathReferenceInput, {
label: label,
pattern: pattern,
description: description,
validation: validation,
...props
});
},
defaultValue() {
return null;
},
parse(value) {
if (value === undefined) {
return null;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
return value;
},
validate(value) {
assertRequired(value, validation, label);
return value;
},
serialize(value) {
return {
value: value === null ? undefined : value
};
}
});
}
function RelationshipInput(props) {
var _props$validation, _props$validation2;
const $ = c(20);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
const slugs = useSlugsInCollection(props.collection);
let t1;
let t2;
if ($[1] !== slugs) {
let t3;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t3 = slug => ({
slug
});
$[3] = t3;
} else {
t3 = $[3];
}
t2 = slugs.map(t3);
$[1] = slugs;
$[2] = t2;
} else {
t2 = $[2];
}
t1 = t2;
const options = t1;
const _errorMessage = (props.forceValidation || blurred) && (_props$validation = props.validation) !== null && _props$validation !== void 0 && _props$validation.isRequired && props.value === null ? `${props.label} is required` : undefined;
const [errorMessage, setErrorMessage] = useState(_errorMessage);
let t3;
let t4;
if ($[4] !== _errorMessage) {
t3 = () => {
setErrorMessage(_errorMessage);
};
t4 = [_errorMessage];
$[4] = _errorMessage;
$[5] = t3;
$[6] = t4;
} else {
t3 = $[5];
t4 = $[6];
}
useEffect(t3, t4);
let t5;
if ($[7] !== props) {
t5 = key => {
if (typeof key === "string" || key === null) {
props.onChange(key);
}
};
$[7] = props;
$[8] = t5;
} else {
t5 = $[8];
}
const t6 = (_props$validation2 = props.validation) === null || _props$validation2 === void 0 ? void 0 : _props$validation2.isRequired;
let t7;
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
t7 = item => /*#__PURE__*/jsx(Item$2, {
children: item.slug
}, item.slug);
$[9] = t7;
} else {
t7 = $[9];
}
let t8;
if ($[10] !== props.label || $[11] !== props.description || $[12] !== props.value || $[13] !== props.autoFocus || $[14] !== t5 || $[15] !== onBlur || $[16] !== options || $[17] !== t6 || $[18] !== errorMessage) {
t8 = /*#__PURE__*/jsx(Combobox, {
label: props.label,
description: props.description,
selectedKey: props.value,
onSelectionChange: t5,
onBlur: onBlur,
autoFocus: props.autoFocus,
defaultItems: options,
isRequired: t6,
errorMessage: errorMessage,
width: "auto",
children: t7
});
$[10] = props.label;
$[11] = props.description;
$[12] = props.value;
$[13] = props.autoFocus;
$[14] = t5;
$[15] = onBlur;
$[16] = options;
$[17] = t6;
$[18] = errorMessage;
$[19] = t8;
} else {
t8 = $[19];
}
return t8;
}
function relationship({
label,
collection,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(RelationshipInput, {
label: label,
collection: collection,
description: description,
validation: validation,
...props
});
},
defaultValue() {
return null;
},
parse(value) {
if (value === undefined) {
return null;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
return value;
},
validate(value) {
assertRequired(value, validation, label);
return value;
},
serialize(value) {
return {
value: value === null ? undefined : value
};
}
});
}
const emptySet = new Set();
function SlugFieldInput(props) {
var _props$args$slug$labe, _props$args$slug, _props$args$slug$vali, _props$args$slug2, _props$args$slug$vali2, _props$args$slug3, _props$args$slug4, _props$args$name$vali, _props$args$name$vali2, _props$args$name$vali3, _props$args$name$vali4, _props$args$name$vali5, _props$args$name$vali6, _props$args$slug5;
const slugContext = useContext(SlugFieldContext);
const path = useContext(PathContext);
const slugInfo = path.length === 1 && path[0] === (slugContext === null || slugContext === void 0 ? void 0 : slugContext.field) ? slugContext : {
slugs: emptySet,
glob: '*'
};
const [blurredName, setBlurredName] = useState(false);
const [blurredSlug, setBlurredSlug] = useState(false);
const [shouldGenerateSlug, setShouldGenerateSlug] = useState(props.value === props.defaultValue);
const generateSlug = name => {
const generated = props.naiveGenerateSlug(name);
if (slugInfo.slugs.has(generated)) {
let i = 1;
while (slugInfo.slugs.has(`${generated}-${i}`)) {
i++;
}
return `${generated}-${i}`;
}
return generated;
};
const slugFieldLabel = (_props$args$slug$labe = (_props$args$slug = props.args.slug) === null || _props$args$slug === void 0 ? void 0 : _props$args$slug.label) !== null && _props$args$slug$labe !== void 0 ? _props$args$slug$labe : 'Slug';
const slugErrorMessage = props.forceValidation || blurredSlug ? validateText(props.value.slug, (_props$args$slug$vali = (_props$args$slug2 = props.args.slug) === null || _props$args$slug2 === void 0 || (_props$args$slug2 = _props$args$slug2.validation) === null || _props$args$slug2 === void 0 || (_props$args$slug2 = _props$args$slug2.length) === null || _props$args$slug2 === void 0 ? void 0 : _props$args$slug2.min) !== null && _props$args$slug$vali !== void 0 ? _props$args$slug$vali : 1, (_props$args$slug$vali2 = (_props$args$slug3 = props.args.slug) === null || _props$args$slug3 === void 0 || (_props$args$slug3 = _props$args$slug3.validation) === null || _props$args$slug3 === void 0 || (_props$args$slug3 = _props$args$slug3.length) === null || _props$args$slug3 === void 0 ? void 0 : _props$args$slug3.max) !== null && _props$args$slug$vali2 !== void 0 ? _props$args$slug$vali2 : Infinity, slugFieldLabel, slugInfo, (_props$args$slug4 = props.args.slug) === null || _props$args$slug4 === void 0 || (_props$args$slug4 = _props$args$slug4.validation) === null || _props$args$slug4 === void 0 ? void 0 : _props$args$slug4.pattern) : undefined;
return /*#__PURE__*/jsxs(Flex, {
gap: "xlarge",
direction: "column",
children: [/*#__PURE__*/jsx(TextField, {
label: props.args.name.label,
description: props.args.name.description,
autoFocus: props.autoFocus,
value: props.value.name,
isRequired: !!((_props$args$name$vali = props.args.name.validation) !== null && _props$args$name$vali !== void 0 && (_props$args$name$vali = _props$args$name$vali.length) !== null && _props$args$name$vali !== void 0 && _props$args$name$vali.min),
onChange: name_0 => {
props.onChange({
name: name_0,
slug: shouldGenerateSlug ? generateSlug(name_0) : props.value.slug
});
},
onBlur: () => setBlurredName(true),
errorMessage: props.forceValidation || blurredName ? validateText(props.value.name, (_props$args$name$vali2 = (_props$args$name$vali3 = props.args.name.validation) === null || _props$args$name$vali3 === void 0 || (_props$args$name$vali3 = _props$args$name$vali3.length) === null || _props$args$name$vali3 === void 0 ? void 0 : _props$args$name$vali3.min) !== null && _props$args$name$vali2 !== void 0 ? _props$args$name$vali2 : 0, (_props$args$name$vali4 = (_props$args$name$vali5 = props.args.name.validation) === null || _props$args$name$vali5 === void 0 || (_props$args$name$vali5 = _props$args$name$vali5.length) === null || _props$args$name$vali5 === void 0 ? void 0 : _props$args$name$vali5.max) !== null && _props$args$name$vali4 !== void 0 ? _props$args$name$vali4 : Infinity, props.args.name.label, undefined, (_props$args$name$vali6 = props.args.name.validation) === null || _props$args$name$vali6 === void 0 ? void 0 : _props$args$name$vali6.pattern) : undefined
}), /*#__PURE__*/jsxs(Flex, {
gap: "regular",
alignItems: "end",
children: [/*#__PURE__*/jsx(TextField, {
flex: 1,
label: slugFieldLabel,
description: (_props$args$slug5 = props.args.slug) === null || _props$args$slug5 === void 0 ? void 0 : _props$args$slug5.description,
value: props.value.slug,
onChange: slug => {
setShouldGenerateSlug(false);
props.onChange({
name: props.value.name,
slug
});
},
onBlur: () => setBlurredSlug(true),
errorMessage: slugErrorMessage,
isRequired: true
}), /*#__PURE__*/jsxs(Flex, {
gap: "regular",
direction: "column",
children: [/*#__PURE__*/jsxs(ActionButton, {
"aria-label": "regenerate",
onPress: () => {
props.onChange({
name: props.value.name,
slug: generateSlug(props.value.name)
});
},
children: [/*#__PURE__*/jsx(Icon, {
src: refreshCwIcon,
UNSAFE_className: css({
[containerQueries.above.mobile]: {
display: 'none'
}
})
}), /*#__PURE__*/jsx(Text, {
UNSAFE_className: css({
[containerQueries.below.tablet]: {
display: 'none'
}
}),
children: "Regenerate"
})]
}), slugErrorMessage !== undefined && /*#__PURE__*/jsx(Box, {
height: "element.xsmall"
})]
})]
})]
});
}
function parseSlugFieldAsNormalField(value) {
if (value === undefined) {
return {
name: '',
slug: ''
};
}
if (typeof value !== 'object') {
throw new FieldDataError('Must be an object');
}
if (Object.keys(value).length !== 2) {
throw new FieldDataError('Unexpected keys');
}
if (!('name' in value) || !('slug' in value)) {
throw new FieldDataError('Missing name or slug');
}
if (typeof value.name !== 'string') {
throw new FieldDataError('name must be a string');
}
if (typeof value.slug !== 'string') {
throw new FieldDataError('slug must be a string');
}
return {
name: value.name,
slug: value.slug
};
}
function parseAsSlugField(value, slug) {
if (value === undefined) {
return {
name: '',
slug
};
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
return {
name: value,
slug
};
}
function slug(_args) {
var _args$name$validation, _args$name$validation2, _args$name$validation3, _args$name$validation4, _args$name$validation5, _args$slug;
const args = {
..._args,
name: {
..._args.name,
validation: {
pattern: (_args$name$validation = _args.name.validation) === null || _args$name$validation === void 0 ? void 0 : _args$name$validation.pattern,
length: {
min: Math.max((_args$name$validation2 = _args.name.validation) !== null && _args$name$validation2 !== void 0 && _args$name$validation2.isRequired ? 1 : 0, (_args$name$validation3 = (_args$name$validation4 = _args.name.validation) === null || _args$name$validation4 === void 0 || (_args$name$validation4 = _args$name$validation4.length) === null || _args$name$validation4 === void 0 ? void 0 : _args$name$validation4.min) !== null && _args$name$validation3 !== void 0 ? _args$name$validation3 : 0),
max: (_args$name$validation5 = _args.name.validation) === null || _args$name$validation5 === void 0 || (_args$name$validation5 = _args$name$validation5.length) === null || _args$name$validation5 === void 0 ? void 0 : _args$name$validation5.max
}
}
}
};
const naiveGenerateSlug = ((_args$slug = args.slug) === null || _args$slug === void 0 ? void 0 : _args$slug.generate) || slugify;
let _defaultValue;
function defaultValue() {
if (!_defaultValue) {
var _args$name$defaultVal, _args$name$defaultVal2;
_defaultValue = {
name: (_args$name$defaultVal = args.name.defaultValue) !== null && _args$name$defaultVal !== void 0 ? _args$name$defaultVal : '',
slug: naiveGenerateSlug((_args$name$defaultVal2 = args.name.defaultValue) !== null && _args$name$defaultVal2 !== void 0 ? _args$name$defaultVal2 : '')
};
}
return _defaultValue;
}
function validate(value, {
slugField
} = {
slugField: undefined
}) {
var _args$name$validation6, _args$name$validation7, _args$name$validation8, _args$name$validation9, _args$name$validation10, _args$slug$validation, _args$slug2, _args$slug$validation2, _args$slug3, _args$slug$label, _args$slug4, _args$slug5;
const nameMessage = validateText(value.name, (_args$name$validation6 = (_args$name$validation7 = args.name.validation) === null || _args$name$validation7 === void 0 || (_args$name$validation7 = _args$name$validation7.length) === null || _args$name$validation7 === void 0 ? void 0 : _args$name$validation7.min) !== null && _args$name$validation6 !== void 0 ? _args$name$validation6 : 0, (_args$name$validation8 = (_args$name$validation9 = args.name.validation) === null || _args$name$validation9 === void 0 || (_args$name$validation9 = _args$name$validation9.length) === null || _args$name$validation9 === void 0 ? void 0 : _args$name$validation9.max) !== null && _args$name$validation8 !== void 0 ? _args$name$validation8 : Infinity, args.name.label, undefined, (_args$name$validation10 = args.name.validation) === null || _args$name$validation10 === void 0 ? void 0 : _args$name$validation10.pattern);
if (nameMessage !== undefined) {
throw new FieldDataError(nameMessage);
}
const slugMessage = validateText(value.slug, (_args$slug$validation = (_args$slug2 = args.slug) === null || _args$slug2 === void 0 || (_args$slug2 = _args$slug2.validation) === null || _args$slug2 === void 0 || (_args$slug2 = _args$slug2.length) === null || _args$slug2 === void 0 ? void 0 : _args$slug2.min) !== null && _args$slug$validation !== void 0 ? _args$slug$validation : 1, (_args$slug$validation2 = (_args$slug3 = args.slug) === null || _args$slug3 === void 0 || (_args$slug3 = _args$slug3.validation) === null || _args$slug3 === void 0 || (_args$slug3 = _args$slug3.length) === null || _args$slug3 === void 0 ? void 0 : _args$slug3.max) !== null && _args$slug$validation2 !== void 0 ? _args$slug$validation2 : Infinity, (_args$slug$label = (_args$slug4 = args.slug) === null || _args$slug4 === void 0 ? void 0 : _args$slug4.label) !== null && _args$slug$label !== void 0 ? _args$slug$label : 'Slug', slugField ? slugField : {
slugs: emptySet,
glob: '*'
}, (_args$slug5 = args.slug) === null || _args$slug5 === void 0 || (_args$slug5 = _args$slug5.validation) === null || _args$slug5 === void 0 ? void 0 : _args$slug5.pattern);
if (slugMessage !== undefined) {
throw new FieldDataError(slugMessage);
}
return value;
}
const emptySet = new Set();
return {
kind: 'form',
formKind: 'slug',
label: args.name.label,
Input(props) {
return /*#__PURE__*/jsx(SlugFieldInput, {
args: args,
naiveGenerateSlug: naiveGenerateSlug,
defaultValue: defaultValue(),
...props
});
},
defaultValue,
parse(value, args) {
if ((args === null || args === void 0 ? void 0 : args.slug) !== undefined) {
return parseAsSlugField(value, args.slug);
}
return parseSlugFieldAsNormalField(value);
},
validate,
serialize(value) {
return {
value
};
},
serializeWithSlug(value) {
return {
value: value.name,
slug: value.slug
};
},
reader: {
parse(value) {
const parsed = parseSlugFieldAsNormalField(value);
return validate(parsed);
},
parseWithSlug(value, args) {
return validate(parseAsSlugField(value, args.slug), {
slugField: {
glob: args.glob,
slugs: emptySet
}
}).name;
}
}
};
}
function validateUrl(validation, value, label) {
if (value !== null && (typeof value !== 'string' || !isValidURL(value))) {
return `${label} is not a valid URL`;
}
if (validation !== null && validation !== void 0 && validation.isRequired && value === null) {
return `${label} is required`;
}
}
function UrlFieldInput(props) {
var _props$validation;
const $ = c(15);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => true;
$[0] = t0;
} else {
t0 = $[0];
}
const [blurred, onBlur] = useReducer(t0, false);
const t1 = props.value === null ? "" : props.value;
let t2;
if ($[1] !== props) {
t2 = val => {
props.onChange(val === "" ? null : val);
};
$[1] = props;
$[2] = t2;
} else {
t2 = $[2];
}
const t3 = (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.isRequired;
let t4;
if ($[3] !== props || $[4] !== blurred) {
t4 = props.forceValidation || blurred ? validateUrl(props.validation, props.value, props.label) : undefined;
$[3] = props;
$[4] = blurred;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== props.label || $[7] !== props.description || $[8] !== props.autoFocus || $[9] !== t1 || $[10] !== t2 || $[11] !== onBlur || $[12] !== t3 || $[13] !== t4) {
t5 = /*#__PURE__*/jsx(TextField, {
inputMode: "url",
width: "auto",
maxWidth: "scale.6000",
label: props.label,
description: props.description,
autoFocus: props.autoFocus,
value: t1,
onChange: t2,
onBlur: onBlur,
isRequired: t3,
errorMessage: t4
});
$[6] = props.label;
$[7] = props.description;
$[8] = props.autoFocus;
$[9] = t1;
$[10] = t2;
$[11] = onBlur;
$[12] = t3;
$[13] = t4;
$[14] = t5;
} else {
t5 = $[14];
}
return t5;
}
function url({
label,
defaultValue,
validation,
description
}) {
return basicFormFieldWithSimpleReaderParse({
label,
Input(props) {
return /*#__PURE__*/jsx(UrlFieldInput, {
label: label,
description: description,
validation: validation,
...props
});
},
defaultValue() {
return defaultValue || null;
},
parse(value) {
if (value === undefined) {
return null;
}
if (typeof value !== 'string') {
throw new FieldDataError('Must be a string');
}
return value === '' ? null : value;
},
validate(value) {
const message = validateUrl(validation, value, label);
if (message !== undefined) {
throw new FieldDataError(message);
}
assertRequired(value, validation, label);
return value;
},
serialize(value) {
return {
value: value === null ? undefined : value
};
}
});
}
function ignored() {
return {
kind: 'form',
Input() {
return null;
},
defaultValue() {
return {
value: undefined
};
},
parse(value) {
return {
value
};
},
serialize(value) {
return value;
},
validate(value) {
return value;
},
label: 'Ignored',
reader: {
parse(value) {
return value;
}
}
};
}
var index = /*#__PURE__*/Object.freeze({
__proto__: null,
array: array,
blocks: blocks,
checkbox: checkbox,
child: child,
cloudImage: cloudImage,
conditional: conditional,
date: date,
datetime: datetime,
document: document,
empty: empty,
emptyDocument: emptyDocument,
emptyContent: emptyContent,
file: file,
image: image,
integer: integer,
multiRelationship: multiRelationship,
multiselect: multiselect,
number: number,
object: object,
pathReference: pathReference,
relationship: relationship,
select: select,
slug: slug,
text: text,
url: url,
ignored: ignored,
mdx: mdx,
markdoc: markdoc
});
export { index as fields };