@measured/puck 0.19.0-canary.85ee736 → 0.19.0-canary.af4f756

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-wwgDuTnC.mjs';
2
- export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-wwgDuTnC.mjs';
1
+ import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-DleIzc4N.mjs';
2
+ export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-DleIzc4N.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-wwgDuTnC.js';
2
- export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-wwgDuTnC.js';
1
+ import { F as FieldProps, a as Field, D as DropZoneProps, C as Config, U as UserGenerics, b as Data, c as UiState, O as OnAction, P as Permissions, d as Plugin, e as Overrides, f as PuckAction, V as Viewports, I as IframeConfig, g as InitialHistory, M as Metadata, h as DefaultComponentProps, i as DefaultRootFieldProps, H as History, j as ComponentData, k as Fields, A as AppState, l as ComponentConfig } from './resolve-all-data-DleIzc4N.js';
2
+ export { Q as Adaptor, K as ArrayField, t as ArrayState, a2 as AsFieldProps, B as BaseData, E as BaseField, y as ComponentDataMap, z as Content, Y as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, m as Direction, n as DragAxis, X as ExternalField, W as ExternalFieldWithAdaptor, a4 as ExtractPropsFromConfig, a5 as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, x as MappedItem, N as NumberField, L as ObjectField, q as OverrideKey, u as PuckComponent, Z as PuckContext, J as RadioField, w as RootData, R as RootDataWithProps, v as RootDataWithoutProps, S as SelectField, T as TextField, G as TextareaField, o as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-DleIzc4N.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
package/dist/index.js CHANGED
@@ -2121,7 +2121,8 @@ function useDraggableSafe(input) {
2121
2121
  function useSortableSafe(input) {
2122
2122
  if (typeof window === "undefined") {
2123
2123
  return { ref: () => {
2124
- }, status: "idle" };
2124
+ }, status: "idle", handleRef: () => {
2125
+ } };
2125
2126
  }
2126
2127
  return (0, import_sortable.useSortable)(input);
2127
2128
  }
