@box/metadata-template-editor 2.2.23 → 2.2.25

package/dist/chunks/metadata-template-editor.js

@@ -1,161 +1 @@
-import { o as e } from "./types.js";
-import { EditorConfigContext as t } from "../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";
-import "../esm/lib/utils/constants.js";
-import n from "../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";
-import r from "../esm/lib/messages.js";
-import { useMetadataTemplateFormSchema as i } from "../esm/lib/hooks/useMetadataTemplateFormSchema.js";
-import { convertApiMetadataTemplateFieldToLocalConfiguratorField as a } from "../esm/lib/utils/template-type-conversion/convertTemplateFieldToLocalConfigurator.js";
-import { mapFieldsWithUniqueKeys as o } from "../esm/lib/utils/template-type-conversion/mapFieldsWithUniqueKeys.js";
-import { generateJSONPatchTemplateOperations as s } from "../esm/lib/utils/template-type-conversion/generateJSONPatchTemplateOperations.js";
-import { t as c } from "./metadata-template-editor-form.js";
-import { EmptyState as l, LoadingIndicator as u, Text as d, useNotification as ee } from "@box/blueprint-web";
-import { useIntl as te } from "react-intl";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as m, useCallback as h, useEffect as g, useImperativeHandle as _, useMemo as v, useState as y } from "react";
-import { ArrowsRotating as b } from "@box/blueprint-web-assets/icons/Line";
-import { Formik as x } from "formik";
-import { ErrorState404 as S } from "@box/blueprint-web-assets/illustrations/Medium";
-import '../styles/metadata-template-editor.css';var C = {
-	loading: "_loading_fd3t9_1",
-	error: "_error_fd3t9_8"
-}, ne = {
-	displayName: "",
-	templateKey: "",
-	fields: [],
-	hidden: !1
-}, w = /*#__PURE__*/ m(function({ onCancel: m, onDirtyStateChange: w, onValidationChange: re, onSubmitError: ie, onTemplateLoad: T, taxonomyOptions: ae, fetchTaxonomies: E, disabledFieldTypes: D, taxonomyInitialStateLabels: O, formId: k, hideActions: A = !1, fieldExtensions: j, ...M }, N) {
-	let P = i(), { formatMessage: F } = te(), { addNotification: I } = ee(), L = M.mode === e.Edit, R = M.mode === e.ReadOnly, [z, B] = y(!1), [V, H] = y(!1), U = h(() => {
-		z ? H(!0) : m?.();
-	}, [z, m]);
-	_(N, () => ({ requestClose: U }), [U]);
-	let W = h((e) => {
-		B(e), w?.(e);
-	}, [w]), [G, K] = y(L || R), [q, J] = y(!1), [oe, se] = y(0), [Y, X] = y(void 0), Z = L || R ? M.fetchTemplate : void 0, ce = () => {
-		se((e) => e + 1);
-	};
-	g(() => {
-		if (!Z) return;
-		let e = !1;
-		return K(!0), J(!1), X(void 0), (async () => {
-			try {
-				let t = await Z();
-				e || X(t);
-			} catch {
-				e || J(!0);
-			} finally {
-				e || K(!1);
-			}
-		})(), () => {
-			e = !0;
-		};
-	}, [Z, oe]), g(() => {
-		Y !== void 0 && T?.(Y);
-	}, [Y, T]);
-	let Q = L || R ? void 0 : M.namespace, $ = v(() => Y ? {
-		displayName: Y.displayName,
-		templateKey: Y.templateKey,
-		namespace: Y.namespace,
-		hidden: Y.isHidden,
-		fields: Y.fields.map((e) => a(e))
-	} : {
-		...ne,
-		namespace: Q ?? ""
-	}, [Y, Q]), le = v(() => ({
-		disabledFieldTypes: D,
-		taxonomyInitialStateLabels: O
-	}), [D, O]);
-	return G ? /* @__PURE__ */ f("div", {
-		className: C.loading,
-		children: /* @__PURE__ */ f(u, {
-			size: "large",
-			"aria-label": F(r.loading)
-		})
-	}) : q ? /* @__PURE__ */ f("div", {
-		className: C.error,
-		children: /* @__PURE__ */ f(l, {
-			body: /* @__PURE__ */ f(d, {
-				as: "p",
-				children: F(r.fetchError)
-			}),
-			illustration: S,
-			size: "large",
-			children: /* @__PURE__ */ f(l.PrimaryAction, {
-				startIcon: b,
-				onClick: ce,
-				children: F(r.reload)
-			})
-		})
-	}) : /* @__PURE__ */ p(t.Provider, {
-		value: le,
-		children: [/* @__PURE__ */ f(x, {
-			initialValues: $,
-			validationSchema: R ? void 0 : P,
-			onSubmit: async (e) => {
-				if (!R) try {
-					if (L) {
-						let t = s($, e);
-						await M.onEditTemplate(t, {
-							namespaceFQN: $.namespace,
-							templateKey: $.templateKey
-						});
-					} else {
-						let t = o(e.fields), n = {
-							namespace: e.namespace,
-							templateKey: e.templateKey,
-							displayName: e.displayName,
-							hidden: e.hidden,
-							fields: t
-						};
-						await M.onCreateTemplate(n);
-					}
-					I({
-						sensitivity: "foreground",
-						variant: "success",
-						styledText: F(r.saveSuccessNotification),
-						typeIconAriaLabel: F(r.notificationSuccessIconAriaLabel),
-						closeButtonAriaLabel: F(r.notificationCloseButtonAriaLabel)
-					});
-				} catch (e) {
-					let t;
-					if (e instanceof Error && "status" in e) {
-						let { status: n } = e;
-						t = F(n === 409 ? r.displayNameUsedBefore : r.saveErrorNotification);
-					} else t = F(r.saveErrorNotification);
-					I({
-						sensitivity: "foreground",
-						variant: "error",
-						styledText: t,
-						typeIconAriaLabel: F(r.notificationErrorIconAriaLabel),
-						closeButtonAriaLabel: F(r.notificationCloseButtonAriaLabel)
-					});
-					try {
-						ie?.(e);
-					} catch {}
-					throw e;
-				}
-			},
-			children: /* @__PURE__ */ f(c, {
-				formId: k,
-				onCancel: U,
-				taxonomyOptions: ae,
-				fetchTaxonomies: E,
-				hideActions: A,
-				isEditMode: L,
-				readOnly: R,
-				onDirtyStateChange: W,
-				onValidationChange: re,
-				fieldExtensions: j
-			})
-		}), V && /* @__PURE__ */ f(n, {
-			onClose: () => H(!1),
-			onConfirm: () => {
-				H(!1), m?.();
-			},
-			title: F(r.unsavedChangesTitle),
-			body: F(r.unsavedChangesBody),
-			confirmLabel: F(r.unsavedChangesDiscard),
-			cancelLabel: F(r.unsavedChangesKeepEditing)
-		})]
-	});
-});
-export { w as t };
+import{o as MetadataTemplateEditorMode}from"./types.js";import{EditorConfigContext}from"../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";import"../esm/lib/utils/constants.js";import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import messages_default from"../esm/lib/messages.js";import{useMetadataTemplateFormSchema}from"../esm/lib/hooks/useMetadataTemplateFormSchema.js";import{convertApiMetadataTemplateFieldToLocalConfiguratorField}from"../esm/lib/utils/template-type-conversion/convertTemplateFieldToLocalConfigurator.js";import{mapFieldsWithUniqueKeys}from"../esm/lib/utils/template-type-conversion/mapFieldsWithUniqueKeys.js";import{generateJSONPatchTemplateOperations}from"../esm/lib/utils/template-type-conversion/generateJSONPatchTemplateOperations.js";import{t as MetadataTemplateEditorForm}from"./metadata-template-editor-form.js";import{EmptyState,LoadingIndicator,Text,useNotification}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useState}from"react";import{ArrowsRotating}from"@box/blueprint-web-assets/icons/Line";import{Formik}from"formik";import{ErrorState404}from"@box/blueprint-web-assets/illustrations/Medium";import '../styles/metadata-template-editor.css';var metadata_template_editor_module_default={loading:`_loading_fd3t9_1`,error:`_error_fd3t9_8`},DEFAULT_VALUES={displayName:``,templateKey:``,fields:[],hidden:!1},MetadataTemplateEditor=forwardRef(function({onCancel,onDirtyStateChange,onValidationChange,onSubmitError,onTemplateLoad,taxonomyOptions,fetchTaxonomies,disabledFieldTypes,taxonomyInitialStateLabels,formId,hideActions=!1,fieldExtensions,...modeProps},ref){let schema=useMetadataTemplateFormSchema(),{formatMessage}=useIntl(),{addNotification}=useNotification(),isEditMode=modeProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=modeProps.mode===MetadataTemplateEditorMode.ReadOnly,[isDirty,setIsDirty]=useState(!1),[isUnsavedChangesModalOpen,setIsUnsavedChangesModalOpen]=useState(!1),handleCancel=useCallback(()=>{isDirty?setIsUnsavedChangesModalOpen(!0):onCancel?.()},[isDirty,onCancel]);useImperativeHandle(ref,()=>({requestClose:handleCancel}),[handleCancel]);let handleDirtyStateChange=useCallback(dirty=>{setIsDirty(dirty),onDirtyStateChange?.(dirty)},[onDirtyStateChange]),[isLoading,setIsLoading]=useState(isEditMode||isReadOnlyMode),[hasFetchError,setHasFetchError]=useState(!1),[retryCount,setRetryCount]=useState(0),[fetchedValues,setFetchedValues]=useState(void 0),fetchTemplate=isEditMode||isReadOnlyMode?modeProps.fetchTemplate:void 0,handleRetry=()=>{setRetryCount(c=>c+1)};useEffect(()=>{if(!fetchTemplate)return;let cancelled=!1;return setIsLoading(!0),setHasFetchError(!1),setFetchedValues(void 0),(async()=>{try{let response=await fetchTemplate();cancelled||setFetchedValues(response)}catch{cancelled||setHasFetchError(!0)}finally{cancelled||setIsLoading(!1)}})(),()=>{cancelled=!0}},[fetchTemplate,retryCount]),useEffect(()=>{fetchedValues!==void 0&&onTemplateLoad?.(fetchedValues)},[fetchedValues,onTemplateLoad]);let createNamespace=isEditMode||isReadOnlyMode?void 0:modeProps.namespace,mergedInitialValues=useMemo(()=>fetchedValues?{displayName:fetchedValues.displayName,templateKey:fetchedValues.templateKey,namespace:fetchedValues.namespace,hidden:fetchedValues.isHidden,fields:fetchedValues.fields.map(field=>convertApiMetadataTemplateFieldToLocalConfiguratorField(field))}:{...DEFAULT_VALUES,namespace:createNamespace??``},[fetchedValues,createNamespace]),editorConfigValue=useMemo(()=>({disabledFieldTypes,taxonomyInitialStateLabels}),[disabledFieldTypes,taxonomyInitialStateLabels]);return isLoading?jsx(`div`,{className:metadata_template_editor_module_default.loading,children:jsx(LoadingIndicator,{size:`large`,"aria-label":formatMessage(messages_default.loading)})}):hasFetchError?jsx(`div`,{className:metadata_template_editor_module_default.error,children:jsx(EmptyState,{body:jsx(Text,{as:`p`,children:formatMessage(messages_default.fetchError)}),illustration:ErrorState404,size:`large`,children:jsx(EmptyState.PrimaryAction,{startIcon:ArrowsRotating,onClick:handleRetry,children:formatMessage(messages_default.reload)})})}):jsxs(EditorConfigContext.Provider,{value:editorConfigValue,children:[jsx(Formik,{initialValues:mergedInitialValues,validationSchema:isReadOnlyMode?void 0:schema,onSubmit:async values=>{if(!isReadOnlyMode)try{if(isEditMode){let patchItems=generateJSONPatchTemplateOperations(mergedInitialValues,values);await modeProps.onEditTemplate(patchItems,{namespaceFQN:mergedInitialValues.namespace,templateKey:mergedInitialValues.templateKey})}else{let convertedFields=mapFieldsWithUniqueKeys(values.fields),createBody={namespace:values.namespace,templateKey:values.templateKey,displayName:values.displayName,hidden:values.hidden,fields:convertedFields};await modeProps.onCreateTemplate(createBody)}addNotification({sensitivity:`foreground`,variant:`success`,styledText:formatMessage(messages_default.saveSuccessNotification),typeIconAriaLabel:formatMessage(messages_default.notificationSuccessIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)})}catch(error){let errorMessage;if(error instanceof Error&&`status`in error){let{status}=error;errorMessage=formatMessage(status===409?messages_default.displayNameUsedBefore:messages_default.saveErrorNotification)}else errorMessage=formatMessage(messages_default.saveErrorNotification);addNotification({sensitivity:`foreground`,variant:`error`,styledText:errorMessage,typeIconAriaLabel:formatMessage(messages_default.notificationErrorIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)});try{onSubmitError?.(error)}catch{}throw error}},children:jsx(MetadataTemplateEditorForm,{formId,onCancel:handleCancel,taxonomyOptions,fetchTaxonomies,hideActions,isEditMode,readOnly:isReadOnlyMode,onDirtyStateChange:handleDirtyStateChange,onValidationChange,fieldExtensions})}),isUnsavedChangesModalOpen&&jsx(ConfirmationModal,{onClose:()=>setIsUnsavedChangesModalOpen(!1),onConfirm:()=>{setIsUnsavedChangesModalOpen(!1),onCancel?.()},title:formatMessage(messages_default.unsavedChangesTitle),body:formatMessage(messages_default.unsavedChangesBody),confirmLabel:formatMessage(messages_default.unsavedChangesDiscard),cancelLabel:formatMessage(messages_default.unsavedChangesKeepEditing)})]})});export{MetadataTemplateEditor as t};

