@payloadcms/ui 4.0.0-internal.c7d5de4 → 4.0.0-internal.cb69780

package/dist/fields/Relationship/select-components/MultiValueLabel/index.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .relationship--multi-value-label {
     display: flex;
-    padding-inline-start: var(--spacer-2);
+    padding-inline-start: var(--spacer-1-5);
     gap: var(--spacer-1);
   }
 

package/dist/fields/Relationship/select-components/MultiValueLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/fields/Relationship/select-components/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAI5C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC;IACE,WAAW,EAAE;QAEX,WAAW,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAA;KACpD,CAAA;CACF,GAAG,eAAe,CAAC,MAAM,CAAC,CAiD5B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/fields/Relationship/select-components/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAwB,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAM5C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC;IACE,WAAW,EAAE;QAEX,WAAW,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAA;KACpD,CAAA;CACF,GAAG,eAAe,CAAC,MAAM,CAAC,CAkE5B,CAAA"}

package/dist/fields/Relationship/select-components/MultiValueLabel/index.js

@@ -1,8 +1,10 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment } from 'react';
+import React, { Fragment, use } from 'react';
 import { components } from 'react-select';
+import { MultiValueDragActivatorContext } from '../../../../elements/ReactSelect/MultiValue/context.js';
+import { getMultiValueLabelID } from '../../../../elements/ReactSelect/MultiValueLabel/index.js';
 import { EditIcon } from '../../../../icons/Edit/index.js';
 import { useAuth } from '../../../../providers/Auth/index.js';
 import './index.css';
@@ -29,14 +31,34 @@ export const MultiValueLabel = props => {
     permissions
   } = useAuth();
   const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read);