@@ -2396,23 +2397,26 @@ function patchWindow(window2) {
2396
2397
 
2397
2398
  // lib/dnd/use-sensors.ts
2398
2399
  var import_utilities2 = require("@dnd-kit/dom/utilities");
2399
- var useSensors = () => {
2400
+ var useSensors = ({
2401
+ other,
2402
+ mouse,
2403
+ touch
2404
+ } = {
2405
+ touch: { delay: { value: 200, tolerance: 10 } },
2406
+ other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
2407
+ }) => {
2400
2408
  const [sensors] = (0, import_react12.useState)(() => [
2401
2409
  PointerSensor.configure({
2402
2410
  activationConstraints(event, source) {
2403
2411
  var _a;
2404
2412
  const { pointerType, target } = event;
2405
2413
  if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
2406
- return void 0;
2414
+ return mouse;
2407
2415
  }
2408
- const delay = { value: 200, tolerance: 10 };
2409
2416
  if (pointerType === "touch") {
2410
- return { delay };
2417
+ return touch;
2411
2418
  }
2412
- return {
2413
- delay,
2414
- distance: { value: 5 }
2415
- };
2419
+ return other;
2416
2420
  }
2417
2421
  })
2418
2422
  ]);
@@ -2758,13 +2762,16 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2758
2762
  var import_modifiers = require("@dnd-kit/dom/modifiers");
2759
2763
  var import_jsx_runtime5 = require("react/jsx-runtime");
2760
2764
  var SortableProvider = ({
2765
+ container,
2761
2766
  children,
2762
2767
  onDragStart,
2763
2768
  onDragEnd,
2764
2769
  onMove
2765
2770
  }) => {
2766
2771
  const [move, setMove] = (0, import_react14.useState)({ source: -1, target: -1 });
2767
- const sensors = useSensors();
2772
+ const sensors = useSensors({
2773
+ mouse: { distance: { value: 5 } }
2774
+ });
2768
2775
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2769
2776
  import_react13.DragDropProvider,
2770
2777
  {
@@ -2772,7 +2779,7 @@ var SortableProvider = ({
2772
2779
  modifiers: [
2773
2780
  import_modifiers.RestrictToElement.configure({
2774
2781
  element() {
2775
- return document.querySelector("[data-dnd-container]");
2782
+ return container.current;
2776
2783
  }
2777
2784
  })
2778
2785
  ],
@@ -2819,7 +2826,11 @@ var Sortable = ({
2819
2826
  children,
2820
2827
  type = "item"
2821
2828
  }) => {
2822
- const { ref: sortableRef, status } = useSortableSafe({
2829
+ const {
2830
+ ref: sortableRef,
2831
+ status,
2832
+ handleRef
2833
+ } = useSortableSafe({
2823
2834
  id,
2824
2835
  type,
2825
2836
  index,
@@ -2827,7 +2838,7 @@ var Sortable = ({
2827
2838
  data: { index },
2828
2839
  collisionDetector: createDynamicCollisionDetector("y")
2829
2840
  });
2830
- return children({ status, ref: sortableRef });
2841
+ return children({ status, ref: sortableRef, handleRef });
2831
2842
  };
2832
2843
 
2833
2844
  // components/AutoField/context.tsx
@@ -2885,6 +2896,7 @@ var ArrayField = ({
2885
2896
  value: _value,
2886
2897
  name,
2887
2898
  label,
2899
+ labelIcon,
2888
2900
  readOnly,
2889
2901
  id,
2890
2902
  Label: Label2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", __spreadValues({}, props))
@@ -2949,6 +2961,7 @@ var ArrayField = ({
2949
2961
  }
2950
2962
  }, []);
2951
2963
  const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
2964
+ const dndContainerRef = (0, import_react16.useRef)(null);
2952
2965
  const canEdit = useAppStore(
2953
2966
  (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
2954
2967
  );
@@ -2961,12 +2974,13 @@ var ArrayField = ({
2961
2974
  Label2,
2962
2975
  {
2963
2976
  label: label || name,
2964
- icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
2977
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(List, { size: 16 }),
2965
2978
  el: "div",
2966
2979
  readOnly,
2967
2980
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2968
2981
  SortableProvider,
2969
2982
  {
2983
+ container: dndContainerRef,
2970
2984
  onDragStart: () => setIsDragging(true),
2971
2985
  onDragEnd: () => setIsDragging(false),
2972
2986
  onMove: (move) => {
@@ -2996,117 +3010,114 @@ var ArrayField = ({
2996
3010
  hasItems: Array.isArray(value) && value.length > 0,
2997
3011
  addDisabled
2998
3012
  }),
2999
- onClick: (e) => {
3000
- e.preventDefault();
3001
- },
3002
3013
  children: [
3003
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("inner"), "data-dnd-container": true, children: localState.arrayState.items.map((item, i) => {
3004
- const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
3005
- const data = Array.from(localState.value || [])[i] || {};
3006
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3007
- Sortable,
3008
- {
3009
- id: _arrayId,
3010
- index: i,
3011
- disabled: readOnly,
3012
- children: ({ status, ref }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3013
- "div",
3014
+ localState.arrayState.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3015
+ "div",
3016
+ {
3017
+ ref: dndContainerRef,
3018
+ className: getClassName5("inner"),
3019
+ "data-dnd-container": true,
3020
+ children: localState.arrayState.items.map((item, i) => {
3021
+ const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
3022
+ const data = Array.from(localState.value || [])[i] || {};
3023
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3024
+ Sortable,
3014
3025
  {
3015
- ref,
3016
- className: getClassNameItem({
3017
- isExpanded: arrayState.openId === _arrayId,
3018
- isDragging: status === "dragging",
3019
- readOnly
3020
- }),
3021
- children: [
3022
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3023
- "div",
3024
- {
3025
- onClick: (e) => {
3026
- if (isDragging) return;
3027
- e.preventDefault();
3028
- e.stopPropagation();
3029
- if (arrayState.openId === _arrayId) {
3030
- setUi(
3031
- mapArrayStateToUi({
3032
- openId: ""
3033
- })
3034
- );
3035
- } else {
3036
- setUi(
3037
- mapArrayStateToUi({
3038
- openId: _arrayId
3039
- })
3040
- );
3026
+ id: _arrayId,
3027
+ index: i,
3028
+ disabled: readOnly,
3029
+ children: ({ status, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3030
+ "div",
3031
+ {
3032
+ ref,
3033
+ className: getClassNameItem({
3034
+ isExpanded: arrayState.openId === _arrayId,
3035
+ isDragging: status === "dragging",
3036
+ readOnly
3037
+ }),
3038
+ children: [
3039
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3040
+ "div",
3041
+ {
3042
+ ref: handleRef,
3043
+ onClick: (e) => {
3044
+ if (isDragging) return;
3045
+ e.preventDefault();
3046
+ e.stopPropagation();
3047
+ if (arrayState.openId === _arrayId) {
3048
+ setUi(
3049
+ mapArrayStateToUi({
3050
+ openId: ""
3051
+ })
3052
+ );
3053
+ } else {
3054
+ setUi(
3055
+ mapArrayStateToUi({
3056
+ openId: _arrayId
3057
+ })
3058
+ );
3059
+ }
3060
+ },
3061
+ className: getClassNameItem("summary"),
3062
+ children: [
3063
+ field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
3064
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
3065
+ !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
3066
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3067
+ IconButton,
3068
+ {
3069
+ type: "button",
3070
+ disabled: !!addDisabled,
3071
+ onClick: (e) => {
3072
+ e.stopPropagation();
3073
+ const existingValue = [...value || []];
3074
+ existingValue.splice(
3075
+ i,
3076
+ 0,
3077
+ existingValue[i]
3078
+ );
3079
+ onChange(
3080
+ existingValue,
3081
+ mapArrayStateToUi(
3082
+ regenerateArrayState(existingValue)
3083
+ )
3084
+ );
3085
+ },
3086
+ title: "Duplicate",
3087
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
3088
+ }
3089
+ ) }),
3090
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3091
+ IconButton,
3092
+ {
3093
+ type: "button",
3094
+ disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
3095
+ onClick: (e) => {
3096
+ e.stopPropagation();
3097
+ const existingValue = [...value || []];
3098
+ const existingItems = [
3099
+ ...arrayState.items || []
3100
+ ];
3101
+ existingValue.splice(i, 1);
3102
+ existingItems.splice(i, 1);
3103
+ onChange(
3104
+ existingValue,
3105
+ mapArrayStateToUi({
3106
+ items: existingItems
3107
+ })
3108
+ );
3109
+ },
3110
+ title: "Delete",
3111
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
3112
+ }
3113
+ ) })
3114
+ ] }),
3115
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
3116
+ ] })
3117
+ ]
3041
3118
  }
3042
- },
3043
- className: getClassNameItem("summary"),
3044
- children: [
3045
- field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
3046
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("rhs"), children: [
3047
- !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("actions"), children: [
3048
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3049
- IconButton,
3050
- {
3051
- type: "button",
3052
- disabled: !!addDisabled,
3053
- onClick: (e) => {
3054
- e.stopPropagation();
3055
- const existingValue = [...value || []];
3056
- existingValue.splice(
3057
- i,
3058
- 0,
3059
- existingValue[i]
3060
- );
3061
- onChange(
3062
- existingValue,
3063
- mapArrayStateToUi(
3064
- regenerateArrayState(existingValue)
3065
- )
3066
- );
3067
- },
3068
- title: "Duplicate",
3069
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 })
3070
- }
3071
- ) }),
3072
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3073
- IconButton,
3074
- {
3075
- type: "button",
3076
- disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
3077
- onClick: (e) => {
3078
- e.stopPropagation();
3079
- const existingValue = [...value || []];
3080
- const existingItems = [
3081
- ...arrayState.items || []
3082
- ];
3083
- existingValue.splice(i, 1);
3084
- existingItems.splice(i, 1);
3085
- onChange(
3086
- existingValue,
3087
- mapArrayStateToUi({
3088
- items: existingItems
3089
- })
3090
- );
3091
- },
3092
- title: "Delete",
3093
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 })
3094
- }
3095
- ) })
3096
- ] }),
3097
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
3098
- ] })
3099
- ]
3100
- }
3101
- ),
3102
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3103
- "fieldset",
3104
- {
3105
- className: getClassNameItem("fieldset"),
3106
- onPointerDownCapture: (e) => {
3107
- e.stopPropagation();
3108
- },
3109
- children: Object.keys(field.arrayFields).map((subName) => {
3119
+ ),
3120
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
3110
3121
  const subField = field.arrayFields[subName];
3111
3122
  const indexName = `${name}[${i}]`;
3112
3123
  const subPath = `${indexName}.${subName}`;
@@ -3148,16 +3159,16 @@ var ArrayField = ({
3148
3159
  },
3149
3160
  subPath
3150
3161
  );
3151
- })
3152
- }
3153
- ) })
3154
- ]
3155
- }
3156
- )
3157
- },
3158
- _arrayId
3159
- );
3160
- }) }),
3162
+ }) }) })
3163
+ ]
3164
+ }
3165
+ )
3166
+ },
3167
+ _arrayId
3168
+ );
3169
+ })
3170
+ }
3171
+ ),
3161
3172
  !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3162