package/dist/chunks/sortable-option-list.js

@@ -1,230 +1 @@
-import e from "../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";
-import { useFieldConfigurator as t } from "../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";
-import n from "../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";
-import { IconButton as r, TextInput as i } from "@box/blueprint-web";
-import { useIntl as a } from "react-intl";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { DragDots as l } from "@box/blueprint-web-assets/icons/Fill";
-import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
-import { Trash as m } from "@box/blueprint-web-assets/icons/Line";
-import h from "clsx";
-import g from "lodash/uniqueId";
-import { DndContext as _, DragOverlay as v, KeyboardSensor as y, PointerSensor as b, TouchSensor as x, closestCenter as S, useSensor as C, useSensors as w } from "@dnd-kit/core";
-import { SortableContext as ee, arrayMove as T, sortableKeyboardCoordinates as te, useSortable as E, verticalListSortingStrategy as D } from "@dnd-kit/sortable";
-import { CSS as O } from "@dnd-kit/utilities";
-import '../styles/sortable-option-list.css';var k = {
-	sortableOptionList: "_sortableOptionList_dhce1_1",
-	option: "_option_dhce1_9",
-	editable: "_editable_dhce1_9",
-	dragging: "_dragging_dhce1_22",
-	dragHandle: "_dragHandle_dhce1_26",
-	input: "_input_dhce1_41",
-	deleteButtonContainer: "_deleteButtonContainer_dhce1_47",
-	optionDragOverlay: "_optionDragOverlay_dhce1_53"
-};
-function ne(e, t, n, r, i, a) {
-	let o = t?.dropdown?.options?.[n] && typeof e == "object" && !!e && typeof e.dropdown == "object" && e.dropdown?.options?.[n]?.key;
-	if (typeof o != "string") return "";
-	if (a !== null && r.id !== a) {
-		let e = i.find((e) => e.id === a)?.key;
-		if (e && r.key === e && i.some((t, r) => r !== n && t.key === e)) return "";
-	}
-	return o;
-}
-function re({ option: e, index: t, isFieldReadOnly: n, onInputChange: a, onDelete: o, onInputRef: u, error: d, handleBlur: f, canDelete: p, dragAriaLabel: g, inputPlaceholder: _, deleteAriaLabel: v }) {
-	let { attributes: y, listeners: b, setNodeRef: x, transform: S, transition: C, isDragging: w } = E({ id: e.id });
-	return /* @__PURE__ */ c("li", {
-		ref: x,
-		style: {
-			transform: O.Translate.toString(S),
-			transition: C
-		},
-		className: h(k.option, {
-			[k.dragging]: w,
-			[k.editable]: !n
-		}),
-		children: [
-			!n && /* @__PURE__ */ s("div", {
-				className: k.dragHandle,
-				...b,
-				...y,
-				"aria-label": g,
-				tabIndex: -1,
-				children: /* @__PURE__ */ s(l, {
-					fontSize: 20,
-					"aria-hidden": "true"
-				})
-			}),
-			/* @__PURE__ */ s(i, {
-				disabled: n,
-				placeholder: _,
-				label: _,
-				hideLabel: !0,
-				onBlur: f,
-				id: `dropdown.options.${t}.key`,
-				name: `dropdown.options.${t}.key`,
-				value: e.key,
-				className: k.input,
-				onChange: (t) => a(t, e.id),
-				ref: (e) => u(e, t),
-				error: d
-			}),
-			!n && /* @__PURE__ */ s("div", {
-				className: k.deleteButtonContainer,
-				children: /* @__PURE__ */ s(r, {
-					onClick: () => o(e),
-					"aria-label": v,
-					icon: m,
-					size: "x-small",
-					variant: "default",
-					tabIndex: -1,
-					focusable: !0,
-					disabled: !p,
-					className: k.deleteButton
-				})
-			})
-		]
-	});
-}
-function A({ shouldFocusLastOption: E = !1, onFocusConsumed: O }) {
-	let { formatMessage: A } = a(), { values: j, errors: ie, touched: M, setFieldValue: N, setFieldTouched: ae, setTouched: P, handleBlur: oe } = t(), F = w(C(b, { activationConstraint: { distance: 8 } }), C(x, { activationConstraint: {
-		delay: 250,
-		tolerance: 5
-	} }), C(y, { coordinateGetter: te })), { options: I } = j.dropdown, { isFieldReadOnly: L } = j, [R, z] = p(I), [B, V] = p(null), H = f(null), [U, W] = p(null), [G, K] = p(!1), [q, J] = p(null);
-	d(() => {
-		z(I);
-	}, [I]), d(() => () => {
-		H.current && clearTimeout(H.current);
-	}, []);
-	let Y = u((e) => {
-		N("dropdown", {
-			...j.dropdown,
-			options: e
-		});
-	}, [j.dropdown, N]), se = (e, t) => {
-		V(t);
-		let n = R.map((n, r) => n.id === t ? (ae(`dropdown.options.${r}.key`, !0), {
-			...n,
-			key: e.target.value
-		}) : n);
-		z(n), Y(n);
-	}, X = () => {
-		J(null), K(!1);
-	}, Z = (e) => {
-		if (!e) return;
-		let t = R.filter((t) => t.id !== e);
-		z(t), Y(t), e === B && V(null);
-		let n = { ...M }, r = n.dropdown;
-		r?.options && (r.options = r.options.filter((t, n) => R[n]?.id !== e)), P(n), t.length === 0 && N("dropdown", {
-			...j.dropdown,
-			options: [{
-				id: g(),
-				key: "",
-				isNew: !0
-			}]
-		}), X();
-	}, ce = (e) => {
-		e.isNew ? Z(e.id) : (J(e), K(!0));
-	}, le = ({ active: e }) => {
-		W(String(e.id));
-	}, ue = () => {
-		W(null);
-	}, Q = (e) => {
-		W(null);
-		let { active: t, over: n } = e;
-		if (n && t.id !== n.id) {
-			let e = R.findIndex((e) => e.id === t.id), r = R.findIndex((e) => e.id === n.id);
-			if (e !== -1 && r !== -1) {
-				let t = T(R, e, r);
-				z(t), Y(t);
-				let n = M?.dropdown?.options;
-				n && n.length > 0 && P({
-					...M,
-					dropdown: {
-						...M.dropdown ?? {},
-						options: T(n, e, r)
-					}
-				});
-			}
-		}
-	}, de = u((e, t) => {
-		e && E && t === R.length - 1 && (H.current && clearTimeout(H.current), H.current = setTimeout(() => {
-			e.focus(), O(), H.current = null;
-		}, 0));
-	}, [
-		E,
-		O,
-		R.length
-	]), $ = U ? R.find((e) => e.id === U) : null;
-	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c(_, {
-		sensors: F,
-		collisionDetection: S,
-		onDragStart: le,
-		onDragEnd: Q,
-		onDragCancel: ue,
-		children: [/* @__PURE__ */ s(ee, {
-			items: R.map((e) => e.id),
-			strategy: D,
-			children: /* @__PURE__ */ s("ul", {
-				className: k.sortableOptionList,
-				children: R.map((e, t) => /* @__PURE__ */ s(re, {
-					option: e,
-					index: t,
-					isFieldReadOnly: !!L,
-					onInputChange: se,
-					onDelete: ce,
-					onInputRef: de,
-					error: ne(ie, M, t, e, R, B),
-					handleBlur: oe,
-					canDelete: R.length >= 2,
-					dragAriaLabel: A(n.dragAndDropOptionAriaLabel),
-					inputPlaceholder: A(n.addAnOptionOptionPlaceholder),
-					deleteAriaLabel: A(n.deleteDropdownOptionAriaLabel)
-				}, e.id))
-			})
-		}), /* @__PURE__ */ s(v, {
-			dropAnimation: null,
-			children: $ ? /* @__PURE__ */ c("li", {
-				className: h(k.option, k.optionDragOverlay, { [k.editable]: !L }),
-				children: [
-					!L && /* @__PURE__ */ s("div", {
-						className: k.dragHandle,
-						children: /* @__PURE__ */ s(l, {
-							fontSize: 20,
-							"aria-hidden": "true"
-						})
-					}),
-					/* @__PURE__ */ s(i, {
-						disabled: L,
-						placeholder: A(n.addAnOptionOptionPlaceholder),
-						label: A(n.addAnOptionOptionPlaceholder),
-						hideLabel: !0,
-						id: "drag-overlay-option",
-						name: "drag-overlay-option",
-						value: $.key,
-						className: k.input
-					}),
-					!L && /* @__PURE__ */ s("div", {
-						className: k.deleteButtonContainer,
-						children: /* @__PURE__ */ s(r, {
-							icon: m,
-							size: "x-small",
-							variant: "default",
-							tabIndex: -1,
-							focusable: !0,
-							disabled: R.length < 2,
-							className: k.deleteButton,
-							"aria-label": ""
-						})
-					})
-				]
-			}) : null
-		})]
-	}), G && /* @__PURE__ */ s(e, {
-		onClose: X,
-		onConfirm: () => Z(q?.id ?? null),
-		title: A(n.deleteOptionTitle, { optionName: q?.key ?? "" }),
-		body: A(n.deleteOptionDescription)
-	})] });
-}
-export { A as t };
+import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import dropdown_messages_default from"../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";import{IconButton,TextInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{DragDots}from"@box/blueprint-web-assets/icons/Fill";import{useCallback,useEffect,useRef,useState}from"react";import{Trash}from"@box/blueprint-web-assets/icons/Line";import clsx from"clsx";import uniqueId from"lodash/uniqueId";import{DndContext,DragOverlay,KeyboardSensor,PointerSensor,TouchSensor,closestCenter,useSensor,useSensors}from"@dnd-kit/core";import{SortableContext,arrayMove,sortableKeyboardCoordinates,useSortable,verticalListSortingStrategy}from"@dnd-kit/sortable";import{CSS}from"@dnd-kit/utilities";import '../styles/sortable-option-list.css';var sortable_option_list_module_default={sortableOptionList:`_sortableOptionList_dhce1_1`,option:`_option_dhce1_9`,editable:`_editable_dhce1_9`,dragging:`_dragging_dhce1_22`,dragHandle:`_dragHandle_dhce1_26`,input:`_input_dhce1_41`,deleteButtonContainer:`_deleteButtonContainer_dhce1_47`,optionDragOverlay:`_optionDragOverlay_dhce1_53`};function getOptionError(errors,touched,index,option,allOptions,lastChangedOptionId){let err=touched?.dropdown?.options?.[index]&&typeof errors==`object`&&!!errors&&typeof errors.dropdown==`object`&&errors.dropdown?.options?.[index]?.key;if(typeof err!=`string`)return``;if(lastChangedOptionId!==null&&option.id!==lastChangedOptionId){let lastChangedKey=allOptions.find(opt=>opt.id===lastChangedOptionId)?.key;if(lastChangedKey&&option.key===lastChangedKey&&allOptions.some((opt,i)=>i!==index&&opt.key===lastChangedKey))return``}return err}function SortableOptionItem({option,index,isFieldReadOnly,onInputChange,onDelete,onInputRef,error,handleBlur,canDelete,dragAriaLabel,inputPlaceholder,deleteAriaLabel}){let{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id:option.id});return jsxs(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},className:clsx(sortable_option_list_module_default.option,{[sortable_option_list_module_default.dragging]:isDragging,[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,...listeners,...attributes,"aria-label":dragAriaLabel,tabIndex:-1,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:inputPlaceholder,label:inputPlaceholder,hideLabel:!0,onBlur:handleBlur,id:`dropdown.options.${index}.key`,name:`dropdown.options.${index}.key`,value:option.key,className:sortable_option_list_module_default.input,onChange:e=>onInputChange(e,option.id),ref:el=>onInputRef(el,index),error}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{onClick:()=>onDelete(option),"aria-label":deleteAriaLabel,icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:!canDelete,className:sortable_option_list_module_default.deleteButton})})]})}function SortableOptionList({shouldFocusLastOption=!1,onFocusConsumed}){let{formatMessage}=useIntl(),{values,errors,touched,setFieldValue,setFieldTouched,setTouched,handleBlur}=useFieldConfigurator(),sensors=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:8}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),{options}=values.dropdown,{isFieldReadOnly}=values,[currentItems,setCurrentItems]=useState(options),[lastChangedOptionId,setLastChangedOptionId]=useState(null),focusTimeoutRef=useRef(null),[activeId,setActiveId]=useState(null),[isConfirmationModalOpen,setIsConfirmationModalOpen]=useState(!1),[optionToDelete,setOptionToDelete]=useState(null);useEffect(()=>{setCurrentItems(options)},[options]),useEffect(()=>()=>{focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current)},[]);let updateFormValue=useCallback(newItems=>{setFieldValue(`dropdown`,{...values.dropdown,options:newItems})},[values.dropdown,setFieldValue]),handleInputChange=(event,optionId)=>{setLastChangedOptionId(optionId);let updatedItems=currentItems.map((option,index)=>option.id===optionId?(setFieldTouched(`dropdown.options.${index}.key`,!0),{...option,key:event.target.value}):option);setCurrentItems(updatedItems),updateFormValue(updatedItems)},closeConfirmationModal=()=>{setOptionToDelete(null),setIsConfirmationModalOpen(!1)},handleDelete=optionId=>{if(!optionId)return;let updatedItems=currentItems.filter(option=>option.id!==optionId);setCurrentItems(updatedItems),updateFormValue(updatedItems),optionId===lastChangedOptionId&&setLastChangedOptionId(null);let updatedTouched={...touched},dropdownTouched=updatedTouched.dropdown;dropdownTouched?.options&&(dropdownTouched.options=dropdownTouched.options.filter((_,index)=>currentItems[index]?.id!==optionId)),setTouched(updatedTouched),updatedItems.length===0&&setFieldValue(`dropdown`,{...values.dropdown,options:[{id:uniqueId(),key:``,isNew:!0}]}),closeConfirmationModal()},openConfirmationModal=option=>{option.isNew?handleDelete(option.id):(setOptionToDelete(option),setIsConfirmationModalOpen(!0))},handleDragStart=({active})=>{setActiveId(String(active.id))},handleDragCancel=()=>{setActiveId(null)},handleDragEnd=event=>{setActiveId(null);let{active,over}=event;if(over&&active.id!==over.id){let oldIndex=currentItems.findIndex(item=>item.id===active.id),newIndex=currentItems.findIndex(item=>item.id===over.id);if(oldIndex!==-1&&newIndex!==-1){let newItems=arrayMove(currentItems,oldIndex,newIndex);setCurrentItems(newItems),updateFormValue(newItems);let touchedOptions=touched?.dropdown?.options;touchedOptions&&touchedOptions.length>0&&setTouched({...touched,dropdown:{...touched.dropdown??{},options:arrayMove(touchedOptions,oldIndex,newIndex)}})}}},handleInputRef=useCallback((inputElement,index)=>{inputElement&&shouldFocusLastOption&&index===currentItems.length-1&&(focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current),focusTimeoutRef.current=setTimeout(()=>{inputElement.focus(),onFocusConsumed(),focusTimeoutRef.current=null},0))},[shouldFocusLastOption,onFocusConsumed,currentItems.length]),activeOption=activeId?currentItems.find(item=>item.id===activeId):null;return jsxs(Fragment,{children:[jsxs(DndContext,{sensors,collisionDetection:closestCenter,onDragStart:handleDragStart,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,children:[jsx(SortableContext,{items:currentItems.map(item=>item.id),strategy:verticalListSortingStrategy,children:jsx(`ul`,{className:sortable_option_list_module_default.sortableOptionList,children:currentItems.map((option,index)=>jsx(SortableOptionItem,{option,index,isFieldReadOnly:!!isFieldReadOnly,onInputChange:handleInputChange,onDelete:openConfirmationModal,onInputRef:handleInputRef,error:getOptionError(errors,touched,index,option,currentItems,lastChangedOptionId),handleBlur,canDelete:currentItems.length>=2,dragAriaLabel:formatMessage(dropdown_messages_default.dragAndDropOptionAriaLabel),inputPlaceholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),deleteAriaLabel:formatMessage(dropdown_messages_default.deleteDropdownOptionAriaLabel)},option.id))})}),jsx(DragOverlay,{dropAnimation:null,children:activeOption?jsxs(`li`,{className:clsx(sortable_option_list_module_default.option,sortable_option_list_module_default.optionDragOverlay,{[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),label:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),hideLabel:!0,id:`drag-overlay-option`,name:`drag-overlay-option`,value:activeOption.key,className:sortable_option_list_module_default.input}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:currentItems.length<2,className:sortable_option_list_module_default.deleteButton,"aria-label":``})})]}):null})]}),isConfirmationModalOpen&&jsx(ConfirmationModal,{onClose:closeConfirmationModal,onConfirm:()=>handleDelete(optionToDelete?.id??null),title:formatMessage(dropdown_messages_default.deleteOptionTitle,{optionName:optionToDelete?.key??``}),body:formatMessage(dropdown_messages_default.deleteOptionDescription)})]})}export{SortableOptionList as t};

