@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/PageSegmentField.js

@@ -11,63 +11,81 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - LockedPageSegmentField: Locked by default, requires clicking lock icon to edit
  * - createPageSegmentField: Factory for basic field
  * - createLockedPageSegmentField: Factory for locked field (recommended for page-tree)
- */
-import { useState, useCallback, useEffect, useRef } from 'react';
+ */ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Lock, Unlock } from 'lucide-react';
 // =============================================================================
 // Slugify Utility
 // =============================================================================
 /**
  * Converts a string to a URL-safe slug
- */
-function slugify(text) {
-    return text
-        .toLowerCase()
-        .trim()
-        .replace(/[^\w\s-]/g, '') // Remove special characters
-        .replace(/[\s_]+/g, '-') // Replace spaces and underscores with hyphens
-        .replace(/-+/g, '-') // Remove consecutive hyphens
-        .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
+ */ function slugify(text) {
+    return text.toLowerCase().trim().replace(/[^\w\s-]/g, '') // Remove special characters
+    .replace(/[\s_]+/g, '-') // Replace spaces and underscores with hyphens
+    .replace(/-+/g, '-') // Remove consecutive hyphens
+    .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+    ;
 }
 // =============================================================================
 // PageSegmentField Component
 // =============================================================================
-export function PageSegmentField({ value, onChange, label = 'Page Segment', placeholder = 'page-segment', }) {
+export function PageSegmentField({ value, onChange, label = 'Page Segment', placeholder = 'page-segment' }) {
     const [localValue, setLocalValue] = useState(value);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     // Sync with external value changes
-    useEffect(() => {
+    useEffect(()=>{
         if (!isFocused) {
             setLocalValue(value);
         }
-    }, [value, isFocused]);
-    const handleChange = useCallback((e) => {
+    }, [
+        value,
+        isFocused
+    ]);
+    const handleChange = useCallback((e)=>{
         const newValue = e.target.value;
         setLocalValue(newValue);
     }, []);
-    const handleBlur = useCallback(() => {
+    const handleBlur = useCallback(()=>{
         setIsFocused(false);
         // Slugify on blur
         const slugified = slugify(localValue);
         setLocalValue(slugified);
         onChange(slugified);
-    }, [localValue, onChange]);
-    const handleFocus = useCallback(() => {
+    }, [
+        localValue,
+        onChange
+    ]);
+    const handleFocus = useCallback(()=>{
         setIsFocused(true);
     }, []);
-    const handleKeyDown = useCallback((e) => {
+    const handleKeyDown = useCallback((e)=>{
         if (e.key === 'Enter') {
             inputRef.current?.blur();
         }
     }, []);
-    return (_jsxs("div", { className: "puck-field", children: [_jsx("label", { style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                style: {
                     display: 'block',
                     fontSize: '14px',
                     fontWeight: 500,
                     color: 'var(--puck-color-grey-04)',
-                    marginBottom: '8px',
-                }, children: label }), _jsx("input", { ref: inputRef, type: "text", value: localValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, style: {
+                    marginBottom: '8px'
+                },
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                ref: inputRef,
+                type: "text",
+                value: localValue,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                placeholder: placeholder,
+                style: {
                     width: '100%',
                     padding: '8px 12px',
                     fontSize: '14px',
@@ -76,24 +94,35 @@ export function PageSegmentField({ value, onChange, label = 'Page Segment', plac
                     backgroundColor: 'var(--puck-color-white)',
                     color: 'var(--puck-color-grey-04)',
                     outline: 'none',
-                    transition: 'border-color 0.15s ease',
-                } }), _jsx("p", { style: {
+                    transition: 'border-color 0.15s ease'
+                }
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
-                    color: 'var(--puck-color-grey-06)',
-                }, children: "Auto-slugified on blur. Used in URL path." })] }));
+                    color: 'var(--puck-color-grey-06)'
+                },
+                children: "Auto-slugified on blur. Used in URL path."
+            })
+        ]
+    });
 }
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for page segment editing
- */
-export function createPageSegmentField(config) {
+ */ export function createPageSegmentField(config) {
     return {
         type: 'custom',
         label: config?.label ?? 'Page Segment',
-        render: ({ value, onChange }) => (_jsx(PageSegmentField, { value: value || '', onChange: onChange, label: config?.label, placeholder: config?.placeholder })),
+        render: ({ value, onChange })=>/*#__PURE__*/ _jsx(PageSegmentField, {
+                value: value || '',
+                onChange: onChange,
+                label: config?.label,
+                placeholder: config?.placeholder
+            })
     };
 }
 // =============================================================================
@@ -102,47 +131,66 @@ export function createPageSegmentField(config) {
 /**
  * PageSegmentField with lock/unlock functionality.
  * Starts locked to prevent accidental URL changes.
- */
-export function LockedPageSegmentField({ value, onChange, label = 'Page Segment', placeholder = 'page-segment', warningMessage = 'Changing may break existing links', }) {
+ */ export function LockedPageSegmentField({ value, onChange, label = 'Page Segment', placeholder = 'page-segment', warningMessage = 'Changing may break existing links' }) {
     const [isLocked, setIsLocked] = useState(true);
     const [localValue, setLocalValue] = useState(value);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     // Sync with external value changes
-    useEffect(() => {
+    useEffect(()=>{
         if (!isFocused) {
             setLocalValue(value);
         }
-    }, [value, isFocused]);
-    const handleChange = useCallback((e) => {
+    }, [
+        value,
+        isFocused
+    ]);
+    const handleChange = useCallback((e)=>{
         const newValue = e.target.value;
         setLocalValue(newValue);
     }, []);
-    const handleBlur = useCallback(() => {
+    const handleBlur = useCallback(()=>{
         setIsFocused(false);
         // Slugify on blur
         const slugified = slugify(localValue);
         setLocalValue(slugified);
         onChange(slugified);
-    }, [localValue, onChange]);
-    const handleFocus = useCallback(() => {
+    }, [
+        localValue,
+        onChange
+    ]);
+    const handleFocus = useCallback(()=>{
         setIsFocused(true);
     }, []);
-    const handleKeyDown = useCallback((e) => {
+    const handleKeyDown = useCallback((e)=>{
         if (e.key === 'Enter') {
             inputRef.current?.blur();
         }
     }, []);
-    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { className: "puck-field-header", style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "puck-field-header",
+                style: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: '8px',
-                }, children: [_jsx("label", { style: {
+                    marginBottom: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: {
                             fontSize: '14px',
                             fontWeight: 500,
-                            color: 'var(--puck-color-grey-04)',
-                        }, children: label }), _jsx("button", { type: "button", onClick: () => setIsLocked(!isLocked), style: {
+                            color: 'var(--puck-color-grey-04)'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setIsLocked(!isLocked),
+                        style: {
                             background: 'none',
                             border: 'none',
                             padding: '4px',
@@ -152,8 +200,33 @@ export function LockedPageSegmentField({ value, onChange, label = 'Page Segment'
                             alignItems: 'center',
                             justifyContent: 'center',
                             borderRadius: '4px',
-                            transition: 'all 0.15s ease',
-                        }, title: isLocked ? 'Click to unlock' : 'Click to lock', children: isLocked ? _jsx(Lock, { size: 14 }) : _jsx(Unlock, { size: 14 }) })] }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("input", { ref: inputRef, type: "text", value: localValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: isLocked, placeholder: placeholder, style: {
+                            transition: 'all 0.15s ease'
+                        },
+                        title: isLocked ? 'Click to unlock' : 'Click to lock',
+                        children: isLocked ? /*#__PURE__*/ _jsx(Lock, {
+                            size: 14
+                        }) : /*#__PURE__*/ _jsx(Unlock, {
+                            size: 14
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    position: 'relative'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        ref: inputRef,
+                        type: "text",
+                        value: localValue,
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onKeyDown: handleKeyDown,
+                        disabled: isLocked,
+                        placeholder: placeholder,
+                        style: {
                             width: '100%',
                             padding: '8px 12px',
                             paddingRight: isLocked ? '32px' : '12px',
@@ -164,21 +237,44 @@ export function LockedPageSegmentField({ value, onChange, label = 'Page Segment'
                             color: isLocked ? 'var(--puck-color-grey-05)' : 'var(--puck-color-grey-04)',
                             cursor: isLocked ? 'not-allowed' : 'text',
                             outline: 'none',
-                            transition: 'all 0.15s ease',
-                        } }), isLocked && (_jsx(Lock, { size: 14, style: {
+                            transition: 'all 0.15s ease'
+                        }
+                    }),
+                    isLocked && /*#__PURE__*/ _jsx(Lock, {
+                        size: 14,
+                        style: {
                             position: 'absolute',
                             right: '10px',
                             top: '50%',
                             transform: 'translateY(-50%)',
-                            color: 'var(--puck-color-grey-07)',
-                        } }))] }), _jsx("p", { style: {
+                            color: 'var(--puck-color-grey-07)'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
                     color: 'var(--puck-color-grey-06)',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '4px',
-                }, children: !isLocked && warningMessage ? (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: 'var(--puck-color-rose-07)' }, children: "\u26A0" }), warningMessage] })) : ('Auto-slugified on blur. Used in URL path.') })] }));
+                    gap: '4px'
+                },
+                children: !isLocked && warningMessage ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            style: {
+                                color: 'var(--puck-color-rose-07)'
+                            },
+                            children: "⚠"
+                        }),
+                        warningMessage
+                    ]
+                }) : 'Auto-slugified on blur. Used in URL path.'
+            })
+        ]
+    });
 }
 // =============================================================================
 // Locked Field Configuration Factory