3173
  "button",
3163
3174
  {
@@ -3196,6 +3207,7 @@ var DefaultField = ({
3196
3207
  value: _value,
3197
3208
  name,
3198
3209
  label,
3210
+ labelIcon,
3199
3211
  Label: Label2,
3200
3212
  id
3201
3213
  }) => {
@@ -3204,7 +3216,7 @@ var DefaultField = ({
3204
3216
  Label2,
3205
3217
  {
3206
3218
  label: label || name,
3207
- icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3219
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3208
3220
  field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Type, { size: 16 }),
3209
3221
  field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Hash, { size: 16 })
3210
3222
  ] }),
@@ -3634,6 +3646,7 @@ var ExternalField = ({
3634
3646
  value,
3635
3647
  name,
3636
3648
  label,
3649
+ labelIcon,
3637
3650
  Label: Label2,
3638
3651
  id,
3639
3652
  readOnly
@@ -3651,27 +3664,35 @@ var ExternalField = ({
3651
3664
  if (field.type !== "external") {
3652
3665
  return null;
3653
3666
  }
3654
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3655
- ExternalInput,
3667
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3668
+ Label2,
3656
3669
  {
3657
- name,
3658
- field: __spreadProps(__spreadValues({}, validField), {
3659
- // DEPRECATED
3660
- placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
3661
- mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
3662
- mapRow: validField.mapRow,
3663
- fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
3664
- return yield deprecatedField.adaptor.fetchList(
3665
- deprecatedField.adaptorParams
3666
- );
3667
- }) : validField.fetchList
3668
- }),
3669
- onChange,
3670
- value,
3671
- id,
3672
- readOnly
3670
+ label: label || name,
3671
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { size: 16 }),
3672
+ el: "div",
3673
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
3674
+ ExternalInput,
3675
+ {
3676
+ name,
3677
+ field: __spreadProps(__spreadValues({}, validField), {
3678
+ // DEPRECATED
3679
+ placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
3680
+ mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
3681
+ mapRow: validField.mapRow,
3682
+ fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
3683
+ return yield deprecatedField.adaptor.fetchList(
3684
+ deprecatedField.adaptorParams
3685
+ );
3686
+ }) : validField.fetchList
3687
+ }),
3688
+ onChange,
3689
+ value,
3690
+ id,
3691
+ readOnly
3692
+ }
3693
+ )
3673
3694
  }
