@axdspub/axiom-ui-forms 0.2.4 → 0.2.5

package/library/axiom-ui-forms.d.ts

@@ -1,5 +1,5 @@
 import { GeoJSON } from 'geojson';
-import { JSONSchema7, JSONSchema7Type, JSONSchema7Definition } from 'json-schema';
+import { JSONSchema6, JSONSchema6Type, JSONSchema6Definition } from 'json-schema';
 import React$1, { ReactElement } from 'react';
 
 interface IValueTypes {
@@ -200,18 +200,15 @@ type IFormValueState = [IFormValues, (v: IFormValues) => void];
 type IFormInputComponent = React.FC<IFormFieldProps>;
 type IValueChangeFn = (v: IValueType | IValueType[] | undefined) => void;
 interface IFieldInputProps {
-    form: IForm;
     field: IFormField;
     onChange: IValueChangeFn;
-    formValueState: IFormValueState;
     value?: IValueType;
-    inputOverrides?: Record<string, React.FC<IFieldInputProps>>;
     className?: string;
 }
 
 interface IFormCreatorProps {
     form: IForm;
-    schema?: JSONSchema7;
+    schema?: JSONSchema6;
     formValueState: [IFormValues, (v: IFormValues) => void];
     note?: string;
     error?: string;
@@ -220,7 +217,7 @@ interface IFormCreatorProps {
     urlNavigable?: boolean;
     inputOverrides?: Record<string, React$1.FC<IFieldInputProps>>;
 }
-declare const FormCreator: ({ form, formValueState, note, error, onChange, className, urlNavigable, inputOverrides }: IFormCreatorProps) => ReactElement;
+declare const FormCreator: ({ form, formValueState, note, error, onChange, className, urlNavigable, inputOverrides, schema }: IFormCreatorProps) => ReactElement;
 type IFormSectionStatus = Record<string, {
     completed: number;
     total: number;
@@ -250,15 +247,12 @@ declare const calculateSectionStatus: (sections: IFormSection[], formValueState:
 
 interface IFieldCreator {
     field: IFormField;
-    form: IForm;
     onChange?: IValueChangeFn;
     className?: string;
     defaultClassName?: string;
     value?: IValueType | IValueType[];
-    formValueState: IFormValueState;
-    inputOverrides?: Record<string, React$1.FC<IFieldInputProps>>;
 }
-declare const FieldCreator: ({ field, form, value, onChange, className, defaultClassName, formValueState, inputOverrides }: IFieldCreator) => ReactElement | null;
+declare const FieldCreator: ({ field, value, onChange, className, defaultClassName }: IFieldCreator) => ReactElement | null;
 
 declare const BooleanInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
 
@@ -280,14 +274,15 @@ declare const DateInput: ({ field, onChange, value }: IFieldInputProps) => React
 
 declare const TimeInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
 
-declare const validateSchema: (schemaOb: unknown, version?: number) => Promise<{
-    schema?: JSONSchema7;
+declare const validateSchema: (schemaOb: unknown, version?: number) => {
+    schema?: JSONSchema6;
     error?: string;
-}>;
-declare const validateAgainstSchema: (schema: JSONSchema7, formValues: IFormValues) => string[] | undefined;
-declare const getValueFromSchema: (schema: JSONSchema7Type | JSONSchema7Definition | undefined) => string | number | boolean | undefined;
-declare const getLabelFromSchema: (schema: JSONSchema7Type | JSONSchema7Definition | undefined) => string | undefined;
-declare const schemaToFormObject: (schema: JSONSchema7) => IForm;
+    unrefed?: JSONSchema6;
+};
+declare const validateAgainstSchema: (schema: JSONSchema6, formValues: IFormValues) => string[] | undefined;
+declare const getValueFromSchema: (schema: JSONSchema6Type | JSONSchema6Definition | undefined) => string | number | boolean | undefined;
+declare const getLabelFromSchema: (schema: JSONSchema6Type | JSONSchema6Definition | undefined) => string | undefined;
+declare const schemaToFormObject: (schema: JSONSchema6) => IForm;
 
 declare const schemaToFormHelpers_getLabelFromSchema: typeof getLabelFromSchema;
 declare const schemaToFormHelpers_getValueFromSchema: typeof getValueFromSchema;

package/library/esm/_virtual/index2.js

@@ -1,4 +1,4 @@
-var codegen = {};
+var validate = {};
 
-export { codegen as __exports };
+export { validate as __exports };
 //# sourceMappingURL=index2.js.map

package/library/esm/_virtual/index3.js

@@ -1,4 +1,4 @@
-var validate = {};
+var codegen = {};
 
-export { validate as __exports };
+export { codegen as __exports };
 //# sourceMappingURL=index3.js.map

package/library/esm/_virtual/index6.js

@@ -1,4 +1,4 @@
-var core = {};
+var applicator = {};
 
-export { core as __exports };
+export { applicator as __exports };
 //# sourceMappingURL=index6.js.map

package/library/esm/_virtual/index8.js

@@ -1,4 +1,4 @@
-var format = {};
+var core = {};
 
-export { format as __exports };
+export { core as __exports };
 //# sourceMappingURL=index8.js.map

package/library/esm/_virtual/index9.js

@@ -1,4 +1,4 @@
-var applicator = {};
+var format = {};
 
-export { applicator as __exports };
+export { format as __exports };
 //# sourceMappingURL=index9.js.map

package/library/esm/node_modules/ajv/dist/compile/codegen/index.js

@@ -1,4 +1,4 @@
-import { __exports as codegen } from '../../../../../_virtual/index2.js';
+import { __exports as codegen } from '../../../../../_virtual/index3.js';
 import { __require as requireCode } from './code.js';
 import { __require as requireScope } from './scope.js';
 

package/library/esm/node_modules/ajv/dist/compile/validate/index.js

@@ -1,4 +1,4 @@
-import { __exports as validate } from '../../../../../_virtual/index3.js';
+import { __exports as validate } from '../../../../../_virtual/index2.js';
 import { __require as requireBoolSchema } from './boolSchema.js';
 import { __require as requireDataType } from './dataType.js';
 import { __require as requireApplicability } from './applicability.js';

package/library/esm/node_modules/ajv/dist/vocabularies/applicator/index.js

@@ -1,4 +1,4 @@
-import { __exports as applicator } from '../../../../../_virtual/index9.js';
+import { __exports as applicator } from '../../../../../_virtual/index6.js';
 import { __require as requireAdditionalItems } from './additionalItems.js';
 import { __require as requirePrefixItems } from './prefixItems.js';
 import { __require as requireItems } from './items.js';

package/library/esm/node_modules/ajv/dist/vocabularies/core/index.js

@@ -1,4 +1,4 @@
-import { __exports as core } from '../../../../../_virtual/index6.js';
+import { __exports as core } from '../../../../../_virtual/index8.js';
 import { __require as requireId } from './id.js';
 import { __require as requireRef } from './ref.js';
 

package/library/esm/node_modules/ajv/dist/vocabularies/format/index.js

@@ -1,4 +1,4 @@
-import { __exports as format } from '../../../../../_virtual/index8.js';
+import { __exports as format } from '../../../../../_virtual/index9.js';
 import { __require as requireFormat$1 } from './format.js';
 
 var hasRequiredFormat;

package/library/esm/src/Form/Components/FieldCreator.js

@@ -1,5 +1,6 @@
 import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import inputMap from './Inputs/inputMap.js';
+import { useFormContext } from '../Creator/FormContextProvider.js';
 import { checkCondition, getFieldValue, getPathFromField, cleanUnusedDependenciesFromFormValues } from '../helpers.js';
 import { utils as index$1, Button } from '../../../node_modules/@axdspub/axiom-ui-utilities/library/index.js';
 import { ExclamationTriangleIcon, PlusIcon, CopyIcon, CheckIcon, Cross1Icon, TrashIcon } from '../../../node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
@@ -30,14 +31,14 @@ var DeleteMultiple = function (_a) {
             React__default.createElement(TrashIcon, { className: 'inline ml-2 fill-white' }))));
 };
 var OneOfMultiple = function (_a) {
-    var InputComponent = _a.InputComponent, field = _a.field, form = _a.form, value = _a.value, index = _a.index, onChange = _a.onChange, values = _a.values, formValueState = _a.formValueState;
+    var InputComponent = _a.InputComponent, field = _a.field, value = _a.value, index = _a.index, onChange = _a.onChange, values = _a.values;
     var addValue = function (v) {
         var newValues = __spreadArray([], values, true);
         newValues.splice(index + 1, 0, v);
         onChange(newValues);
     };
     return (React__default.createElement("div", { className: 'flex flex-col gap-2' },
-        React__default.createElement(InputComponent, { formValueState: formValueState, form: form, field: __assign(__assign({}, field), { required: false, label: index > 0 ? null : field.label, id: "".concat(field.id, "-").concat(index) }), value: value, onChange: function (v) {
+        React__default.createElement(InputComponent, { field: __assign(__assign({}, field), { required: false, label: index > 0 ? null : field.label, id: "".concat(field.id, "-").concat(index) }), value: value, onChange: function (v) {
                 var newValues = __spreadArray([], values, true);
                 newValues[index] = v;
                 onChange(newValues);
@@ -61,8 +62,8 @@ var OneOfMultiple = function (_a) {
                     React__default.createElement(CopyIcon, { className: 'inline ml-2' }))))));
 };
 var MultipleFieldCreator = function (_a) {
-    var form = _a.form, field = _a.field, onChange = _a.onChange, value = _a.value, formValueState = _a.formValueState, inputOverrides = _a.inputOverrides;
-    var formValues = formValueState[0], setFormValues = formValueState[1];
+    var field = _a.field, onChange = _a.onChange, value = _a.value;
+    var _b = useFormContext(), formValues = _b.formValues, setFormValues = _b.setFormValues, inputOverrides = _b.inputOverrides;
     var defaultOnChange = function (v) {
         var formValuesCopy = structuredClone(formValues);
         var fieldPath = getPathFromField(field);
@@ -73,13 +74,13 @@ var MultipleFieldCreator = function (_a) {
     var initialValues = (initialVal !== undefined ? (Array.isArray(initialVal) ? initialVal : [initialVal]) : [null]);
     var InputComponent = __assign(__assign({}, inputMap), (inputOverrides !== null && inputOverrides !== void 0 ? inputOverrides : {}))[field.type];
     return React__default.createElement("div", null, initialValues === null || initialValues === void 0 ? void 0 : initialValues.map(function (value, index) {
-        return React__default.createElement(OneOfMultiple, { formValueState: formValueState, key: "".concat(field.id, "-").concat(index), InputComponent: InputComponent, form: form, field: field, value: value, index: index, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, values: initialValues });
+        return React__default.createElement(OneOfMultiple, { key: "".concat(field.id, "-").concat(index), InputComponent: InputComponent, field: field, value: value, index: index, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, values: initialValues });
     }));
 };
 var FieldCreator = function (_a) {
     var _b;
-    var field = _a.field, form = _a.form, value = _a.value, onChange = _a.onChange, className = _a.className, _c = _a.defaultClassName, defaultClassName = _c === void 0 ? 'py-2 flex flex-col gap-8' : _c, formValueState = _a.formValueState, inputOverrides = _a.inputOverrides;
-    var formValues = formValueState[0], setFormValues = formValueState[1];
+    var field = _a.field, value = _a.value, onChange = _a.onChange, className = _a.className, _c = _a.defaultClassName, defaultClassName = _c === void 0 ? 'py-2 flex flex-col gap-8' : _c;
+    var _d = useFormContext(), form = _d.form, inputOverrides = _d.inputOverrides, setFormValues = _d.setFormValues, formValues = _d.formValues;
     var InputComponent = __assign(__assign({}, inputMap), (inputOverrides !== null && inputOverrides !== void 0 ? inputOverrides : {}))[field.type];
     var updateFormValues = function (v) {
         setFormValues(cleanUnusedDependenciesFromFormValues(form, v));
@@ -99,8 +100,8 @@ var FieldCreator = function (_a) {
                 className: className,
                 defaultClassName: defaultClassName
             }) }, field.multiple === true
-            ? React__default.createElement(MultipleFieldCreator, { field: field, form: form, onChange: onChange, value: initialValue, formValueState: formValueState, inputOverrides: inputOverrides })
-            : React__default.createElement(InputComponent, { field: field, form: form, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, value: Array.isArray(initialValue) ? initialValue[0] : initialValue, formValueState: formValueState, inputOverrides: inputOverrides }))
+            ? React__default.createElement(MultipleFieldCreator, { field: field, onChange: onChange, value: initialValue })
+            : React__default.createElement(InputComponent, { field: field, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, value: Array.isArray(initialValue) ? initialValue[0] : initialValue }))
         : React__default.createElement("div", null,
             React__default.createElement("p", { className: 'font-bold mb-2' },
                 React__default.createElement(ExclamationTriangleIcon, { className: 'inline' }),

package/library/esm/src/Form/Components/FieldCreator.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCreator.js","sources":["../../../../../src/Form/Components/FieldCreator.tsx"],"sourcesContent":["import inputMap from '@/Form/Components/Inputs/inputMap'\nimport { type IFormValues, type IFieldInputProps, type IFormField, type IValueChangeFn, type IValueType, type IForm, type IFormValueState } from '@/Form/Creator/FormCreatorTypes'\nimport { checkCondition, cleanUnusedDependenciesFromFormValues, getFieldValue, getPathFromField } from '@/Form/helpers'\nimport { Button, utils } from '@axdspub/axiom-ui-utilities'\nimport { CheckIcon, CopyIcon, Cross1Icon, ExclamationTriangleIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons'\nimport { set } from 'lodash'\nimport React, { useState, type ReactElement } from 'react'\n\ninterface IFieldCreator {\n  field: IFormField\n  form: IForm\n  onChange?: IValueChangeFn\n  className?: string\n  defaultClassName?: string\n  value?: IValueType | IValueType[]\n  formValueState: IFormValueState\n  inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n}\n\nconst toolButtonClass = 'border-white hover:border-single hover:border-1 hover:border-slate-400'\n\nconst DeleteMultiple = ({\n  doDelete\n}: {\n  doDelete: () => void\n}): ReactElement => {\n  const [confirm, setConfirm] = useState(false)\n\n  return (\n    <>\n      {\n        confirm\n          ? <p className='flex flex-row gap-2 text-sm'><span className='text-slate-600'>Deleting: </span> Are you sure?\n              <Button size='xs' type='submit'\n                onClick={() => {\n                  doDelete()\n                  setConfirm(false)\n                }}>Yes <CheckIcon className='inline ml-2' />\n              </Button>\n              <Button size='xs' type='alert'\n                onClick={() => {\n                  setConfirm(false)\n                }}>Cancel <Cross1Icon className='inline ml-2' />\n              </Button>\n            </p>\n          : <Button size='xs' className={toolButtonClass} onClick={() => { setConfirm(true) }}>\n              Delete <TrashIcon className='inline ml-2 fill-white' />\n            </Button>\n      }\n    </>\n  )\n}\n\nconst OneOfMultiple = ({\n  InputComponent,\n  field,\n  form,\n  value,\n  index,\n  onChange,\n  values,\n  formValueState\n\n}: {\n  InputComponent: React.FC<IFieldInputProps>\n  field: IFormField\n  form: IForm\n  value: IValueType\n  index: number\n  onChange: (v: IValueType[] | undefined) => void\n  values: IValueType[]\n  formValueState: [IFormValues, (v: IFormValues) => void]\n\n}): ReactElement => {\n  const addValue = (v: IValueType | null): void => {\n    const newValues = [...values]\n    newValues.splice(index + 1, 0, v)\n    onChange(newValues)\n  }\n\n  return (\n    <div className='flex flex-col gap-2'>\n          <InputComponent\n          formValueState={formValueState}\n          form={form}\n          field={{\n            ...field,\n            required: false,\n            label: index > 0 ? null : field.label,\n            id: `${field.id}-${index}`\n          }}\n          value={value}\n          onChange={(v) => {\n            const newValues = [...values]\n            newValues[index] = v as IValueType\n            onChange(newValues)\n          }}\n        />\n\n            <div className='flex flex-row justify-between w-full p-2'>\n              {index > 0 && (\n              <DeleteMultiple doDelete={() => {\n                const newValues = [...values]\n                newValues.splice(index, 1)\n                onChange(newValues)\n              }} />\n              )}\n              <div className='ml-auto flex gap-2'>\n                <Button\n                size='xs'\n                className={toolButtonClass}\n                onClick={() => {\n                  addValue(null)\n                }}>Add <PlusIcon className='inline ml-2' /></Button>\n                <Button\n                  size='xs'\n                  className={toolButtonClass}\n                  onClick={() => {\n                    addValue(structuredClone(value))\n                  }}>Duplicate <CopyIcon className='inline ml-2' />\n                </Button>\n              </div>\n            </div>\n        </div>\n  )\n}\n\nconst MultipleFieldCreator = ({\n  form,\n  field,\n  onChange,\n  value,\n  formValueState,\n  inputOverrides\n}: IFieldCreator): ReactElement => {\n  const [formValues, setFormValues] = formValueState\n  const defaultOnChange = (v: IValueType[] | undefined): void => {\n    const formValuesCopy = structuredClone(formValues)\n    const fieldPath = getPathFromField(field)\n    set(formValuesCopy, fieldPath, v)\n    setFormValues(formValuesCopy)\n  }\n\n  const initialVal = value !== undefined ? value : getFieldValue(field, formValues)\n  const initialValues = (initialVal !== undefined ? (Array.isArray(initialVal) ? initialVal : [initialVal]) : [null])\n\n  const InputComponent = {\n    ...inputMap,\n    ...(inputOverrides ?? {})\n  }[field.type]\n\n  return <div>\n    {\n      initialValues?.map((value, index) => {\n        return <OneOfMultiple\n          formValueState={formValueState}\n          key={`${field.id}-${index}`}\n          InputComponent={InputComponent}\n          form={form}\n          field={field}\n          value={value}\n          index={index}\n          onChange={onChange ?? defaultOnChange}\n          values={initialValues}\n          />\n      })\n    }\n  </div>\n}\n\nconst FieldCreator = ({\n  field,\n  form,\n  value,\n  onChange,\n  className,\n  defaultClassName = 'py-2 flex flex-col gap-8',\n  formValueState,\n  inputOverrides\n}: IFieldCreator): ReactElement | null => {\n  const [formValues, setFormValues] = formValueState\n  const InputComponent = {\n    ...inputMap,\n    ...(inputOverrides ?? {})\n  }[field.type]\n\n  const updateFormValues = (v: IFormValues): void => {\n    setFormValues(cleanUnusedDependenciesFromFormValues(form, v))\n  }\n\n  if (!checkCondition(field, formValues)) {\n    return null\n  }\n\n  const defaultOnChange = (v: IValueType | IValueType[] | undefined): void => {\n    const formValuesCopy = structuredClone(formValues)\n    const fieldPath = getPathFromField(field)\n    set(formValuesCopy, fieldPath, v)\n    updateFormValues(formValuesCopy)\n  }\n  const initialValue = value !== undefined ? value : getFieldValue(field, formValues)\n  return InputComponent !== undefined\n    ? <div className={utils.makeClassName({\n      className,\n      defaultClassName\n    })}>{\n      field.multiple === true\n        ? <MultipleFieldCreator\n            field={field}\n            form={form}\n            onChange={onChange}\n            value={initialValue}\n            formValueState={formValueState}\n            inputOverrides={inputOverrides}\n          />\n        : <InputComponent\n            field={field}\n            form={form}\n            onChange={onChange ?? defaultOnChange}\n            value={Array.isArray(initialValue) ? initialValue[0] : initialValue}\n            formValueState={formValueState}\n            inputOverrides={inputOverrides}\n          />\n\n    }</div>\n    : <div>\n        <p className='font-bold mb-2'><ExclamationTriangleIcon className='inline' /> {field.label ?? ''}</p>\n        <p className='p-4 text-sm bg-slate-100'>No component definition for <span className='text-rose-800 font-mono text-xs bg-slate-300 p-2'>type</span><span className='p-2 bg-slate-700 text-white font-mono text-xs'>{field.type}</span> at <span className='text-rose-800 font-mono text-xs bg-slate-300 p-2'>id</span><span className='p-2 bg-slate-700 text-white font-mono text-xs'>{field.id}</span></p>\n      </div>\n}\n\nexport default FieldCreator\n"],"names":["React","utils"],"mappings":"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"}
+{"version":3,"file":"FieldCreator.js","sources":["../../../../../src/Form/Components/FieldCreator.tsx"],"sourcesContent":["import inputMap from '@/Form/Components/Inputs/inputMap'\nimport { useFormContext } from '@/Form/Creator/FormContextProvider'\nimport { type IFormValues, type IFieldInputProps, type IFormField, type IValueChangeFn, type IValueType } from '@/Form/Creator/FormCreatorTypes'\nimport { checkCondition, cleanUnusedDependenciesFromFormValues, getFieldValue, getPathFromField } from '@/Form/helpers'\nimport { Button, utils } from '@axdspub/axiom-ui-utilities'\nimport { CheckIcon, CopyIcon, Cross1Icon, ExclamationTriangleIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons'\nimport { set } from 'lodash'\nimport React, { useState, type ReactElement } from 'react'\n\ninterface IFieldCreator {\n  field: IFormField\n  onChange?: IValueChangeFn\n  className?: string\n  defaultClassName?: string\n  value?: IValueType | IValueType[]\n}\n\nconst toolButtonClass = 'border-white hover:border-single hover:border-1 hover:border-slate-400'\n\nconst DeleteMultiple = ({\n  doDelete\n}: {\n  doDelete: () => void\n}): ReactElement => {\n  const [confirm, setConfirm] = useState(false)\n\n  return (\n    <>\n      {\n        confirm\n          ? <p className='flex flex-row gap-2 text-sm'><span className='text-slate-600'>Deleting: </span> Are you sure?\n              <Button size='xs' type='submit'\n                onClick={() => {\n                  doDelete()\n                  setConfirm(false)\n                }}>Yes <CheckIcon className='inline ml-2' />\n              </Button>\n              <Button size='xs' type='alert'\n                onClick={() => {\n                  setConfirm(false)\n                }}>Cancel <Cross1Icon className='inline ml-2' />\n              </Button>\n            </p>\n          : <Button size='xs' className={toolButtonClass} onClick={() => { setConfirm(true) }}>\n              Delete <TrashIcon className='inline ml-2 fill-white' />\n            </Button>\n      }\n    </>\n  )\n}\n\nconst OneOfMultiple = ({\n  InputComponent,\n  field,\n  value,\n  index,\n  onChange,\n  values\n\n}: {\n  InputComponent: React.FC<IFieldInputProps>\n  field: IFormField\n  value: IValueType\n  index: number\n  onChange: (v: IValueType[] | undefined) => void\n  values: IValueType[]\n}): ReactElement => {\n  const addValue = (v: IValueType | null): void => {\n    const newValues = [...values]\n    newValues.splice(index + 1, 0, v)\n    onChange(newValues)\n  }\n\n  return (\n    <div className='flex flex-col gap-2'>\n          <InputComponent\n          field={{\n            ...field,\n            required: false,\n            label: index > 0 ? null : field.label,\n            id: `${field.id}-${index}`\n          }}\n          value={value}\n          onChange={(v) => {\n            const newValues = [...values]\n            newValues[index] = v as IValueType\n            onChange(newValues)\n          }}\n        />\n\n            <div className='flex flex-row justify-between w-full p-2'>\n              {index > 0 && (\n              <DeleteMultiple doDelete={() => {\n                const newValues = [...values]\n                newValues.splice(index, 1)\n                onChange(newValues)\n              }} />\n              )}\n              <div className='ml-auto flex gap-2'>\n                <Button\n                size='xs'\n                className={toolButtonClass}\n                onClick={() => {\n                  addValue(null)\n                }}>Add <PlusIcon className='inline ml-2' /></Button>\n                <Button\n                  size='xs'\n                  className={toolButtonClass}\n                  onClick={() => {\n                    addValue(structuredClone(value))\n                  }}>Duplicate <CopyIcon className='inline ml-2' />\n                </Button>\n              </div>\n            </div>\n        </div>\n  )\n}\n\nconst MultipleFieldCreator = ({\n  field,\n  onChange,\n  value\n}: IFieldCreator): ReactElement => {\n  const { formValues, setFormValues, inputOverrides } = useFormContext()\n  const defaultOnChange = (v: IValueType[] | undefined): void => {\n    const formValuesCopy = structuredClone(formValues)\n    const fieldPath = getPathFromField(field)\n    set(formValuesCopy, fieldPath, v)\n    setFormValues(formValuesCopy)\n  }\n\n  const initialVal = value !== undefined ? value : getFieldValue(field, formValues)\n  const initialValues = (initialVal !== undefined ? (Array.isArray(initialVal) ? initialVal : [initialVal]) : [null])\n\n  const InputComponent = {\n    ...inputMap,\n    ...(inputOverrides ?? {})\n  }[field.type]\n\n  return <div>\n    {\n      initialValues?.map((value, index) => {\n        return <OneOfMultiple\n          key={`${field.id}-${index}`}\n          InputComponent={InputComponent}\n          field={field}\n          value={value}\n          index={index}\n          onChange={onChange ?? defaultOnChange}\n          values={initialValues}\n          />\n      })\n    }\n  </div>\n}\n\nconst FieldCreator = ({\n  field,\n  value,\n  onChange,\n  className,\n  defaultClassName = 'py-2 flex flex-col gap-8'\n}: IFieldCreator): ReactElement | null => {\n  const { form, inputOverrides, setFormValues, formValues } = useFormContext()\n  const InputComponent = {\n    ...inputMap,\n    ...(inputOverrides ?? {})\n  }[field.type]\n\n  const updateFormValues = (v: IFormValues): void => {\n    setFormValues(cleanUnusedDependenciesFromFormValues(form, v))\n  }\n\n  if (!checkCondition(field, formValues)) {\n    return null\n  }\n\n  const defaultOnChange = (v: IValueType | IValueType[] | undefined): void => {\n    const formValuesCopy = structuredClone(formValues)\n    const fieldPath = getPathFromField(field)\n    set(formValuesCopy, fieldPath, v)\n    updateFormValues(formValuesCopy)\n  }\n  const initialValue = value !== undefined ? value : getFieldValue(field, formValues)\n  return InputComponent !== undefined\n    ? <div className={utils.makeClassName({\n      className,\n      defaultClassName\n    })}>{\n      field.multiple === true\n        ? <MultipleFieldCreator\n            field={field}\n            onChange={onChange}\n            value={initialValue}\n          />\n        : <InputComponent\n            field={field}\n            onChange={onChange ?? defaultOnChange}\n            value={Array.isArray(initialValue) ? initialValue[0] : initialValue}\n          />\n\n    }</div>\n    : <div>\n        <p className='font-bold mb-2'><ExclamationTriangleIcon className='inline' /> {field.label ?? ''}</p>\n        <p className='p-4 text-sm bg-slate-100'>No component definition for <span className='text-rose-800 font-mono text-xs bg-slate-300 p-2'>type</span><span className='p-2 bg-slate-700 text-white font-mono text-xs'>{field.type}</span> at <span className='text-rose-800 font-mono text-xs bg-slate-300 p-2'>id</span><span className='p-2 bg-slate-700 text-white font-mono text-xs'>{field.id}</span></p>\n      </div>\n}\n\nexport default FieldCreator\n"],"names":["React","utils"],"mappings":"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"}

package/library/esm/src/Form/Components/FieldLabel.js

@@ -2,11 +2,10 @@ import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 
 var FieldLabelText = function (field) {
-    return (React__default.createElement("p", null,
-        React__default.createElement("strong", null,
-            field.label,
-            " ",
-            field.required === true ? React__default.createElement("span", { className: 'text-red-500' }, "*") : '')));
+    return (React__default.createElement("strong", null,
+        field.label,
+        " ",
+        field.required === true ? React__default.createElement("span", { className: 'text-red-500' }, "*") : ''));
 };
 var FieldDescriptionText = function (field) {
     return (React__default.createElement(React__default.Fragment, null, field.description !== undefined
@@ -15,7 +14,8 @@ var FieldDescriptionText = function (field) {
 };
 var FieldLabel = function (field) {
     return React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(FieldLabelText, __assign({}, field)),
+        React__default.createElement("p", null,
+            React__default.createElement(FieldLabelText, __assign({}, field))),
         React__default.createElement(FieldDescriptionText, __assign({}, field)));
 };
 

package/library/esm/src/Form/Components/FieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.js","sources":["../../../../../src/Form/Components/FieldLabel.tsx"],"sourcesContent":["import { type IFormField } from '@/Form/Creator/FormCreatorTypes'\nimport React, { type ReactElement } from 'react'\n\nexport const FieldLabelText = (field: IFormField): ReactElement => {\n  return (\n    <p><strong>{field.label} { field.required === true ? <span className='text-red-500'>*</span> : ''}</strong></p>\n  )\n}\n\nexport const FieldDescriptionText = (field: IFormField): ReactElement => {\n  return (\n    <>{\n      field.description !== undefined\n        ? <p className='text-xs py-2'>{field.description}</p>\n        : ''\n    }</>\n  )\n}\n\nconst FieldLabel = (field: IFormField): ReactElement => {\n  return <>\n    <FieldLabelText {...field} />\n    <FieldDescriptionText {...field} />\n\n  </>\n}\n\nexport default FieldLabel\n"],"names":["React"],"mappings":";;;AAGO,IAAM,cAAc,GAAG,UAAC,KAAiB,EAAA;AAC9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;AAAG,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AAAS,YAAA,KAAK,CAAC,KAAK;;AAAI,YAAA,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAGA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,cAAc,EAAA,EAAA,GAAA,CAAS,GAAG,EAAE,CAAU,CAAI;AAEnH;AAEO,IAAM,oBAAoB,GAAG,UAAC,KAAiB,EAAA;AACpD,IAAA,QACEA,cACE,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAK,CAAC,WAAW,KAAK;UAClBA,oCAAG,SAAS,EAAC,cAAc,EAAE,EAAA,KAAK,CAAC,WAAW;AAChD,UAAE,EAAE,CACJ;AAER;AAEM,IAAA,UAAU,GAAG,UAAC,KAAiB,EAAA;IACnC,OAAOA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACLA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,CAAI,CAAA;AAC7B,QAAAA,cAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,QAAA,CAAA,EAAA,EAAK,KAAK,CAAA,CAAI,CAElC;AACL;;;;"}
+{"version":3,"file":"FieldLabel.js","sources":["../../../../../src/Form/Components/FieldLabel.tsx"],"sourcesContent":["import { type IFormField } from '@/Form/Creator/FormCreatorTypes'\nimport React, { type ReactElement } from 'react'\n\nexport const FieldLabelText = (field: IFormField): ReactElement => {\n  return (\n    <strong>{field.label} { field.required === true ? <span className='text-red-500'>*</span> : ''}</strong>\n  )\n}\n\nexport const FieldDescriptionText = (field: IFormField): ReactElement => {\n  return (\n    <>{\n      field.description !== undefined\n        ? <p className='text-xs py-2'>{field.description}</p>\n        : ''\n    }</>\n  )\n}\n\nconst FieldLabel = (field: IFormField): ReactElement => {\n  return <>\n    <p><FieldLabelText {...field} /></p>\n    <FieldDescriptionText {...field} />\n\n  </>\n}\n\nexport default FieldLabel\n"],"names":["React"],"mappings":";;;AAGO,IAAM,cAAc,GAAG,UAAC,KAAiB,EAAA;AAC9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AAAS,QAAA,KAAK,CAAC,KAAK;;AAAI,QAAA,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAGA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,cAAc,QAAS,GAAG,EAAE,CAAU;AAE5G;AAEO,IAAM,oBAAoB,GAAG,UAAC,KAAiB,EAAA;AACpD,IAAA,QACEA,cACE,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAK,CAAC,WAAW,KAAK;UAClBA,oCAAG,SAAS,EAAC,cAAc,EAAE,EAAA,KAAK,CAAC,WAAW;AAChD,UAAE,EAAE,CACJ;AAER;AAEM,IAAA,UAAU,GAAG,UAAC,KAAiB,EAAA;IACnC,OAAOA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;AAAG,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,QAAA,CAAA,EAAA,EAAK,KAAK,CAAA,CAAI,CAAI;AACpC,QAAAA,cAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,QAAA,CAAA,EAAA,EAAK,KAAK,CAAA,CAAI,CAElC;AACL;;;;"}

package/library/esm/src/Form/Components/Inputs/Date.js

@@ -1,6 +1,6 @@
 import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
 import FieldLabel from '../FieldLabel.js';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState } from 'react';
 
 var DateInput = function (_a) {
     var _b;
@@ -11,12 +11,8 @@ var DateInput = function (_a) {
             field.id,
             " is missing 'options'");
     }
-    var _c = useState(''), inputValue = _c[0], setInputValue = _c[1];
-    var _d = useState(null), error = _d[0], setError = _d[1];
-    var _e = (_b = field.constraints) !== null && _b !== void 0 ? _b : {}, minDate = _e.minDate, maxDate = _e.maxDate;
-    useEffect(function () {
-        setInputValue(formatValue(value));
-    }, [value]);
+    var _c = useState(null), error = _c[0], setError = _c[1];
+    var _d = (_b = field.constraints) !== null && _b !== void 0 ? _b : {}, minDate = _d.minDate, maxDate = _d.maxDate;
     // Convert the value to the format expected by date input (YYYY-MM-DD)
     var formatValue = function (val) {
         if (!val)
@@ -36,6 +32,7 @@ var DateInput = function (_a) {
             return '';
         }
     };
+    var inputValue = formatValue(value);
     var validateDate = function (dateStr) {
         if (!minDate && !maxDate)
             return null;
@@ -51,15 +48,14 @@ var DateInput = function (_a) {
         return null;
     };
     var handleChange = function (e) {
-        var newInputValue = e.target.value;
-        setInputValue(newInputValue);
+        var newValue = e.target.value;
         // Only notify parent of change if we have a complete valid date
-        if (newInputValue) {
+        if (newValue) {
             // Create date in UTC by appending T00:00:00Z to the input value
-            var date = new Date(newInputValue + 'T00:00:00Z');
+            var date = new Date(newValue + 'T00:00:00Z');
             // Check if it's a valid date and the year is reasonable (4 digits)
             if (!isNaN(date.getTime()) && date.getUTCFullYear() > 999) {
-                var validationError = validateDate(newInputValue);
+                var validationError = validateDate(newValue);
                 setError(validationError);
                 if (!validationError) {
                     onChange(date.toISOString());

package/library/esm/src/Form/Components/Inputs/Date.js.map

@@ -1 +1 @@
-{"version":3,"file":"Date.js","sources":["../../../../../../src/Form/Components/Inputs/Date.tsx"],"sourcesContent":["import FieldLabel from '@/Form/Components/FieldLabel'\nimport { type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport React, { type ReactElement, useState, useEffect } from 'react'\n\nconst DateInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {\n  if (field.type !== 'date') {\n    return <p>Field config for {field.id} is missing &apos;options&apos;</p>\n  }\n  const [inputValue, setInputValue] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const { minDate, maxDate } = field.constraints ?? {}\n\n  useEffect(() => {\n    setInputValue(formatValue(value as string))\n  }, [value])\n\n  // Convert the value to the format expected by date input (YYYY-MM-DD)\n  const formatValue = (val: string | undefined | null): string => {\n    if (!val) return ''\n    try {\n      // Ensure the value is in the correct format\n      const date = new Date(val)\n      if (isNaN(date.getTime())) return ''\n\n      // Format to YYYY-MM-DD using UTC to avoid timezone issues\n      const year = date.getUTCFullYear()\n      const month = String(date.getUTCMonth() + 1).padStart(2, '0')\n      const day = String(date.getUTCDate()).padStart(2, '0')\n\n      return `${year}-${month}-${day}`\n    } catch {\n      return ''\n    }\n  }\n\n  const validateDate = (dateStr: string): string | null => {\n    if (!minDate && !maxDate) return null\n\n    const inputDate = new Date(dateStr + 'T00:00:00Z')\n    const minDateObj = minDate ? new Date(minDate) : null\n    const maxDateObj = maxDate ? new Date(maxDate) : null\n\n    if (minDateObj && inputDate < minDateObj) {\n      return `Date must be after ${formatValue(minDate)}`\n    }\n    if (maxDateObj && inputDate > maxDateObj) {\n      return `Date must be before ${formatValue(maxDate)}`\n    }\n    return null\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newInputValue = e.target.value\n    setInputValue(newInputValue)\n\n    // Only notify parent of change if we have a complete valid date\n    if (newInputValue) {\n      // Create date in UTC by appending T00:00:00Z to the input value\n      const date = new Date(newInputValue + 'T00:00:00Z')\n      // Check if it's a valid date and the year is reasonable (4 digits)\n      if (!isNaN(date.getTime()) && date.getUTCFullYear() > 999) {\n        const validationError = validateDate(newInputValue)\n        setError(validationError)\n        if (!validationError) {\n          onChange(date.toISOString())\n        }\n      }\n    } else {\n      setError(null)\n      onChange(undefined)\n    }\n  }\n\n  const getConstraintMessage = (): string | null => {\n    if (!minDate && !maxDate) return null\n    const parts = []\n    if (minDate) parts.push(`after ${formatValue(minDate)}`)\n    if (maxDate) parts.push(`before ${formatValue(maxDate)}`)\n    return `Must be ${parts.join(' and ')}`\n  }\n\n  const constraintMessage = getConstraintMessage()\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap items-baseline gap-2\">\n        <label htmlFor={field.id} className=\"flex-1 min-w-[200px]\">\n          <FieldLabel {...field} />\n        </label>\n        {constraintMessage && (\n          <span className=\"text-sm text-slate-500 italic\">\n            {constraintMessage}\n          </span>\n        )}\n      </div>\n      <input\n        id={field.id}\n        className={`border ${error ? 'border-red-500' : 'border-slate-300'} p-2 w-full`}\n        data-testid={field.id}\n        type=\"date\"\n        value={inputValue}\n        onChange={handleChange}\n        min={minDate ? formatValue(minDate) : undefined}\n        max={maxDate ? formatValue(maxDate) : undefined}\n      />\n      {error && <p className=\"text-red-500 text-sm mt-1\">{error}</p>}\n    </div>\n  )\n}\n\nexport default DateInput\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Date.js","sources":["../../../../../../src/Form/Components/Inputs/Date.tsx"],"sourcesContent":["import FieldLabel from '@/Form/Components/FieldLabel'\nimport { type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport React, { type ReactElement, useState } from 'react'\n\nconst DateInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {\n  if (field.type !== 'date') {\n    return <p>Field config for {field.id} is missing &apos;options&apos;</p>\n  }\n\n  const [error, setError] = useState<string | null>(null)\n  const { minDate, maxDate } = field.constraints ?? {}\n\n  // Convert the value to the format expected by date input (YYYY-MM-DD)\n  const formatValue = (val: string | undefined | null): string => {\n    if (!val) return ''\n    try {\n      // Ensure the value is in the correct format\n      const date = new Date(val)\n      if (isNaN(date.getTime())) return ''\n\n      // Format to YYYY-MM-DD using UTC to avoid timezone issues\n      const year = date.getUTCFullYear()\n      const month = String(date.getUTCMonth() + 1).padStart(2, '0')\n      const day = String(date.getUTCDate()).padStart(2, '0')\n\n      return `${year}-${month}-${day}`\n    } catch {\n      return ''\n    }\n  }\n\n  const inputValue = formatValue(value as string)\n\n  const validateDate = (dateStr: string): string | null => {\n    if (!minDate && !maxDate) return null\n\n    const inputDate = new Date(dateStr + 'T00:00:00Z')\n    const minDateObj = minDate ? new Date(minDate) : null\n    const maxDateObj = maxDate ? new Date(maxDate) : null\n\n    if (minDateObj && inputDate < minDateObj) {\n      return `Date must be after ${formatValue(minDate)}`\n    }\n    if (maxDateObj && inputDate > maxDateObj) {\n      return `Date must be before ${formatValue(maxDate)}`\n    }\n    return null\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = e.target.value\n    // Only notify parent of change if we have a complete valid date\n    if (newValue) {\n      // Create date in UTC by appending T00:00:00Z to the input value\n      const date = new Date(newValue + 'T00:00:00Z')\n      // Check if it's a valid date and the year is reasonable (4 digits)\n      if (!isNaN(date.getTime()) && date.getUTCFullYear() > 999) {\n        const validationError = validateDate(newValue)\n        setError(validationError)\n        if (!validationError) {\n          onChange(date.toISOString())\n        }\n      }\n    } else {\n      setError(null)\n      onChange(undefined)\n    }\n  }\n\n  const getConstraintMessage = (): string | null => {\n    if (!minDate && !maxDate) return null\n    const parts = []\n    if (minDate) parts.push(`after ${formatValue(minDate)}`)\n    if (maxDate) parts.push(`before ${formatValue(maxDate)}`)\n    return `Must be ${parts.join(' and ')}`\n  }\n\n  const constraintMessage = getConstraintMessage()\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap items-baseline gap-2\">\n        <label htmlFor={field.id} className=\"flex-1 min-w-[200px]\">\n          <FieldLabel {...field} />\n        </label>\n        {constraintMessage && (\n          <span className=\"text-sm text-slate-500 italic\">\n            {constraintMessage}\n          </span>\n        )}\n      </div>\n      <input\n        id={field.id}\n        className={`border ${error ? 'border-red-500' : 'border-slate-300'} p-2 w-full`}\n        data-testid={field.id}\n        type=\"date\"\n        value={inputValue}\n        onChange={handleChange}\n        min={minDate ? formatValue(minDate) : undefined}\n        max={maxDate ? formatValue(maxDate) : undefined}\n      />\n      {error && <p className=\"text-red-500 text-sm mt-1\">{error}</p>}\n    </div>\n  )\n}\n\nexport default DateInput\n"],"names":["React"],"mappings":"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"}

package/library/esm/src/Form/Components/Inputs/GeoJSON.js

@@ -401,55 +401,56 @@ var GeoJSONInput = function (_a) {
         // Don't hide the buttons anymore
         // setShowShapeTypeButtons(false)
     };
-    return React__default.createElement("div", { className: "relative" },
+    return React__default.createElement("div", null,
         React__default.createElement(FieldLabel, __assign({}, field)),
-        React__default.createElement("div", { className: "absolute z-20 top-12 right-4 flex flex-col gap-2" },
-            React__default.createElement("div", { className: "tooltip-container relative group" },
-                React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.polygon); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.polygon && isDrawing
-                        ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                        : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
-                    React__default.createElement(SquareIcon, { className: "w-5 h-5 rotate-45" }),
-                    React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Polygon"))),
-            React__default.createElement("div", { className: "tooltip-container relative group" },
-                React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.linestring); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.linestring && isDrawing
-                        ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                        : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
-                    React__default.createElement(BorderSolidIcon, { className: "w-5 h-5" }),
-                    React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Path"))),
-            React__default.createElement("div", { className: "tooltip-container relative group" },
-                React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.point); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.point && isDrawing
-                        ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
-                        : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
-                    React__default.createElement(DrawingPinFilledIcon, { className: "w-5 h-5" }),
-                    React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Point"))),
-            hasValidShape(geojson) && (React__default.createElement("div", { className: "tooltip-container relative group" },
-                React__default.createElement(Button, { onClick: clearShape, className: "p-2 rounded-lg shadow-lg bg-red-500 hover:bg-red-600 text-white w-10 h-10 flex items-center justify-center" },
-                    React__default.createElement(TrashIcon, { className: "w-5 h-5" }),
-                    React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Clear Shape"))))),
-        React__default.createElement(OpenLayersMapComponent, __assign({}, MAP_CONFIG, { setState: setMapState })),
-        React__default.createElement("div", { className: "mt-4" },
-            React__default.createElement("div", { className: "flex justify-between items-center mb-2" },
-                React__default.createElement("span", null,
-                    "Draw on map or enter coordinates ",
-                    React__default.createElement("pre", { className: "inline-block text-sm" }, "(latitude, longitude)")),
-                showShapeTypeButtons && (React__default.createElement("div", { className: "flex gap-2" },
-                    React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.linestring); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
-                        React__default.createElement(BorderSolidIcon, { className: "w-4 h-4" }),
-                        "Create Path"),
-                    React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.polygon); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
-                        React__default.createElement(SquareIcon, { className: "w-4 h-4 rotate-45" }),
-                        "Create Polygon")))),
-            React__default.createElement(TextArea, { error: error, className: 'min-h-[100px] bg-slate-50 rounded-lg shadow-inner', id: "".concat(field.id, "-coordinates"), testId: "".concat(field.id, "-coordinates"), value: coordinates, onChange: handleCoordinatesChange, placeholder: "61.2181, -149.9003\n61.2182, -149.9004\n61.2183, -149.9005" })),
-        showGeoJSONInput && React__default.createElement(TextArea, { error: error, className: 'min-h-[500px] bg-slate-50 rounded-lg shadow-inner', id: field.id, testId: field.id, label: React__default.createElement(FieldLabel, __assign({}, field)), value: getValue(), onChange: function (e) {
-                try {
-                    JSON.parse(e !== null && e !== void 0 ? e : '');
-                    onChange(JSON.parse(e !== null && e !== void 0 ? e : ''));
-                    setError(undefined);
-                }
-                catch (e) {
-                    setError('Invalid JSON');
-                }
-            } }));
+        React__default.createElement("div", { className: "relative" },
+            React__default.createElement("div", { className: "absolute z-20 top-12 right-4 flex flex-col gap-2" },
+                React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.polygon); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.polygon && isDrawing
+                            ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
+                        React__default.createElement(SquareIcon, { className: "w-5 h-5 rotate-45" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Polygon"))),
+                React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.linestring); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.linestring && isDrawing
+                            ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
+                        React__default.createElement(BorderSolidIcon, { className: "w-5 h-5" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Path"))),
+                React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: function () { handleDrawTypeChange(EMapShape.point); }, className: "p-2 rounded-lg shadow-lg ".concat(currentDrawType === EMapShape.point && isDrawing
+                            ? 'bg-white hover:bg-gray-50 ring-2 ring-yellow-200 shadow-[0_0_10px_rgba(253,224,71,0.5)]'
+                            : 'bg-gray-100 hover:bg-gray-50', " text-black w-10 h-10 flex items-center justify-center") },
+                        React__default.createElement(DrawingPinFilledIcon, { className: "w-5 h-5" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Draw Point"))),
+                hasValidShape(geojson) && (React__default.createElement("div", { className: "tooltip-container relative group" },
+                    React__default.createElement(Button, { onClick: clearShape, className: "p-2 rounded-lg shadow-lg bg-red-500 hover:bg-red-600 text-white w-10 h-10 flex items-center justify-center" },
+                        React__default.createElement(TrashIcon, { className: "w-5 h-5" }),
+                        React__default.createElement("span", { className: "tooltip absolute right-full mr-2 px-2 py-1 bg-gray-800 text-white text-sm rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none" }, "Clear Shape"))))),
+            React__default.createElement(OpenLayersMapComponent, __assign({}, MAP_CONFIG, { setState: setMapState })),
+            React__default.createElement("div", { className: "mt-4" },
+                React__default.createElement("div", { className: "flex justify-between items-center mb-2" },
+                    React__default.createElement("span", null,
+                        "Draw on map or enter coordinates ",
+                        React__default.createElement("pre", { className: "inline-block text-sm" }, "(latitude, longitude)")),
+                    showShapeTypeButtons && (React__default.createElement("div", { className: "flex gap-2" },
+                        React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.linestring); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
+                            React__default.createElement(BorderSolidIcon, { className: "w-4 h-4" }),
+                            "Create Path"),
+                        React__default.createElement(Button, { onClick: function () { applyShapeType(EMapShape.polygon); }, className: "px-4 py-1 bg-white hover:bg-gray-50 text-black rounded-lg shadow-sm border border-gray-200 text-sm flex items-center gap-2" },
+                            React__default.createElement(SquareIcon, { className: "w-4 h-4 rotate-45" }),
+                            "Create Polygon")))),
+                React__default.createElement(TextArea, { error: error, className: 'min-h-[100px] bg-slate-50 rounded-lg shadow-inner', id: "".concat(field.id, "-coordinates"), testId: "".concat(field.id, "-coordinates"), value: coordinates, onChange: handleCoordinatesChange, placeholder: "61.2181, -149.9003\n61.2182, -149.9004\n61.2183, -149.9005" })),
+            showGeoJSONInput && React__default.createElement(TextArea, { error: error, className: 'min-h-[500px] bg-slate-50 rounded-lg shadow-inner', id: field.id, testId: field.id, label: React__default.createElement(FieldLabel, __assign({}, field)), value: getValue(), onChange: function (e) {
+                    try {
+                        JSON.parse(e !== null && e !== void 0 ? e : '');
+                        onChange(JSON.parse(e !== null && e !== void 0 ? e : ''));
+                        setError(undefined);
+                    }
+                    catch (e) {
+                        setError('Invalid JSON');
+                    }
+                } })));
 };
 
 export { GeoJSONInput, GeoJSONInput as default };