@payloadcms/ui 4.0.0-internal.1f9ae9a → 4.0.0-internal.2fddfc0

package/dist/elements/UserMenu/index.js

@@ -0,0 +1,204 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useWindowInfo } from '@faceless-ui/window-info';
+import { formatAdminURL } from 'payload/shared';
+import React, { useEffect, useState } from 'react';
+import { Account } from '../../graphics/Account/index.js';
+import { LogOutIcon } from '../../icons/LogOut/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { MenuSeparator } from '../MenuSeparator/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
+import { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js';
+import { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js';
+import { SubMenuHeader } from './SubMenuHeader/index.js';
+import { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js';
+import './index.css';
+const baseClass = 'user-menu';
+export const UserMenu = t0 => {
+  const $ = _c(7);
+  const {
+    CustomAvatar,
+    settingsItemGroups: t1
+  } = t0;
+  const settingsItemGroups = t1 === undefined ? [] : t1;
+  const {
+    user
+  } = useAuth();
+  const {
+    languageOptions,
+    t
+  } = useTranslation();
+  const {
+    config: t2,
+    getEntityConfig
+  } = useConfig();
+  const {
+    admin: t3,
+    routes: t4
+  } = t2;
+  const {
+    routes: t5,
+    theme: adminTheme,
+    user: userSlug
+  } = t3;
+  const {
+    account: accountRoute,
+    logout: logoutRoute
+  } = t5;
+  const {
+    admin: adminRoute
+  } = t4;
+  const {
+    breakpoints: t6
+  } = useWindowInfo();
+  const {
+    s: smallBreak
+  } = t6;
+  const isMobile = Boolean(smallBreak);
+  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState(null);
+  let t7;
+  let t8;
+  if ($[0] !== isMobile) {
+    t7 = () => {
+      if (!isMobile) {
+        setActiveMobileSubmenu(null);
+      }
+    };
+    t8 = [isMobile];
+    $[0] = isMobile;
+    $[1] = t7;
+    $[2] = t8;
+  } else {
+    t7 = $[1];
+    t8 = $[2];
+  }
+  useEffect(t7, t8);
+  const userCollectionConfig = getEntityConfig({
+    collectionSlug: userSlug
+  });
+  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? "email";
+  const titleValue = useAsTitle !== "email" && user ? user[useAsTitle] : undefined;
+  const titleString = typeof titleValue === "string" ? titleValue : undefined;
+  const identifier = user?.username ?? user?.email ?? "";
+  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1;
+  const showThemeMenu = adminTheme === "all";
+  const hasSettingsItems = settingsItemGroups.some(_temp);
+  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages;
+  const logoutHref = formatAdminURL({
+    adminRoute,
+    path: logoutRoute
+  });
+  const accountHref = formatAdminURL({
+    adminRoute,
+    path: accountRoute
+  });
+  let t9;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => setActiveMobileSubmenu(null);
+    $[3] = t9;
+  } else {
+    t9 = $[3];
+  }
+  let t10;
+  if ($[4] !== CustomAvatar || $[5] !== t) {
+    t10 = t11 => {
+      const {
+        active,
+        ...ariaProps
+      } = t11;
+      return _jsx("button", {
+        ...ariaProps,
+        "aria-label": t("authentication:account"),
+        className: [`${baseClass}__trigger`, active && `${baseClass}__trigger--active`].filter(Boolean).join(" "),
+        type: "button",
+        children: _jsx(RenderCustomComponent, {
+          CustomComponent: CustomAvatar,
+          Fallback: _jsx(Account, {})
+        })
+      });
+    };
+    $[4] = CustomAvatar;
+    $[5] = t;
+    $[6] = t10;
+  } else {
+    t10 = $[6];
+  }
+  return _jsx(Popup, {
+    caret: false,
+    className: baseClass,
+    horizontalAlign: "right",
+    onToggleClose: t9,
+    renderButton: t10,
+    size: "large",
+    theme: "dark",
+    verticalAlign: "bottom",
+    children: isMobile && activeMobileSubmenu ? _jsxs(_Fragment, {
+      children: [activeMobileSubmenu === "theme" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:theme")
+        }), _jsx(ThemeMenuContent, {})]
+      }), activeMobileSubmenu === "language" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:language")
+        }), _jsx(LanguageMenuContent, {})]
+      }), activeMobileSubmenu === "settings" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:settings")
+        }), _jsx(SettingsMenuContent, {
+          groups: settingsItemGroups
+        })]
+      })]
+    }) : _jsxs(_Fragment, {
+      children: [_jsxs("a", {
+        className: `${baseClass}__profile`,
+        href: accountHref,
+        children: [_jsx("div", {
+          className: `${baseClass}__avatar`,
+          children: _jsx(RenderCustomComponent, {
+            CustomComponent: CustomAvatar,
+            Fallback: _jsx(Account, {})
+          })
+        }), _jsxs("div", {
+          children: [titleString && _jsx("p", {
+            className: `${baseClass}__name`,
+            children: titleString
+          }), identifier && _jsx("p", {
+            className: `${baseClass}__identifier`,
+            children: identifier
+          })]
+        })]
+      }), showPreferencesGroup && _jsxs(PopupList.ButtonGroup, {
+        children: [showThemeMenu && _jsx(ThemeMenu, {
+          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("theme") : undefined
+        }), hasMultipleLanguages && _jsx(LanguageMenu, {
+          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("language") : undefined
+        })]
+      }), _jsx(MenuSeparator, {}), hasSettingsItems && _jsxs(_Fragment, {
+        children: [_jsx(PopupList.ButtonGroup, {
+          children: _jsx(SettingsMenu, {
+            groups: settingsItemGroups,
+            onMobileOpen: isMobile ? () => setActiveMobileSubmenu("settings") : undefined
+          })
+        }), _jsx(MenuSeparator, {})]
+      }), _jsx(PopupList.MenuItem, {
+        children: _jsx(PopupList.Button, {
+          href: logoutHref,
+          icon: _jsx(LogOutIcon, {}),
+          children: t("authentication:logOut")
+        })
+      })]
+    })
+  });
+};
+function _temp(group) {
+  return group.items.length > 0;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","formatAdminURL","React","useEffect","useState","Account","LogOutIcon","useAuth","useConfig","useTranslation","MenuSeparator","Popup","PopupList","RenderCustomComponent","LanguageMenu","LanguageMenuContent","SettingsMenu","SettingsMenuContent","SubMenuHeader","ThemeMenu","ThemeMenuContent","baseClass","UserMenu","t0","$","CustomAvatar","settingsItemGroups","t1","undefined","user","languageOptions","t","config","t2","getEntityConfig","admin","t3","routes","t4","t5","theme","adminTheme","userSlug","account","accountRoute","logout","logoutRoute","adminRoute","breakpoints","t6","s","smallBreak","isMobile","Boolean","activeMobileSubmenu","setActiveMobileSubmenu","t7","t8","userCollectionConfig","collectionSlug","useAsTitle","titleValue","titleString","identifier","username","email","hasMultipleLanguages","Array","isArray","length","showThemeMenu","hasSettingsItems","some","_temp","showPreferencesGroup","logoutHref","path","accountHref","t9","Symbol","for","t10","t11","active","ariaProps","_jsx","className","filter","join","type","children","CustomComponent","Fallback","caret","horizontalAlign","onToggleClose","renderButton","verticalAlign","_jsxs","_Fragment","onBack","title","groups","href","ButtonGroup","onMobileOpen","MenuItem","Button","icon","group","items"],"sources":["../../../src/elements/UserMenu/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport type { UserMenuSettingsGroup } from './SettingsMenu/index.js'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MenuSeparator } from '../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js'\nimport { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js'\nimport { SubMenuHeader } from './SubMenuHeader/index.js'\nimport { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'user-menu'\n\ntype UserMenuProps = {\n  CustomAvatar?: React.ReactNode\n  settingsItemGroups?: UserMenuSettingsGroup[]\n}\n\nexport const UserMenu: React.FC<UserMenuProps> = ({ CustomAvatar, settingsItemGroups = [] }) => {\n  const { user } = useAuth()\n  const { languageOptions, t } = useTranslation()\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute, logout: logoutRoute },\n        theme: adminTheme,\n        user: userSlug,\n      },\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const isMobile = Boolean(smallBreak)\n\n  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState<\n    'language' | 'settings' | 'theme' | null\n  >(null)\n\n  useEffect(() => {\n    if (!isMobile) {\n      setActiveMobileSubmenu(null)\n    }\n  }, [isMobile])\n\n  const userCollectionConfig = getEntityConfig({ collectionSlug: userSlug })\n  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? 'email'\n  const titleValue =\n    useAsTitle !== 'email' && user ? (user as Record<string, unknown>)[useAsTitle] : undefined\n  const titleString = typeof titleValue === 'string' ? titleValue : undefined\n\n  const identifier = user?.username ?? user?.email ?? ''\n  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1\n  const showThemeMenu = adminTheme === 'all'\n  const hasSettingsItems = settingsItemGroups.some((group) => group.items.length > 0)\n  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages\n\n  const logoutHref = formatAdminURL({ adminRoute, path: logoutRoute })\n  const accountHref = formatAdminURL({ adminRoute, path: accountRoute })\n\n  return (\n    <Popup\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      onToggleClose={() => setActiveMobileSubmenu(null)}\n      renderButton={({ active, ...ariaProps }) => (\n        <button\n          {...ariaProps}\n          aria-label={t('authentication:account')}\n          className={[`${baseClass}__trigger`, active && `${baseClass}__trigger--active`]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"button\"\n        >\n          <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n        </button>\n      )}\n      size=\"large\"\n      theme=\"dark\"\n      verticalAlign=\"bottom\"\n    >\n      {isMobile && activeMobileSubmenu ? (\n        // Mobile submenu panel\n        <>\n          {activeMobileSubmenu === 'theme' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:theme')}\n              />\n              <ThemeMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'language' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:language')}\n              />\n              <LanguageMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'settings' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:settings')}\n              />\n              <SettingsMenuContent groups={settingsItemGroups} />\n            </>\n          )}\n        </>\n      ) : (\n        // Normal menu content (desktop always; mobile when no active submenu)\n        <>\n          {/* Profile header */}\n          <a className={`${baseClass}__profile`} href={accountHref}>\n            <div className={`${baseClass}__avatar`}>\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </div>\n            <div>\n              {titleString && <p className={`${baseClass}__name`}>{titleString}</p>}\n              {identifier && <p className={`${baseClass}__identifier`}>{identifier}</p>}\n            </div>\n          </a>\n\n          {/* Preferences group: Theme + Language */}\n          {showPreferencesGroup && (\n            <PopupList.ButtonGroup>\n              {showThemeMenu && (\n                <ThemeMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('theme') : undefined}\n                />\n              )}\n              {hasMultipleLanguages && (\n                <LanguageMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('language') : undefined}\n                />\n              )}\n            </PopupList.ButtonGroup>\n          )}\n\n          <MenuSeparator />\n\n          {/* Settings group */}\n          {hasSettingsItems && (\n            <>\n              <PopupList.ButtonGroup>\n                <SettingsMenu\n                  groups={settingsItemGroups}\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('settings') : undefined}\n                />\n              </PopupList.ButtonGroup>\n              <MenuSeparator />\n            </>\n          )}\n\n          {/* Account actions */}\n          <PopupList.MenuItem>\n            <PopupList.Button href={logoutHref} icon={<LogOutIcon />}>\n              {t('authentication:logOut')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        </>\n      )}\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Number/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { NumberFilterProps as Props } from './types.js';
-import './index.scss';
 export declare const NumberFilter: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/WhereBuilder/Condition/Number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAI5D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+ExC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAK5D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFxC,CAAA"}

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

@@ -6,10 +6,8 @@ import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
-const baseClass = 'condition-value-number';
 export const NumberFilter = props => {
-  const $ = _c(20);
+  const $ = _c(10);
   const {
     disabled,
     field: t0,
@@ -19,12 +17,14 @@ export const NumberFilter = props => {
   } = props;
   const {
     admin,
-    hasMany
+    hasMany,
+    label
   } = t0;
   const {
     i18n,
     t
   } = useTranslation();
+  const ariaLabel = label ? getTranslation(label, i18n) : t("general:enterAValue");
   let t1;
   if ($[0] !== hasMany || $[1] !== operator) {
     t1 = ["in", "not_in"].includes(operator) || hasMany;
@@ -86,42 +86,28 @@ export const NumberFilter = props => {
     t5 = $[9];
   }
   React.useEffect(t4, t5);
-  let t6;
-  if ($[10] !== admin?.placeholder || $[11] !== disabled || $[12] !== i18n || $[13] !== isMulti || $[14] !== onChange || $[15] !== onSelect || $[16] !== t || $[17] !== value || $[18] !== valueToRender) {
-    const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
-    t6 = isMulti ? _jsx(ReactSelect, {
-      disabled,
-      isClearable: true,
-      isCreatable: true,
-      isMulti,
-      isSortable: true,
-      numberOnly: true,
-      onChange: onSelect,
-      options: [],
-      placeholder,
-      value: valueToRender || []
-    }) : _jsx("input", {
-      className: baseClass,
-      disabled,
-      onChange: e => onChange(e.target.value),
-      placeholder,
-      type: "number",
-      value
-    });
-    $[10] = admin?.placeholder;
-    $[11] = disabled;
-    $[12] = i18n;
-    $[13] = isMulti;
-    $[14] = onChange;
-    $[15] = onSelect;
-    $[16] = t;
-    $[17] = value;
-    $[18] = valueToRender;
-    $[19] = t6;
-  } else {
-    t6 = $[19];
-  }
-  return t6;
+  const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
+  return isMulti ? _jsx(ReactSelect, {
+    "aria-label": ariaLabel,
+    disabled,
+    isClearable: true,
+    isCreatable: true,
+    isMulti,
+    isSortable: true,
+    numberOnly: true,
+    onChange: onSelect,
+    options: [],
+    placeholder,
+    value: valueToRender || []
+  }) : _jsx("input", {
+    "aria-label": ariaLabel,
+    className: "form-input",
+    disabled,
+    onChange: e => onChange(e.target.value),
+    placeholder,
+    type: "number",
+    value
+  });
 };
 function _temp(option) {
   return Number(option.value?.value || option.value);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","baseClass","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","i18n","t","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","t6","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","label","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","label","i18n","t","ariaLabel","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany, label },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = label ? getTranslation(label, i18n) : t('general:enterAValue')\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .condition-value-relationship__error-loading {
     border: var(--stroke-width-small) solid var(--color-border-danger);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
+    min-height: var(--spacer-6);
+    padding: var(--spacer-2) var(--spacer-3);
     background-color: var(--color-bg-danger);
     color: var(--color-text);
   }

package/dist/elements/WhereBuilder/Condition/Text/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { TextFilterProps as Props } from './types.js';
-import './index.scss';
 export declare const Text: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/WhereBuilder/Condition/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAI1D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsEhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAK1D,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0EhC,CAAA"}

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

@@ -2,13 +2,12 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
-const baseClass = 'condition-value-text';
 export const Text = props => {
-  const $ = _c(18);
+  const $ = _c(10);
   const {
     disabled,
     field,
@@ -17,8 +16,10 @@ export const Text = props => {
     value
   } = props;
   const {
+    i18n,
     t
   } = useTranslation();
+  const ariaLabel = field?.label ? getTranslation(field.label, i18n) : t("general:enterAValue");
   const hasMany = field?.hasMany ?? false;
   let t0;
   if ($[0] !== hasMany || $[1] !== operator) {
@@ -81,38 +82,26 @@ export const Text = props => {
     t4 = $[9];
   }
   React.useEffect(t3, t4);
-  let t5;
-  if ($[10] !== disabled || $[11] !== isMulti || $[12] !== onChange || $[13] !== onSelect || $[14] !== t || $[15] !== value || $[16] !== valueToRender) {
-    t5 = isMulti ? _jsx(ReactSelect, {
-      disabled,
-      isClearable: true,
-      isCreatable: true,
-      isMulti,
-      isSortable: true,
-      onChange: onSelect,
-      options: [],
-      placeholder: t("general:enterAValue"),
-      value: valueToRender || []
-    }) : _jsx("input", {
-      className: baseClass,
-      disabled,
-      onChange: e => onChange(e.target.value),
-      placeholder: t("general:enterAValue"),
-      type: "text",
-      value: value || ""
-    });
-    $[10] = disabled;
-    $[11] = isMulti;
-    $[12] = onChange;
-    $[13] = onSelect;
-    $[14] = t;
-    $[15] = value;
-    $[16] = valueToRender;
-    $[17] = t5;
-  } else {
-    t5 = $[17];
-  }
-  return t5;
+  return isMulti ? _jsx(ReactSelect, {
+    "aria-label": ariaLabel,
+    disabled,
+    isClearable: true,
+    isCreatable: true,
+    isMulti,
+    isSortable: true,
+    onChange: onSelect,
+    options: [],
+    placeholder: t("general:enterAValue"),
+    value: valueToRender || []
+  }) : _jsx("input", {
+    "aria-label": ariaLabel,
+    className: "form-input",
+    disabled,
+    onChange: e => onChange(e.target.value),
+    placeholder: t("general:enterAValue"),
+    type: "text",
+    value: value || ""
+  });
 };
 function _temp(option) {
   return option.value?.value || option.value;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","ReactSelect","baseClass","Text","props","$","disabled","field","onChange","operator","value","t","hasMany","t0","includes","isMulti","t1","Symbol","for","valueToRender","setValueToRender","useState","t2","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t3","t4","_temp2","useEffect","t5","_jsx","isClearable","isCreatable","isSortable","options","placeholder","className","e","target","type","option","val","index","id","label","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { TextFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-text'\n\nexport const Text: React.FC<Props> = (props) => {\n  const { disabled, field, onChange, operator, value } = props\n  const { t } = useTranslation()\n\n  const hasMany = field?.hasMany ?? false\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: string } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  return isMulti ? (\n    <ReactSelect\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      onChange={onSelect}\n      options={[]}\n      placeholder={t('general:enterAValue')}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"text\"\n      value={value || ''}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","Text","props","$","disabled","field","onChange","operator","value","i18n","t","ariaLabel","label","hasMany","t0","includes","isMulti","t1","Symbol","for","valueToRender","setValueToRender","useState","t2","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t3","t4","_temp2","useEffect","_jsx","isClearable","isCreatable","isSortable","options","placeholder","className","e","target","type","option","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TextFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const Text: React.FC<Props> = (props) => {\n  const { disabled, field, onChange, operator, value } = props\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = field?.label ? getTranslation(field.label, i18n) : t('general:enterAValue')\n\n  const hasMany = field?.hasMany ?? false\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: string } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      onChange={onSelect}\n      options={[]}\n      placeholder={t('general:enterAValue')}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"text\"\n      value={value || ''}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAE5B,OAAO,MAAMC,IAAA,GAAwBC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACnC;IAAAQ,QAAA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAuDN,KAAA;EACvD;IAAAO,IAAA;IAAAC;EAAA,IAAoBX,cAAA;EAEpB,MAAAY,SAAA,GAAkBN,KAAA,EAAAO,KAAA,GAAef,cAAA,CAAeQ,KAAA,CAAAO,KAAA,EAAaH,IAAA,IAAQC,CAAA,CAAE;EAEvE,MAAAG,OAAA,GAAgBR,KAAA,EAAAQ,OAAA,SAAkB;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAU,OAAA,IAAAV,CAAA,QAAAI,QAAA;IAClBO,EAAA,IAAC,MAAM,UAAAC,QAAA,CAAmBR,QAAA,KAAaM,OAAA;IAAAV,CAAA,MAAAU,OAAA;IAAAV,CAAA,MAAAI,QAAA;IAAAJ,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAvD,MAAAa,OAAA,GAAgBF,EAAuC;EAAA,IAAAG,EAAA;EAAA,IAAAd,CAAA,QAAAe,MAAA,CAAAC,GAAA;IAIrDF,EAAA;IAAEd,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAFJ,OAAAiB,aAAA,EAAAC,gBAAA,IAA0CvB,KAAA,CAAAwB,QAAA,CAExCL,EAAE;EAAA,IAAAM,EAAA;EAAA,IAAApB,CAAA,QAAAa,OAAA,IAAAb,CAAA,QAAAG,QAAA;IAGFiB,EAAA,GAAAC,cAAA;MACMC,GAAA,CAAAA,QAAA;MAAA,KACCD,cAAA;QACHC,QAAA,CAAAA,CAAA,CAAAA,EAAA;MAAA;QAAA,IACST,OAAA;UAAA,IACLU,KAAA,CAAAC,OAAA,CAAcH,cAAA;YAChBC,QAAA,CAAAA,CAAA,CAAWD,cAAA,CAAAI,GAAA,CAAAC,KAAkE;UAA7E;YAEAJ,QAAA,CAAAA,CAAA,CAAAA,CAAYD,cAAA,CAAAhB,KAAA,EAAAA,KAAA,IAA+BgB,cAAA,CAAAhB,KAAoB;UAA/D;QAAA;MAAA;MAIJF,QAAA,CAASmB,QAAA;IAAA;IACXtB,CAAA,MAAAa,OAAA;IAAAb,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAoB,EAAA;EAAA;IAAAA,EAAA,GAAApB,CAAA;EAAA;EAdF,MAAA2B,QAAA,GAAiBP,EAeI;EAAA,IAAAQ,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,QAAAK,KAAA;IAGLuB,EAAA,GAAAA,CAAA;MAAA,IACVL,KAAA,CAAAC,OAAA,CAAcnB,KAAA;QAChBa,gBAAA,CACEb,KAAA,CAAAoB,GAAA,CAAAK,MASA;MAAA;QAGFZ,gBAAA,GAAmB;MAAA;IAAA;IAEpBW,EAAA,IAACxB,KAAA;IAAML,CAAA,MAAAK,KAAA;IAAAL,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;EAAA;IAAAD,EAAA,GAAA5B,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAjBVL,KAAA,CAAAoC,SAAA,CAAgBH,EAiBhB,EAAGC,EAAO;EAAA,OAEHhB,OAAA,GACLmB,IAAA,CAAAnC,WAAA;IAAA,cACcW,SAAA;IAAAP,QAAA;IAAAgC,WAAA;IAAAC,WAAA;IAAArB,OAAA;IAAAsB,UAAA;IAAAhC,QAAA,EAMFwB,QAAA;IAAAS,OAAA;IAAAC,WAAA,EAEG9B,CAAA,CAAE;IAAAF,KAAA,EACRY,aAAA;EAAmB,C,IAG5Be,IAAA,CAAC;IAAA,cACaxB,SAAA;IAAA8B,SAAA,EACF;IAAArC,QAAA;IAAAE,QAAA,EAAAoC,CAAA,IAEOpC,QAAA,CAASoC,CAAA,CAAAC,MAAA,CAAAnC,KAAc;IAAAgC,WAAA,EAC3B9B,CAAA,CAAE;IAAAkC,IAAA,EACV;IAAApC,KAAA,EACEA,KAAA,IAAS;EAAA,C;CAGtB;AA1EqC,SAAAqB,MAAAgB,MAAA;EAAA,OAoBeA,MAAA,CAAArC,KAAA,EAAAA,KAAA,IAAuBqC,MAAA,CAAArC,KAAY;AAAA;AApBlD,SAAAyB,OAAAa,GAAA,EAAAC,KAAA;EAAA;IAAAC,EAAA,EAoCrB,GAAGF,GAAA,GAAMC,KAAA,EAAO;IAAAnC,KAAA,EACb,GAAGkC,GAAA,EAAK;IAAAtC,KAAA;MAAAyC,QAAA,EAAAA,CAAA,KAEG,GAAGH,GAAA,GAAMC,KAAA,EAAO;MAAAvC,KAAA,EACzBsC,GAAC,EAAAtC,KAAA,IAAsBsC;IAAA;EAAA;AAAA","ignoreList":[]}

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

@@ -0,0 +1,111 @@
+@layer payload-default {
+  .condition {
+    display: contents;
+
+    .btn {
+      vertical-align: middle;
+      margin: 0;
+    }
+  }
+
+  /* Flatten wrap and inputs — all 5 cells (__join, __field, __operator, __value, __actions)
+     become direct items of the parent or-filters grid, no subgrid needed. */
+  .condition__wrap,
+  .condition__inputs {
+    display: contents;
+  }
+
+  .condition__join-label {
+    display: block;
+    color: var(--color-text);
+  }
+
+  /* The and/or join dropdown is compact (24px tall) per the design. */
+  .condition__join .rs__control {
+    min-height: var(--spacer-4);
+    padding-block: 0;
+    padding-inline: calc(var(--spacer-1) * 1.5) var(--spacer-4);
+    text-transform: lowercase;
+  }
+
+  .condition__join-menu {
+    text-transform: lowercase;
+  }
+
+  /* Center the indicators within the compact control. The base styles
+     absolutely position them with a fixed 32px height tuned for the default
+     control, so pin to the control interior and center instead. */
+  .condition__join .rs__indicators {
+    inset-block: 0;
+    min-height: 0;
+    align-items: center;
+  }
+
+  /* display:contents makes the three input divs participate directly in the parent grid */
+  .condition__inputs > div {
+    min-width: 0;
+  }
+
+  .condition__field .field-label {
+    padding-bottom: 0;
+  }
+
+  .condition__actions {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  @media (max-width: 768px) {
+    .condition {
+      display: block;
+    }
+
+    .condition__wrap {
+      margin-top: var(--spacer-3);
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-areas:
+        'join actions'
+        'field field'
+        'operator operator'
+        'value value';
+      gap: var(--spacer-2);
+      align-items: start;
+    }
+
+    .condition__inputs {
+      display: contents;
+    }
+
+    .condition__join {
+      grid-area: join;
+    }
+
+    .condition__join .rs__control {
+      min-width: calc(var(--spacer-4) * 3);
+      /* width: fit-content; */
+    }
+
+    .condition__field {
+      grid-area: field;
+    }
+
+    .condition__operator {
+      grid-area: operator;
+    }
+
+    .condition__value {
+      grid-area: value;
+    }
+
+    .condition__inputs > div {
+      flex-basis: auto;
+      width: 100%;
+    }
+
+    .condition__actions {
+      grid-area: actions;
+      align-self: center;
+    }
+  }
+}