3674
- ) });
3695
+ );
3675
3696
  };
3676
3697
 
3677
3698
  // components/AutoField/fields/RadioField/index.tsx
@@ -3700,6 +3721,7 @@ var RadioField = ({
3700
3721
  name,
3701
3722
  id,
3702
3723
  label,
3724
+ labelIcon,
3703
3725
  Label: Label2
3704
3726
  }) => {
3705
3727
  const flatOptions = (0, import_react21.useMemo)(
@@ -3712,7 +3734,7 @@ var RadioField = ({
3712
3734
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
3713
3735
  Label2,
3714
3736
  {
3715
- icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
3737
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleCheckBig, { size: 16 }),
3716
3738
  label: label || name,
3717
3739
  readOnly,
3718
3740
  el: "div",
@@ -3759,6 +3781,7 @@ var SelectField = ({
3759
3781
  field,
3760
3782
  onChange,
3761
3783
  label,
3784
+ labelIcon,
3762
3785
  Label: Label2,
3763
3786
  value,
3764
3787
  name,
@@ -3776,7 +3799,7 @@ var SelectField = ({
3776
3799
  Label2,
3777
3800
  {
3778
3801
  label: label || name,
3779
- icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
3802
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDown, { size: 16 }),
3780
3803
  readOnly,
3781
3804
  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3782
3805
  "select",
@@ -3820,24 +3843,33 @@ var TextareaField = ({
3820
3843
  value,
3821
3844
  name,
3822
3845
  label,
3846
+ labelIcon,
3823
3847
  Label: Label2,
3824
3848
  id
3825
3849
  }) => {
3826
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label2, { label: label || name, icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3827
- "textarea",
3850
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3851
+ Label2,
3828
3852
  {
3829
- id,
3830
- className: getClassName13("input"),
3831
- autoComplete: "off",
3832
- name,
3833
- value: typeof value === "undefined" ? "" : value,
3834
- onChange: (e) => onChange(e.currentTarget.value),
3853
+ label: label || name,
3854
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Type, { size: 16 }),
3835
3855
  readOnly,
3836
- tabIndex: readOnly ? -1 : void 0,
3837
- rows: 5,
3838
- placeholder: field.type === "textarea" ? field.placeholder : void 0
3856
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3857
+ "textarea",
3858
+ {
3859
+ id,
3860
+ className: getClassName13("input"),
3861
+ autoComplete: "off",
3862
+ name,
3863
+ value: typeof value === "undefined" ? "" : value,
3864
+ onChange: (e) => onChange(e.currentTarget.value),
3865
+ readOnly,
3866
+ tabIndex: readOnly ? -1 : void 0,
3867
+ rows: 5,
3868
+ placeholder: field.type === "textarea" ? field.placeholder : void 0
3869
+ }
3870
+ )
3839
3871
  }
3840
- ) });
3872
+ );
3841
3873
  };
3842
3874
 
3843
3875
  // components/AutoField/fields/ObjectField/index.tsx
@@ -3856,6 +3888,7 @@ var ObjectField = ({
3856
3888
  value,
3857
3889
  name,
3858
3890
  label,
3891
+ labelIcon,
3859
3892
  Label: Label2,
3860
3893
  readOnly,
3861
3894
  id
@@ -3869,7 +3902,7 @@ var ObjectField = ({
3869
3902
  Label2,
3870
3903
  {
3871
3904
  label: label || name,
3872
- icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
3905
+ icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EllipsisVertical, { size: 16 }),
3873
3906
  el: "div",
3874
3907
  readOnly,
3875
3908
  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
@@ -3986,6 +4019,7 @@ function AutoFieldInternal(props) {
3986
4019
  const { id, Label: Label2 = FieldLabelInternal } = props;
3987
4020
  const field = props.field;
3988
4021
  const label = field.label;
4022
+ const labelIcon = field.labelIcon;
3989
4023
  const defaultId = useSafeId();
3990
4024
  const resolvedId = id || defaultId;
3991
4025
  const defaultFields = {
@@ -4011,6 +4045,7 @@ function AutoFieldInternal(props) {
4011
4045
  const mergedProps = __spreadProps(__spreadValues({}, props), {
4012
4046
  field,
4013
4047
  label,
4048
+ labelIcon,
4014
4049
  Label: Label2,
4015
4050
  id: resolvedId
4016
4051
  });
@@ -4073,10 +4108,13 @@ function AutoFieldPrivate(props) {
4073
4108
  const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
4074
4109
  const { value, onChange } = props;
4075
4110
  const [localValue, setLocalValue] = (0, import_react24.useState)(value);
4076
- const onChangeLocal = (0, import_react24.useCallback)((val, ui) => {
4077
- setLocalValue(val);
4078
- onChange(val, ui);
4079
- }, []);
4111
+ const onChangeLocal = (0, import_react24.useCallback)(
4112
+ (val, ui) => {
4113
+ setLocalValue(val);
4114
+ onChange(val, ui);
4115
+ },
4116
+ [onChange]
4117
+ );
4080
4118
  (0, import_react24.useEffect)(() => {
4081
4119
  if (!isFocused) {
4082
4120
  setLocalValue(value);
@@ -5554,7 +5592,7 @@ var DragDropContextClient = ({
5554
5592
  const resolveData2 = useAppStore((s) => s.resolveData);
5555
5593
  const metadata = useAppStore((s) => s.metadata);
5556
5594
  const appStore = useAppStoreApi();
5557
- const id = (0, import_react36.useId)();
5595
+ const id = useSafeId();
5558
5596
  const debouncedParamsRef = (0, import_react36.useRef)(null);
5559
5597
  const tempDisableFallback = useTempDisableFallback(100);
5560
5598
  const [zoneStore] = (0, import_react36.useState)(
@@ -6008,7 +6046,7 @@ var Drawer = ({
6008
6046
  "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
6009
6047
  );
6010
6048
  }
6011
- const id = (0, import_react37.useId)();
6049
+ const id = useSafeId();
6012
6050
  const { ref } = useDroppableSafe({
6013
6051
  id,
6014
6052
  type: "void",