@@ -186,12 +282,16 @@ export function LockedPageSegmentField({ value, onChange, label = 'Page Segment'
 /**
  * Creates a Puck field configuration for a locked page segment field.
  * Recommended for page-tree integration to prevent accidental URL changes.
- */
-export function createLockedPageSegmentField(config) {
+ */ export function createLockedPageSegmentField(config) {
     return {
         type: 'custom',
         label: config?.label ?? 'Page Segment',
-        render: ({ value, onChange }) => (_jsx(LockedPageSegmentField, { value: value || '', onChange: onChange, label: config?.label, placeholder: config?.placeholder, warningMessage: config?.warningMessage })),
+        render: ({ value, onChange })=>/*#__PURE__*/ _jsx(LockedPageSegmentField, {
+                value: value || '',
+                onChange: onChange,
+                label: config?.label,
+                placeholder: config?.placeholder,
+                warningMessage: config?.warningMessage
+            })
     };
 }
-//# sourceMappingURL=PageSegmentField.js.map

package/dist/fields/ResetField.d.ts

@@ -13,7 +13,7 @@ interface ResetFieldProps {
     label?: string;
     disabled?: boolean;
 }
-declare function ResetFieldInner({ onClick, label, disabled, }: ResetFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function ResetFieldInner({ onClick, label, disabled, }: ResetFieldProps): React.JSX.Element;
 export declare const ResetField: React.MemoExoticComponent<typeof ResetFieldInner>;
 interface CreateResetFieldConfig<T> {
     label?: string;
@@ -24,4 +24,3 @@ interface CreateResetFieldConfig<T> {
  */
 export declare function createResetField<T extends object>(config: CreateResetFieldConfig<T>): CustomField<unknown>;
 export {};
-//# sourceMappingURL=ResetField.d.ts.map

package/dist/fields/ResetField.js

@@ -7,8 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and restores the component to its default state.
  *
  * Uses Puck's usePuck hook and dispatch to properly update component data.
- */
-import { memo, useCallback } from 'react';
+ */ import React, { memo, useCallback } from 'react';
 import { createUsePuck } from '@puckeditor/core';
 import { RefreshCw } from 'lucide-react';
 // Create usePuck hook for accessing editor state
@@ -19,7 +18,7 @@ const usePuck = createUsePuck();
 const styles = {
     container: {
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'column'
     },
     button: {
         display: 'flex',
@@ -35,46 +34,65 @@ const styles = {
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
         cursor: 'pointer',
-        transition: 'all 0.15s',
+        transition: 'all 0.15s'
     },
     buttonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
-    },
+        cursor: 'not-allowed'
+    }
 };
 // =============================================================================
 // ResetField Component
 // =============================================================================
-function ResetFieldInner({ onClick, label = 'Reset to defaults', disabled, }) {
-    return (_jsx("div", { className: "puck-field", style: styles.container, children: _jsxs("button", { type: "button", onClick: onClick, disabled: disabled, style: {
+function ResetFieldInner({ onClick, label = 'Reset to defaults', disabled }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: /*#__PURE__*/ _jsxs("button", {
+            type: "button",
+            onClick: onClick,
+            disabled: disabled,
+            style: {
                 ...styles.button,
-                ...(disabled ? styles.buttonDisabled : {}),
-            }, onMouseOver: (e) => {
+                ...disabled ? styles.buttonDisabled : {}
+            },
+            onMouseOver: (e)=>{
                 if (!disabled) {
                     e.currentTarget.style.color = 'var(--theme-error-500)';
                     e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
                 }
-            }, onMouseOut: (e) => {
+            },
+            onMouseOut: (e)=>{
                 e.currentTarget.style.color = 'var(--theme-elevation-500)';
                 e.currentTarget.style.backgroundColor = 'transparent';
-            }, children: [_jsx(RefreshCw, { style: { width: '14px', height: '14px' } }), label] }) }));
+            },
+            children: [
+                /*#__PURE__*/ _jsx(RefreshCw, {
+                    style: {
+                        width: '14px',
+                        height: '14px'
+                    }
+                }),
+                label
+            ]
+        })
+    });
 }
-export const ResetField = memo(ResetFieldInner);
+export const ResetField = /*#__PURE__*/ memo(ResetFieldInner);
 // =============================================================================
 // Helper Functions
 // =============================================================================
 /**
  * Recursively update a component's props in Puck data structure
- */
-function updateComponentInData(data, componentId, newProps) {
-    const updateItem = (item) => {
+ */ function updateComponentInData(data, componentId, newProps) {
+    const updateItem = (item)=>{
         if (item.props?.id === componentId) {
             return {
                 ...item,
                 props: {
                     ...newProps,
-                    id: componentId,
-                },
+                    id: componentId
+                }
             };
         }
         return item;
@@ -82,25 +100,24 @@ function updateComponentInData(data, componentId, newProps) {
     const updatedContent = data.content.map(updateItem);
     const updatedZones = {};
     if (data.zones) {
-        for (const [zoneName, zoneContent] of Object.entries(data.zones)) {
+        for (const [zoneName, zoneContent] of Object.entries(data.zones)){
             updatedZones[zoneName] = zoneContent.map(updateItem);
         }
     }
     return {
         ...data,
         content: updatedContent,
-        zones: Object.keys(updatedZones).length > 0 ? updatedZones : data.zones,
+        zones: Object.keys(updatedZones).length > 0 ? updatedZones : data.zones
     };
 }
 /**
  * Creates a Puck field configuration for a reset button
- */
-export function createResetField(config) {
-    const ResetFieldWrapper = ({ readOnly }) => {
-        const appState = usePuck((s) => s.appState);
-        const dispatch = usePuck((s) => s.dispatch);
-        const selectedItem = usePuck((s) => s.selectedItem);
-        const handleReset = useCallback(() => {
+ */ export function createResetField(config) {
+    const ResetFieldWrapper = ({ readOnly })=>{
+        const appState = usePuck((s)=>s.appState);
+        const dispatch = usePuck((s)=>s.dispatch);
+        const selectedItem = usePuck((s)=>s.selectedItem);
+        const handleReset = useCallback(()=>{
             if (!selectedItem?.props?.id) {
                 console.warn('ResetField: No selected item found');
                 return;
@@ -109,14 +126,23 @@ export function createResetField(config) {
             const updatedData = updateComponentInData(appState.data, componentId, config.defaultProps);
             dispatch({
                 type: 'setData',
-                data: updatedData,
+                data: updatedData
             });
-        }, [appState.data, dispatch, selectedItem]);
-        return (_jsx(ResetField, { onClick: handleReset, label: config.label, disabled: readOnly }));
+        }, [
+            appState.data,
+            dispatch,
+            selectedItem
+        ]);
+        return /*#__PURE__*/ _jsx(ResetField, {
+            onClick: handleReset,
+            label: config.label,
+            disabled: readOnly
+        });
     };
     return {
         type: 'custom',
-        render: ({ readOnly }) => _jsx(ResetFieldWrapper, { readOnly: readOnly }),
+        render: ({ readOnly })=>/*#__PURE__*/ _jsx(ResetFieldWrapper, {
+                readOnly: readOnly
+            })
     };
 }
-//# sourceMappingURL=ResetField.js.map

package/dist/fields/ResponsiveField.d.ts

@@ -7,7 +7,7 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { ResponsiveValue } from './shared';
+import type { ResponsiveValue } from './shared.js';
 interface ResponsiveFieldProps<T> {
     value: ResponsiveValue<T> | null;
     onChange: (value: ResponsiveValue<T> | null) => void;
@@ -35,4 +35,3 @@ interface CreateResponsiveFieldConfig<T> {
  */
 export declare function createResponsiveField<T>(config: CreateResponsiveFieldConfig<T>): CustomField<ResponsiveValue<T> | null>;
 export {};
-//# sourceMappingURL=ResponsiveField.d.ts.map