@ruya.sa/ui 3.71.3

package/dist/fields/JSON/index.js

@@ -0,0 +1,163 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { defaultOptions } from '../../elements/CodeEditor/constants.js';
+import { CodeEditor } from '../../elements/CodeEditor/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
+import { fieldBaseClass } from '../shared/index.js';
+import './index.scss';
+const baseClass = 'json-field';
+const JSONFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        description,
+        editorOptions,
+        maxHeight
+      } = {},
+      jsonSchema,
+      label,
+      localized,
+      required
+    },
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    insertSpaces = defaultOptions.insertSpaces,
+    tabSize = defaultOptions.tabSize
+  } = editorOptions || {};
+  const formatJSON = useCallback(value => {
+    if (value === undefined) {
+      return undefined;
+    }
+    if (value === null) {
+      return '';
+    }
+    return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\t');
+  }, [tabSize, insertSpaces]);
+  const [jsonError, setJsonError] = useState();
+  const inputChangeFromRef = React.useRef('formState');
+  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState(Date.now());
+  const memoizedValidate = useCallback((value_0, options) => {
+    if (typeof validate === 'function') {
+      return validate(value_0, {
+        ...options,
+        jsonError,
+        required
+      });
+    }
+  }, [validate, required, jsonError]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    initialValue,
+    path,
+    setValue,
+    showError,
+    value: value_1
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const stringValueRef = React.useRef(formatJSON(value_1 ?? initialValue));
+  const handleMount = useCallback((editor, monaco) => {
+    if (!jsonSchema) {
+      return;
+    }
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      enableSchemaRequest: true,
+      schemas: [...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []), jsonSchema],
+      validate: true
+    });
+    const uri = jsonSchema.uri;
+    const newUri = uri.includes('?') ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}` : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`;
+    editor.setModel(monaco.editor.createModel(formatJSON(value_1) || '', 'json', monaco.Uri.parse(newUri)));
+  }, [jsonSchema, formatJSON, value_1]);
+  const handleChange = useCallback(val => {
+    if (readOnly || disabled) {
+      return;
+    }
+    inputChangeFromRef.current = 'internalEditor';
+    try {
+      setValue(val ? JSON.parse(val) : null);
+      stringValueRef.current = val;
+      setJsonError(undefined);
+    } catch (e) {
+      setValue(val ? val : null);
+      stringValueRef.current = val;
+      setJsonError(e);
+    }
+  }, [readOnly, disabled, setValue]);
+  useEffect(() => {
+    if (inputChangeFromRef.current === 'formState') {
+      const newStringValue = formatJSON(value_1 ?? initialValue);
+      if (newStringValue !== stringValueRef.current) {
+        stringValueRef.current = newStringValue;
+        setRecalculatedHeightAt(Date.now());
+      }
+    }
+    inputChangeFromRef.current = 'formState';
+  }, [initialValue, path, formatJSON, value_1]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          message: jsonError,
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, /*#__PURE__*/_jsx(CodeEditor, {
+        defaultLanguage: "json",
+        maxHeight: maxHeight,
+        onChange: handleChange,
+        onMount: handleMount,
+        options: editorOptions,
+        readOnly: readOnly || disabled,
+        recalculatedHeightAt: recalculatedHeightAt,
+        value: stringValueRef.current,
+        wrapperProps: {
+          id: `field-${path?.replace(/\./g, '__')}`
+        }
+      }), AfterInput]
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
+};
+export const JSONField = withCondition(JSONFieldComponent);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","v4","uuidv4","defaultOptions","CodeEditor","RenderCustomComponent","useField","withCondition","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","baseClass","JSONFieldComponent","props","field","admin","className","description","editorOptions","maxHeight","jsonSchema","label","localized","required","path","pathFromProps","readOnly","validate","insertSpaces","tabSize","formatJSON","value","undefined","JSON","stringify","jsonError","setJsonError","inputChangeFromRef","useRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","handleMount","editor","monaco","languages","json","jsonDefaults","setDiagnosticsOptions","enableSchemaRequest","schemas","diagnosticsOptions","uri","newUri","includes","crypto","randomUUID","setModel","createModel","Uri","parse","handleChange","val","current","e","newStringValue","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","message","defaultLanguage","onChange","onMount","wrapperProps","id","replace","JSONField"],"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, JsonObject } from '@ruya.sa/payload'\n\nimport { type OnMount } from '@monaco-editor/react'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { defaultOptions } from '../../elements/CodeEditor/constants.js'\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'json-field'\n\nconst JSONFieldComponent: JSONFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, editorOptions, maxHeight } = {},\n      jsonSchema,\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } =\n    editorOptions || {}\n\n  const formatJSON = useCallback(\n    (value: JsonObject | undefined): string | undefined => {\n      if (value === undefined) {\n        return undefined\n      }\n      if (value === null) {\n        return ''\n      }\n      return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\\t')\n    },\n    [tabSize, insertSpaces],\n  )\n\n  const [jsonError, setJsonError] = useState<string>()\n  const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<JsonObject>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const stringValueRef = React.useRef<string>(formatJSON(value ?? initialValue))\n\n  const handleMount = useCallback<OnMount>(\n    (editor, monaco) => {\n      if (!jsonSchema) {\n        return\n      }\n\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [\n          ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []),\n          jsonSchema,\n        ],\n        validate: true,\n      })\n\n      const uri = jsonSchema.uri\n      const newUri = uri.includes('?')\n        ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n        : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n\n      editor.setModel(\n        monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)),\n      )\n    },\n    [jsonSchema, formatJSON, value],\n  )\n\n  const handleChange = useCallback(\n    (val: string) => {\n      if (readOnly || disabled) {\n        return\n      }\n      inputChangeFromRef.current = 'internalEditor'\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        stringValueRef.current = val\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        stringValueRef.current = val\n        setJsonError(e)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  useEffect(() => {\n    if (inputChangeFromRef.current === 'formState') {\n      const newStringValue = formatJSON(value ?? initialValue)\n      if (newStringValue !== stringValueRef.current) {\n        stringValueRef.current = newStringValue\n        setRecalculatedHeightAt(Date.now())\n      }\n    }\n\n    inputChangeFromRef.current = 'formState'\n  }, [initialValue, path, formatJSON, value])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError message={jsonError} path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          maxHeight={maxHeight}\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={readOnly || disabled}\n          recalculatedHeightAt={recalculatedHeightAt}\n          value={stringValueRef.current}\n          wrapperProps={{\n            id: `field-${path?.replace(/\\./g, '__')}`,\n          }}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JSONField = withCondition(JSONFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/JSON/index.scss

@@ -0,0 +1,18 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .json-field {
+    position: relative;
+
+    &.error {
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
+
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { JoinFieldClient } from '@ruya.sa/payload';
+import React from 'react';
+export declare const JoinField: React.FC<{
+    readonly path: string;
+} & {
+    readonly field: Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>;
+} & Omit<import("@ruya.sa/payload").ClientComponentProps, "customComponents" | "field">>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAuOtC,eAAO,MAAM,SAAS;;;;wFAAoC,CAAA"}

package/dist/fields/Join/index.js

@@ -0,0 +1,217 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ObjectIdImport from 'bson-objectid';
+import { fieldAffectsData, flattenTopLevelFields } from '@ruya.sa/payload/shared';
+import React, { useMemo } from 'react';
+import { RelationshipTable } from '../../elements/RelationshipTable/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { fieldBaseClass } from '../index.js';
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport;
+/**
+ * Recursively builds the default data for joined collection
+ */
+const getInitialDrawerData = ({
+  collectionSlug,
+  config,
+  docID,
+  fields,
+  segments
+}) => {
+  const flattenedFields = flattenTopLevelFields(fields, {
+    keepPresentationalFields: true
+  });
+  const path = segments[0];
+  const field = flattenedFields.find(field => field.name === path);
+  if (!field) {
+    return null;
+  }
+  if (field.type === 'relationship' || field.type === 'upload') {
+    let value = docID;
+    if (Array.isArray(field.relationTo)) {
+      value = {
+        relationTo: collectionSlug,
+        value: docID
+      };
+    }
+    return {
+      [field.name]: field.hasMany ? [value] : value
+    };
+  }
+  const nextSegments = segments.slice(1, segments.length);
+  if (field.type === 'tab' || field.type === 'group' && fieldAffectsData(field)) {
+    return {
+      [field.name]: getInitialDrawerData({
+        collectionSlug,
+        config,
+        docID,
+        fields: field.fields,
+        segments: nextSegments
+      })
+    };
+  }
+  if (field.type === 'array') {
+    const initialData = getInitialDrawerData({
+      collectionSlug,
+      config,
+      docID,
+      fields: field.fields,
+      segments: nextSegments
+    });
+    initialData.id = ObjectId().toHexString();
+    return {
+      [field.name]: [initialData]
+    };
+  }
+  if (field.type === 'blocks') {
+    for (const _block of field.blockReferences ?? field.blocks) {
+      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block;
+      const blockInitialData = getInitialDrawerData({
+        collectionSlug,
+        config,
+        docID,
+        fields: block.fields,
+        segments: nextSegments
+      });
+      if (blockInitialData) {
+        blockInitialData.id = ObjectId().toHexString();
+        blockInitialData.blockType = block.slug;
+        return {
+          [field.name]: [blockInitialData]
+        };
+      }
+    }
+  }
+};
+const JoinFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        allowCreate,
+        description
+      },
+      collection,
+      label,
+      localized,
+      on,
+      required
+    },
+    path: pathFromProps
+  } = props;
+  const {
+    id: docID,
+    docConfig
+  } = useDocumentInfo();
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    path,
+    showError,
+    value
+  } = useField({
+    potentiallyStalePath: pathFromProps
+  });
+  const filterOptions = useMemo(() => {
+    if (!docID) {
+      return null;
+    }
+    let value_0 = docID;
+    if (Array.isArray(field.targetField.relationTo)) {
+      value_0 = {
+        relationTo: docConfig.slug,
+        value: value_0
+      };
+    }
+    const where = Array.isArray(collection) ? {} : {
+      [on]: {
+        equals: value_0
+      }
+    };
+    if (field.where) {
+      return {
+        and: [where, field.where]
+      };
+    }
+    return where;
+  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug]);
+  const initialDrawerData = useMemo(() => {
+    const relatedCollection = getEntityConfig({
+      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection
+    });
+    return getInitialDrawerData({
+      collectionSlug: docConfig?.slug,
+      config,
+      docID,
+      fields: relatedCollection?.fields,
+      segments: field.on.split('.')
+    });
+  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config]);
+  if (!docConfig) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' '),
+    id: `field-${path?.replace(/\./g, '__')}`,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: /*#__PURE__*/_jsx(FieldError, {
+        path: path,
+        showError: showError
+      })
+    }), /*#__PURE__*/_jsx(RelationshipTable, {
+      AfterInput: AfterInput,
+      allowCreate: typeof docID !== 'undefined' && allowCreate,
+      BeforeInput: BeforeInput,
+      disableTable: filterOptions === null,
+      field: field,
+      fieldPath: path,
+      filterOptions: filterOptions,
+      initialData: docID && value ? value : {
+        docs: []
+      },
+      initialDrawerData: initialDrawerData,
+      Label: /*#__PURE__*/_jsx("h4", {
+        style: {
+          margin: 0
+        },
+        children: Label || /*#__PURE__*/_jsx(FieldLabel, {
+          label: label,
+          localized: localized,
+          path: path,
+          required: required
+        })
+      }),
+      parent: Array.isArray(collection) ? {
+        id: docID,
+        collectionSlug: docConfig.slug,
+        joinPath: path
+      } : undefined,
+      relationTo: collection
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
+};
+export const JoinField = withCondition(JoinFieldComponent);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ObjectIdImport","fieldAffectsData","flattenTopLevelFields","React","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","keepPresentationalFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","pathFromProps","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","potentiallyStalePath","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","_jsxs","className","filter","Boolean","join","replace","_jsx","CustomComponent","Fallback","disableTable","fieldPath","docs","style","margin","parent","joinPath","undefined","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from '@ruya.sa/payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { fieldAffectsData, flattenTopLevelFields } from '@ruya.sa/payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields, {\n    keepPresentationalFields: true,\n  })\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || (field.type === 'group' && fieldAffectsData(field))) {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { allowCreate, description },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path: pathFromProps,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    path,\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection?.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        fieldPath={path}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        parent={\n          Array.isArray(collection)\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.scss';
+export declare const NumberField: React.FC<{
+    readonly onChange?: (e: number) => void;
+    readonly path: string;
+    readonly validate?: import("@ruya.sa/payload").NumberFieldValidation;
+} & {
+    readonly field: Omit<import("@ruya.sa/payload").NumberFieldClient, "type"> & Partial<Pick<import("@ruya.sa/payload").NumberFieldClient, "type">>;
+} & Omit<import("@ruya.sa/payload").ClientComponentProps, "customComponents" | "field">>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAaxE,OAAO,cAAc,CAAA;AAkMrB,eAAO,MAAM,WAAW;;;;;;wFAAsC,CAAA"}

package/dist/fields/Number/index.js

@@ -0,0 +1,189 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@ruya.sa/translations';
+import { isNumber } from '@ruya.sa/payload/shared';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
+import './index.scss';
+import { fieldBaseClass } from '../shared/index.js';
+const NumberFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        description,
+        placeholder: placeholderFromProps,
+        step = 1
+      } = {},
+      hasMany = false,
+      label,
+      localized,
+      max = Infinity,
+      maxRows = Infinity,
+      min = -Infinity,
+      required
+    },
+    onChange: onChangeFromProps,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
+        max,
+        min,
+        required
+      });
+    }
+  }, [validate, min, max, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const handleChange = useCallback(e => {
+    const val = parseFloat(e.target.value);
+    let newVal = val;
+    if (Number.isNaN(val)) {
+      newVal = null;
+    }
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(newVal);
+    }
+    setValue(newVal);
+  }, [onChangeFromProps, setValue]);
+  const [valueToRender, setValueToRender] = useState([]) // Only for hasMany
+  ;
+  const handleHasManyChange = useCallback(selectedOption => {
+    if (!(readOnly || disabled)) {
+      let newValue;
+      if (!selectedOption) {
+        newValue = [];
+      } else if (Array.isArray(selectedOption)) {
+        newValue = selectedOption.map(option => Number(option.value?.value || option.value));
+      } else {
+        newValue = [Number(selectedOption.value?.value || selectedOption.value)];
+      }
+      setValue(newValue);
+    }
+  }, [readOnly, disabled, setValue]);
+  // useEffect update valueToRender:
+  useEffect(() => {
+    if (hasMany && Array.isArray(value_0)) {
+      setValueToRender(value_0.map((val_0, index) => {
+        return {
+          id: `${val_0}${index}`,
+          label: `${val_0}`,
+          value: {
+            toString: () => `${val_0}${index}`,
+            value: val_0?.value || val_0
+          }
+        };
+      }));
+    }
+  }, [value_0, hasMany]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const placeholder = getTranslation(placeholderFromProps, i18n);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, 'number', className, showError && 'error', (readOnly || disabled) && 'read-only', hasMany && 'has-many'].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, hasMany ? /*#__PURE__*/_jsx(ReactSelect, {
+        className: `field-${path.replace(/\./g, '__')}`,
+        disabled: readOnly || disabled,
+        filterOption: (_, rawInput) => {
+          const isOverHasMany = Array.isArray(value_0) && value_0.length >= maxRows;
+          return isNumber(rawInput) && !isOverHasMany;
+        },
+        isClearable: true,
+        isCreatable: true,
+        isMulti: true,
+        isSortable: true,
+        noOptionsMessage: () => {
+          const isOverHasMany_0 = Array.isArray(value_0) && value_0.length >= maxRows;
+          if (isOverHasMany_0) {
+            return t('validation:limitReached', {
+              max: maxRows,
+              value: value_0.length + 1
+            });
+          }
+          return null;
+        },
+        // numberOnly
+        onChange: handleHasManyChange,
+        options: [],
+        placeholder: placeholder,
+        showError: showError,
+        value: valueToRender
+      }) : /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("input", {
+          disabled: readOnly || disabled,
+          id: `field-${path.replace(/\./g, '__')}`,
+          max: max,
+          min: min,
+          name: path,
+          onChange: handleChange,
+          onWheel: e_0 => {
+            // @ts-expect-error
+            e_0.target.blur();
+          },
+          placeholder: placeholder,
+          step: step,
+          type: "number",
+          value: typeof value_0 === 'number' ? value_0 : ''
+        })
+      }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
+      })]
+    })]
+  });
+};
+export const NumberField = withCondition(NumberFieldComponent);
+//# sourceMappingURL=index.js.map