+  const dragActivator = use(MultiValueDragActivatorContext);
+  const {
+    ref: dragActivatorRef,
+    ...dragActivatorProps
+  } = dragActivator || {};
+  const labelID = getMultiValueLabelID({
+    data: props.data,
+    selectProps: props.selectProps
+  });
   return _jsxs("div", {
     className: baseClass,
     title: label || "",
     children: [_jsx("div", {
       className: `${baseClass}__content`,
-      children: _jsx(components.MultiValueLabel, {
+      children: dragActivator ? _jsx("button", {
+        ...dragActivatorProps,
+        className: `${baseClass}__drag-button multi-value-label__drag-button`,
+        ref: dragActivatorRef,
+        type: "button",
+        children: _jsx("span", {
+          className: `${baseClass}__text`,
+          id: labelID,
+          children: props.children
+        })
+      }) : _jsx(components.MultiValueLabel, {
         ...props,
         innerProps: {
+          id: labelID,
           className: `${baseClass}__text`,
           ...(draggableProps || {})
         }

package/dist/fields/Relationship/select-components/MultiValueLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","components","EditIcon","useAuth","baseClass","MultiValueLabel","props","data","t0","selectProps","t1","allowEdit","label","relationTo","value","customProps","t2","undefined","draggableProps","onDocumentOpen","permissions","hasReadPermission","Boolean","collections","read","_jsxs","className","title","children","_jsx","innerProps","onClick","event","id","collectionSlug","openInNewTab","metaKey","ctrlKey","onKeyDown","_temp","onMouseDown","_temp2","onTouchEnd","_temp3","type","e","key","stopPropagation","e_0","e_1"],"sources":["../../../../../src/fields/Relationship/select-components/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React, { Fragment } from 'react'\nimport { components } from 'react-select'\n\nimport type { ReactSelectAdapterProps } from '../../../../elements/ReactSelect/types.js'\nimport type { Option } from '../../types.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useAuth } from '../../../../providers/Auth/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship--multi-value-label'\n\nexport const MultiValueLabel: React.FC<\n  {\n    selectProps: {\n      // TODO Fix this - moduleResolution 16 breaks our declare module\n      customProps: ReactSelectAdapterProps['customProps']\n    }\n  } & MultiValueProps<Option>\n> = (props) => {\n  const {\n    data: { allowEdit, label, relationTo, value },\n    selectProps: { customProps: { draggableProps, onDocumentOpen } = {} } = {},\n  } = props\n\n  const { permissions } = useAuth()\n  const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read)\n\n  return (\n    <div className={baseClass} title={label || ''}>\n      <div className={`${baseClass}__content`}>\n        <components.MultiValueLabel\n          {...props}\n          innerProps={{\n            className: `${baseClass}__text`,\n            ...(draggableProps || {}),\n          }}\n        />\n      </div>\n      {relationTo && hasReadPermission && allowEdit !== false && (\n        <Fragment>\n          <button\n            aria-label={`Edit ${label}`}\n            className={`${baseClass}__drawer-toggler`}\n            onClick={(event) => {\n              onDocumentOpen({\n                id: value,\n                collectionSlug: relationTo,\n                hasReadPermission,\n                openInNewTab: event.metaKey || event.ctrlKey,\n              })\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.stopPropagation()\n              }\n            }}\n            onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening\n            onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from opening\n            type=\"button\"\n          >\n            <EditIcon className={`${baseClass}__icon`} />\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,QAAQ,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAK3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,eAAA,GAOTC,KAAA;EACF;IAAAC,IAAA,EAAAC,EAAA;IAAAC,WAAA,EAAAC;EAAA,IAGIJ,KAAA;EAFI;IAAAK,SAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAN,EAAuC;EAChC;IAAAO,WAAA,EAAAC;EAAA,IAAAN,EAA6D,KAAAO,SAAA,QAA7DP,EAA6D;EAA9C;IAAAQ,cAAA;IAAAC;EAAA,IAAAH,EAAuC,KAAAC,SAAA,QAAvCD,EAAuC;EAGrE;IAAAI;EAAA,IAAwBjB,OAAA;EACxB,MAAAkB,iBAAA,GAA0BC,OAAA,CAAQF,WAAA,EAAAG,WAAA,GAA2BV,UAAA,GAAAW,IAAa;EAAA,OAGxEC,KAAA,CAAC;IAAAC,SAAA,EAAAtB,SAAA;IAAAuB,KAAA,EAAiCf,KAAA,IAAS;IAAAgB,QAAA,GACzCC,IAAA,CAAC;MAAAH,SAAA,EAAe,GAAAtB,SAAA,WAAuB;MAAAwB,QAAA,EACrCC,IAAA,CAAA5B,UAAA,CAAAI,eAAA;QAAA,GACMC,KAAK;QAAAwB,UAAA;UAAAJ,SAAA,EAEI,GAAAtB,SAAA,QAAoB;UAAA,IAC3Bc,cAAA,MAAoB;QAAA;MAAA,C;QAI7BL,UAAA,IAAcQ,iBAAA,IAAqBV,SAAA,UAAc,IAChDkB,IAAA,CAAA7B,QAAA;MAAA4B,QAAA,EACEC,IAAA,CAAC;QAAA,cACa,QAAQjB,KAAA,EAAO;QAAAc,SAAA,EAChB,GAAAtB,SAAA,kBAA8B;QAAA2B,OAAA,EAAAC,KAAA;UAEvCb,cAAA;YAAAc,EAAA,EACMnB,KAAA;YAAAoB,cAAA,EACYrB,UAAA;YAAAQ,iBAAA;YAAAc,YAAA,EAEFH,KAAA,CAAAI,OAAA,IAAiBJ,KAAA,CAAAK;UAAa,CAC9C;QAAA;QAAAC,SAAA,EAAAC,KAAA;QAAAC,WAAA,EAAAC,MAAA;QAAAC,UAAA,EAAAC,MAAA;QAAAC,IAAA,EASG;QAAAhB,QAAA,EAELC,IAAA,CAAA3B,QAAA;UAAAwB,SAAA,EAAqB,GAAAtB,SAAA;QAAoB,C;;;;CAMrD;AAhDI,SAAAmC,MAAAM,CAAA;EAAA,IAkCcA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAE,eAAA,CAAiB;EAAA;AAAA;AAnC7B,SAAAN,OAAAO,GAAA;EAAA,OAsC4BH,GAAA,CAAAE,eAAA,CAAiB;AAAA;AAtC7C,SAAAJ,OAAAM,GAAA;EAAA,OAuC2BJ,GAAA,CAAAE,eAAA,CAAiB;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Fragment","use","components","MultiValueDragActivatorContext","getMultiValueLabelID","EditIcon","useAuth","baseClass","MultiValueLabel","props","data","t0","selectProps","t1","allowEdit","label","relationTo","value","customProps","t2","undefined","draggableProps","onDocumentOpen","permissions","hasReadPermission","Boolean","collections","read","dragActivator","ref","dragActivatorRef","dragActivatorProps","labelID","_jsxs","className","title","children","_jsx","type","id","innerProps","onClick","event","collectionSlug","openInNewTab","metaKey","ctrlKey","onKeyDown","_temp","onMouseDown","_temp2","onTouchEnd","_temp3","e","key","stopPropagation","e_0","e_1"],"sources":["../../../../../src/fields/Relationship/select-components/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React, { Fragment, use } from 'react'\nimport { components } from 'react-select'\n\nimport type { ReactSelectAdapterProps } from '../../../../elements/ReactSelect/types.js'\nimport type { Option } from '../../types.js'\n\nimport { MultiValueDragActivatorContext } from '../../../../elements/ReactSelect/MultiValue/context.js'\nimport { getMultiValueLabelID } from '../../../../elements/ReactSelect/MultiValueLabel/index.js'\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useAuth } from '../../../../providers/Auth/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship--multi-value-label'\n\nexport const MultiValueLabel: React.FC<\n  {\n    selectProps: {\n      // TODO Fix this - moduleResolution 16 breaks our declare module\n      customProps: ReactSelectAdapterProps['customProps']\n    }\n  } & MultiValueProps<Option>\n> = (props) => {\n  const {\n    data: { allowEdit, label, relationTo, value },\n    selectProps: { customProps: { draggableProps, onDocumentOpen } = {} } = {},\n  } = props\n\n  const { permissions } = useAuth()\n  const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read)\n  const dragActivator = use(MultiValueDragActivatorContext)\n  const { ref: dragActivatorRef, ...dragActivatorProps } = dragActivator || {}\n  const labelID = getMultiValueLabelID({ data: props.data, selectProps: props.selectProps })\n\n  return (\n    <div className={baseClass} title={label || ''}>\n      <div className={`${baseClass}__content`}>\n        {dragActivator ? (\n          <button\n            {...dragActivatorProps}\n            className={`${baseClass}__drag-button multi-value-label__drag-button`}\n            ref={dragActivatorRef}\n            type=\"button\"\n          >\n            <span className={`${baseClass}__text`} id={labelID}>\n              {props.children}\n            </span>\n          </button>\n        ) : (\n          <components.MultiValueLabel\n            {...props}\n            innerProps={{\n              id: labelID,\n              className: `${baseClass}__text`,\n              ...(draggableProps || {}),\n            }}\n          />\n        )}\n      </div>\n      {relationTo && hasReadPermission && allowEdit !== false && (\n        <Fragment>\n          <button\n            aria-label={`Edit ${label}`}\n            className={`${baseClass}__drawer-toggler`}\n            onClick={(event) => {\n              onDocumentOpen({\n                id: value,\n                collectionSlug: relationTo,\n                hasReadPermission,\n                openInNewTab: event.metaKey || event.ctrlKey,\n              })\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.stopPropagation()\n              }\n            }}\n            onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening\n            onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from opening\n            type=\"button\"\n          >\n            <EditIcon className={`${baseClass}__icon`} />\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Row/index.css

@@ -29,6 +29,7 @@
       }
     }
 
+    /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
     @media (max-width: 1024px) {
       .row__fields {
         flex-direction: column;
@@ -39,6 +40,7 @@
         > * {
           margin-left: 0;
           margin-right: 0;
+          /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
           width: 100% !important;
           padding-left: 0;
           padding-right: 0;

package/dist/fields/Row/index.d.ts

@@ -1,6 +1,5 @@
+import type { RowFieldClientProps } from 'payload';
 import React from 'react';
 import './index.css';
-export declare const RowField: React.FC<import("payload").FieldPaths & Pick<import("payload").ClientComponentProps, "forceRender"> & {
-    readonly field: Omit<import("payload").RowFieldClient, "type"> & Partial<Pick<import("payload").RowFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+export declare const RowField: React.FC<RowFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Row/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Row/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAqCpB,eAAO,MAAM,QAAQ;;+EAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Row/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAqCpB,eAAO,MAAM,QAAQ,+BAAmC,CAAA"}

package/dist/fields/Row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","RenderFields","withCondition","fieldBaseClass","RowProvider","baseClass","RowFieldComponent","props","field","admin","className","style","fields","forceRender","indexPath","parentPath","parentSchemaPath","permissions","readOnly","_jsx","filter","Boolean","join","undefined","parentIndexPath","RowField"],"sources":["../../../src/fields/Row/index.tsx"],"sourcesContent":["'use client'\nimport type { RowFieldClientComponent } from 'payload'\n\nimport React from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\nimport { RowProvider } from './provider.js'\n\nconst baseClass = 'row'\n\nconst RowFieldComponent: RowFieldClientComponent = (props) => {\n  const {\n    field: { admin: { className, style } = {}, fields },\n    forceRender = false,\n    indexPath = '',\n    parentPath = '',\n    parentSchemaPath = '',\n    permissions,\n    readOnly,\n  } = props\n\n  return (\n    <RowProvider>\n      <div\n        className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}\n        style={style || undefined}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fields={fields}\n          forceRender={forceRender}\n          parentIndexPath={indexPath}\n          parentPath={parentPath}\n          parentSchemaPath={parentSchemaPath}\n          permissions={permissions}\n          readOnly={readOnly}\n        />\n      </div>\n    </RowProvider>\n  )\n}\n\nexport const RowField = withCondition(RowFieldComponent)\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,WAAW,QAAQ;AAE5B,MAAMC,SAAA,GAAY;AAElB,MAAMC,iBAAA,GAA8CC,KAAA;EAClD,MAAM;IACJC,KAAA,EAAO;MAAEC,KAAA,EAAO;QAAEC,SAAS;QAAEC;MAAK,CAAE,GAAG,CAAC,CAAC;MAAEC;IAAM,CAAE;IACnDC,WAAA,GAAc,KAAK;IACnBC,SAAA,GAAY,EAAE;IACdC,UAAA,GAAa,EAAE;IACfC,gBAAA,GAAmB,EAAE;IACrBC,WAAW;IACXC;EAAQ,CACT,GAAGX,KAAA;EAEJ,oBACEY,IAAA,CAACf,WAAA;cACC,aAAAe,IAAA,CAAC;MACCT,SAAA,EAAW,CAACP,cAAA,EAAgBE,SAAA,EAAWK,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACvEX,KAAA,EAAOA,KAAA,IAASY,SAAA;gBAEhB,aAAAJ,IAAA,CAAClB,YAAA;QACCS,SAAA,EAAW,GAAGL,SAAA,UAAmB;QACjCO,MAAA,EAAQA,MAAA;QACRC,WAAA,EAAaA,WAAA;QACbW,eAAA,EAAiBV,SAAA;QACjBC,UAAA,EAAYA,UAAA;QACZC,gBAAA,EAAkBA,gBAAA;QAClBC,WAAA,EAAaA,WAAA;QACbC,QAAA,EAAUA;;;;AAKpB;AAEA,OAAO,MAAMO,QAAA,GAAWvB,aAAA,CAAcI,iBAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","RenderFields","withCondition","fieldBaseClass","RowProvider","baseClass","RowFieldComponent","props","field","admin","className","style","fields","forceRender","indexPath","parentPath","parentSchemaPath","permissions","readOnly","_jsx","filter","Boolean","join","undefined","parentIndexPath","RowField"],"sources":["../../../src/fields/Row/index.tsx"],"sourcesContent":["'use client'\nimport type { RowFieldClientProps } from 'payload'\n\nimport React from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\nimport { RowProvider } from './provider.js'\n\nconst baseClass = 'row'\n\nconst RowFieldComponent: React.FC<RowFieldClientProps> = (props) => {\n  const {\n    field: { admin: { className, style } = {}, fields },\n    forceRender = false,\n    indexPath = '',\n    parentPath = '',\n    parentSchemaPath = '',\n    permissions,\n    readOnly,\n  } = props\n\n  return (\n    <RowProvider>\n      <div\n        className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}\n        style={style || undefined}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fields={fields}\n          forceRender={forceRender}\n          parentIndexPath={indexPath}\n          parentPath={parentPath}\n          parentSchemaPath={parentSchemaPath}\n          permissions={permissions}\n          readOnly={readOnly}\n        />\n      </div>\n    </RowProvider>\n  )\n}\n\nexport const RowField = withCondition(RowFieldComponent)\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,WAAW,QAAQ;AAE5B,MAAMC,SAAA,GAAY;AAElB,MAAMC,iBAAA,GAAoDC,KAAA;EACxD,MAAM;IACJC,KAAA,EAAO;MAAEC,KAAA,EAAO;QAAEC,SAAS;QAAEC;MAAK,CAAE,GAAG,CAAC,CAAC;MAAEC;IAAM,CAAE;IACnDC,WAAA,GAAc,KAAK;IACnBC,SAAA,GAAY,EAAE;IACdC,UAAA,GAAa,EAAE;IACfC,gBAAA,GAAmB,EAAE;IACrBC,WAAW;IACXC;EAAQ,CACT,GAAGX,KAAA;EAEJ,oBACEY,IAAA,CAACf,WAAA;cACC,aAAAe,IAAA,CAAC;MACCT,SAAA,EAAW,CAACP,cAAA,EAAgBE,SAAA,EAAWK,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACvEX,KAAA,EAAOA,KAAA,IAASY,SAAA;gBAEhB,aAAAJ,IAAA,CAAClB,YAAA;QACCS,SAAA,EAAW,GAAGL,SAAA,UAAmB;QACjCO,MAAA,EAAQA,MAAA;QACRC,WAAA,EAAaA,WAAA;QACbW,eAAA,EAAiBV,SAAA;QACjBC,UAAA,EAAYA,UAAA;QACZC,gBAAA,EAAkBA,gBAAA;QAClBC,WAAA,EAAaA,WAAA;QACbC,QAAA,EAAUA;;;;AAKpB;AAEA,OAAO,MAAMO,QAAA,GAAWvB,aAAA,CAAcI,iBAAA","ignoreList":[]}

package/dist/fields/Select/index.d.ts

@@ -1,15 +1,8 @@
-import type { Option, OptionObject } from 'payload';
+import type { Option, OptionObject, SelectFieldClientProps } from 'payload';
 import React from 'react';
 import type { SelectInputProps } from './Input.js';
 import { SelectInput } from './Input.js';
 export declare const formatOptions: (options: Option[]) => OptionObject[];
-export declare const SelectField: React.FC<{
-    readonly onChange?: (e: string | string[]) => void;
-    readonly path: string;
-    readonly validate?: import("payload").SelectFieldValidation;
-    readonly value?: string | string[];
-} & {
-    readonly field: Omit<import("payload").SelectFieldClient, "type"> & Partial<Pick<import("payload").SelectFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+export declare const SelectField: React.FC<SelectFieldClientProps>;
 export { SelectInput, type SelectInputProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,MAAM,EACN,YAAY,EAGb,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAExC,eAAO,MAAM,aAAa,YAAa,MAAM,EAAE,KAAG,YAAY,EAU1D,CAAA;AAgHJ,eAAO,MAAM,WAAW;;;;;;;+EAAsC,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAE3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAExC,eAAO,MAAM,aAAa,YAAa,MAAM,EAAE,KAAG,YAAY,EAU1D,CAAA;AAgHJ,eAAO,MAAM,WAAW,kCAAsC,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}

package/dist/fields/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useField","withCondition","mergeFieldStyles","SelectInput","formatOptions","options","map","option","value","label","SelectFieldComponent","props","field","name","admin","className","description","isClearable","isSortable","placeholder","hasMany","localized","optionsFromProps","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","memoizedValidate","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","styles","_jsx","filterOption","search","some","toLowerCase","includes","undefined","style","SelectField"],"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  Option,\n  OptionObject,\n  SelectFieldClientComponent,\n  SelectFieldClientProps,\n} from 'payload'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\nimport type { SelectInputProps } from './Input.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { SelectInput } from './Input.js'\n\nexport const formatOptions = (options: Option[]): OptionObject[] =>\n  options.map((option) => {\n    if (typeof option === 'object' && (option.value || option.value === '')) {\n      return option\n    }\n\n    return {\n      label: option,\n      value: option,\n    } as OptionObject\n  })\n\nconst SelectFieldComponent: SelectFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: {\n        className,\n        description,\n        isClearable = true,\n        isSortable = true,\n        placeholder,\n      } = {} as SelectFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      options: optionsFromProps = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const options = React.useMemo(() => formatOptions(optionsFromProps), [optionsFromProps])\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, hasMany, options, required })\n      }\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!readOnly || disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={description}\n      Error={Error}\n      filterOption={\n        selectFilterOptions\n          ? ({ label, value }, search) =>\n              selectFilterOptions?.some(\n                (option) => (typeof option === 'string' ? option : option.value) === value,\n              ) && label.toLowerCase().includes(search.toLowerCase())\n          : undefined\n      }\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly || disabled}\n      required={required}\n      showError={showError}\n      style={styles}\n      value={value as string | string[]}\n    />\n  )\n}\n\nexport const SelectField = withCondition(SelectFieldComponent)\n\nexport { SelectInput, type SelectInputProps }\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useField","withCondition","mergeFieldStyles","SelectInput","formatOptions","options","map","option","value","label","SelectFieldComponent","props","field","name","admin","className","description","isClearable","isSortable","placeholder","hasMany","localized","optionsFromProps","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","memoizedValidate","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","styles","_jsx","filterOption","search","some","toLowerCase","includes","undefined","style","SelectField"],"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\nimport type { SelectInputProps } from './Input.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { SelectInput } from './Input.js'\n\nexport const formatOptions = (options: Option[]): OptionObject[] =>\n  options.map((option) => {\n    if (typeof option === 'object' && (option.value || option.value === '')) {\n      return option\n    }\n\n    return {\n      label: option,\n      value: option,\n    } as OptionObject\n  })\n\nconst SelectFieldComponent: React.FC<SelectFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: {\n        className,\n        description,\n        isClearable = true,\n        isSortable = true,\n        placeholder,\n      } = {} as SelectFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      options: optionsFromProps = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const options = React.useMemo(() => formatOptions(optionsFromProps), [optionsFromProps])\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, hasMany, options, required })\n      }\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!readOnly || disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={description}\n      Error={Error}\n      filterOption={\n        selectFilterOptions\n          ? ({ label, value }, search) =>\n              selectFilterOptions?.some(\n                (option) => (typeof option === 'string' ? option : option.value) === value,\n              ) && label.toLowerCase().includes(search.toLowerCase())\n          : undefined\n      }\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly || disabled}\n      required={required}\n      showError={showError}\n      style={styles}\n      value={value as string | string[]}\n    />\n  )\n}\n\nexport const SelectField = withCondition(SelectFieldComponent)\n\nexport { SelectInput, type SelectInputProps }\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Slug/index.css

@@ -46,7 +46,6 @@
       background: transparent;
       color: var(--color-icon-secondary);
       cursor: pointer;
-      transition: color 100ms;
 
       &:hover {
         color: var(--color-icon);

package/dist/fields/Slug/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Slug/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAgC,MAAM,OAAO,CAAA;AAepD,OAAO,aAAa,CAAA;AAIpB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAwJD,eAAO,MAAM,SAAS,0BAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Slug/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAgC,MAAM,OAAO,CAAA;AAiBpD,OAAO,aAAa,CAAA;AAIpB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAwKD,eAAO,MAAM,SAAS,0BAAoC,CAAA"}

package/dist/fields/Slug/index.js

@@ -1,9 +1,9 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
 import { Button } from '../../elements/Button/index.js';
 import { FieldDescription } from '../../fields/FieldDescription/index.js';
 import { FieldError } from '../../fields/FieldError/index.js';
@@ -15,6 +15,7 @@ import { LockIcon } from '../../icons/Lock/index.js';
 import { LockOpenIcon } from '../../icons/LockOpen/index.js';
 import { RefreshIcon } from '../../icons/Refresh/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
@@ -22,12 +23,10 @@ const baseClass = 'slug-field-component';
 /**
  * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.
  */
-const SlugFieldComponent = t0 => {
-  const $ = _c(17);
-  const {
-    field,
-    path
-  } = t0;
+const SlugFieldComponent = ({
+  field,
+  path
+}) => {
   const {
     admin,
     label,
@@ -44,159 +43,123 @@ const SlugFieldComponent = t0 => {
     t
   } = useTranslation();
   const {
+    id,
     collectionSlug,
     globalSlug
   } = useDocumentInfo();
   const {
     slugify
   } = useServerFunctions();
-  const t1 = path || field.name;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = {
-      path: t1
-    };
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const {
     path: fieldPath,
     setValue,
     showError,
     value
-  } = useField(t2);
+  } = useField({
+    path: path || field.name
+  });
   const {
     getData,
     getDataByPath
   } = useForm();
   const [isLocked, setIsLocked] = useState(true);
-  let t3;
-  if ($[2] !== collectionSlug || $[3] !== fieldPath || $[4] !== getData || $[5] !== getDataByPath || $[6] !== globalSlug || $[7] !== setValue || $[8] !== slugify || $[9] !== useAsSlug || $[10] !== value) {
-    t3 = async e => {
-      e.preventDefault();
-      const valueToSlugify = getDataByPath(useAsSlug);
-      const formattedSlug = await slugify({
+  /**
+  * This method allows the user to generate their slug on demand, e.g. when they click the "generate" button.
+  * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.
+  */
+  const handleGenerate = useCallback(async e => {
+    e.preventDefault();
+    const valueToSlugify = useAsSlug ? getDataByPath(useAsSlug) : undefined;
+    let formattedSlug;
+    try {
+      formattedSlug = await slugify({
+        id: id ?? undefined,
         collectionSlug,
         data: getData(),
         globalSlug,
+        locale,
         path: fieldPath,
         valueToSlugify
       });
-      if (formattedSlug === null || formattedSlug === undefined) {
-        setValue("");
-        return;
-      }
-      if (value !== formattedSlug) {
-        setValue(formattedSlug);
-      }
-    };
-    $[2] = collectionSlug;
-    $[3] = fieldPath;
-    $[4] = getData;
-    $[5] = getDataByPath;
-    $[6] = globalSlug;
-    $[7] = setValue;
-    $[8] = slugify;
-    $[9] = useAsSlug;
-    $[10] = value;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  const handleGenerate = t3;
-  let t4;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = e_0 => {
-      e_0.preventDefault();
-      setIsLocked(_temp);
-    };
-    $[12] = t4;
-  } else {
-    t4 = $[12];
-  }
-  const toggleLock = t4;
-  let t5;
-  if ($[13] !== setValue) {
-    t5 = e_1 => {
-      setValue(e_1.target.value);
-    };
-    $[13] = setValue;
-    $[14] = t5;
-  } else {
-    t5 = $[14];
-  }
-  const handleChange = t5;
+    } catch (_err) {
+      toast.error(t('error:unspecific'));
+      return;
+    }
+    // Empty only comes back for globals (no counter fallback) — keep the current value. For
+    // collections the server returns the `<singular>-N` fallback when there's no source.
+    if (formattedSlug === null || formattedSlug === undefined || formattedSlug === '') {
+      return;
+    }
+    /**
+    * The result may be the same as the current value, and if so, we don't want to trigger a re-render.
+    */
+    if (value !== formattedSlug) {
+      setValue(formattedSlug);
+    }
+  }, [setValue, value, useAsSlug, getData, slugify, getDataByPath, id, collectionSlug, globalSlug, locale, fieldPath, t]);
+  const toggleLock = useCallback(e_0 => {
+    e_0.preventDefault();
+    setIsLocked(prev => !prev);
+  }, []);
+  const handleChange = useCallback(e_1 => {
+    setValue(e_1.target.value);
+  }, [setValue]);
   const isReadOnly = Boolean(readOnlyFromProps || isLocked);
-  const t6 = ["field-type", baseClass, showError && `${baseClass}--error`, isLocked && `${baseClass}--locked`, readOnlyFromProps && `${baseClass}--read-only`].filter(Boolean).join(" ");
-  const t7 = _jsx(FieldLabel, {
-    htmlFor: `field-${fieldPath}`,
-    label,
-    required
-  });
-  const t8 = _jsx(FieldError, {
-    path: fieldPath,
-    showError
-  });
-  const t9 = showError && "form-input-group-error";
-  let t10;
-  if ($[15] !== t9) {
-    t10 = ["form-input-group", `${baseClass}__input-container`, t9].filter(Boolean);
-    $[15] = t9;
-    $[16] = t10;
-  } else {
-    t10 = $[16];
-  }
-  return _jsxs("div", {
-    className: t6,
-    children: [t7, _jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", {
+    className: ['field-type', baseClass, showError && `${baseClass}--error`, isLocked && `${baseClass}--locked`, readOnlyFromProps && `${baseClass}--read-only`].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      htmlFor: `field-${fieldPath}`,
+      label: label,
+      required: required
+    }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
-      children: [t8, _jsxs("div", {
-        className: t10.join(" "),
-        children: [_jsx("input", {
+      children: [/*#__PURE__*/_jsx(FieldError, {
+        path: fieldPath,
+        showError: showError
+      }), /*#__PURE__*/_jsxs("div", {
+        className: ['form-input-group', `${baseClass}__input-container`, showError && 'form-input-group-error'].filter(Boolean).join(' '),
+        children: [/*#__PURE__*/_jsx("input", {
           "aria-label": getTranslation(label, i18n) || path,
           className: `form-input ${baseClass}__input`,
           disabled: isReadOnly,
-          id: `field-${fieldPath?.replace(/\./g, "__")}`,
+          id: `field-${fieldPath?.replace(/\./g, '__')}`,
           name: fieldPath,
           onChange: handleChange,
           placeholder: getTranslation(placeholder, i18n),
           type: "text",
-          value: value || ""
-        }), !readOnlyFromProps && _jsxs("div", {
+          value: value || ''
+        }), !readOnlyFromProps && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__actions`,
-          children: [!isLocked && _jsx(Button, {
-            "aria-label": t("authentication:generate"),
+          children: [!isLocked && /*#__PURE__*/_jsx(Button, {
+            "aria-label": t('authentication:generate'),
             buttonStyle: "ghost",
             className: `${baseClass}__action-btn`,
-            icon: _jsx(RefreshIcon, {}),
-            id: `field-${fieldPath?.replace(/\./g, "__")}-generate`,
+            icon: /*#__PURE__*/_jsx(RefreshIcon, {}),
+            id: `field-${fieldPath?.replace(/\./g, '__')}-generate`,
             margin: false,
             onClick: handleGenerate
-          }), _jsx(Button, {
-            "aria-label": isLocked ? t("general:unlock") : t("general:lock"),
+          }), /*#__PURE__*/_jsx(Button, {
+            "aria-label": isLocked ? t('general:unlock') : t('general:lock'),
             buttonStyle: "ghost",
             className: `${baseClass}__action-btn`,
-            icon: isLocked ? _jsx(LockIcon, {
+            icon: isLocked ? /*#__PURE__*/_jsx(LockIcon, {
               size: 16
-            }) : _jsx(LockOpenIcon, {
+            }) : /*#__PURE__*/_jsx(LockOpenIcon, {
               size: 16
             }),
-            id: `field-${fieldPath?.replace(/\./g, "__")}-lock`,
+            id: `field-${fieldPath?.replace(/\./g, '__')}-lock`,
             margin: false,
             onClick: toggleLock
           })]
         })]
-      }), _jsx(FieldDescription, {
-        description,
+      }), /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
         path: fieldPath
       })]
     })]
   });
 };
 export const SlugField = withCondition(SlugFieldComponent);
-function _temp(prev) {
-  return !prev;
-}
 //# sourceMappingURL=index.js.map

package/dist/fields/Slug/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useCallback","useState","Button","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","LockIcon","LockOpenIcon","RefreshIcon","useDocumentInfo","useServerFunctions","useTranslation","baseClass","SlugFieldComponent","t0","$","field","path","admin","label","required","useAsSlug","description","placeholder","readOnly","readOnlyFromProps","i18n","t","collectionSlug","globalSlug","slugify","t1","name","t2","fieldPath","setValue","showError","value","getData","getDataByPath","isLocked","setIsLocked","t3","e","preventDefault","valueToSlugify","formattedSlug","data","undefined","handleGenerate","t4","Symbol","for","e_0","_temp","toggleLock","t5","e_1","target","handleChange","isReadOnly","Boolean","t6","filter","join","t7","_jsx","htmlFor","t8","t9","t10","_jsxs","className","children","disabled","id","replace","onChange","type","buttonStyle","icon","margin","onClick","size","SlugField","prev"],"sources":["../../../src/fields/Slug/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SlugFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useState } from 'react'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { LockOpenIcon } from '../../icons/LockOpen/index.js'\nimport { RefreshIcon } from '../../icons/Refresh/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'slug-field-component'\n\ntype SlugFieldProps = {\n  readonly field: SlugFieldClient\n  readonly path?: string\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.\n */\nconst SlugFieldComponent: React.FC<SlugFieldProps> = ({ field, path }) => {\n  const { admin, label, required, useAsSlug } = field\n  const { description, placeholder, readOnly: readOnlyFromProps } = admin || {}\n\n  const { i18n, t } = useTranslation()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const { slugify } = useServerFunctions()\n\n  const {\n    path: fieldPath,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({ path: path || field.name })\n\n  const { getData, getDataByPath } = useForm()\n\n  const [isLocked, setIsLocked] = useState(true)\n\n  /**\n   * This method allows the user to generate their slug on demand, e.g. when they click the \"generate\" button.\n   * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.\n   */\n  const handleGenerate = useCallback(\n    async (e: React.MouseEvent<Element>) => {\n      e.preventDefault()\n\n      const valueToSlugify = getDataByPath(useAsSlug)\n\n      const formattedSlug = await slugify({\n        collectionSlug,\n        data: getData(),\n        globalSlug,\n        path: fieldPath,\n        valueToSlugify,\n      })\n\n      if (formattedSlug === null || formattedSlug === undefined) {\n        setValue('')\n        return\n      }\n\n      /**\n       * The result may be the same as the current value, and if so, we don't want to trigger a re-render.\n       */\n      if (value !== formattedSlug) {\n        setValue(formattedSlug)\n      }\n    },\n    [\n      setValue,\n      value,\n      useAsSlug,\n      getData,\n      slugify,\n      getDataByPath,\n      collectionSlug,\n      globalSlug,\n      fieldPath,\n    ],\n  )\n\n  const toggleLock = useCallback((e: React.MouseEvent<Element>) => {\n    e.preventDefault()\n    setIsLocked((prev) => !prev)\n  }, [])\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value)\n    },\n    [setValue],\n  )\n\n  const isReadOnly = Boolean(readOnlyFromProps || isLocked)\n\n  return (\n    <div\n      className={[\n        'field-type',\n        baseClass,\n        showError && `${baseClass}--error`,\n        isLocked && `${baseClass}--locked`,\n        readOnlyFromProps && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel htmlFor={`field-${fieldPath}`} label={label} required={required} />\n      <div className={`${baseClass}__wrap`}>\n        <FieldError path={fieldPath} showError={showError} />\n\n        <div\n          className={[\n            'form-input-group',\n            `${baseClass}__input-container`,\n            showError && 'form-input-group-error',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <input\n            aria-label={getTranslation(label, i18n) || path}\n            className={`form-input ${baseClass}__input`}\n            disabled={isReadOnly}\n            id={`field-${fieldPath?.replace(/\\./g, '__')}`}\n            name={fieldPath}\n            onChange={handleChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            type=\"text\"\n            value={value || ''}\n          />\n\n          {!readOnlyFromProps && (\n            <div className={`${baseClass}__actions`}>\n              {!isLocked && (\n                <Button\n                  aria-label={t('authentication:generate')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__action-btn`}\n                  icon={<RefreshIcon />}\n                  id={`field-${fieldPath?.replace(/\\./g, '__')}-generate`}\n                  margin={false}\n                  onClick={handleGenerate}\n                />\n              )}\n              <Button\n                aria-label={isLocked ? t('general:unlock') : t('general:lock')}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action-btn`}\n                icon={isLocked ? <LockIcon size={16} /> : <LockOpenIcon size={16} />}\n                id={`field-${fieldPath?.replace(/\\./g, '__')}-lock`}\n                margin={false}\n                onClick={toggleLock}\n              />\n            </div>\n          )}\n        </div>\n\n        <FieldDescription description={description} path={fieldPath} />\n      </div>\n    </div>\n  )\n}\n\nexport const SlugField = withCondition(SlugFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useState","toast","Button","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","LockIcon","LockOpenIcon","RefreshIcon","useDocumentInfo","useLocale","useServerFunctions","useTranslation","baseClass","SlugFieldComponent","field","path","admin","label","required","useAsSlug","description","placeholder","readOnly","readOnlyFromProps","i18n","t","id","collectionSlug","globalSlug","slugify","currentLocale","locale","code","fieldPath","setValue","showError","value","name","getData","getDataByPath","isLocked","setIsLocked","handleGenerate","e","preventDefault","valueToSlugify","undefined","formattedSlug","data","_err","error","toggleLock","prev","handleChange","target","isReadOnly","Boolean","_jsxs","className","filter","join","_jsx","htmlFor","disabled","replace","onChange","type","buttonStyle","icon","margin","onClick","size","SlugField"],"sources":["../../../src/fields/Slug/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SlugFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { LockOpenIcon } from '../../icons/LockOpen/index.js'\nimport { RefreshIcon } from '../../icons/Refresh/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'slug-field-component'\n\ntype SlugFieldProps = {\n  readonly field: SlugFieldClient\n  readonly path?: string\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.\n */\nconst SlugFieldComponent: React.FC<SlugFieldProps> = ({ field, path }) => {\n  const { admin, label, required, useAsSlug } = field\n  const { description, placeholder, readOnly: readOnlyFromProps } = admin || {}\n\n  const { i18n, t } = useTranslation()\n\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const { slugify } = useServerFunctions()\n\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n\n  const {\n    path: fieldPath,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({ path: path || field.name })\n\n  const { getData, getDataByPath } = useForm()\n\n  const [isLocked, setIsLocked] = useState(true)\n\n  /**\n   * This method allows the user to generate their slug on demand, e.g. when they click the \"generate\" button.\n   * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.\n   */\n  const handleGenerate = useCallback(\n    async (e: React.MouseEvent<Element>) => {\n      e.preventDefault()\n\n      const valueToSlugify = useAsSlug ? getDataByPath(useAsSlug) : undefined\n\n      let formattedSlug: null | string | undefined\n\n      try {\n        formattedSlug = await slugify({\n          id: id ?? undefined,\n          collectionSlug,\n          data: getData(),\n          globalSlug,\n          locale,\n          path: fieldPath,\n          valueToSlugify,\n        })\n      } catch (_err) {\n        toast.error(t('error:unspecific'))\n        return\n      }\n\n      // Empty only comes back for globals (no counter fallback) — keep the current value. For\n      // collections the server returns the `<singular>-N` fallback when there's no source.\n      if (formattedSlug === null || formattedSlug === undefined || formattedSlug === '') {\n        return\n      }\n\n      /**\n       * The result may be the same as the current value, and if so, we don't want to trigger a re-render.\n       */\n      if (value !== formattedSlug) {\n        setValue(formattedSlug)\n      }\n    },\n    [\n      setValue,\n      value,\n      useAsSlug,\n      getData,\n      slugify,\n      getDataByPath,\n      id,\n      collectionSlug,\n      globalSlug,\n      locale,\n      fieldPath,\n      t,\n    ],\n  )\n\n  const toggleLock = useCallback((e: React.MouseEvent<Element>) => {\n    e.preventDefault()\n    setIsLocked((prev) => !prev)\n  }, [])\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value)\n    },\n    [setValue],\n  )\n\n  const isReadOnly = Boolean(readOnlyFromProps || isLocked)\n\n  return (\n    <div\n      className={[\n        'field-type',\n        baseClass,\n        showError && `${baseClass}--error`,\n        isLocked && `${baseClass}--locked`,\n        readOnlyFromProps && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel htmlFor={`field-${fieldPath}`} label={label} required={required} />\n      <div className={`${baseClass}__wrap`}>\n        <FieldError path={fieldPath} showError={showError} />\n\n        <div\n          className={[\n            'form-input-group',\n            `${baseClass}__input-container`,\n            showError && 'form-input-group-error',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <input\n            aria-label={getTranslation(label, i18n) || path}\n            className={`form-input ${baseClass}__input`}\n            disabled={isReadOnly}\n            id={`field-${fieldPath?.replace(/\\./g, '__')}`}\n            name={fieldPath}\n            onChange={handleChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            type=\"text\"\n            value={value || ''}\n          />\n\n          {!readOnlyFromProps && (\n            <div className={`${baseClass}__actions`}>\n              {!isLocked && (\n                <Button\n                  aria-label={t('authentication:generate')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__action-btn`}\n                  icon={<RefreshIcon />}\n                  id={`field-${fieldPath?.replace(/\\./g, '__')}-generate`}\n                  margin={false}\n                  onClick={handleGenerate}\n                />\n              )}\n              <Button\n                aria-label={isLocked ? t('general:unlock') : t('general:lock')}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action-btn`}\n                icon={isLocked ? <LockIcon size={16} /> : <LockOpenIcon size={16} />}\n                id={`field-${fieldPath?.replace(/\\./g, '__')}-lock`}\n                margin={false}\n                onClick={toggleLock}\n              />\n            </div>\n          )}\n        </div>\n\n        <FieldDescription description={description} path={fieldPath} />\n      </div>\n    </div>\n  )\n}\n\nexport const SlugField = withCondition(SlugFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Tabs/index.css

@@ -65,6 +65,7 @@
     margin-bottom: var(--spacer-4);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .tabs-field--within-collapsible {
       margin-left: calc(var(--gutter-h) * -1);

package/dist/fields/Tabs/index.d.ts

@@ -1,9 +1,7 @@
-import type { ClientComponentProps } from 'payload';
+import type { TabsFieldClientProps } from 'payload';
 import React from 'react';
 import { TabsProvider } from './provider.js';
 import './index.css';
 export { TabsProvider };
-export declare const TabsField: React.FC<import("payload").FieldPaths & {
-    readonly field: Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>;
-} & Omit<ClientComponentProps, "customComponents" | "field">>;
+export declare const TabsField: React.FC<TabsFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EAMrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAc/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAiLvB,eAAO,MAAM,SAAS;;6DAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAMV,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAc/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAiLvB,eAAO,MAAM,SAAS,gCAAoC,CAAA"}