@payloadcms/ui 3.0.0-beta.67 → 3.0.0-beta.69

package/dist/elements/WhereBuilder/Condition/index.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/index.js';
 import { useDebounce } from '../../../hooks/useDebounce.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 import { ReactSelect } from '../../ReactSelect/index.js';
 import { DateField } from './Date/index.js';
@@ -22,6 +23,7 @@ const baseClass = 'condition';
 export const Condition = (props)=>{
     const { addCondition, andIndex, fieldName, fields, initialValue, operator, orIndex, removeCondition, updateCondition } = props;
     const [internalField, setInternalField] = useState(()=>fields.find((field)=>fieldName === field.value));
+    const { t } = useTranslation();
     const [internalOperatorOption, setInternalOperatorOption] = useState(operator);
     const [internalQueryValue, setInternalQueryValue] = useState(initialValue);
     const debouncedValue = useDebounce(internalQueryValue, 300);
@@ -55,8 +57,8 @@ export const Condition = (props)=>{
     let valueOptions;
     if (booleanSelect) {
         valueOptions = [
-            'true',
-            'false'
+            t('general:true'),
+            t('general:false')
         ];
     } else if (internalField?.props && 'options' in internalField.props) {
         valueOptions = internalField.props.options;

package/dist/elements/WhereBuilder/Condition/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FieldCondition } from '../types.js'\n\nexport type Props = {\n  addCondition: ({\n    andIndex,\n    fieldName,\n    orIndex,\n    relation,\n  }: {\n    andIndex: number\n    fieldName: string\n    orIndex: number\n    relation: 'and' | 'or'\n  }) => void\n  andIndex: number\n  fieldName: string\n  fields: FieldCondition[]\n  initialValue: string\n  operator: Operator\n  orIndex: number\n  removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  updateCondition: ({\n    andIndex,\n    fieldName,\n    operator,\n    orIndex,\n    value,\n  }: {\n    andIndex: number\n    fieldName: string\n    operator: string\n    orIndex: number\n    value: string\n  }) => void\n}\n\nimport type { Operator } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/index.js'\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport Text from './Text/index.js'\nimport './index.scss'\n\ntype ComponentType = 'Date' | 'Number' | 'Relationship' | 'Select' | 'Text'\nconst valueFields: Record<ComponentType, React.FC> = {\n  Date: DateField,\n  Number: NumberField,\n  Relationship: RelationshipField,\n  Select,\n  Text,\n}\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    fields,\n    initialValue,\n    operator,\n    orIndex,\n    removeCondition,\n    updateCondition,\n  } = props\n  const [internalField, setInternalField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n  const [internalOperatorOption, setInternalOperatorOption] = useState<Operator>(operator)\n  const [internalQueryValue, setInternalQueryValue] = useState<string>(initialValue)\n\n  const debouncedValue = useDebounce(internalQueryValue, 300)\n\n  useEffect(() => {\n    // This is to trigger changes when the debounced value changes\n    if (\n      (internalField?.value || typeof internalField?.value === 'number') &&\n      internalOperatorOption &&\n      ![null, undefined].includes(debouncedValue)\n    ) {\n      updateCondition({\n        andIndex,\n        fieldName: internalField.value,\n        operator: internalOperatorOption,\n        orIndex,\n        value: debouncedValue,\n      })\n    }\n  }, [\n    debouncedValue,\n    andIndex,\n    internalField?.value,\n    internalOperatorOption,\n    orIndex,\n    updateCondition,\n    operator,\n  ])\n\n  const booleanSelect =\n    ['exists'].includes(internalOperatorOption) || internalField?.props?.type === 'checkbox'\n  const ValueComponent = booleanSelect\n    ? Select\n    : valueFields[internalField?.component] || valueFields.Text\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = ['true', 'false']\n  } else if (internalField?.props && 'options' in internalField.props) {\n    valueOptions = internalField.props.options\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              isClearable={false}\n              onChange={(field: Option) => {\n                setInternalField(fields.find((f) => f.value === field.value))\n                setInternalOperatorOption(undefined)\n                setInternalQueryValue(undefined)\n              }}\n              options={fields}\n              value={fields.find((field) => internalField?.value === field.value) || fields[0]}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!internalField?.value && typeof internalField?.value !== 'number'}\n              isClearable={false}\n              onChange={(operator: Option<Operator>) => {\n                setInternalOperatorOption(operator.value)\n              }}\n              options={internalField?.operators}\n              value={\n                internalField?.operators.find(\n                  (operator) => internalOperatorOption === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderCustomClientComponent\n              CustomComponent={internalField?.props?.admin?.components?.Filter}\n              DefaultComponent={ValueComponent}\n              componentProps={{\n                ...internalField?.props,\n                disabled: !internalOperatorOption,\n                onChange: setInternalQueryValue,\n                operator: internalOperatorOption,\n                options: valueOptions,\n                relationTo:\n                  internalField?.props?.type === 'relationship' &&\n                  'cellComponentProps' in internalField.props &&\n                  typeof internalField.props.cellComponentProps === 'object' &&\n                  'relationTo' in internalField.props.cellComponentProps\n                    ? internalField.props.cellComponentProps?.relationTo\n                    : undefined,\n                value: internalQueryValue ?? '',\n              }}\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                fieldName: fields[0].value,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useState","RenderCustomClientComponent","useDebounce","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","valueFields","Date","Number","Relationship","baseClass","Condition","props","addCondition","andIndex","fieldName","fields","initialValue","operator","orIndex","removeCondition","updateCondition","internalField","setInternalField","find","field","value","internalOperatorOption","setInternalOperatorOption","internalQueryValue","setInternalQueryValue","debouncedValue","undefined","includes","booleanSelect","type","ValueComponent","component","valueOptions","options","div","className","isClearable","onChange","f","disabled","operators","CustomComponent","admin","components","Filter","DefaultComponent","componentProps","relationTo","cellComponentProps","buttonStyle","icon","iconStyle","onClick","round","relation"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FieldCondition } from '../types.js'\n\nexport type Props = {\n  addCondition: ({\n    andIndex,\n    fieldName,\n    orIndex,\n    relation,\n  }: {\n    andIndex: number\n    fieldName: string\n    orIndex: number\n    relation: 'and' | 'or'\n  }) => void\n  andIndex: number\n  fieldName: string\n  fields: FieldCondition[]\n  initialValue: string\n  operator: Operator\n  orIndex: number\n  removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  updateCondition: ({\n    andIndex,\n    fieldName,\n    operator,\n    orIndex,\n    value,\n  }: {\n    andIndex: number\n    fieldName: string\n    operator: string\n    orIndex: number\n    value: string\n  }) => void\n}\n\nimport type { Operator } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/index.js'\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport Text from './Text/index.js'\nimport './index.scss'\n\ntype ComponentType = 'Date' | 'Number' | 'Relationship' | 'Select' | 'Text'\nconst valueFields: Record<ComponentType, React.FC> = {\n  Date: DateField,\n  Number: NumberField,\n  Relationship: RelationshipField,\n  Select,\n  Text,\n}\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    fields,\n    initialValue,\n    operator,\n    orIndex,\n    removeCondition,\n    updateCondition,\n  } = props\n  const [internalField, setInternalField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n  const { t } = useTranslation()\n  const [internalOperatorOption, setInternalOperatorOption] = useState<Operator>(operator)\n  const [internalQueryValue, setInternalQueryValue] = useState<string>(initialValue)\n\n  const debouncedValue = useDebounce(internalQueryValue, 300)\n\n  useEffect(() => {\n    // This is to trigger changes when the debounced value changes\n    if (\n      (internalField?.value || typeof internalField?.value === 'number') &&\n      internalOperatorOption &&\n      ![null, undefined].includes(debouncedValue)\n    ) {\n      updateCondition({\n        andIndex,\n        fieldName: internalField.value,\n        operator: internalOperatorOption,\n        orIndex,\n        value: debouncedValue,\n      })\n    }\n  }, [\n    debouncedValue,\n    andIndex,\n    internalField?.value,\n    internalOperatorOption,\n    orIndex,\n    updateCondition,\n    operator,\n  ])\n\n  const booleanSelect =\n    ['exists'].includes(internalOperatorOption) || internalField?.props?.type === 'checkbox'\n  const ValueComponent = booleanSelect\n    ? Select\n    : valueFields[internalField?.component] || valueFields.Text\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = [t('general:true'), t('general:false')]\n  } else if (internalField?.props && 'options' in internalField.props) {\n    valueOptions = internalField.props.options\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              isClearable={false}\n              onChange={(field: Option) => {\n                setInternalField(fields.find((f) => f.value === field.value))\n                setInternalOperatorOption(undefined)\n                setInternalQueryValue(undefined)\n              }}\n              options={fields}\n              value={fields.find((field) => internalField?.value === field.value) || fields[0]}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!internalField?.value && typeof internalField?.value !== 'number'}\n              isClearable={false}\n              onChange={(operator: Option<Operator>) => {\n                setInternalOperatorOption(operator.value)\n              }}\n              options={internalField?.operators}\n              value={\n                internalField?.operators.find(\n                  (operator) => internalOperatorOption === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderCustomClientComponent\n              CustomComponent={internalField?.props?.admin?.components?.Filter}\n              DefaultComponent={ValueComponent}\n              componentProps={{\n                ...internalField?.props,\n                disabled: !internalOperatorOption,\n                onChange: setInternalQueryValue,\n                operator: internalOperatorOption,\n                options: valueOptions,\n                relationTo:\n                  internalField?.props?.type === 'relationship' &&\n                  'cellComponentProps' in internalField.props &&\n                  typeof internalField.props.cellComponentProps === 'object' &&\n                  'relationTo' in internalField.props.cellComponentProps\n                    ? internalField.props.cellComponentProps?.relationTo\n                    : undefined,\n                value: internalQueryValue ?? '',\n              }}\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                fieldName: fields[0].value,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useState","RenderCustomClientComponent","useDebounce","useTranslation","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","valueFields","Date","Number","Relationship","baseClass","Condition","props","addCondition","andIndex","fieldName","fields","initialValue","operator","orIndex","removeCondition","updateCondition","internalField","setInternalField","find","field","value","t","internalOperatorOption","setInternalOperatorOption","internalQueryValue","setInternalQueryValue","debouncedValue","undefined","includes","booleanSelect","type","ValueComponent","component","valueOptions","options","div","className","isClearable","onChange","f","disabled","operators","CustomComponent","admin","components","Filter","DefaultComponent","componentProps","relationTo","cellComponentProps","buttonStyle","icon","iconStyle","onClick","round","relation"],"mappings":"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"}

package/dist/elements/withMergedProps/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { deepMerge, isReactServerComponentOrFunction, serverProps } from 'payload/shared';
+import { isReactServerComponentOrFunction, serverProps } from 'payload/shared';
 import React from 'react';
 /**
  * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)
@@ -28,7 +28,7 @@ import React from 'react';
     }
     // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props
     const MergedPropsComponent = (passedProps)=>{
-        const mergedProps = deepMerge(passedProps, toMergeIntoProps);
+        const mergedProps = simpleMergeProps(passedProps, toMergeIntoProps);
         if (sanitizeServerOnlyProps) {
             serverProps.forEach((prop)=>{
                 delete mergedProps[prop];
@@ -40,5 +40,11 @@ import React from 'react';
     };
     return MergedPropsComponent;
 }
+function simpleMergeProps(props, toMerge) {
+    return {
+        ...props,
+        ...toMerge
+    };
+}
 
 //# sourceMappingURL=index.js.map

package/dist/elements/withMergedProps/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { deepMerge, isReactServerComponentOrFunction, serverProps } from 'payload/shared'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n *\n * @param Component - The original component to wrap.\n * @param sanitizeServerOnlyProps - If true, server-only props will be removed from the merged props. @default true if the component is not a server component, false otherwise.\n * @param toMergeIntoProps - The properties to merge into the passed props.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  sanitizeServerOnlyProps,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  sanitizeServerOnlyProps?: boolean\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  if (sanitizeServerOnlyProps === undefined) {\n    sanitizeServerOnlyProps = !isReactServerComponentOrFunction(Component)\n  }\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = deepMerge(passedProps, toMergeIntoProps)\n\n    if (sanitizeServerOnlyProps) {\n      serverProps.forEach((prop) => {\n        delete mergedProps[prop]\n      })\n    }\n\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n"],"names":["deepMerge","isReactServerComponentOrFunction","serverProps","React","withMergedProps","Component","sanitizeServerOnlyProps","toMergeIntoProps","undefined","MergedPropsComponent","passedProps","mergedProps","forEach","prop"],"mappings":";AAAA,SAASA,SAAS,EAAEC,gCAAgC,EAAEC,WAAW,QAAQ,iBAAgB;AACzF,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,uBAAuB,EACvBC,gBAAgB,EAKjB;IACC,IAAID,4BAA4BE,WAAW;QACzCF,0BAA0B,CAACL,iCAAiCI;IAC9D;IACA,sHAAsH;IACtH,MAAMI,uBAAsD,CAACC;QAC3D,MAAMC,cAAcX,UAAUU,aAAaH;QAE3C,IAAID,yBAAyB;YAC3BJ,YAAYU,OAAO,CAAC,CAACC;gBACnB,OAAOF,WAAW,CAACE,KAAK;YAC1B;QACF;QAEA,qBAAO,KAACR;YAAW,GAAGM,WAAW;;IACnC;IAEA,OAAOF;AACT"}
+{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { isReactServerComponentOrFunction, serverProps } from 'payload/shared'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n *\n * @param Component - The original component to wrap.\n * @param sanitizeServerOnlyProps - If true, server-only props will be removed from the merged props. @default true if the component is not a server component, false otherwise.\n * @param toMergeIntoProps - The properties to merge into the passed props.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  sanitizeServerOnlyProps,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  sanitizeServerOnlyProps?: boolean\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  if (sanitizeServerOnlyProps === undefined) {\n    sanitizeServerOnlyProps = !isReactServerComponentOrFunction(Component)\n  }\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = simpleMergeProps(passedProps, toMergeIntoProps) as CompleteReturnProps\n\n    if (sanitizeServerOnlyProps) {\n      serverProps.forEach((prop) => {\n        delete mergedProps[prop]\n      })\n    }\n\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n\nfunction simpleMergeProps(props, toMerge) {\n  return { ...props, ...toMerge }\n}\n"],"names":["isReactServerComponentOrFunction","serverProps","React","withMergedProps","Component","sanitizeServerOnlyProps","toMergeIntoProps","undefined","MergedPropsComponent","passedProps","mergedProps","simpleMergeProps","forEach","prop","props","toMerge"],"mappings":";AAAA,SAASA,gCAAgC,EAAEC,WAAW,QAAQ,iBAAgB;AAC9E,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,uBAAuB,EACvBC,gBAAgB,EAKjB;IACC,IAAID,4BAA4BE,WAAW;QACzCF,0BAA0B,CAACL,iCAAiCI;IAC9D;IACA,sHAAsH;IACtH,MAAMI,uBAAsD,CAACC;QAC3D,MAAMC,cAAcC,iBAAiBF,aAAaH;QAElD,IAAID,yBAAyB;YAC3BJ,YAAYW,OAAO,CAAC,CAACC;gBACnB,OAAOH,WAAW,CAACG,KAAK;YAC1B;QACF;QAEA,qBAAO,KAACT;YAAW,GAAGM,WAAW;;IACnC;IAEA,OAAOF;AACT;AAEA,SAASG,iBAAiBG,KAAK,EAAEC,OAAO;IACtC,OAAO;QAAE,GAAGD,KAAK;QAAE,GAAGC,OAAO;IAAC;AAChC"}