@payloadcms/ui 3.0.0-alpha.8 → 3.0.0-beta.0

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;AAoJD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}

package/dist/fields/Tabs/index.js

@@ -0,0 +1,112 @@
+'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(()=>{
+        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);
+        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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n  forceRender?: boolean\n  name?: string\n  path?: string\n  permissions: FieldPermissions\n  tabs?: MappedTab[]\n  width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    className,\n    descriptionProps,\n    forceRender = false,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    tabs = [],\n  } = props\n\n  const {\n    indexPath,\n    path: pathFromContext,\n    permissions,\n    readOnly: readOnlyFromContext,\n    schemaPath,\n  } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n  const path = pathFromContext || pathFromProps || name\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n  const tabsPrefKey = `tabs-${indexPath}`\n\n  useEffect(() => {\n    const getInitialPref = async () => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n      const initialIndex = path\n        ? existingPreferences?.fields?.[path]?.tabIndex\n        : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n      setActiveTabIndex(initialIndex || 0)\n    }\n    void getInitialPref()\n  }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n  const handleTabChange = useCallback(\n    async (incomingTabIndex: number) => {\n      setActiveTabIndex(incomingTabIndex)\n\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      void setPreference(preferencesKey, {\n        ...existingPreferences,\n        ...(path\n          ? {\n              fields: {\n                ...(existingPreferences?.fields || {}),\n                [path]: {\n                  ...existingPreferences?.fields?.[path],\n                  tabIndex: incomingTabIndex,\n                },\n              },\n            }\n          : {\n              fields: {\n                ...existingPreferences?.fields,\n                [tabsPrefKey]: {\n                  ...existingPreferences?.fields?.[tabsPrefKey],\n                  tabIndex: incomingTabIndex,\n                },\n              },\n            }),\n      })\n    },\n    [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n  )\n\n  const activeTabConfig = tabs[activeTabIndex]\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        className,\n        baseClass,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <TabsProvider>\n        <div className={`${baseClass}__tabs-wrap`}>\n          <div className={`${baseClass}__tabs`}>\n            {tabs.map((tab, tabIndex) => {\n              return (\n                <TabComponent\n                  isActive={activeTabIndex === tabIndex}\n                  key={tabIndex}\n                  parentPath={path}\n                  setIsActive={() => handleTabChange(tabIndex)}\n                  tab={tab}\n                />\n              )\n            })}\n          </div>\n        </div>\n        <div className={`${baseClass}__content-wrap`}>\n          {activeTabConfig && (\n            <React.Fragment>\n              <div\n                className={[\n                  `${baseClass}__tab`,\n                  activeTabConfig.label &&\n                    `${baseClass}__tabConfigLabel-${toKebabCase(\n                      getTranslation(activeTabConfig.label, i18n),\n                    )}`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {CustomDescription ? (\n                  CustomDescription\n                ) : (\n                  <FieldDescription {...(descriptionProps || {})} />\n                )}\n                <RenderFields\n                  fieldMap={activeTabConfig.fieldMap}\n                  forceRender={forceRender}\n                  key={\n                    activeTabConfig.label\n                      ? getTranslation(activeTabConfig.label, i18n)\n                      : activeTabConfig['name']\n                  }\n                  margins=\"small\"\n                  path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n                  permissions={\n                    'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n                      ? permissions?.fields?.[activeTabConfig.name]?.fields\n                      : permissions?.fields\n                  }\n                  readOnly={readOnly}\n                  schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n                />\n              </div>\n            </React.Fragment>\n          )}\n        </div>\n      </TabsProvider>\n    </div>\n  )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","readOnlyFromProps","tabs","indexPath","pathFromContext","permissions","readOnlyFromContext","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/fields/Tabs/index.scss

@@ -0,0 +1,61 @@
+@import '../../scss/styles.scss';
+
+.tabs-field {
+  margin-top: base(2);
+  margin-left: calc(var(--gutter-h) * -1);
+  margin-right: calc(var(--gutter-h) * -1);
+
+  &__content-wrap {
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+  }
+
+  &--within-collapsible {
+    margin: 0 calc(#{$baseline} * -1);
+
+    .tabs-field__content-wrap {
+      padding-left: $baseline;
+      padding-right: $baseline;
+    }
+
+    .tabs-field__tabs {
+      &:before,
+      &:after {
+        content: ' ';
+        display: block;
+        width: $baseline;
+      }
+    }
+  }
+
+  &__tabs-wrap {
+    overflow: auto;
+    margin-bottom: $baseline;
+  }
+
+  &__tabs {
+    border-bottom: 1px solid var(--theme-elevation-100);
+    display: inline-flex;
+    min-width: 100%;
+    vertical-align: bottom;
+
+    &:before,
+    &:after {
+      content: ' ';
+      display: block;
+      width: var(--gutter-h);
+      flex-shrink: 0;
+    }
+  }
+
+  &__description {
+    margin-bottom: calc(var(--base) / 2);
+  }
+
+  @include small-break {
+    &--within-collapsible {
+      margin-left: calc(var(--gutter-h) * -1);
+      margin-right: calc(var(--gutter-h) * -1);
+    }
+  }
+}