From b611b04123e42a2b3cb0dae9bbf94c1952fe2f55 Mon Sep 17 00:00:00 2001
From: "docs-examples-cross-repo-dispatch[bot]"
<318227308+docs-examples-cross-repo-dispatch[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 06:32:20 +0000
Subject: [PATCH] chore(docs): update versioned docs examples
---
...recipes__cell-types__flatpickr__javascript__example1.js.json | 2 +-
...recipes__cell-types__flatpickr__javascript__example1.ts.json | 2 +-
.../recipes__cell-types__flatpickr__react__example1.tsx.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.js.json
index 0eb6e77e08..0c1881e825 100644
--- a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"vite\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n validator: (value, callback) => {\n callback(isDate(new Date(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT');\n editor.input.classList.add('flatpickr-editor');\n \n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK');\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"vite\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n validator: (value, callback) => {\n callback(!value || isValid(parseISO(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n const date = parseISO(value);\n\n td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT');\n editor.input.classList.add('flatpickr-editor');\n \n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK');\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.ts.json
index 25d3da373c..3dd3c57f18 100644
--- a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst cellDefinition: Pick<\n CellProperties,\n 'renderer' | 'validator' | 'editor'\n> = {\n validator: (value, callback) => {\n callback(isDate(new Date(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst cellDefinition: Pick<\n CellProperties,\n 'renderer' | 'validator' | 'editor'\n> = {\n validator: (value, callback) => {\n callback(!value || isValid(parseISO(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n const date = parseISO(value);\n\n td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__react__example1.tsx.json
index 59ddc1e557..70bc247703 100644
--- a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__flatpickr__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"@handsontable/react-wrapper\": \"18.1.1\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst flatpickrValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(isDate(new Date(value)));\n};\n\nconst flatpickrRenderer = rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n});\n\nconst flatpickrEditor = editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n});\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"@handsontable/react-wrapper\": \"18.1.1\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst flatpickrValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(!value || isValid(parseISO(value)));\n};\n\nconst flatpickrRenderer = rendererFactory(({ td, value, cellProperties }) => {\n const date = parseISO(value);\n\n td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n});\n\nconst flatpickrEditor = editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n});\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"React (TS)"}