@redneckz/wildless-cms-uni-blocks 0.14.901 → 0.14.903

package/src/retail/components/Fields/EmailField.tsx

@@ -1,12 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { retailNotCyrillicPattern } from '../../validator/validators';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
-export const EmailField = JSX<CustomFieldProps>(({ field, input }) => (
-  <DaDataInputControl
-    label="Электронная почта"
-    maxLength={50}
-    {...field(input?.name ?? '')}
-    {...input}
-  />
-));
+export const EmailField = JSX<CustomFieldProps>(({ field, input }) => {
+  const onChange = useCallback(
+    (value: string) => {
+      if (retailNotCyrillicPattern.test(value) || value.length === 0) {
+        field('email')?.onChange?.(value);
+      }
+    },
+    [field],
+  );
+
+  return (
+    <DaDataInputControl
+      label="Электронная почта"
+      maxLength={50}
+      {...field(input?.name ?? '')}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});

package/src/retail/validator/validators.ts

@@ -13,6 +13,7 @@ export interface LimitedBirthdayValidationParams {
 }
 
 export const retailCyrillicPattern = /^[\u0400-\u04FF-\s]+$/u;
+export const retailNotCyrillicPattern = /^(?!\s*$)[^\p{Script=Cyrillic}]+$/u;
 
 const addressDaDataValidate = (address: Address) =>
   Boolean(address.region && (address.city || address.locality) && address.house);

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -5,22 +5,25 @@ import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { CloseButton } from './CloseButton';
 
+type DialogType = 'sm' | 'lg' | '4xl' | 'none';
+
 export interface DialogProps extends OnCloseProps, OnClickPreventableProps {
   head?: VNode;
-  maxWidth?: 'sm' | '4xl' | 'lg';
+  maxWidth?: DialogType;
 }
 
-const MAX_WIDTH_STYLE = {
+const DIALOG_STYLE: Record<DialogType, string> = {
   sm: 'max-w-sm top-1/3',
   lg: 'max-w-lg',
   '4xl': 'max-w-4xl',
+  none: 'mt-0',
 };
 
 export const Dialog = JSX<DialogProps>(({ head, maxWidth = '4xl', children, onClose, onClick }) => (
   <div
     className={style(
       'relative bg-white p-lg pb-6xl my-6xl mx-auto rounded-lg w-full',
-      MAX_WIDTH_STYLE[maxWidth],
+      DIALOG_STYLE[maxWidth],
     )}
     role="dialog"
     title="Диалог"

package/src/ui-kit/SearchDialog/SearchDialog.fixture.tsx

@@ -0,0 +1,7 @@
+import '../../setup-fixture';
+
+import { SearchDialog } from './SearchDialog';
+
+export default {
+  default: <SearchDialog />,
+};

package/src/ui-kit/SearchDialog/SearchDialog.tsx

@@ -29,6 +29,7 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
 
   return (
     <Dialog
+      maxWidth="none"
       head={<SearchInput className="mt-s" autoFocus={true} {...searchInputProps} />}
       onClose={onClose}
     >