@payloadcms/ui 3.0.0-alpha.7 → 3.0.0-alpha.70

package/dist/fields/RichText/index.js

@@ -0,0 +1,5 @@
+export const RichText = ()=>{
+    return null;
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/RichText/index.tsx"],"sourcesContent":["import type { FieldBase } from 'payload/types'\nimport type React from 'react'\n\nimport type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type RichTextFieldProps = FormFieldBase & {\n  label?: FieldBase['label']\n  name: string\n  richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>\n  width?: string\n}\n\nexport const RichText: React.FC<RichTextFieldProps> = () => {\n  return null\n}\n"],"names":["RichText"],"rangeMappings":";;","mappings":"AAaA,OAAO,MAAMA,WAAyC;IACpD,OAAO;AACT,EAAC"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RowFieldProps } from './types.js';
+import './index.scss';
+import { RowProvider, useRow } from './provider.js';
+export { RowProvider, useRow };
+export declare const Row: React.FC<RowFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Row/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAM/C,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAA;AA0B9B,eAAO,MAAM,GAAG,yBAA0B,CAAA"}

package/dist/fields/Row/index.js

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderFields } from '../../forms/RenderFields/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { RowProvider, useRow } from './provider.js';
+export { RowProvider, useRow };
+const baseClass = 'row';
+const RowField = (props)=>{
+    const { className, fieldMap, forceRender = false } = props;
+    const { indexPath, path, readOnly, schemaPath, siblingPermissions } = useFieldProps();
+    return /*#__PURE__*/ React.createElement(RowProvider, null, /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            baseClass,
+            className
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ React.createElement(RenderFields, {
+        fieldMap,
+        forceRender,
+        path,
+        readOnly,
+        schemaPath,
+        className: `${baseClass}__fields`,
+        fieldMap: fieldMap,
+        forceRender: forceRender,
+        indexPath: indexPath,
+        margins: false,
+        permissions: siblingPermissions
+    })));
+};
+export const Row = withCondition(RowField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Row/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { RowFieldProps } from './types.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\nimport { RowProvider, useRow } from './provider.js'\n\nexport { RowProvider, useRow }\n\nconst baseClass = 'row'\n\nconst RowField: React.FC<RowFieldProps> = (props) => {\n  const { className, fieldMap, forceRender = false } = props\n\n  const { indexPath, path, readOnly, schemaPath, siblingPermissions } = useFieldProps()\n\n  return (\n    <RowProvider>\n      <div className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}>\n        <RenderFields\n          {...{ fieldMap, forceRender, path, readOnly, schemaPath }}\n          className={`${baseClass}__fields`}\n          fieldMap={fieldMap}\n          forceRender={forceRender}\n          indexPath={indexPath}\n          margins={false}\n          permissions={siblingPermissions}\n        />\n      </div>\n    </RowProvider>\n  )\n}\n\nexport const Row = withCondition(RowField)\n"],"names":["React","useFieldProps","RenderFields","withCondition","fieldBaseClass","RowProvider","useRow","baseClass","RowField","props","className","fieldMap","forceRender","indexPath","path","readOnly","schemaPath","siblingPermissions","div","filter","Boolean","join","margins","permissions","Row"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,qBAAoB;AAEnD,SAASC,WAAW,EAAEC,MAAM,QAAQ,gBAAe;AAEnD,SAASD,WAAW,EAAEC,MAAM,GAAE;AAE9B,MAAMC,YAAY;AAElB,MAAMC,WAAoC,CAACC;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGH;IAErD,MAAM,EAAEI,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,kBAAkB,EAAE,GAAGhB;IAEtE,qBACE,oBAACI,iCACC,oBAACa;QAAIR,WAAW;YAACN;YAAgBG;YAAWG;SAAU,CAACS,MAAM,CAACC,SAASC,IAAI,CAAC;qBAC1E,oBAACnB;QACOS;QAAUC;QAAaE;QAAMC;QAAUC;QAC7CN,WAAW,CAAC,EAAEH,UAAU,QAAQ,CAAC;QACjCI,UAAUA;QACVC,aAAaA;QACbC,WAAWA;QACXS,SAAS;QACTC,aAAaN;;AAKvB;AAEA,OAAO,MAAMO,MAAMrB,cAAcK,UAAS"}

package/dist/fields/Row/index.scss

@@ -0,0 +1,34 @@
+@import '../../scss/styles.scss';
+
+.field-type.row {
+  .row__fields {
+    display: flex;
+    flex-wrap: wrap;
+    width: calc(100% + var(--base));
+    margin-left: calc(var(--base) * -0.5);
+    margin-right: calc(var(--base) * -0.5);
+
+    > * {
+      flex-grow: 1;
+      padding-left: calc(var(--base) * 0.5);
+      padding-right: calc(var(--base) * 0.5);
+    }
+  }
+
+  @include mid-break {
+    .row__fields {
+      display: block;
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+
+      > * {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100% !important;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Context: React.Context<boolean>;
+export declare const RowProvider: React.FC<{
+    children?: React.ReactNode;
+    withinRow?: boolean;
+}>;
+export declare const useRow: () => boolean;
+//# sourceMappingURL=provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/fields/Row/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,eAAO,MAAM,OAAO,wBAAuB,CAAA;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAKrF,CAAA;AAED,eAAO,MAAM,MAAM,QAAO,OAA8B,CAAA"}

package/dist/fields/Row/provider.js

@@ -0,0 +1,11 @@
+'use client';
+import React, { createContext, useContext } from 'react';
+export const Context = /*#__PURE__*/ createContext(false);
+export const RowProvider = ({ children, withinRow = true })=>{
+    return /*#__PURE__*/ React.createElement(Context.Provider, {
+        value: withinRow
+    }, children);
+};
+export const useRow = ()=>useContext(Context);
+
+//# sourceMappingURL=provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Row/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\nexport const Context = createContext(false)\n\nexport const RowProvider: React.FC<{ children?: React.ReactNode; withinRow?: boolean }> = ({\n  children,\n  withinRow = true,\n}) => {\n  return <Context.Provider value={withinRow}>{children}</Context.Provider>\n}\n\nexport const useRow = (): boolean => useContext(Context)\n"],"names":["React","createContext","useContext","Context","RowProvider","children","withinRow","Provider","value","useRow"],"rangeMappings":";;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AAExD,OAAO,MAAMC,wBAAUF,cAAc,OAAM;AAE3C,OAAO,MAAMG,cAA6E,CAAC,EACzFC,QAAQ,EACRC,YAAY,IAAI,EACjB;IACC,qBAAO,oBAACH,QAAQI,QAAQ;QAACC,OAAOF;OAAYD;AAC9C,EAAC;AAED,OAAO,MAAMI,SAAS,IAAeP,WAAWC,SAAQ"}

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

@@ -0,0 +1,12 @@
+import type { FieldPermissions } from 'payload/auth';
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+export type RowFieldProps = FormFieldBase & {
+    fieldMap: FieldMap;
+    forceRender?: boolean;
+    indexPath: string;
+    path?: string;
+    permissions?: FieldPermissions;
+    width?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Row/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AACvF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/fields/Row/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Row/types.ts"],"sourcesContent":["import type { FieldPermissions } from 'payload/auth'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type RowFieldProps = FormFieldBase & {\n  fieldMap: FieldMap\n  forceRender?: boolean\n  indexPath: string\n  path?: string\n  permissions?: FieldPermissions\n  width?: string\n}\n"],"names":[],"rangeMappings":"","mappings":"AAKA,WAOC"}

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

@@ -0,0 +1,18 @@
+import type { FieldBase, Option } from 'payload/types';
+import React from 'react';
+import type { FormFieldBase } from '../shared/index.js';
+import './index.scss';
+export type SelectFieldProps = FormFieldBase & {
+    hasMany?: boolean;
+    isClearable?: boolean;
+    isSortable?: boolean;
+    label?: FieldBase['label'];
+    name?: string;
+    onChange?: (e: string) => void;
+    options?: Option[];
+    path?: string;
+    value?: string;
+    width?: string;
+};
+export declare const Select: React.FC<SelectFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAA;AAOpF,OAAO,KAAgC,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAOvD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA0JD,eAAO,MAAM,MAAM,4BAA6B,CAAA"}

package/dist/fields/Select/index.js

@@ -0,0 +1,124 @@
+/* eslint-disable react/destructuring-assignment */ 'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import React, { useCallback, useState } from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+const formatOptions = (options)=>options.map((option)=>{
+        if (typeof option === 'object' && (option.value || option.value === '')) {
+            return option;
+        }
+        return {
+            label: option,
+            value: option
+        };
+    });
+const SelectField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany = false, isClearable = true, isSortable = true, label, labelProps, onChange: onChangeFromProps, options: optionsFromProps = [], path: pathFromProps, readOnly: readOnlyFromProps, required, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const [options] = useState(formatOptions(optionsFromProps));
+    const memoizedValidate = useCallback((value, validationOptions)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...validationOptions,
+            hasMany,
+            options,
+            required
+        });
+    }, [
+        validate,
+        required,
+        hasMany,
+        options
+    ]);
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    const { path, setValue, showError, value } = useField({
+        path: pathFromContext || pathFromProps || name,
+        validate: memoizedValidate
+    });
+    let valueToRender;
+    if (hasMany && Array.isArray(value)) {
+        valueToRender = value.map((val)=>{
+            const matchingOption = options.find((option)=>option.value === val);
+            return {
+                label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,
+                value: matchingOption?.value ?? val
+            };
+        });
+    } else if (value) {
+        const matchingOption = options.find((option)=>option.value === value);
+        valueToRender = {
+            label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,
+            value: matchingOption?.value ?? value
+        };
+    }
+    const onChange = useCallback((selectedOption)=>{
+        if (!readOnly) {
+            let newValue;
+            if (!selectedOption) {
+                newValue = null;
+            } else if (hasMany) {
+                if (Array.isArray(selectedOption)) {
+                    newValue = selectedOption.map((option)=>option.value);
+                } else {
+                    newValue = [];
+                }
+            } else {
+                newValue = selectedOption.value;
+            }
+            if (typeof onChangeFromProps === 'function') {
+                onChangeFromProps(newValue);
+            }
+            setValue(newValue);
+        }
+    }, [
+        readOnly,
+        hasMany,
+        setValue,
+        onChangeFromProps
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'select',
+            className,
+            showError && 'error',
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        id: `field-${path.replace(/\./g, '__')}`,
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement(ReactSelect, {
+        disabled: readOnly,
+        isClearable: isClearable,
+        isMulti: hasMany,
+        isSortable: isSortable,
+        onChange: onChange,
+        options: options.map((option)=>({
+                ...option,
+                label: getTranslation(option.label, i18n)
+            })),
+        showError: showError,
+        value: valueToRender
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+export const Select = withCondition(SelectField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate, FieldBase, Option, OptionObject } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectFieldProps = FormFieldBase & {\n  hasMany?: boolean\n  isClearable?: boolean\n  isSortable?: boolean\n  label?: FieldBase['label']\n  name?: string\n  onChange?: (e: string) => void\n  options?: Option[]\n  path?: string\n  value?: string\n  width?: string\n}\n\nconst 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 SelectField: React.FC<SelectFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    labelProps,\n    onChange: onChangeFromProps,\n    options: optionsFromProps = [],\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const [options] = useState(formatOptions(optionsFromProps))\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...validationOptions, hasMany, options, required })\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  const { path, setValue, showError, value } = useField({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  }\n\n  const onChange = useCallback(\n    (selectedOption) => {\n      if (!readOnly) {\n        let newValue\n        if (!selectedOption) {\n          newValue = null\n        } else if (hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, hasMany, setValue, onChangeFromProps],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div>\n        {BeforeInput}\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const Select = withCondition(SelectField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","React","useCallback","useState","ReactSelect","useField","withCondition","useTranslation","fieldBaseClass","formatOptions","options","map","option","value","label","SelectField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","labelProps","onChange","onChangeFromProps","optionsFromProps","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","width","i18n","memoizedValidate","validationOptions","pathFromContext","readOnlyFromContext","setValue","showError","valueToRender","Array","isArray","val","matchingOption","find","selectedOption","newValue","div","filter","Boolean","join","id","replace","disabled","isMulti","undefined","Select"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/fields/Select/index.scss

@@ -0,0 +1,25 @@
+@import '../../scss/styles.scss';
+
+.field-type.select {
+  position: relative;
+}
+
+html[data-theme='light'] {
+  .field-type.select {
+    &.error {
+      .rs__control {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.select {
+    &.error {
+      .rs__control {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MappedTab } from '../../../providers/ComponentMap/buildComponentMap/types.js';
+import './index.scss';
+type TabProps = {
+    isActive?: boolean;
+    parentPath: string;
+    setIsActive: () => void;
+    tab: MappedTab;
+};
+export declare const TabComponent: React.FC<TabProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4DAA4D,CAAA;AAK3F,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,GAAG,EAAE,SAAS,CAAA;CACf,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA6B3C,CAAA"}

package/dist/fields/Tabs/Tab/index.js

@@ -0,0 +1,33 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import React, { useState } from 'react';
+import { ErrorPill } from '../../../elements/ErrorPill/index.js';
+import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+const baseClass = 'tabs-field__tab-button';
+export const TabComponent = ({ isActive, parentPath, setIsActive, tab })=>{
+    const { name, label } = tab;
+    const { i18n } = useTranslation();
+    const [errorCount, setErrorCount] = useState(undefined);
+    const hasName = 'name' in tab;
+    const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`;
+    const fieldHasErrors = errorCount > 0;
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WatchChildErrors, {
+        fieldMap: tab.fieldMap,
+        path: path,
+        setErrorCount: setErrorCount
+    }), /*#__PURE__*/ React.createElement("button", {
+        className: [
+            baseClass,
+            fieldHasErrors && `${baseClass}--has-error`,
+            isActive && `${baseClass}--active`
+        ].filter(Boolean).join(' '),
+        onClick: setIsActive,
+        type: "button"
+    }, label ? getTranslation(label, i18n) : hasName && name, fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
+        count: errorCount,
+        i18n: i18n
+    })));
+};
+
+//# sourceMappingURL=index.js.map

package/dist/fields/Tabs/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\n\nimport type { MappedTab } from '../../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  isActive?: boolean\n  parentPath: string\n  setIsActive: () => void\n  tab: MappedTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { name, label } = tab\n\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n  const hasName = 'name' in tab\n\n  const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fieldMap={tab.fieldMap} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {label ? getTranslation(label, i18n) : hasName && name}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"names":["getTranslation","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","isActive","parentPath","setIsActive","tab","name","label","i18n","errorCount","setErrorCount","undefined","hasName","path","fieldHasErrors","Fragment","fieldMap","button","className","filter","Boolean","join","onClick","type","count"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,SAAS,QAAQ,uCAAsC;AAChE,SAASC,gBAAgB,QAAQ,2CAA0C;AAC3E,SAASC,cAAc,QAAQ,0CAAyC;AAGxE,MAAMC,YAAY;AASlB,OAAO,MAAMC,eAAmC,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACzF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IAExB,MAAM,EAAEG,IAAI,EAAE,GAAGT;IACjB,MAAM,CAACU,YAAYC,cAAc,GAAGd,SAASe;IAC7C,MAAMC,UAAU,UAAUP;IAE1B,MAAMQ,OAAO,CAAC,EAAEV,aAAa,CAAC,EAAEA,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,UAAUE,MAAMC,OAAO,GAAG,CAAC;IAChF,MAAMQ,iBAAiBL,aAAa;IAEpC,qBACE,oBAACd,MAAMoB,QAAQ,sBACb,oBAACjB;QAAiBkB,UAAUX,IAAIW,QAAQ;QAAEH,MAAMA;QAAMH,eAAeA;sBACrE,oBAACO;QACCC,WAAW;YACTlB;YACAc,kBAAkB,CAAC,EAAEd,UAAU,WAAW,CAAC;YAC3CE,YAAY,CAAC,EAAEF,UAAU,QAAQ,CAAC;SACnC,CACEmB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,SAASlB;QACTmB,MAAK;OAEJhB,QAAQb,eAAea,OAAOC,QAAQI,WAAWN,MACjDQ,gCAAkB,oBAACjB;QAAU2B,OAAOf;QAAYD,MAAMA;;AAI/D,EAAC"}

package/dist/fields/Tabs/Tab/index.scss

@@ -0,0 +1,78 @@
+@import '../../../scss/styles.scss';
+
+.tabs-field__tab-button {
+  @extend %btn-reset;
+  @extend %h4;
+  display: flex;
+  padding-bottom: base(1);
+  margin: 0 $baseline 0 0;
+  cursor: pointer;
+  opacity: 0.5;
+  position: relative;
+  white-space: nowrap;
+  flex-shrink: 0;
+  gap: base(0.5);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 1px;
+    background: var(--theme-elevation-800);
+    opacity: 0;
+  }
+
+  &:hover {
+    opacity: 0.75;
+
+    &:after {
+      opacity: 0.2;
+    }
+  }
+
+  &--active {
+    opacity: 1 !important;
+
+    &:after {
+      opacity: 1 !important;
+      height: 2px;
+    }
+  }
+
+  &__description {
+    margin-bottom: calc(var(--base) / 2);
+  }
+
+  @include small-break {
+    margin: 0 base(0.75) 0 0;
+    padding-bottom: base(0.5);
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .tabs-field__tab-button--has-error {
+    color: var(--theme-error-750);
+    &:after {
+      background: var(--theme-error-500);
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .tabs-field__tab-button--has-error {
+    color: var(--theme-error-500);
+    &:after {
+      background: var(--theme-error-500);
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { FieldPermissions } from 'payload/auth';
+import React from 'react';
+import type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+import './index.scss';
+import { TabsProvider } from './provider.js';
+export { TabsProvider };
+export type TabsFieldProps = FormFieldBase & {
+    forceRender?: boolean;
+    name?: string;
+    path?: string;
+    permissions: FieldPermissions;
+    tabs?: MappedTab[];
+    width?: string;
+};
+export declare const Tabs: React.FC<TabsFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAMpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAA;AACxF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWvD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAEvB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,gBAAgB,CAAA;IAC7B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAwJD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}

package/dist/fields/Tabs/index.js

@@ -0,0 +1,116 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { toKebabCase } from 'payload/utilities';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useCollapsible } from '../../elements/Collapsible/provider.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderFields } from '../../forms/RenderFields/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { usePreferences } from '../../providers/Preferences/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { TabComponent } from './Tab/index.js';
+import { TabsProvider } from './provider.js';
+const baseClass = 'tabs-field';
+export { TabsProvider };
+const TabsField = (props)=>{
+    const { name, CustomDescription, className, descriptionProps, forceRender = false, path: pathFromProps, readOnly: readOnlyFromProps, tabs = [] } = props;
+    const { indexPath, path: pathFromContext, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps();
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    const path = pathFromContext || pathFromProps || name;
+    const { getPreference, setPreference } = usePreferences();
+    const { preferencesKey } = useDocumentInfo();
+    const { i18n } = useTranslation();
+    const { isWithinCollapsible } = useCollapsible();
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const tabsPrefKey = `tabs-${indexPath}`;
+    useEffect(()=>{
+        if (preferencesKey) {
+            const getInitialPref = async ()=>{
+                const existingPreferences = await getPreference(preferencesKey);
+                const initialIndex = path ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex;
+                setActiveTabIndex(initialIndex || 0);
+            };
+            void getInitialPref();
+        }
+    }, [
+        path,
+        getPreference,
+        preferencesKey,
+        tabsPrefKey
+    ]);
+    const handleTabChange = useCallback(async (incomingTabIndex)=>{
+        setActiveTabIndex(incomingTabIndex);
+        const existingPreferences = await getPreference(preferencesKey);
+        if (preferencesKey) {
+            void setPreference(preferencesKey, {
+                ...existingPreferences,
+                ...path ? {
+                    fields: {
+                        ...existingPreferences?.fields || {},
+                        [path]: {
+                            ...existingPreferences?.fields?.[path],
+                            tabIndex: incomingTabIndex
+                        }
+                    }
+                } : {
+                    fields: {
+                        ...existingPreferences?.fields,
+                        [tabsPrefKey]: {
+                            ...existingPreferences?.fields?.[tabsPrefKey],
+                            tabIndex: incomingTabIndex
+                        }
+                    }
+                }
+            });
+        }
+    }, [
+        preferencesKey,
+        getPreference,
+        setPreference,
+        path,
+        tabsPrefKey
+    ]);
+    const activeTabConfig = tabs[activeTabIndex];
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            className,
+            baseClass,
+            isWithinCollapsible && `${baseClass}--within-collapsible`
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ React.createElement(TabsProvider, null, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__tabs-wrap`
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__tabs`
+    }, tabs.map((tab, tabIndex)=>{
+        return /*#__PURE__*/ React.createElement(TabComponent, {
+            isActive: activeTabIndex === tabIndex,
+            key: tabIndex,
+            parentPath: path,
+            setIsActive: ()=>handleTabChange(tabIndex),
+            tab: tab
+        });
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__content-wrap`
+    }, activeTabConfig && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: [
+            `${baseClass}__tab`,
+            activeTabConfig.label && `${baseClass}__tabConfigLabel-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`
+        ].filter(Boolean).join(' ')
+    }, CustomDescription ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}), /*#__PURE__*/ React.createElement(RenderFields, {
+        fieldMap: activeTabConfig.fieldMap,
+        forceRender: forceRender,
+        key: activeTabConfig.label ? getTranslation(activeTabConfig.label, i18n) : activeTabConfig['name'],
+        margins: "small",
+        path: `${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`,
+        permissions: 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields ? permissions?.fields?.[activeTabConfig.name]?.fields : permissions?.fields,
+        readOnly: readOnly,
+        schemaPath: `${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`
+    }))))));
+};
+export const Tabs = withCondition(TabsField);
+
+//# sourceMappingURL=index.js.map