package/dist/chunks/taxonomy-field-configuration.js

@@ -1,123 +1 @@
-import { c as e } from "./types.js";
-import { useFieldConfigurator as t } from "../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";
-import { useTaxonomyOptions as n } from "../esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js";
-import r from "../esm/lib/components/metadata-field-configurator/messages/taxonomy-messages.js";
-import { t as i } from "./levels-chain.js";
-import { t as a } from "./taxonomy-field-configurator-initial-state.js";
-import { useTaxonomySelect as o } from "../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/useTaxonomySelect.js";
-import { filterTaxonomiesByValue as s } from "../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/utils.js";
-import { t as c } from "./taxonomy-selector.js";
-import { DropdownMenu as l, InlineNotice as u, Radio as d, Switch as f, TextButton as p } from "@box/blueprint-web";
-import { useIntl as m } from "react-intl";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Caret as v } from "@box/blueprint-web-assets/icons/Fill";
-import { useEffect as y, useMemo as b } from "react";
-import '../styles/taxonomy-field-configuration.css';var x = { taxonomyFieldConfiguration: "_taxonomyFieldConfiguration_1smhd_1" }, S = () => {
-	let { formatMessage: S } = m(), { values: C, errors: w, touched: T, setFieldValue: E } = t(), { onTaxonomySelect: D } = o({
-		values: C,
-		setFieldValue: E
-	}), { options: O } = n(), k = C.taxonomy.availableTaxonomies.find((e) => e.selected), { selectedLevels: A } = C.taxonomy, j = b(() => k ? k.levels : [], [k]), M = C.taxonomy.selection === e.RequireSpecific && A.length > 0 ? j[A[0] - 1]?.name : void 0;
-	y(() => {
-		O.length > 0 && E("taxonomy", {
-			...C.taxonomy,
-			availableTaxonomies: O.map((e) => ({
-				...e,
-				selected: e.taxonomyKey === C.taxonomy.taxonomyKey
-			})),
-			selectedLevels: C.taxonomy.selectedLevels,
-			selection: C.taxonomy.selectedLevels.length > 1 ? e.AllowAny : e.RequireSpecific
-		});
-	}, [O]);
-	let N = (t) => {
-		let n = t === e.AllowAny ? j.map((e) => e.level) : [j[0].level];
-		E("taxonomy", {
-			...C.taxonomy,
-			selection: t,
-			selectedLevels: n
-		});
-	}, P = k?.label ?? S(r.chooseTaxonomyLevel), F = !!w.taxonomy?.taxonomyKey && !!T.taxonomy?.taxonomyKey;
-	if (!k && C.isFieldNew) return /* @__PURE__ */ _(h, { children: [F && /* @__PURE__ */ g(u, {
-		variant: "error",
-		variantIconAriaLabel: S(r.noTaxonomySelectedError),
-		children: S(r.noTaxonomySelectedError)
-	}), /* @__PURE__ */ g(a, {})] });
-	let I = C.isFieldReadOnly || !C.isFieldNew;
-	return /* @__PURE__ */ _("div", {
-		className: x.taxonomyFieldConfiguration,
-		children: [
-			/* @__PURE__ */ g(f.Item, {
-				name: "allowMultipleSelections",
-				disabled: I,
-				checked: C.taxonomy.allowMultipleSelections,
-				label: S(r.allowMultipleTaxonomySelections),
-				onCheckedChange: (e) => {
-					E("taxonomy", {
-						...C.taxonomy,
-						allowMultipleSelections: e
-					});
-				},
-				value: C.taxonomy.allowMultipleSelections.toString()
-			}),
-			/* @__PURE__ */ g("div", { children: /* @__PURE__ */ g(c, {
-				triggerButton: /* @__PURE__ */ g(p, {
-					disabled: I,
-					icon: v,
-					children: P
-				}),
-				data: s(C.taxonomy.availableTaxonomies, C.taxonomy.taxonomySearchValue),
-				onClick: D,
-				onSearchValue: (e) => {
-					E("taxonomy", {
-						...C.taxonomy,
-						taxonomySearchValue: e
-					});
-				}
-			}) }),
-			j.length > 0 && /* @__PURE__ */ g(i, {
-				levels: j,
-				selectedLevels: A
-			}),
-			k && j.length > 1 && /* @__PURE__ */ g(d.Legend, {
-				header: S(r.selection),
-				children: /* @__PURE__ */ _(d.Group, {
-					disabled: I,
-					defaultValue: e.RequireSpecific,
-					loop: !0,
-					name: "selection",
-					onValueChange: N,
-					orientation: "vertical",
-					value: C.taxonomy.selection,
-					children: [/* @__PURE__ */ g(d.Item, {
-						label: /* @__PURE__ */ _(h, { children: [S(r.requiredSelection), /* @__PURE__ */ _(l.Root, {
-							modal: !1,
-							children: [/* @__PURE__ */ g(l.Trigger, {
-								disabled: C.taxonomy.selection !== e.RequireSpecific || I,
-								children: /* @__PURE__ */ g(p, {
-									icon: v,
-									children: M ?? S(r.chooseTaxonomyLevel)
-								})
-							}), /* @__PURE__ */ g(l.Content, {
-								align: "start",
-								children: k?.levels?.map((e) => /* @__PURE__ */ g(l.Item, {
-									onClick: () => {
-										E("taxonomy", {
-											...C.taxonomy,
-											selectedLevels: [e.level]
-										});
-									},
-									children: e.name
-								}, e.level))
-							})]
-						})] }),
-						value: e.RequireSpecific
-					}), /* @__PURE__ */ g(d.Item, {
-						disabled: I,
-						label: S(r.anyLevelSelection),
-						value: e.AllowAny
-					})]
-				})
-			})
-		]
-	});
-};
-export { S as t };
+import{c as TaxonomySelection}from"./types.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import{useTaxonomyOptions}from"../esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js";import taxonomy_messages_default from"../esm/lib/components/metadata-field-configurator/messages/taxonomy-messages.js";import{t as LevelsChain}from"./levels-chain.js";import{t as TaxonomyFieldConfiguratorInitialState}from"./taxonomy-field-configurator-initial-state.js";import{useTaxonomySelect}from"../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/useTaxonomySelect.js";import{filterTaxonomiesByValue}from"../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/utils.js";import{t as TaxonomySelector}from"./taxonomy-selector.js";import{DropdownMenu,InlineNotice,Radio,Switch,TextButton}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{Caret}from"@box/blueprint-web-assets/icons/Fill";import{useEffect,useMemo}from"react";import '../styles/taxonomy-field-configuration.css';var taxonomy_field_configuration_module_default={taxonomyFieldConfiguration:`_taxonomyFieldConfiguration_1smhd_1`},TaxonomyFieldConfiguration=()=>{let{formatMessage}=useIntl(),{values,errors,touched,setFieldValue}=useFieldConfigurator(),{onTaxonomySelect}=useTaxonomySelect({values,setFieldValue}),{options:taxonomyOptionsFromContext}=useTaxonomyOptions(),selectedTaxonomy=values.taxonomy.availableTaxonomies.find(taxonomy=>taxonomy.selected),{selectedLevels}=values.taxonomy,selectableLevels=useMemo(()=>selectedTaxonomy?selectedTaxonomy.levels:[],[selectedTaxonomy]),selectedLevelName=values.taxonomy.selection===TaxonomySelection.RequireSpecific&&selectedLevels.length>0?selectableLevels[selectedLevels[0]-1]?.name:void 0;useEffect(()=>{taxonomyOptionsFromContext.length>0&&setFieldValue(`taxonomy`,{...values.taxonomy,availableTaxonomies:taxonomyOptionsFromContext.map(taxonomy=>({...taxonomy,selected:taxonomy.taxonomyKey===values.taxonomy.taxonomyKey})),selectedLevels:values.taxonomy.selectedLevels,selection:values.taxonomy.selectedLevels.length>1?TaxonomySelection.AllowAny:TaxonomySelection.RequireSpecific})},[taxonomyOptionsFromContext]);let handleSelectionChange=value=>{let newSelectedLevels=value===TaxonomySelection.AllowAny?selectableLevels.map(l=>l.level):[selectableLevels[0].level];setFieldValue(`taxonomy`,{...values.taxonomy,selection:value,selectedLevels:newSelectedLevels})},taxonomySelectorLabel=selectedTaxonomy?.label??formatMessage(taxonomy_messages_default.chooseTaxonomyLevel),hasTaxonomyError=!!errors.taxonomy?.taxonomyKey&&!!touched.taxonomy?.taxonomyKey;if(!selectedTaxonomy&&values.isFieldNew)return jsxs(Fragment,{children:[hasTaxonomyError&&jsx(InlineNotice,{variant:`error`,variantIconAriaLabel:formatMessage(taxonomy_messages_default.noTaxonomySelectedError),children:formatMessage(taxonomy_messages_default.noTaxonomySelectedError)}),jsx(TaxonomyFieldConfiguratorInitialState,{})]});let isDisabled=values.isFieldReadOnly||!values.isFieldNew;return jsxs(`div`,{className:taxonomy_field_configuration_module_default.taxonomyFieldConfiguration,children:[jsx(Switch.Item,{name:`allowMultipleSelections`,disabled:isDisabled,checked:values.taxonomy.allowMultipleSelections,label:formatMessage(taxonomy_messages_default.allowMultipleTaxonomySelections),onCheckedChange:checked=>{setFieldValue(`taxonomy`,{...values.taxonomy,allowMultipleSelections:checked})},value:values.taxonomy.allowMultipleSelections.toString()}),jsx(`div`,{children:jsx(TaxonomySelector,{triggerButton:jsx(TextButton,{disabled:isDisabled,icon:Caret,children:taxonomySelectorLabel}),data:filterTaxonomiesByValue(values.taxonomy.availableTaxonomies,values.taxonomy.taxonomySearchValue),onClick:onTaxonomySelect,onSearchValue:value=>{setFieldValue(`taxonomy`,{...values.taxonomy,taxonomySearchValue:value})}})}),selectableLevels.length>0&&jsx(LevelsChain,{levels:selectableLevels,selectedLevels}),selectedTaxonomy&&selectableLevels.length>1&&jsx(Radio.Legend,{header:formatMessage(taxonomy_messages_default.selection),children:jsxs(Radio.Group,{disabled:isDisabled,defaultValue:TaxonomySelection.RequireSpecific,loop:!0,name:`selection`,onValueChange:handleSelectionChange,orientation:`vertical`,value:values.taxonomy.selection,children:[jsx(Radio.Item,{label:jsxs(Fragment,{children:[formatMessage(taxonomy_messages_default.requiredSelection),jsxs(DropdownMenu.Root,{modal:!1,children:[jsx(DropdownMenu.Trigger,{disabled:values.taxonomy.selection!==TaxonomySelection.RequireSpecific||isDisabled,children:jsx(TextButton,{icon:Caret,children:selectedLevelName??formatMessage(taxonomy_messages_default.chooseTaxonomyLevel)})}),jsx(DropdownMenu.Content,{align:`start`,children:selectedTaxonomy?.levels?.map(entry=>jsx(DropdownMenu.Item,{onClick:()=>{setFieldValue(`taxonomy`,{...values.taxonomy,selectedLevels:[entry.level]})},children:entry.name},entry.level))})]})]}),value:TaxonomySelection.RequireSpecific}),jsx(Radio.Item,{disabled:isDisabled,label:formatMessage(taxonomy_messages_default.anyLevelSelection),value:TaxonomySelection.AllowAny})]})})]})};export{TaxonomyFieldConfiguration as t};

