@wix/auto-patterns 1.43.0 → 1.45.0

package/mcp-docs/settings_page.md

@@ -0,0 +1,599 @@
+# Settings Page Configuration
+
+## Overview
+
+The Settings Page is a dedicated page type for managing application settings and preferences. It provides a form-based interface with automatic save/cancel functionality, validation, and a flexible card-based layout system. The Settings Page uses the same custom data source pattern as Collection Pages for consistency across the framework.
+
+## Key Features
+
+- **Custom Data Source Pattern**: Uses SchemaConfig with standard CRUD actions (same as Collection Pages)
+- **Form-based Interface**: Built-in form state management with `@wix/patterns/form`
+- **Auto Save/Cancel**: Automatic save and cancel button handling
+- **Validation Support**: Field validation with focus on invalid fields
+- **Flexible Layout**: Card-based layout with main content and optional sidebar
+- **Header Configuration**: Title, subtitle, and more actions support
+
+## Page Type
+
+Set `type: 'settingsPage'` in your page configuration:
+
+```json
+{
+  "id": "settings",
+  "type": "settingsPage",
+  "appMainPage": true,
+  "settingsPage": {
+    "entityTypeSource": "custom",
+    "custom": {
+      "id": "app-settings"
+    }
+  }
+}
+```
+
+## Settings Page Configuration
+
+### Required Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `route.path` | `string` | Route path for the settings page (e.g., `/settings`) |
+| `entityTypeSource` | `'custom'` | Must be `'custom'` - settings pages use custom data sources |
+| `custom.id` | `string` | ID matching the custom data source identifier |
+
+### Optional Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `title` | `object` | Page title configuration |
+| `subtitle` | `object` | Page subtitle with optional learn more link |
+| `actions.moreActions` | `MoreActionsType` | Additional actions menu (export, import, reset, etc.) |
+| `layout` | `object` | Card layout for main and sidebar content |
+
+## Custom Data Source
+
+The settings page requires a custom data source that provides the schema and CRUD actions. This follows the same pattern as Collection Pages. See the [Complete Configuration Example](#complete-configuration-example) section for a full implementation.
+
+### Registering the Data Source
+
+Create a hook to register your custom data source:
+
+```typescript
+// useCustomDataSources.tsx
+import { appSettingsDataSource } from './appSettingsDataSource';
+
+export const useCustomDataSources = () => {
+  return {
+    'app-settings': appSettingsDataSource,
+  };
+};
+```
+
+### Supported Field Types
+
+- `SHORT_TEXT` - Single-line text input
+- `LONG_TEXT` - Multi-line text area
+- `BOOLEAN` - Toggle/checkbox
+- `NUMBER` - Numeric input
+- `URL` - URL input with validation
+- `DATE` - Date picker
+- `DATETIME` - Date and time picker
+
+## Actions Configuration
+
+### More Actions (Custom Actions)
+
+Define custom actions in the `actions.moreActions` array. See the [Complete Configuration Example](#complete-configuration-example) for the full configuration.
+
+### Custom Action Resolvers
+
+Create action resolvers using `CustomFormPageActionResolver`:
+
+```tsx
+// actions/exportSettings.tsx
+import React from 'react';
+import { CustomFormPageActionResolver } from '@wix/auto-patterns';
+import { Download } from '@wix/wix-ui-icons-common';
+
+export const exportSettings: CustomFormPageActionResolver = (params) => {
+  // params.form provides access to form state if needed
+  return {
+    label: 'Export settings',
+    icon: <Download />,
+    onClick: () => {
+      // Export logic here
+      console.log('Exporting settings');
+    },
+    biName: 'export-settings-action',
+  };
+};
+```
+
+```tsx
+// actions/importSettings.tsx
+import React from 'react';
+import { CustomFormPageActionResolver } from '@wix/auto-patterns';
+import { Upload } from '@wix/wix-ui-icons-common';
+
+export const importSettings: CustomFormPageActionResolver = () => {
+  return {
+    label: 'Import settings',
+    icon: <Upload />,
+    onClick: () => console.log('Importing settings'),
+    biName: 'import-settings-action',
+  };
+};
+```
+
+```tsx
+// actions/resetSettings.tsx
+import React from 'react';
+import { CustomFormPageActionResolver } from '@wix/auto-patterns';
+import { Undo } from '@wix/wix-ui-icons-common';
+
+export const resetSettings: CustomFormPageActionResolver = () => {
+  return {
+    label: 'Reset settings',
+    icon: <Undo />,
+    onClick: () => console.log('Resetting to defaults'),
+    biName: 'reset-settings-action',
+  };
+};
+```
+
+### Registering Actions
+
+Create a hook to register your custom actions:
+
+```typescript
+// useActions.tsx
+import { exportSettings, importSettings, resetSettings } from './actions';
+
+export const useActions = () => {
+  return {
+    exportSettings,
+    importSettings,
+    resetSettings,
+  };
+};
+```
+
+## Header Configuration
+
+The header supports `title` and `subtitle` with optional `learnMore` link. See the [Complete Configuration Example](#complete-configuration-example) for usage.
+
+## Layout Configuration
+
+The settings page uses a card-based layout with main content and optional sidebar areas.
+
+### Layout Structure
+
+```typescript
+layout: {
+  main: CardLayout[];      // Main content area (required)
+  sidebar?: CardLayout[];  // Sidebar area (optional)
+}
+```
+
+### Card Layout
+
+Each card in the layout has the following structure:
+
+```typescript
+{
+  type: 'card',
+  card: {
+    title: { text: 'Card Title' },
+    subtitle?: { text: 'Optional subtitle' },
+    children: LayoutContent[]
+  }
+}
+```
+
+### Layout Content Types
+
+#### 1. Field Content
+
+Renders a form field from the data source schema:
+
+```typescript
+{
+  type: 'field',
+  field: {
+    fieldId: 'name',  // Must match a field ID from the data source schema
+    span?: 6          // Grid columns (1-12), default is 12
+  }
+}
+```
+
+#### 2. Container Content
+
+Groups related content items:
+
+```typescript
+{
+  type: 'container',
+  container: {
+    span?: 12,           // Grid columns (1-12)
+    children: [          // Nested layout content
+      { type: 'field', field: { fieldId: 'field1', span: 4 } },
+      { type: 'field', field: { fieldId: 'field2', span: 4 } },
+      { type: 'field', field: { fieldId: 'field3', span: 4 } }
+    ]
+  }
+}
+```
+
+#### 3. Component Content
+
+Renders a custom component via overrides:
+
+```typescript
+{
+  type: 'component',
+  component: {
+    componentId: 'myCustomComponent',  // Matches override key
+    span?: 12                           // Grid columns (1-12)
+  }
+}
+```
+
+### Grid System
+
+- **12-Column Grid**: The layout uses a 12-column grid system
+- The `span` property controls how many columns an item occupies (1-12)
+- When items in a row exceed 12 columns total, the next item wraps to a new line
+
+## Complete Configuration Example
+
+### App Config (settingPageConfig.patterns.ts)
+
+```typescript
+import type { AppConfig } from '@wix/auto-patterns';
+
+export const appConfig: AppConfig = {
+  pages: [
+    {
+      id: 'settings',
+      type: 'settingsPage',
+      appMainPage: true,
+      settingsPage: {
+        route: {
+          path: '/settings',
+        },
+        entityTypeSource: 'custom',
+        custom: {
+          id: 'app-settings',
+        },
+
+        // Header
+        title: {
+          text: 'App Settings',
+        },
+        subtitle: {
+          text: 'Configure your application preferences and defaults',
+          learnMore: {
+            url: 'https://support.wix.com/en/article/wix-apps',
+            label: 'Learn more',
+          },
+        },
+
+        // Custom actions
+        actions: {
+          moreActions: [
+            {
+              id: 'exportSettings',
+              type: 'custom',
+              label: 'Export Settings',
+              biName: 'export-settings',
+            },
+            {
+              id: 'importSettings',
+              type: 'custom',
+              label: 'Import Settings',
+              biName: 'import-settings',
+            },
+            {
+              id: 'resetSettings',
+              type: 'custom',
+              label: 'Reset to Defaults',
+              biName: 'reset-settings',
+            },
+          ],
+        },
+
+        // Layout
+        layout: {
+          main: [
+            {
+              type: 'card',
+              card: {
+                title: { text: 'General Settings' },
+                subtitle: { text: 'Basic configuration for your application' },
+                children: [
+                  { type: 'field', field: { fieldId: 'name', span: 6 } },
+                  { type: 'field', field: { fieldId: 'description', span: 6 } },
+                ],
+              },
+            },
+            {
+              type: 'card',
+              card: {
+                title: { text: 'Display Options' },
+                subtitle: { text: 'Customize how content appears to users' },
+                children: [
+                  {
+                    type: 'container',
+                    container: {
+                      span: 12,
+                      children: [
+                        { type: 'field', field: { fieldId: 'showHeader', span: 4 } },
+                        { type: 'field', field: { fieldId: 'showFooter', span: 4 } },
+                        { type: 'field', field: { fieldId: 'showSidebar', span: 4 } },
+                      ],
+                    },
+                  },
+                  { type: 'field', field: { fieldId: 'maxItemsPerPage', span: 6 } },
+                ],
+              },
+            },
+            {
+              type: 'card',
+              card: {
+                title: { text: 'Notification Settings' },
+                children: [
+                  { type: 'field', field: { fieldId: 'emailNotifications', span: 6 } },
+                  { type: 'field', field: { fieldId: 'pushNotifications', span: 6 } },
+                  { type: 'field', field: { fieldId: 'notificationEmail', span: 12 } },
+                ],
+              },
+            },
+          ],
+          sidebar: [
+            {
+              type: 'card',
+              card: {
+                title: { text: 'Branding' },
+                subtitle: { text: 'Set your website URL' },
+                children: [
+                  { type: 'field', field: { fieldId: 'websiteUrl', span: 12 } },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    },
+  ],
+};
+```
+
+### Data Source (appSettingsDataSource.ts)
+
+```typescript
+import type { SchemaConfig } from '@wix/auto-patterns';
+
+export const appSettingsDataSource = async (
+  _collectionId: string,
+  _context: any,
+): Promise<SchemaConfig> => {
+  return {
+    id: 'app-settings',
+    displayField: 'name',
+    idField: 'id',
+    fields: {
+      id: {
+        id: 'id',
+        type: 'SHORT_TEXT',
+        displayName: 'ID',
+        validation: { required: true },
+      },
+      name: {
+        id: 'name',
+        type: 'SHORT_TEXT',
+        displayName: 'App Name',
+        validation: { required: true },
+      },
+      description: {
+        id: 'description',
+        type: 'LONG_TEXT',
+        displayName: 'Description',
+      },
+      showHeader: {
+        id: 'showHeader',
+        type: 'BOOLEAN',
+        displayName: 'Show Header',
+      },
+      showFooter: {
+        id: 'showFooter',
+        type: 'BOOLEAN',
+        displayName: 'Show Footer',
+      },
+      showSidebar: {
+        id: 'showSidebar',
+        type: 'BOOLEAN',
+        displayName: 'Show Sidebar',
+      },
+      maxItemsPerPage: {
+        id: 'maxItemsPerPage',
+        type: 'NUMBER',
+        displayName: 'Max Items Per Page',
+      },
+      emailNotifications: {
+        id: 'emailNotifications',
+        type: 'BOOLEAN',
+        displayName: 'Email Notifications',
+      },
+      pushNotifications: {
+        id: 'pushNotifications',
+        type: 'BOOLEAN',
+        displayName: 'Push Notifications',
+      },
+      notificationEmail: {
+        id: 'notificationEmail',
+        type: 'SHORT_TEXT',
+        displayName: 'Notification Email',
+      },
+      websiteUrl: {
+        id: 'websiteUrl',
+        type: 'URL',
+        displayName: 'Website URL',
+      },
+    },
+    actions: {
+      get: async (entityId: string) => {
+        console.log('Getting settings:', entityId);
+        return {
+          id: 'app-settings',
+          name: 'My App',
+          description: 'App description',
+          showHeader: true,
+          showFooter: true,
+          showSidebar: false,
+          maxItemsPerPage: 10,
+          emailNotifications: true,
+          pushNotifications: false,
+          notificationEmail: 'admin@example.com',
+          websiteUrl: 'https://example.com',
+        };
+      },
+      create: async (newEntity: any) => {
+        console.log('Creating settings:', newEntity);
+        return newEntity;
+      },
+      update: async (updatedEntity: any) => {
+        console.log('Saving settings:', updatedEntity);
+        return updatedEntity;
+      },
+      delete: async (entityId: string) => {
+        console.log('Deleting settings:', entityId);
+        return { id: entityId };
+      },
+      bulkDelete: async (entityIds: string[]) => {
+        console.log('Bulk deleting settings:', entityIds);
+        return entityIds.map((id) => ({ id }));
+      },
+      find: async () => {
+        console.log('Fetching settings...');
+        return {
+          items: [
+            {
+              id: 'app-settings',
+              name: 'My App',
+              description: 'App description',
+              showHeader: true,
+              showFooter: true,
+              showSidebar: false,
+              maxItemsPerPage: 10,
+              emailNotifications: true,
+              pushNotifications: false,
+              notificationEmail: 'admin@example.com',
+              websiteUrl: 'https://example.com',
+            },
+          ],
+          hasNext: false,
+          total: 1,
+        };
+      },
+    },
+  };
+};
+```
+
+## Usage with AutoPatternsApp
+
+```tsx
+import React from 'react';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import {
+  AutoPatternsOverridesProvider,
+  AutoPatternsApp,
+} from '@wix/auto-patterns';
+import { WixPatternsBMProvider } from '@wix/patterns/bm';
+import { appConfig } from './settingPageConfig.patterns';
+import { useActions } from './useActions';
+import { useCustomDataSources } from './useCustomDataSources';
+
+const App = () => {
+  const actions = useActions();
+  const customDataSources = useCustomDataSources();
+
+  return (
+    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+      <WixPatternsBMProvider>
+        <AutoPatternsOverridesProvider
+          value={{
+            actions,
+            customDataSources,
+          }}
+        >
+          <AutoPatternsApp configuration={appConfig} />
+        </AutoPatternsOverridesProvider>
+      </WixPatternsBMProvider>
+    </WixDesignSystemProvider>
+  );
+};
+```
+
+## Validation
+
+Field validation is configured in the data source schema:
+
+```typescript
+fields: {
+  email: {
+    id: 'email',
+    type: 'SHORT_TEXT',
+    displayName: 'Email',
+    validation: { required: true },
+  },
+}
+```
+
+When a user attempts to save with invalid fields:
+1. The first invalid field is focused
+2. The save action is prevented
+3. An error is thrown to indicate form validation failure
+
+## Best Practices
+
+1. **Use Custom Data Source Pattern**: Settings pages use the same data source pattern as collection pages for consistency
+2. **Group Related Settings**: Use cards to organize related settings together
+3. **Use Descriptive Labels**: Field `displayName` should clearly describe the setting
+4. **Provide Context**: Use card subtitles and learn more links to help users understand settings
+5. **Validate Required Fields**: Mark essential settings as required in the schema
+6. **Handle Errors**: Implement proper error handling in data source actions
+7. **Use Appropriate Field Types**: Choose the right field type for each setting (BOOLEAN for toggles, NUMBER for numeric values, etc.)
+
+## Common Mistakes to Avoid
+
+- Missing `entityTypeSource: 'custom'` and `custom.id` configuration
+- Not registering the custom data source in `AutoPatternsOverridesProvider`
+- Field IDs in layout not matching field definitions in the data source schema
+- Forgetting to wrap with required providers (WixDesignSystemProvider, WixPatternsBMProvider, AutoPatternsOverridesProvider)
+- Not handling async errors in data source actions
+- Using span values that exceed 12 columns per row
+- Forgetting to export and register custom actions
+
+## File Structure
+
+A typical settings page implementation has the following structure:
+
+```
+src/
+├── components/
+│   └── Settings/
+│       ├── settingPageConfig.patterns.ts  # AppConfig with page configuration
+│       ├── appSettingsDataSource.ts       # Custom data source with schema and actions
+│       ├── useCustomDataSources.tsx       # Hook to register data source
+│       ├── useActions.tsx                 # Hook to register custom actions
+│       └── actions/
+│           ├── index.ts                   # Export all actions
+│           ├── exportSettings.tsx         # Export action resolver
+│           ├── importSettings.tsx         # Import action resolver
+│           └── resetSettings.tsx          # Reset action resolver
+└── pages/
+    └── settings/
+        └── index.tsx                      # Page component with providers
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/auto-patterns",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Matvey Oklander",
@@ -84,19 +84,19 @@
     "@types/lodash": "^4.17.20",
     "@types/node": "^16.18.126",
     "@types/node-fetch": "^2.6.13",
-    "@types/react": "^16.14.67",
+    "@types/react": "^16.14.68",
     "@wix/crm": "^1.0.1175",
     "@wix/design-system": "^1.223.0",
-    "@wix/eslint-config-yoshi": "^6.162.0",
-    "@wix/fe-essentials-standalone": "^1.1380.0",
-    "@wix/jest-yoshi-preset": "^6.162.0",
-    "@wix/patterns": "^1.299.0",
+    "@wix/eslint-config-yoshi": "^6.163.0",
+    "@wix/fe-essentials-standalone": "^1.1401.0",
+    "@wix/jest-yoshi-preset": "^6.163.0",
+    "@wix/patterns": "^1.308.0",
     "@wix/sdk": "^1.17.2",
     "@wix/sdk-testkit": ">=0.1.9",
-    "@wix/wix-data-items-common": "^1.0.264",
-    "@wix/wix-data-items-sdk": "^1.0.460",
-    "@wix/yoshi-flow-library": "^6.162.0",
-    "@wix/yoshi-style-dependencies": "^6.162.0",
+    "@wix/wix-data-items-common": "^1.0.270",
+    "@wix/wix-data-items-sdk": "^1.0.440",
+    "@wix/yoshi-flow-library": "^6.163.0",
+    "@wix/yoshi-style-dependencies": "^6.163.0",
     "chance": "^1.1.13",
     "date-fns": "^2.30.0",
     "express": "^4.21.2",
@@ -104,14 +104,15 @@
     "jest": "^27.5.1",
     "node-fetch": "^2.7.0",
     "react": "16.14.0",
-    "react-router-dom": "^6.30.1",
+    "react-router-dom": "^6.30.2",
+    "semver": "^7.7.3",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
     "@wix/dashboard": "^1.3.33",
     "@wix/design-system": "^1.204.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns": "^1.254.0",
+    "@wix/patterns": "^1.304.0",
     "react": "^16.8.0 || ^18.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
@@ -159,5 +160,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "a978db4a0bda96b3424d12b714abc59c92db2bef425e42fa25136858"
+  "falconPackageHash": "3915a980411ec11e3ce247a04e1f7aa76cfa8c3c0a038cc3c51bc004"
 }

package/dist/cjs/components/AutoPatternsEntityPage/Fields/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_jsxFileName","Checkbox","props","field","onChange","value","default","createElement","checked","e","target","dataHook","id","__self","__source","fileName","lineNumber","columnNumber","displayName","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox as CheckboxWSR } from '@wix/design-system';\nimport { BaseInputProps } from './types';\n\nexport interface CheckboxProps extends BaseInputProps<boolean> {}\n\nexport const Checkbox = (props: CheckboxProps) => {\n  const { field, onChange, value } = props;\n\n  return (\n    <CheckboxWSR\n      checked={value}\n      onChange={(e) => {\n        onChange(e.target.checked);\n      }}\n      dataHook={`checkbox-${field.id}`}\n    >\n      {field.displayName}\n    </CheckboxWSR>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAA6D,IAAAE,YAAA;AAKtD,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAChD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,KAAK;EAExC,oBACEN,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAE,QAAW;IACVO,OAAO,EAAEH,KAAM;IACfD,QAAQ,EAAGK,CAAC,IAAK;MACfL,QAAQ,CAACK,CAAC,CAACC,MAAM,CAACF,OAAO,CAAC;IAC5B,CAAE;IACFG,QAAQ,EAAE,YAAYR,KAAK,CAACS,EAAE,EAAG;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAf,YAAA;MAAAgB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEhCd,KAAK,CAACe,WACI,CAAC;AAElB,CAAC;AAACC,OAAA,CAAAlB,QAAA,GAAAA,QAAA","ignoreList":[]}

package/dist/cjs/components/AutoPatternsEntityPage/Fields/DateInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_dates","_patterns","_form","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","validateDateField","value","validation","format","validationType","required","undefined","dateFormat","DateInput","props","_pageState$entity","_field$validation","field","dataHook","inputRef","translate","container","useWixPatternsContainer","useSelector","initTask","status","pageState","useEntityPageContext","controller","useController","name","id","control","form","defaultValue","entity","rules","validate","error","date","setDate","useState","getDateWithoutTimezone","getISODateStringWithFixedTimezone","ref","useRef","errorMessage","setErrorMessage","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","DatePicker","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","invalid","statusMessage","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/DateInput.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport {\n  useSelector,\n  useWixPatternsContainer,\n  useEntityPageContext,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Translate } from '@wix/patterns/core';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nfunction validateDateField(\n  value: string | null | undefined,\n  validation: DateProps['field']['validation'],\n  t: Translate,\n  format?: string,\n  validationType?: 'outOfBoundsError' | 'formatError' | 'valid',\n) {\n  if (\n    validation?.required &&\n    (value === null || value === undefined || value === '')\n  ) {\n    return t('cairo.fieldValidation.requiredField');\n  } else if (validationType === 'formatError' && format) {\n    return t('cairo.customFields.fieldType.date.invalid.value', {\n      dateFormat: format,\n    });\n  }\n\n  return '';\n}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, dataHook, inputRef } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        const error = validateDateField(value, field.validation, t);\n        return error || true;\n      },\n    },\n  });\n\n  const [date, setDate] = useState<Date | undefined>(() => {\n    if (controller.field.value) {\n      return getDateWithoutTimezone(\n        getISODateStringWithFixedTimezone(controller.field.value),\n      );\n    }\n    return undefined;\n  });\n\n  const ref = useRef<BaseInputRef>({});\n  const [errorMessage, setErrorMessage] = useState<string>('');\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <DatePicker\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          // @ts-expect-error: WSR internal API hack for focusing\n          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();\n        }}\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          setDate(newValue);\n          if (newValue) {\n            const formattedDate = getISODateStringWithFixedTimezone(newValue);\n            controller.field.onChange(formattedDate.split('T')[0]);\n          } else {\n            controller.field.onChange(null);\n          }\n        }}\n        onValidate={({ validationType, value: newValue, format }) => {\n          const error = validateDateField(\n            newValue,\n            field.validation,\n            t,\n            format,\n            validationType,\n          );\n          setErrorMessage(error);\n          ref.current.invalid = !!error;\n\n          if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            controller.field.onChange(null);\n          }\n        }}\n        status={errorMessage ? 'error' : undefined}\n        statusMessage={errorMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}