package/dist/chunks/taxonomy-field-configurator-initial-state.js

@@ -1,49 +1 @@
-import { useEditorConfig as e } from "../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";
-import { useFieldConfigurator as t } from "../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";
-import n from "../esm/lib/components/metadata-field-configurator/messages/taxonomy-messages.js";
-import { useTaxonomySelect as r } from "../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/useTaxonomySelect.js";
-import { filterTaxonomiesByValue as i } from "../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/utils.js";
-import { t as a } from "./taxonomy-selector.js";
-import { Text as o } from "@box/blueprint-web";
-import { FormattedMessage as s } from "react-intl";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import "react";
-import '../styles/taxonomy-field-configurator-initial-state.css';var u = {
-	taxonomyFieldConfiguratorInitialState: "_taxonomyFieldConfiguratorInitialState_il5v7_1",
-	subheader: "_subheader_il5v7_10"
-}, d = () => {
-	let { values: d, setFieldValue: f } = t(), { onTaxonomySelect: p } = r({
-		values: d,
-		setFieldValue: f
-	}), { taxonomyInitialStateLabels: m } = e();
-	return /* @__PURE__ */ l("div", {
-		className: u.taxonomyFieldConfiguratorInitialState,
-		children: [
-			/* @__PURE__ */ c(o, {
-				as: "h1",
-				color: "textOnLightDefault",
-				variant: "titleMedium",
-				children: m?.header ?? /* @__PURE__ */ c(s, { ...n.callToActionHeader })
-			}),
-			/* @__PURE__ */ c(o, {
-				as: "p",
-				className: u.subheader,
-				color: "textOnLightDefault",
-				variant: "bodyDefault",
-				children: m?.subheader ?? /* @__PURE__ */ c(s, { ...n.callToActionSubheader })
-			}),
-			/* @__PURE__ */ c(a, {
-				data: i(d.taxonomy.availableTaxonomies, d.taxonomy.taxonomySearchValue),
-				onClick: p,
-				resetValueOnHide: !0,
-				onSearchValue: (e) => {
-					f("taxonomy", {
-						...d.taxonomy,
-						taxonomySearchValue: e
-					});
-				}
-			})
-		]
-	});
-};
-export { d as t };
+import{useEditorConfig}from"../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import taxonomy_messages_default from"../esm/lib/components/metadata-field-configurator/messages/taxonomy-messages.js";import{useTaxonomySelect}from"../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/useTaxonomySelect.js";import{filterTaxonomiesByValue}from"../esm/lib/components/metadata-field-configurator/components/type-specific-configuration/taxonomy/utils.js";import{t as TaxonomySelector}from"./taxonomy-selector.js";import{Text}from"@box/blueprint-web";import{FormattedMessage}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import"react";import '../styles/taxonomy-field-configurator-initial-state.css';var taxonomy_field_configurator_initial_state_module_default={taxonomyFieldConfiguratorInitialState:`_taxonomyFieldConfiguratorInitialState_il5v7_1`,subheader:`_subheader_il5v7_10`},TaxonomyFieldConfiguratorInitialState=()=>{let{values,setFieldValue}=useFieldConfigurator(),{onTaxonomySelect}=useTaxonomySelect({values,setFieldValue}),{taxonomyInitialStateLabels}=useEditorConfig();return jsxs(`div`,{className:taxonomy_field_configurator_initial_state_module_default.taxonomyFieldConfiguratorInitialState,children:[jsx(Text,{as:`h1`,color:`textOnLightDefault`,variant:`titleMedium`,children:taxonomyInitialStateLabels?.header??jsx(FormattedMessage,{...taxonomy_messages_default.callToActionHeader})}),jsx(Text,{as:`p`,className:taxonomy_field_configurator_initial_state_module_default.subheader,color:`textOnLightDefault`,variant:`bodyDefault`,children:taxonomyInitialStateLabels?.subheader??jsx(FormattedMessage,{...taxonomy_messages_default.callToActionSubheader})}),jsx(TaxonomySelector,{data:filterTaxonomiesByValue(values.taxonomy.availableTaxonomies,values.taxonomy.taxonomySearchValue),onClick:onTaxonomySelect,resetValueOnHide:!0,onSearchValue:value=>{setFieldValue(`taxonomy`,{...values.taxonomy,taxonomySearchValue:value})}})]})};export{TaxonomyFieldConfiguratorInitialState as t};