From dc53681176dbec1fe3bd7937d4aa23756503087e Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 09:45:00 +0100 Subject: [PATCH 01/15] feat(date-time-picker-web): create new date time picker widget --- .../date-time-picker-web/.eslintrc.js | 5 + .../date-time-picker-web/.gitattributes | 21 ++ .../date-time-picker-web/.gitignore | 20 ++ .../date-time-picker-web/.prettierignore | 1 + .../date-time-picker-web/.prettierrc.js | 1 + .../date-time-picker-web/LICENSE | 15 + .../date-time-picker-web/README.md | 4 + .../date-time-picker-web/package.json | 61 ++++ .../date-time-picker-web/rollup.config.mjs | 5 + .../src/DateTimePicker.dark.png | Bin 0 -> 1466 bytes .../src/DateTimePicker.editorConfig.ts | 140 ++++++++ .../src/DateTimePicker.icon.dark.png | Bin 0 -> 1466 bytes .../src/DateTimePicker.icon.png | Bin 0 -> 1444 bytes .../src/DateTimePicker.png | Bin 0 -> 1413 bytes .../src/DateTimePicker.tile.dark.png | Bin 0 -> 5723 bytes .../src/DateTimePicker.tile.png | Bin 0 -> 5485 bytes .../src/DateTimePicker.xml | 144 ++++++++ .../date-time-picker-web/src/package.xml | 11 + .../date-time-picker-web/tsconfig.json | 32 ++ .../typings/DateTimePickerProps.d.ts | 75 +++++ pnpm-lock.yaml | 307 +++++++++++------- 21 files changed, 721 insertions(+), 121 deletions(-) create mode 100644 packages/pluggableWidgets/date-time-picker-web/.eslintrc.js create mode 100644 packages/pluggableWidgets/date-time-picker-web/.gitattributes create mode 100644 packages/pluggableWidgets/date-time-picker-web/.gitignore create mode 100644 packages/pluggableWidgets/date-time-picker-web/.prettierignore create mode 100644 packages/pluggableWidgets/date-time-picker-web/.prettierrc.js create mode 100644 packages/pluggableWidgets/date-time-picker-web/LICENSE create mode 100644 packages/pluggableWidgets/date-time-picker-web/README.md create mode 100644 packages/pluggableWidgets/date-time-picker-web/package.json create mode 100644 packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/package.xml create mode 100644 packages/pluggableWidgets/date-time-picker-web/tsconfig.json create mode 100644 packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js b/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js new file mode 100644 index 0000000000..a81cc74f08 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js @@ -0,0 +1,5 @@ +const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json"); + +module.exports = { + ...base +}; diff --git a/packages/pluggableWidgets/date-time-picker-web/.gitattributes b/packages/pluggableWidgets/date-time-picker-web/.gitattributes new file mode 100644 index 0000000000..ed8ea8651d --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.gitattributes @@ -0,0 +1,21 @@ +# Set the default behavior, in case people don't have core.autocrlf set. +* text=auto + +# Explicitly declare text files you want to always be normalized and converted +# to native line endings on checkout. +*.ts text eol=lf +*.tsx text eol=lf +*.js text eol=lf +*.jsx text eol=lf +*.css text eol=lf +*.scss text eol=lf +*.json text eol=lf +*.xml text eol=lf +*.md text eol=lf +*.gitattributes eol=lf +*.gitignore eol=lf + +# Denote all files that are truly binary and should not be modified. +*.png binary +*.jpg binary +*.gif binary diff --git a/packages/pluggableWidgets/date-time-picker-web/.gitignore b/packages/pluggableWidgets/date-time-picker-web/.gitignore new file mode 100644 index 0000000000..6721739184 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.gitignore @@ -0,0 +1,20 @@ +tests/testProject/ +.DS_Store +.idea +.vscode +dist +node_modules +.env +*.log +*.bak +*.launch +mxproject +coverage + +**/results +mendixProject +**/e2e/diffs +**/screenshot +**/screenshot-results +**/tests/testProject +**/artifacts diff --git a/packages/pluggableWidgets/date-time-picker-web/.prettierignore b/packages/pluggableWidgets/date-time-picker-web/.prettierignore new file mode 100644 index 0000000000..316da987ac --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.prettierignore @@ -0,0 +1 @@ +tests/testProject/ diff --git a/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js b/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js new file mode 100644 index 0000000000..0892704ab0 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require("@mendix/prettier-config-web-widgets"); diff --git a/packages/pluggableWidgets/date-time-picker-web/LICENSE b/packages/pluggableWidgets/date-time-picker-web/LICENSE new file mode 100644 index 0000000000..035fced0d9 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/LICENSE @@ -0,0 +1,15 @@ +The Apache License v2.0 + +Copyright © Mendix Technology BV 2022. All rights reserved. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/pluggableWidgets/date-time-picker-web/README.md b/packages/pluggableWidgets/date-time-picker-web/README.md new file mode 100644 index 0000000000..765710f775 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/README.md @@ -0,0 +1,4 @@ + + +Please see [Date Time Picker](https://docs.mendix.com/appstore/widgets/combobox) in the Mendix documentation for +details. diff --git a/packages/pluggableWidgets/date-time-picker-web/package.json b/packages/pluggableWidgets/date-time-picker-web/package.json new file mode 100644 index 0000000000..ef67f8f1f2 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/package.json @@ -0,0 +1,61 @@ +{ + "name": "@mendix/date-time-picker-web", + "widgetName": "DateTimePicker", + "version": "1.0.0", + "description": "Date, time and range picker widget", + "copyright": "© Mendix Technology BV 2025. All rights reserved.", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/mendix/web-widgets.git" + }, + "config": { + "developmentPort": 3000, + "mendixHost": "http://localhost:8080" + }, + "mxpackage": { + "name": "DateTimePicker", + "type": "widget", + "mpkName": "com.mendix.widget.web.DateTimePicker.mpk" + }, + "packagePath": "com.mendix.widget.web", + "marketplace": { + "minimumMXVersion": "10.24.0", + "appNumber": 999999, + "appName": "Date Time Picker", + "reactReady": true + }, + "testProject": { + "githubUrl": "https://github.com/mendix/testProjects", + "branchName": "date-time-picker-web" + }, + "scripts": { + "prebuild": "rui-create-translation", + "build": "pluggable-widgets-tools build:web", + "create-gh-release": "rui-create-gh-release", + "create-translation": "rui-create-translation", + "dev": "pluggable-widgets-tools start:web", + "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .", + "lint": "pluggable-widgets-tools lint", + "lint:fix": "pluggable-widgets-tools lint:fix", + "publish-marketplace": "rui-publish-marketplace", + "prerelease": "npm run lint", + "release": "pluggable-widgets-tools release:web", + "start": "pluggable-widgets-tools start:server", + "test": "pluggable-widgets-tools test:unit:web:enzyme-free", + "update-changelog": "rui-update-changelog-widget", + "verify": "rui-verify-package-format" + }, + "dependencies": { + "classnames": "^2.5.1", + "react-datepicker": "^8.9.0" + }, + "devDependencies": { + "@mendix/automation-utils": "workspace:*", + "@mendix/eslint-config-web-widgets": "workspace:*", + "@mendix/pluggable-widgets-tools": "*", + "@mendix/prettier-config-web-widgets": "workspace:*", + "@mendix/rollup-web-widgets": "workspace:*", + "@mendix/widget-plugin-test-utils": "workspace:*" + } +} diff --git a/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs b/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs new file mode 100644 index 0000000000..688a1a7197 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs @@ -0,0 +1,5 @@ +import copyFiles from "@mendix/rollup-web-widgets/copyFiles.mjs"; + +export default args => { + return copyFiles(args); +}; diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..57c8008c44b12436f8a4078253b80def84485b28 GIT binary patch literal 1466 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP-_yl0q=ND7UH_txP>}-cX|qhfefaU? z$L*UrWfHQbd=9&REWi9RnOnZ9)MWm7``1#9o+Vdw{=L_&dvUkSy42l$F7pMQf7*;| z4j+B7qL`s!>r0zTZUz-Kh6ytm9FmwAIytd(E=O$6zP@hl6I;%Nj&I+;XRn#a$si=m z;NiodV93~TgoP5$#;x^w3?+qM&wb1n{2KIS<&ngh`g-^O|2mY&Gl#RmQCofa=4btj zUj+7UvTi$iUxtFx+}0KexMOyZYtYyI=bSrBWDfsn>T_8Q#b-Efc$3 zyx+}V?%b(B&F;uGQJX)SZ@c(^>Os~A^VPf5{|9VY`0vs3^xYRHe_MLM%bX>C&d>hr z$L~uI&t_P*QJTkVrq8)&r9c1wt=8TnZLrMve=3`JgR74nZ(G`K+qIqZ*1X9(aN^vb z>5?%Fvv@Pt|7Cx%F2BGTVajiu=I_Qzjpk-^eCkWS+1l{oiSxeEtPj+7Di^ ziM(#{_g*=(Tg|imXC5$pIG8M(9qj#6@!E^I@7a3(oT;Dbn8&m&IW~8m*1==h=9kSL zYP^ko$JX-~B*V5q_I2O#=lZi*%x-tj{la_Gr~38X1{RR<-y}Bl9?-vTzwc&_UhSnn z3+@^V=1i)(P~)$cf6MRJ?00M_(tqP6|NLg$BXe_Km*}g{<~QzT?2_C+ZI8y}wE|~BPTwf(LIrpPTpUM7Cd3E?B7cpT)O|cK0J?U(z(~= z%tmv6>MJuW`TYKFLkiFZ91NOU^;zf5zx~T>k}$)iTTjlO+Q)%C2jR|J*kx|qvX{!K zuiwwMK}?N^d}hVI;98Z)0R>*?y}vd$@? F2>@zDNS*)y literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts new file mode 100644 index 0000000000..2fe7a3f94e --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts @@ -0,0 +1,140 @@ +import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; + +export type Platform = "web" | "desktop"; + +export type Properties = PropertyGroup[]; + +type PropertyGroup = { + caption: string; + propertyGroups?: PropertyGroup[]; + properties?: Property[]; +}; + +type Property = { + key: string; + caption: string; + description?: string; + objectHeaders?: string[]; // used for customizing object grids + objects?: ObjectProperties[]; + properties?: Properties[]; +}; + +type ObjectProperties = { + properties: PropertyGroup[]; + captions?: string[]; // used for customizing object grids +}; + +export type Problem = { + property?: string; // key of the property, at which the problem exists + severity?: "error" | "warning" | "deprecation"; // default = "error" + message: string; // description of the problem + studioMessage?: string; // studio-specific message, defaults to message + url?: string; // link with more information about the problem + studioUrl?: string; // studio-specific link +}; + +type BaseProps = { + type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource"; + grow?: number; // optionally sets a growth factor if used in a layout (default = 1) +}; + +type ImageProps = BaseProps & { + type: "Image"; + document?: string; // svg image + data?: string; // base64 image + property?: object; // widget image property object from Values API + width?: number; // sets a fixed maximum width + height?: number; // sets a fixed maximum height +}; + +type ContainerProps = BaseProps & { + type: "Container" | "RowLayout"; + children: PreviewProps[]; // any other preview element + borders?: boolean; // sets borders around the layout to visually group its children + borderRadius?: number; // integer. Can be used to create rounded borders + backgroundColor?: string; // HTML color, formatted #RRGGBB + borderWidth?: number; // sets the border width + padding?: number; // integer. adds padding around the container +}; + +type RowLayoutProps = ContainerProps & { + type: "RowLayout"; + columnSize?: "fixed" | "grow"; // default is fixed +}; + +type TextProps = BaseProps & { + type: "Text"; + content: string; // text that should be shown + fontSize?: number; // sets the font size + fontColor?: string; // HTML color, formatted #RRGGBB + bold?: boolean; + italic?: boolean; +}; + +type DropZoneProps = BaseProps & { + type: "DropZone"; + property: object; // widgets property object from Values API + placeholder: string; // text to be shown inside the dropzone when empty + showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource +}; + +type SelectableProps = BaseProps & { + type: "Selectable"; + object: object; // object property instance from the Value API + child: PreviewProps; // any type of preview property to visualize the object instance +}; + +type DatasourceProps = BaseProps & { + type: "Datasource"; + property: object | null; // datasource property object from Values API + child?: PreviewProps; // any type of preview property component (optional) +}; + +export type PreviewProps = + | ImageProps + | ContainerProps + | RowLayoutProps + | TextProps + | DropZoneProps + | SelectableProps + | DatasourceProps; + +export function getProperties( + _values: DateTimePickerPreviewProps, + defaultProperties: Properties /*, target: Platform*/ +): Properties { + // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally. + /* Example + if (values.myProperty === "custom") { + delete defaultProperties.properties.myOtherProperty; + } + */ + return defaultProperties; +} + +// export function check(_values: DateTimePickerPreviewProps): Problem[] { +// const errors: Problem[] = []; +// // Add errors to the above array to throw errors in Studio and Studio Pro. +// /* Example +// if (values.myProperty !== "custom") { +// errors.push({ +// property: `myProperty`, +// message: `The value of 'myProperty' is different of 'custom'.`, +// url: "https://github.com/myrepo/mywidget" +// }); +// } +// */ +// return errors; +// } + +// export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps { +// // Customize your pluggable widget appearance for Studio Pro. +// return { +// type: "Container", +// children: [] +// } +// } + +// export function getCustomCaption(values: DateTimePickerPreviewProps, platform: Platform): string { +// return "DateTimePicker"; +// } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..57c8008c44b12436f8a4078253b80def84485b28 GIT binary patch literal 1466 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP-_yl0q=ND7UH_txP>}-cX|qhfefaU? z$L*UrWfHQbd=9&REWi9RnOnZ9)MWm7``1#9o+Vdw{=L_&dvUkSy42l$F7pMQf7*;| z4j+B7qL`s!>r0zTZUz-Kh6ytm9FmwAIytd(E=O$6zP@hl6I;%Nj&I+;XRn#a$si=m z;NiodV93~TgoP5$#;x^w3?+qM&wb1n{2KIS<&ngh`g-^O|2mY&Gl#RmQCofa=4btj zUj+7UvTi$iUxtFx+}0KexMOyZYtYyI=bSrBWDfsn>T_8Q#b-Efc$3 zyx+}V?%b(B&F;uGQJX)SZ@c(^>Os~A^VPf5{|9VY`0vs3^xYRHe_MLM%bX>C&d>hr z$L~uI&t_P*QJTkVrq8)&r9c1wt=8TnZLrMve=3`JgR74nZ(G`K+qIqZ*1X9(aN^vb z>5?%Fvv@Pt|7Cx%F2BGTVajiu=I_Qzjpk-^eCkWS+1l{oiSxeEtPj+7Di^ ziM(#{_g*=(Tg|imXC5$pIG8M(9qj#6@!E^I@7a3(oT;Dbn8&m&IW~8m*1==h=9kSL zYP^ko$JX-~B*V5q_I2O#=lZi*%x-tj{la_Gr~38X1{RR<-y}Bl9?-vTzwc&_UhSnn z3+@^V=1i)(P~)$cf6MRJ?00M_(tqP6|NLg$BXe_Km*}g{<~QzT?2_C+ZI8y}wE|~BPTwf(LIrpPTpUM7Cd3E?B7cpT)O|cK0J?U(z(~= z%tmv6>MJuW`TYKFLkiFZ91NOU^;zf5zx~T>k}$)iTTjlO+Q)%C2jR|J*kx|qvX{!K zuiwwMK}?N^d}hVI;98Z)0R>*?y}vd$@? F2>@zDNS*)y literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3e0905098f75c7884c5664a19a8e25afc9ba91de GIT binary patch literal 1444 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP($mE;q=ND7UEe(6bcq8W)8A}ZoTXL7 zP}N+})Fx~qI(yR@rj@guEEpfM@UEG#OCxrw@6v*%W$GDu7i1V(LRW-zTI8o+@;TZb zvRmM`@#jBv+7s9&^6#&=e}CpiAJ9H(0fpIF^P0Eq|M%?Gj#>W%LT~m2t!2NEc=h0x zo_BIKl_fTxPeiiM(fxPvWWJc)ms2TG$F8TjCWsjKte*T{r|!kvubWraw#{T*(cbcw z;a5iSHO68Vh8HVmPTtMnki^8$$;qIi#xP+9cFs02?r)#{@1OrVkNLpwygPeBlNx<+ zD#mRL4jJ7)#f%A&W@Yhtt}E+0Lsy>qoBn(L8`u6B3=%z6A7!Tn$sOUE((!no?!Pt$ z1C7fUPsVMQNItpj>g(4Ro%h~mTJwHig#7V})q2-|*&Ls~qHl4sU(#C(tEcNvru^UR z$>Z?3_DXc)+@*P}uP*NYSKq(5y-K*@^WVFBt6cL<>*HUrFVnpd<+C_i@943);e~;# zIu>6Js#`n1_j~w8gIQ}2Ouely9}-%sF1BW-*}U%sU-G{uac?O6eZKm+>wPY(^>HGz z&pwLQo?d7F`|jEUo3=64%KnX>%YWb|^9rqMNBgV$cZa$xxXBd~db88@)yEh2UzISd zd-HE&?nizH;l}*%iITnhJ4AP!SbHGA?SEK0vq4n% z(*ACpFwv)3YfiZ4vbGuh+J1-AgG+pqsKf=J3vw9Zj(^dRm=bzt(eGvbH@SFn!FH5p z_P>(z#|8rQ|tbT2`su%jOq-yWxS9_J^SJtt;J+%4%>}NouN`ZFRF`Rwz_0Pel z=V!AAUeH!OwPfG7^6lN{7n}`Ch&menzw$zZ`~R@~IKDeJ9oNd^ZSwAMEBLKGyTWb$ zxu5>mU%x&dyLy-u=&O6XSNcnK9xwN>$AUm(|PCQzo(0PZ|lEz z58eAcY3aWGXUgODRyj}jEM?EPL*Z=YvR>=;`_}ybac%B$XZgR;c`QnMCu`l?r!^tr zOFk#VOVj8^jsJ6!rG7>JFXv=9vVZ!V{!Kmqbmwz3Jb&eV?t1&DXDdD%F&@~N)4gAj zN{OHQe@uh4dHz%etCK7QvLG<;+<3zfV#t{=A&vckNgvaT`9l8bvPQ-XmnGiMU|NvA z%4p^Fckk95PGfuU;N;@RFJJzMnmf6fVb|KYAAzSHekpkywYiL$T4fQ?oO>V5jklIB T)hs;h3^LWz)z4*}Q$iB}vb{jw literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png new file mode 100644 index 0000000000000000000000000000000000000000..bf2e00774c7af49bfcc6511bb13f6b7a68636e4f GIT binary patch literal 1413 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4Sg(%G1R$q=ND7-TmD%sWJy1mY4e`7jjng zCNyPCWY*o|W|FDH6T!yg<}p=il2Or5W0Bx4u`n^V*3Cg1cB&~Z>1=Hh^YY-*4SEuE z7H?&U9Csd~?O_#pf6$mOd+CI+b0v?9SX0K86dk&nf3KHXLAKU=n8F@L^Cez|MKI z^UCJ@{r_wnL(#s6vLX&fHsE)LpC|HoN5E)aGu#xF6bYbvVEK8e5x+aTK$IW@6)X> z&$U(wd|LHiAXKuU=Hu?y*B|~lTevacx#o$fUyrgY=>Or(ePJIS%dl^!anbYj9(-Sy z@1OqL@N{tFpY*^_9Z4D7_5G{$7{cFAv;E>&ZvV$r%PJ}Q$;}4Ew?DV9)MHQ;pBB+m z^D$m~huDS{n;D&Nf6fn%WjOQqb;z&U)9K8+{8-y;zRU+2U@9Ncxu(D1`NQA){=a4T z{^xdxctg#FmS20W96q|`K2Yafu+DpRjtp5PMO){8&$UlyZrkU@c-F}*hKlO>f^|RgYjqU_~ zFEUGbQT;D>)n9{vdAHx%O?Bm%cJa?jOZBknkN;NQy4k=1lKf{;@bBTS%B=6n3$DL^ z%D>>v+YKi-$*7)-PUipTyZ83F^^X(3H(UMe`+v*J>;2vvOZfYB??;`TJWpBx7`iaZef(7J#%vRLyO?>=o1fc1dKftU{C~5-186!+LxG&Vv_R(h{k_MVgwOrSIdIkb z^yiur`#2aBpRR03e!7f-<(bP$28RqLhDJ^X7BvQe84L~yWOBa#t7bemXZMVTItfO? zhFr5{@ZB}PK}$D@oNOO)IuW1?)AG?)p~gqhjj8lC6-f1dt1=UC4(Ypw5HzxDgx@15W8{hoDh z_bzu;WnEA<6yT+{R!bFLmK^g4I1YfyGUSH>xz|@f5Ov(weLG;b z>3x6$xo~GMX8_7GRpvwG0np-mx;X!E0yWO{CI#W+SnrNMtGJD}98mjhwaeSo%F}JQ zG6jX}XqTlcD{D?|Wa8f4POU=uP&Bd*{~3~6bGlp2_f6^{Bfq=xQ~5ZX-PN`0cFc@) zZR@wbp`eNCHM*V9m^e|S1gBj*78O`j;D1~Jq2CgAS@_F*d(l{NX?|CrL5}Zv3;>#k z3CpCPhFfX(o*k@EVjH0-)G>XDJENUoC&B<$V#tOoEv2rY>I05=y7#P9I?Y!HfIRqs zc1cwh9BCjS>j1zyYlnqns3FmM=kp3bG@|BO9CCI-|K|e><n>G-+%YqLH4F+A0ZO&hV#Yi3jg5Yfq@}}%Hr-_7Wie2t!EWh z-jYsTo|9?;x)XdrTtiaJEDSXqaLW#xG64=3A;xlxS@q!`N7_zNP1>)o5-Uz@M*%tJ))9tKS)1hd| zpKqtYgEa_cDh;7rK4T=ZT&EpYvsIn)5(l%CX%$#q9?0knG&hrA9IilwwfDuYr+A+` z#eiOHFQ(J|=M|G2kPIa?wsyHcr%~tyW;AycUmj7Ys*n>zh&-;{=Xq|pZ`6@rAOj$FXtehAj3Ob z-?dwr$t8IQY{^6uTM=$?cR0ro!Vmp^v$dX8k2(c0R$FWSd2^0?fAJs81-@)7LLkJX zx|n2094iK!pWmmYD^XN6VDxAjiC4eH>unmPAgGPrm#7a`8A15fs;LgaeR~Ch%a*VD zs_M$K-0dWT9~I-jO!a)8Y_x1pVvVdXxYlVS+N@br88ROwFenQ}1HN-6IZ5nAZF0PC z?y29MK3JDD(LPQS37cu7Y5LcVx_m>j8~P$jX8iPc4sD%XV`PS++79nsE9XAN#*pHr zmFeloU)C>)Np6<_aq_`e66{sSa*;aQ4h2ql$M+K4&%TW8JX(8eq#pm?ndkqZL)u*B za(^iQ4yst&(db2 z!2IxdlQh&i`i=cOhF3p0F%nQT^NB+zNk*7G*VrW_<(r+uW(rJ~;|_m^>Yf8&zHr-@ z$)>}#jL5rG%6;Z&ajaRf zKr&kw9?M@d^t~?$e|fY;KYMerPoXdvaMl8Fv@2Sa46ywIdb26@WL3cS zLPh1lM0==D(58A>pXyC1VoS%>-gA8B#>0E|`{Wc)0k$Oyq{o||sb8T`VbefP+>kJF z%{SK*>ryiF`+G;C4lEN~o?j(DreD?wV-kY=kKWP|V{Iv_&JX|r33YLu3z+Ujic2`( zUo6w+yb@sTtBjE70Z+Xg6xZ1Mrb>6gmhkdhJFG_Bq^ZH0fKsid_TCa)dZ5oGujCcT z)^C!mHCIU8HU2rTolLwX2L?(W^_9qpuKI4Q|2&)W9a4S+A>!5DCVTqhS4HMgvUGipVSo;(S7S7mx%yGqwf=5l?oly@g%*=EwN)x1zy zFO|<4&F+dpCmdW3$YF7o`3|r+TN32Sc^AYQiA>d%>ie73)bPz-wmesji06+4&KR zO{mK3!?)`!*rStFW)t<$(I0c_)$8z#opsO7fYFsmPuKTQIX#6n>A~MUdF^?l8nFb0 z(3GwDRn3zb?Cb@faq>po1M3ETChlf;La4ytRXE~br#Ed|NpLOVG%CN!m%Q|bhB@m6 zVd8GY$;*e*C}D5xlqvb}iw>;FB4NlytpQOBzF4L%n7 z7oLyb*{AfNeZgmJlqmK%2wQk?{Zo$Qwr-F!`)cIuWil3{;zfdv+cH0A2)dkwBpLA6wzTn;d>1;GX1>h{LYVcw)TMYiu)td$X4uyJv5;}@!C z#>b1Wr~DBid>0xi5s!+@im*1+02m`AN1*jEfi^7FLFYu<%Gw9}D}w&^^EoAKBgq$gI$b^f7|3(emQ1-(2 zPcn2N_oPio6N7K@MZt3G3M9Y^0^5v1nNLC171)AFf6y^i9)QTmX&HLF96ozknn>+y z*efw4X2^jpk(SrYNJo!0lE^HvCS=i9*Hm6Su{rv4pe@2`@%Tmx;J#6w#Wafwd}{>; a1|{l)fm4QihAJN*xjkKXxiGgAPyGczM*)xk literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png new file mode 100644 index 0000000000000000000000000000000000000000..e758564f7c2163388c9bf5bc54c258518db1ed8d GIT binary patch literal 5485 zcmeHL`#+T18ecQUEi@@1#R##rW9)WEl*_o&skGIQktmfZpQ2on%gh^H)QBR5WVG9I z%5{|7Zz+3~JI#I9)UB%OF^vPu@y8y_*P^uy`#pu*kswHv^vk(w1iY$!Yh+5BYDL z{q!+&bkG|Y*b)I&^ZsO%Ygk+)0S28a+N{mhmSF=B+|}Bh>MSFV=^xi( zzOJpUrNlim2Owppc3_~dhNQY2Fq^gLzB&N#ZRp`Pid!@hk69Pv^8>b_Cu~6!ffVgO zA3R<@)#iZ<>!7-ZPdAp1uTx$EUk89XAfOv@+2UZ41DFSGFyWf6##Sb4wRl&!r@Q5@ z!)`8zxxsuX8LO>PmHe@6e|lwi&ho0vB6#Z2yqr0^w>J4Wjr}n%S;2*NG_Rojj`tH& zwMzo?cBe;f9u6|mj+il#V%v@tiOAswG#gzIy0}h>5;G;g|`_xRG_Z`fupaQtDDswF zA3r=92$BbbX0X~%(o%R_MQ zt!7IQoNzE%RwSmf4gz_GXOumET1ja9Mq8RI+LliNq%FAXbHy|BCKI%Sf)^b8Zn60I z=@%h}mPBR>w5fX6?=UmFg%&V7gx@LD1bWE-(D~*kbnH~_DODo#3LMj@eO}`>{LXPi znlzzF5jpGH+cMMLs~0iJElx2OkRSQ{NZ7~kt50B^dB@T-u8^uK$X2A6O!~!X=-#X6 zo2La5!6zpQJK>FFtl=B)Se;?>?%%3E)aW~LBkV;+k3&E4gkL1*+d4-YYJ#|Gg8AEb z$P)%t2N~(5+`1?*JMPZ&nV~RYk_owG?YJmowKu_Y4cT4Cu>~JAawz+urBQ9ydXbjMo)D1L?Qv0#4F*a)lS45`AmL#Ln&r<&NU|4H~i6= z{*mojE=!Hw`*`LQ@k;toRAS?FO6NBq~Kne^Sj>S5M+eXKVx1>eyB@-;gxln8d2ONA;+{QA6m z-1=3It6uF2aQSHEeq8$LS{Rld<=`zQDDbK*((|wN;%Q0(X==1XQt}|YFh!27&PUPD zGlQPyrekF_i0}P`A&DqM%{s&bTwiUp2R`t$`A2-zS^I(Zia|NL=uAScnCuQS0o&+F z;VMw00YCw-Bb!uY&zev6ajbdFkR4x7D;^wKy4Rclg0;J|AN?p1oz$9p#mdaqLzcPO z)J{id6f;`}Fz<=Rr*?&oBkoHuUhy;|K{VBJe`}j2FKhhm3_h4JM4GC1CK~B*Nk+jx zr`dL0>{bI(!)-m%Y3K19_3pY|Li65eJER{>bj*WKJAMv#unOw*n)=y$E z;j3Rv`os*(yD@K0M@Nvf1lBMFo=p=gW5ZO_s1w5vYY64(Aj%4%pPV^w1)FG;zQW9){cjKTYPL3(|9X1VBCrmB8a;VQi2#dRY;x%5Q zRu&HU8yBV?Enwm>hAx4uPQWi&fOIJhR7S^b^S1jR;w69;N-qOOgMh`FHFLOYuB z>=)L_EAB$1J{G{>5ZdjX4I`n#n;tI*J=_p;7myaKr!>Ex__nrRP)8%BLl)a`PstAZ zrr5O>$m+NLkMGZ7b#sb%RWOp>bJr1ZF4RvAA+z#;VeIGvRK$3G#bY9gI}wQ-Piv-2Us@A^iR}P!=0RHL?QmKnsro=$U&MrU9bfv zUS1Fp9G|m;X}^CLy}5gNfIUc~cRM%x-i8q7-{I)u~Zs7`VcQUQ)$Ejob@}# zV1pl}?;AsJjub|xa1-F)CyUp2V?gV>d0KR|$iVkypr{Q8( + + Date Time Picker + + Input elements + Display + https://docs.mendix.com/appstore/widgets/datetimepicker + + + + + Picker type + + + Date + Time + Range + Date and Time + + + + Date format + + + + Time format + + + + Date time format + + + + Placeholder + + + + + + + Value + + + + + + + + End value + + + + + + + + + Show label + + + + Label caption + + + + + + + Editable + + + Default + Never + Conditionally + + + + Condition + + + + + Read-only style + + + Based on data view (Control) + Control + Text + + + + + + Visible + + + + + + + Validation + + + None + Required + Date in the future + Date in the past + Custom + + + + Custom condition + + + + + Message + + + + + + + Aria required + Used by assistive technologies to indicate that a field is required. + + + + + + On change + + + + On enter + + + + On leave + + + + + diff --git a/packages/pluggableWidgets/date-time-picker-web/src/package.xml b/packages/pluggableWidgets/date-time-picker-web/src/package.xml new file mode 100644 index 0000000000..bada44ee78 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/package.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/pluggableWidgets/date-time-picker-web/tsconfig.json b/packages/pluggableWidgets/date-time-picker-web/tsconfig.json new file mode 100644 index 0000000000..a3d2c5cce8 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/tsconfig.json @@ -0,0 +1,32 @@ +{ + "extends": "@mendix/pluggable-widgets-tools/configs/tsconfig.base", + "compilerOptions": { + "baseUrl": "./", + "noEmitOnError": true, + "sourceMap": true, + "module": "esnext", + "target": "es6", + "lib": ["esnext", "dom"], + "types": ["jest", "node"], + "moduleResolution": "node", + "declaration": false, + "noLib": false, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "strict": true, + "strictFunctionTypes": false, + "skipLibCheck": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "jsx": "react-jsx", + "jsxFactory": "", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "useUnknownInCatchVariables": false, + "exactOptionalPropertyTypes": false, + "paths": { + "react-hot-loader/root": ["./hot-typescript.ts"] + } + }, + "include": ["./src", "./typings"] +} diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts new file mode 100644 index 0000000000..72e7e1bad2 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts @@ -0,0 +1,75 @@ +/** + * This file was generated from DateTimePicker.xml + * WARNING: All changes made to this file will be overwritten + * @author Mendix Widgets Framework Team + */ +import { CSSProperties } from "react"; +import { ActionValue, DynamicValue, EditableValue } from "mendix"; + +export type TypeEnum = "date" | "time" | "range" | "datetime"; + +export type EditableEnum = "default" | "never" | "conditionally"; + +export type ReadOnlyStyleEnum = "default" | "control" | "text"; + +export type ValidationTypeEnum = "none" | "required" | "future" | "past" | "custom"; + +export interface DateTimePickerContainerProps { + name: string; + class: string; + style?: CSSProperties; + tabIndex?: number; + type: TypeEnum; + dateFormat: string; + timeFormat: string; + dateTimeFormat: string; + placeholder?: DynamicValue; + dateAttribute: EditableValue; + endDateAttribute?: EditableValue; + showLabel: boolean; + label?: DynamicValue; + editable: EditableEnum; + editabilityCondition?: DynamicValue; + readOnlyStyle: ReadOnlyStyleEnum; + visible?: DynamicValue; + validationType: ValidationTypeEnum; + customValidation?: DynamicValue; + validationMessage?: DynamicValue; + ariaRequired: boolean; + onChange?: ActionValue; + onEnter?: ActionValue; + onLeave?: ActionValue; +} + +export interface DateTimePickerPreviewProps { + /** + * @deprecated Deprecated since version 9.18.0. Please use class property instead. + */ + className: string; + class: string; + style: string; + styleObject?: CSSProperties; + readOnly: boolean; + renderMode: "design" | "xray" | "structure"; + translate: (text: string) => string; + type: TypeEnum; + dateFormat: string; + timeFormat: string; + dateTimeFormat: string; + placeholder: string; + dateAttribute: string; + endDateAttribute: string; + showLabel: boolean; + label: string; + editable: EditableEnum; + editabilityCondition: string; + readOnlyStyle: ReadOnlyStyleEnum; + visible: string; + validationType: ValidationTypeEnum; + customValidation: string; + validationMessage: string; + ariaRequired: boolean; + onChange: {} | null; + onEnter: {} | null; + onLeave: {} | null; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 684f01279c..75ffb611da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,7 +194,7 @@ importers: version: 0.8.5 ts-node: specifier: 10.9.2 - version: 10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3) + version: 10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3) zod: specifier: ^3.25.67 version: 3.25.76 @@ -243,7 +243,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -276,13 +276,13 @@ importers: version: 9.5.4(typescript@5.9.3)(webpack@5.102.1) ts-node: specifier: 10.9.2 - version: 10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3) + version: 10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3) typescript: specifier: '>5.8.0' version: 5.9.3 webpack: specifier: ^5.75.0 - version: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + version: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) webpack-cli: specifier: ^5.0.1 version: 5.1.4(webpack@5.102.1) @@ -422,7 +422,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -447,7 +447,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -487,7 +487,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -515,7 +515,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -546,7 +546,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -586,7 +586,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -617,7 +617,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -657,7 +657,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -703,7 +703,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -734,7 +734,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -780,7 +780,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -829,7 +829,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -900,7 +900,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -946,7 +946,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -992,7 +992,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1026,7 +1026,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1081,7 +1081,7 @@ importers: version: 18.0.1 '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1118,7 +1118,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1164,7 +1164,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1204,7 +1204,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1262,7 +1262,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1329,7 +1329,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1340,6 +1340,34 @@ importers: specifier: workspace:* version: link:../../shared/widget-plugin-test-utils + packages/pluggableWidgets/date-time-picker-web: + dependencies: + classnames: + specifier: ^2.5.1 + version: 2.5.1 + react-datepicker: + specifier: ^8.9.0 + version: 8.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + devDependencies: + '@mendix/automation-utils': + specifier: workspace:* + version: link:../../../automation/utils + '@mendix/eslint-config-web-widgets': + specifier: workspace:* + version: link:../../shared/eslint-config-web-widgets + '@mendix/pluggable-widgets-tools': + specifier: 10.21.2 + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + '@mendix/prettier-config-web-widgets': + specifier: workspace:* + version: link:../../shared/prettier-config-web-widgets + '@mendix/rollup-web-widgets': + specifier: workspace:* + version: link:../../shared/rollup-web-widgets + '@mendix/widget-plugin-test-utils': + specifier: workspace:* + version: link:../../shared/widget-plugin-test-utils + packages/pluggableWidgets/document-viewer-web: dependencies: '@mendix/widget-plugin-component-kit': @@ -1375,7 +1403,7 @@ importers: version: 7.27.1(@babel/core@7.28.4) '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/rollup-web-widgets': specifier: workspace:* version: link:../../shared/rollup-web-widgets @@ -1397,7 +1425,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1427,7 +1455,7 @@ importers: version: 2.5.1 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + version: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) packages/pluggableWidgets/events-web: dependencies: @@ -1443,7 +1471,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1480,7 +1508,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1523,7 +1551,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1581,7 +1609,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1618,7 +1646,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1652,7 +1680,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1683,7 +1711,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1711,7 +1739,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1745,7 +1773,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1782,7 +1810,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1825,7 +1853,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1874,7 +1902,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1926,7 +1954,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1957,7 +1985,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -1988,7 +2016,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2022,7 +2050,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2062,7 +2090,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2099,7 +2127,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2175,7 +2203,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2232,7 +2260,7 @@ importers: version: 10.1.3(postcss@8.5.6) rollup-plugin-postcss: specifier: ^4.0.2 - version: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + version: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) rollup-preserve-directives: specifier: ^1.1.3 version: 1.1.3(rollup@3.29.5) @@ -2251,7 +2279,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2291,7 +2319,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2322,7 +2350,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2368,7 +2396,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2399,7 +2427,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2433,7 +2461,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2464,7 +2492,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2492,7 +2520,7 @@ importers: version: link:../../shared/eslint-config-web-widgets '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets @@ -2586,7 +2614,7 @@ importers: version: 5.2.0(eslint@9.37.0(jiti@2.6.1)) eslint-plugin-jest: specifier: ^29.0.1 - version: 29.0.1(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3) + version: 29.0.1(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3) eslint-plugin-package-json: specifier: ^0.56.1 version: 0.56.4(@types/estree@1.0.8)(eslint@9.37.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1) @@ -2635,7 +2663,7 @@ importers: version: link:../widget-plugin-test-utils '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) packages/shared/prettier-config-web-widgets: dependencies: @@ -2659,7 +2687,7 @@ importers: devDependencies: '@mendix/pluggable-widgets-tools': specifier: 10.21.2 - version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) rollup-plugin-copy: specifier: ^3.5.0 version: 3.5.0 @@ -2679,10 +2707,10 @@ importers: version: link:../tsconfig-web-widgets '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) classnames: specifier: ^2.5.1 version: 2.5.1 @@ -2747,10 +2775,10 @@ importers: version: link:../tsconfig-web-widgets '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 @@ -2808,10 +2836,10 @@ importers: version: link:../widget-plugin-test-utils '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) date-fns: specifier: ^3.6.0 version: 3.6.0 @@ -2845,10 +2873,10 @@ importers: version: link:../widget-plugin-test-utils '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) classnames: specifier: ^2.5.1 version: 2.5.1 @@ -2872,10 +2900,10 @@ importers: version: link:../widget-plugin-platform '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) classnames: specifier: ^2.5.1 version: 2.5.1 @@ -2906,10 +2934,10 @@ importers: version: link:../tsconfig-web-widgets '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) optionalDependencies: react: specifier: '>=18.0.0 <19.0.0' @@ -2928,10 +2956,10 @@ importers: version: link:../tsconfig-web-widgets '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) classnames: specifier: ^2.5.1 version: 2.5.1 @@ -2990,10 +3018,10 @@ importers: version: link:../tsconfig-web-widgets '@swc/core': specifier: ^1.7.26 - version: 1.13.5 + version: 1.13.5(@swc/helpers@0.5.17) '@swc/jest': specifier: ^0.2.36 - version: 0.2.39(@swc/core@1.13.5) + version: 0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17)) big.js: specifier: ^6.2.2 version: 6.2.2 @@ -3921,6 +3949,12 @@ packages: react: '>=18.0.0 <19.0.0' react-dom: '>=18.0.0 <19.0.0' + '@floating-ui/react@0.27.16': + resolution: {integrity: sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==} + peerDependencies: + react: '>=18.0.0 <19.0.0' + react-dom: '>=18.0.0 <19.0.0' + '@floating-ui/utils@0.2.10': resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==} @@ -4690,6 +4724,9 @@ packages: '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} + '@swc/helpers@0.5.17': + resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==} + '@swc/jest@0.2.39': resolution: {integrity: sha512-eyokjOwYd0Q8RnMHri+8/FS1HIrIUKK/sRrFp8c1dThUOfNeCWbLmBP1P5VsKdvmkd25JaH+OKYwEYiAYg9YAA==} engines: {npm: '>= 7.0.0'} @@ -9346,6 +9383,12 @@ packages: react: '>=18.0.0 <19.0.0' react-dom: '>=18.0.0 <19.0.0' + react-datepicker@8.9.0: + resolution: {integrity: sha512-yoRsGxjqVRjk8iUBssrW9jcinTeyP9mAfTpuzdKvlESOUjdrY0sfDTzIZWJAn38jvNcxW1dnDmW1CinjiFdxYQ==} + peerDependencies: + react: '>=18.0.0 <19.0.0' + react-dom: '>=18.0.0 <19.0.0' + react-devtools-core@6.1.5: resolution: {integrity: sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==} @@ -12073,6 +12116,14 @@ snapshots: react-dom: 18.3.1(react@18.3.1) tabbable: 6.2.0 + '@floating-ui/react@0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/utils': 0.2.10 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tabbable: 6.2.0 + '@floating-ui/utils@0.2.10': {} '@googlemaps/jest-mocks@2.22.6': {} @@ -12149,7 +12200,7 @@ snapshots: jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))': + '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -12163,7 +12214,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -12443,7 +12494,7 @@ snapshots: '@melloware/coloris@0.25.0': {} - '@mendix/pluggable-widgets-tools@10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)': + '@mendix/pluggable-widgets-tools@10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1)': dependencies: '@babel/core': 7.28.4 '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.4) @@ -12495,7 +12546,7 @@ snapshots: identity-obj-proxy: 3.0.0 jasmine: 3.99.0 jasmine-core: 3.99.1 - jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) jest-environment-jsdom: 29.7.0 jest-jasmine2: 29.7.0 jest-junit: 13.2.0 @@ -12517,14 +12568,14 @@ snapshots: rollup-plugin-command: 1.1.3 rollup-plugin-license: 3.6.0(picomatch@4.0.3)(rollup@3.29.5) rollup-plugin-livereload: 2.0.5 - rollup-plugin-postcss: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + rollup-plugin-postcss: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) rollup-plugin-re: 1.0.7 sass: 1.93.2 semver: 7.7.3 shelljs: 0.8.5 shx: 0.3.4 - ts-jest: 29.4.5(@babel/core@7.28.4)(@jest/transform@29.7.0)(@jest/types@30.2.0)(babel-jest@29.7.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3) - ts-node: 10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3) + ts-jest: 29.4.5(@babel/core@7.28.4)(@jest/transform@29.7.0)(@jest/types@30.2.0)(babel-jest@29.7.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3) + ts-node: 10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3) typescript: 5.9.3 xml2js: 0.6.2 zip-a-folder: 0.0.12 @@ -13020,7 +13071,7 @@ snapshots: '@swc/core-win32-x64-msvc@1.13.5': optional: true - '@swc/core@1.13.5': + '@swc/core@1.13.5(@swc/helpers@0.5.17)': dependencies: '@swc/counter': 0.1.3 '@swc/types': 0.1.25 @@ -13035,13 +13086,19 @@ snapshots: '@swc/core-win32-arm64-msvc': 1.13.5 '@swc/core-win32-ia32-msvc': 1.13.5 '@swc/core-win32-x64-msvc': 1.13.5 + '@swc/helpers': 0.5.17 '@swc/counter@0.1.3': {} - '@swc/jest@0.2.39(@swc/core@1.13.5)': + '@swc/helpers@0.5.17': + dependencies: + tslib: 2.8.1 + optional: true + + '@swc/jest@0.2.39(@swc/core@1.13.5(@swc/helpers@0.5.17))': dependencies: '@jest/create-cache-key-function': 30.2.0 - '@swc/core': 1.13.5 + '@swc/core': 1.13.5(@swc/helpers@0.5.17) '@swc/counter': 0.1.3 jsonc-parser: 3.3.1 @@ -13717,17 +13774,17 @@ snapshots: '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.102.1)': dependencies: - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.102.1) '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.102.1)': dependencies: - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.102.1) '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.102.1)': dependencies: - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.102.1) '@xml-tools/parser@1.0.11': @@ -14546,7 +14603,7 @@ snapshots: normalize-path: 3.0.0 schema-utils: 4.3.3 serialize-javascript: 6.0.2 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) core-js-compat@3.46.0: dependencies: @@ -14585,13 +14642,13 @@ snapshots: dependencies: buffer: 5.7.1 - create-jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + create-jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -14658,7 +14715,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.7.3 optionalDependencies: - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) css-select@4.3.0: dependencies: @@ -15366,13 +15423,13 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@29.0.1(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3): + eslint-plugin-jest@29.0.1(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3): dependencies: '@typescript-eslint/utils': 8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) eslint: 9.37.0(jiti@2.6.1) optionalDependencies: '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) - jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) transitivePeerDependencies: - supports-color - typescript @@ -16676,16 +16733,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + jest-cli@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + create-jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest-config: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -16695,7 +16752,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + jest-config@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: '@babel/core': 7.28.4 '@jest/test-sequencer': 29.7.0 @@ -16721,7 +16778,7 @@ snapshots: strip-json-comments: 3.1.1 optionalDependencies: '@types/node': 22.14.1 - ts-node: 10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3) + ts-node: 10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -17038,12 +17095,12 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -17701,7 +17758,7 @@ snapshots: dependencies: schema-utils: 4.3.3 tapable: 2.3.0 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) mini-svg-data-uri@1.4.4: {} @@ -18282,13 +18339,13 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.10 - postcss-load-config@3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + postcss-load-config@3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: lilconfig: 2.1.0 yaml: 1.10.2 optionalDependencies: postcss: 8.5.6 - ts-node: 10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3) + ts-node: 10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3) postcss-merge-longhand@5.1.7(postcss@8.5.6): dependencies: @@ -18762,6 +18819,14 @@ snapshots: react-dom: 18.3.1(react@18.3.1) react-onclickoutside: 6.13.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-datepicker@8.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@floating-ui/react': 0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + date-fns: 4.1.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-devtools-core@6.1.5: dependencies: shell-quote: 1.8.3 @@ -19218,7 +19283,7 @@ snapshots: - bufferutil - utf-8-validate - rollup-plugin-postcss@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): + rollup-plugin-postcss@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)): dependencies: chalk: 4.1.2 concat-with-sourcemaps: 1.1.0 @@ -19227,7 +19292,7 @@ snapshots: p-queue: 6.6.2 pify: 5.0.0 postcss: 8.5.6 - postcss-load-config: 3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + postcss-load-config: 3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) postcss-modules: 4.3.1(postcss@8.5.6) promise.series: 0.2.0 resolve: 1.22.10 @@ -19300,7 +19365,7 @@ snapshots: sass-loader@13.3.3(sass@1.93.2)(webpack@5.102.1): dependencies: neo-async: 2.6.2 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) optionalDependencies: sass: 1.93.2 @@ -19797,16 +19862,16 @@ snapshots: inherits: 2.0.4 readable-stream: 3.6.2 - terser-webpack-plugin@5.3.14(@swc/core@1.13.5)(webpack@5.102.1): + terser-webpack-plugin@5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.102.1): dependencies: '@jridgewell/trace-mapping': 0.3.31 jest-worker: 27.5.1 schema-utils: 4.3.3 serialize-javascript: 6.0.2 terser: 5.44.0 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) optionalDependencies: - '@swc/core': 1.13.5 + '@swc/core': 1.13.5(@swc/helpers@0.5.17) terser@5.44.0: dependencies: @@ -19899,12 +19964,12 @@ snapshots: ts-custom-error@3.3.1: {} - ts-jest@29.4.5(@babel/core@7.28.4)(@jest/transform@29.7.0)(@jest/types@30.2.0)(babel-jest@29.7.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3): + ts-jest@29.4.5(@babel/core@7.28.4)(@jest/transform@29.7.0)(@jest/types@30.2.0)(babel-jest@29.7.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)))(typescript@5.9.3): dependencies: bs-logger: 0.2.6 fast-json-stable-stringify: 2.1.0 handlebars: 4.7.8 - jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3)) json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 @@ -19927,9 +19992,9 @@ snapshots: semver: 7.7.3 source-map: 0.7.6 typescript: 5.9.3 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) - ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3): + ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.14.1)(typescript@5.9.3): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -19947,7 +20012,7 @@ snapshots: v8-compile-cache-lib: 3.0.1 yn: 3.1.1 optionalDependencies: - '@swc/core': 1.13.5 + '@swc/core': 1.13.5(@swc/helpers@0.5.17) tslib@1.14.1: {} @@ -20218,7 +20283,7 @@ snapshots: import-local: 3.2.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4) + webpack: 5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4) webpack-merge: 5.10.0 webpack-merge@5.10.0: @@ -20229,7 +20294,7 @@ snapshots: webpack-sources@3.3.3: {} - webpack@5.102.1(@swc/core@1.13.5)(webpack-cli@5.1.4): + webpack@5.102.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack-cli@5.1.4): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.8 @@ -20253,7 +20318,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 4.3.3 tapable: 2.3.0 - terser-webpack-plugin: 5.3.14(@swc/core@1.13.5)(webpack@5.102.1) + terser-webpack-plugin: 5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.102.1) watchpack: 2.4.4 webpack-sources: 3.3.3 optionalDependencies: From 3a0c1a1cb246d43f31ac15630091d34191643a6a Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:23:01 +0100 Subject: [PATCH 02/15] feat(date-time-picker-web): create datepicker controller --- .../src/helpers/DatePickerController.ts | 137 ++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts new file mode 100644 index 0000000000..ef31d3d463 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts @@ -0,0 +1,137 @@ +import { ActionValue } from "mendix"; +import { action, computed, makeObservable, observable } from "mobx"; +import { ClassAttributes, createRef, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler } from "react"; +import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker"; + +interface DatePickerBackendProps extends ReactDatePickerProps, ClassAttributes {} + +interface PickerState { + startDate: Date | undefined; + endDate: Date | undefined; + expanded: boolean; + selectsRange: boolean; +} + +type Params = { + defaultStart?: Date; + defaultEnd?: Date; + onChange?: ActionValue<"none">; + type: "date" | "time" | "datetime" | "range"; +}; + +export class DatePickerController { + private _dates: Array; + private _timer = -1; + private _defaultState: Array; + private _type: "date" | "time" | "datetime" | "range"; + expanded = false; + pickerRef = createRef>(); + + constructor(params: Params) { + this._dates = this.getDefaults(params); + this._defaultState = this.getDefaults(params); + this._type = params.type; + + // implement onChange action + + makeObservable(this, { + pickerState: computed, + expanded: observable, + handlePickerChange: action, + handleCalendarOpen: action, + handleCalendarClose: action, + handleKeyDown: action + }); + } + + get pickerState(): PickerState { + const isRange = this._type === "range"; + return { + endDate: this._selectsRange ? this._dates[1] : undefined, + expanded: this.expanded, + selectsRange: isRange, + startDate: this._dates[0] + }; + } + + private get _selectsRange(): boolean { + return this._type === "range"; + } + + handlePickerChange: DatePickerBackendProps["onChange"] = (value: Date | [Date | null, Date | null] | null) => { + if (this._selectsRange) { + const [start, end] = value as [Date | null, Date | null]; + this._dates[0] = start ?? undefined; + this._dates[1] = end ?? undefined; + return; + } else { + this._dates[0] = value as Date; + return; + } + }; + + handleCalendarOpen: DatePickerBackendProps["onCalendarOpen"] = () => { + this.expanded = true; + }; + + handleCalendarClose: DatePickerBackendProps["onCalendarOpen"] = () => { + this.expanded = false; + }; + + /** We use mouse down to avoid race condition with calendar "outside click" event. */ + handleButtonMouseDown: MouseEventHandler = () => { + if (this.expanded === false) { + this._setActive(); + } + }; + + handleButtonKeyDown: KeyboardEventHandler = e => { + if (e.code === "Enter" || e.code === "Space") { + e.preventDefault(); + e.stopPropagation(); + this._setActive(); + } + }; + + handleKeyDown: KeyboardEventHandler = event => { + // Clear value on "Backspace" in range mode. Works only when focused on input. + if ( + this._selectsRange && + (event.target as HTMLInputElement).nodeName === "INPUT" && + event.code === "Backspace" + ) { + this._dates = [undefined, undefined]; + } + }; + + /** + * Prevent any input changes in range selection mode. + * @remark + * Don't change this method unless there no other way to solve your problem. + * This method is just UX tweak that should prevent user confusion and have very low + * value in widget behavior. Feel free to remove this method if you refactoring code. + */ + UNSAFE_handleChangeRaw = (event?: MouseEvent | KeyboardEvent | undefined): void => { + if (event?.type === "change" && this._selectsRange) { + event.preventDefault(); + } + }; + + private _setActive(): void { + const picker = this.pickerRef.current; + clearTimeout(this._timer); + // Run setFocus on next tick to prevent calling focus on disabled element. + this._timer = window.setTimeout(() => { + picker?.setFocus(); + this._timer = -1; + }) as number; + } + + setup(): (() => void) | void { + this._dates = this._defaultState; + } + + private getDefaults(params: Params): Array { + return params.type === "range" ? [params.defaultStart, params.defaultEnd] : [params.defaultStart, undefined]; + } +} From b00f3cb86dddeff37899460f94a6c09d1317bef4 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:27:23 +0100 Subject: [PATCH 03/15] feat(date-time-picker-web): create hook to call datepicker controller --- .../src/hooks/useController.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/hooks/useController.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useController.ts b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useController.ts new file mode 100644 index 0000000000..c20f54403f --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useController.ts @@ -0,0 +1,27 @@ +import { ActionValue } from "mendix"; +import { useEffect, useState } from "react"; +import { TypeEnum } from "typings/DateTimePickerProps"; +import { DatePickerController } from "../helpers/DatePickerController"; + +type UseControllerProps = { + endDate?: Date; + onChange?: ActionValue<"none">; + startDate?: Date; + type: TypeEnum; +}; + +export function useController({ endDate, startDate, type, onChange }: UseControllerProps): DatePickerController { + const [controller] = useState( + () => + new DatePickerController({ + defaultEnd: endDate, + defaultStart: startDate, + type, + onChange + }) + ); + + useEffect(() => controller.setup(), [controller]); + + return controller; +} From 495f7a7fc0cb04183f334f41efefafeb6f84037d Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:28:52 +0100 Subject: [PATCH 04/15] feat(date-time-picker-web): add styles for date time picker widget --- .../src/ui/DateTimePicker.scss | 242 ++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss diff --git a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss new file mode 100644 index 0000000000..43d981b8ff --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss @@ -0,0 +1,242 @@ +.widget-datetimepicker { + align-items: center; + color: var(--font-color-default); + display: flex; + font-size: var(--font-size-small); + margin: 0 -15px 16px -15px; + + &-label-wrapper { + flex: 0 0 25%; + max-width: 25%; + padding: 0 16px; + } + + &-label { + font-size: var(--font-size-default); + font-weight: 600; + text-align: right; + text-overflow: ellipsis; + width: 100%; + } + + &-wrapper { + align-items: center; + display: flex; + flex: 0 0 75%; + max-width: 75%; + padding: 0 16px; + } + + &-input { + background-color: var(--bg-color-secondary); + border: 1px solid var(--gray-primary); + border-radius: 4px; + display: flex; + flex: 1; + font-size: var(--font-size-default); + height: auto; + + min-width: 50px; + padding: var(--spacing-small); + transition: + border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; + + &:focus-within { + border-color: var(--link-color); + } + } + + &-input-button { + background: var(--bg-color-secondary); + border: 1px solid var(--gray-primary); + border-radius: 4px; + color: var(--link-color); + font-size: var(--font-size-default); + line-height: var(--line-height-base); + margin: 0; + margin-left: var(--spacing-small); + padding: 0.6em 1em; + + &[data-pressed] { + box-shadow: none; + background: var(--gray-primary); + } + + &[data-focus-visible] { + outline: 2px solid var(--link-color); + outline-offset: 2px; + } + + svg { + width: 14px; + height: 14px; + } + } + + &-calendar { + background-color: var(--bg-color); + border: 1px solid var(--gray-primary); + border-radius: var(--border-radius-default); + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); + font-size: var(--font-size-small); + padding: var(--spacing-small); + + .react-datepicker__current-month { + color: var(--font-color-default); + font-size: var(--font-size-default); + font-weight: 600; + } + + .react-datepicker__month-select, + .react-datepicker__year-select { + background-color: transparent; + border: none; + border-radius: 4px; + box-sizing: border-box; + color: var(--font-color-default); + cursor: pointer; + display: flex; + flex: 1; + justify-content: space-between; + align-items: center; + font-family: inherit; + font-size: inherit; + line-height: inherit; + margin: 0; + min-width: 50px; + padding: 0; + padding-inline: 4px; + transition: all 0.4s allow-discrete; + + &:focus-within { + outline: 2px solid var(--link-color); + outline-offset: 1px; + } + + &, + &::picker(select) { + appearance: base-select; + } + + &:hover, + &:focus { + background-color: var(--brand-default); + color: var(--link-color); + } + + &::picker(select) { + border: none; + border-radius: 4px; + min-width: 100px; + opacity: 0; + left: anchor(0%); + top: calc(anchor(bottom) + 4px); + transition: all 0.4s allow-discrete; + + &:popover-open { + height: calc-size(auto, size); + opacity: 1; + } + } + + &::picker-icon { + content: ""; + width: 14px; + height: 14px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%230a1325' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A"); + transition: rotate 0.2s ease-out; + } + + &:open::picker-icon { + rotate: 180deg; + } + + option { + background: white; + border: 1px solid #e7e7e9; + cursor: pointer; + padding: 8px; + transition-property: color, background; + transition-duration: 0.2s; + transition-timing-function: ease-out; + + &:first-of-type { + border-radius: 4px 4px 0 0; + } + + &:last-of-type { + border-radius: 0 0 4px 4px; + } + + &:not(&:last-of-type) { + border-bottom: none; + } + + &:hover, + &:focus { + background-color: #e7e7e9; + color: #264ae5; + } + + &:checked { + background-color: #264ae5; + color: #f8f8f8; + } + + &::checkmark { + display: none; + } + } + } + + .react-datepicker__day-name, + .react-datepicker__day { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + height: 35px; + width: 35px; + } + + .react-datepicker__day-name { + color: var(--link-color); + font-weight: bold; + } + + .react-datepicker__month { + margin: 0; + } + + .react-datepicker__day-names, + .react-datepicker__week { + display: flex; + gap: 4px; + margin-bottom: 4px; + } + + .react-datepicker__day { + cursor: pointer; + + &:hover, + &[data-pressed] { + background-color: var(--brand-default); + border-radius: 50%; + color: var(--link-color); + } + + &:focus-within { + border-radius: 50%; + outline: 2px solid var(--link-color); + outline-offset: 1px; + } + + &--selected { + background-color: var(--link-color); + border-radius: 50%; + color: var(--bg-color); + } + } + } +} From c90e254687545def1798e69f9f3681abf4ea85aa Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:29:22 +0100 Subject: [PATCH 05/15] feat(date-time-picker-web): implement useSetupProps hook and date-utils for date picker --- .../src/hooks/useSetupProps.ts | 147 ++++++++++++++++++ .../src/utils/date-utils.ts | 89 +++++++++++ .../date-time-picker-web/typings/global.d.ts | 30 ++++ 3 files changed, 266 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/utils/date-utils.ts create mode 100644 packages/pluggableWidgets/date-time-picker-web/typings/global.d.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts new file mode 100644 index 0000000000..861de24379 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts @@ -0,0 +1,147 @@ +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { DatePickerProps } from "react-datepicker"; +import { DateTimePickerContainerProps, TypeEnum } from "typings/DateTimePickerProps"; +import { MXSessionLocale } from "../../typings/global"; +import { DatePickerController } from "../helpers/DatePickerController"; +import { getLocale, pickerDateFormat, setupLocales } from "../utils/date-utils"; + +export type Day = 0 | 1 | 2 | 3 | 4 | 5 | 6; + +export function useSetupProps( + { + tabIndex, + type, + dateFormat, + timeFormat, + dateTimeFormat, + placeholder, + dateAttribute, + editable, + ariaRequired, + onEnter, + onLeave + }: DateTimePickerContainerProps, + controller: DatePickerController +): DatePickerProps { + const id = `DateFilter${generateUUID()}`; + const locale = getLocale(); + const calendarStartDay = locale.firstDayOfWeek as Day; + const calendarLocale = setupLocales(locale); + + const formatProps = formatPropsBuilder( + type, + dateFormat, + timeFormat, + dateTimeFormat, + dateAttribute.value ?? new Date(), + null, + locale + ); + + const popperProps: Pick< + DatePickerProps, + "popperPlacement" | "popperProps" | "showPopperArrow" | "popperModifiers" + > = { + popperPlacement: "bottom-start", + popperProps: { + strategy: "fixed", + transform: false + }, + showPopperArrow: false, + popperModifiers: [ + { + name: "computeStyles", + options: { + gpuAcceleration: false + }, + fn: () => ({}) + } + ] + }; + + return { + // Static props + allowSameDay: false, + autoFocus: false, + calendarClassName: "widget-datetimepicker-calendar", + className: "widget-datetimepicker-input", + dropdownMode: "select", + enableTabLoop: true, + shouldCloseOnSelect: false, + showMonthDropdown: true, + showYearDropdown: true, + strictParsing: true, + useWeekdaysShort: false, + + // Base props + ariaLabelledBy: `${id}-label`, + ariaRequired: ariaRequired.toString(), + disabled: editable === "never", + locale: calendarLocale, + placeholderText: placeholder?.status === "available" ? placeholder.value : "", + tabIndex: tabIndex ?? 0, + + // Formatting props + calendarStartDay, + ...formatProps, + + // Events props + onBlur: () => onLeave?.canExecute && !onLeave.isExecuting && onLeave.execute(), + onCalendarClose: controller.handleCalendarClose, + onCalendarOpen: controller.handleCalendarOpen, + onChange: controller.handlePickerChange, + onChangeRaw: controller.UNSAFE_handleChangeRaw, + onFocus: () => onEnter?.canExecute && !onEnter.isExecuting && onEnter.execute(), + onKeyDown: controller.handleKeyDown, + + // Popper props + ...popperProps + }; +} + +function formatPropsBuilder( + type: TypeEnum, + dateFormat: string, + timeFormat: string, + dateTimeFormat: string, + date: Date, + endDate: Date | null, + locale: MXSessionLocale +): Omit { + switch (type) { + case "date": + return { + dateFormat: dateFormat || pickerDateFormat(locale), + showTimeSelect: false, + showTimeSelectOnly: false, + selected: date + }; + case "time": + return { + dateFormat: timeFormat || "h:mm aa", + showTimeSelect: true, + showTimeSelectOnly: true, + timeIntervals: 15, + timeCaption: "Time", + selected: date + }; + case "datetime": + return { + dateFormat: dateTimeFormat || pickerDateFormat(locale), + showTimeSelect: true, + timeIntervals: 15, + timeCaption: "Time", + timeFormat: timeFormat || "h:mm aa", + selected: date + }; + case "range": + return { + dateFormat: dateFormat || pickerDateFormat(locale), + selected: date, + isClearable: true, + selectsRange: true, + startDate: date, + endDate: endDate + }; + } +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/utils/date-utils.ts b/packages/pluggableWidgets/date-time-picker-web/src/utils/date-utils.ts new file mode 100644 index 0000000000..f1bb0b14bf --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/utils/date-utils.ts @@ -0,0 +1,89 @@ +import * as locales from "date-fns/locale"; +import { registerLocale } from "react-datepicker"; +import { MXSessionLocale } from "../../typings/global"; + +/** + * This function takes format string and replace + * single "d" and "M" with their "double" equivalent + * Main purpose is to "fix" value formats accepted + * by DateFilter input. Idea is that if format string is + * uses short format (e.g d-M-yyyy) user should still + * be able to type value with leading zeros "09-02-2002". + * + * Example: + * "d/M/yyyy" -> "dd/MM/yyyy" + * + * @param formatString + */ +export function doubleMonthOrDayWhenSingle(formatString: string): string { + return formatString.replaceAll(/d+|M+/g, m => (m.length > 1 ? m : m + m)); +} + +/** + * Given a date formatter string replaces all uppercase 'E' to the lowercase 'e' + * this function returns the same string with the above characters replaced. + * Example: "YYww.E" returns "YYww.e" + * @function dayOfWeekWhenUpperCase + * @param {string} formatString The string used to find cases of uppercase E. + * @return {string} The same string but with 'E' in lowercase ('e'). + * + */ +export function dayOfWeekWhenUpperCase(formatString: string): string { + return formatString.replaceAll(/E/g, m => m.toLowerCase()); +} + +/** + * Map current app date format to date picker date format(s). + * @returns {string|string[]} + */ +export function pickerDateFormat(locale: MXSessionLocale): string | string[] { + const { + patterns: { date: appDateFormat } + } = locale; + let dateFormat: string | string[]; + // Replace with full patterns d -> dd, M -> MM + dateFormat = doubleMonthOrDayWhenSingle(appDateFormat); + // Replace Date format E to follow unicode standard (e...eeee) + dateFormat = dayOfWeekWhenUpperCase(dateFormat); + // Use multiple formats if formats are not equal + return dateFormat === appDateFormat ? dateFormat : [dateFormat, appDateFormat]; +} + +interface DateFilterLocale { + [key: string]: locales.Locale; +} + +/** + * Reg current locale in datepicker config. + * Later this locale can be passed to datepicker as locale prop. + * @returns {string} registered locale. + */ +export function setupLocales(locale: MXSessionLocale): string { + const { languageTag = "en-US" } = locale; + + const [language] = languageTag.split("-"); + const languageTagWithoutDash = languageTag.replace("-", ""); + + if (languageTagWithoutDash in locales) { + registerLocale(language, (locales as DateFilterLocale)[languageTagWithoutDash]); + } else if (language in locales) { + registerLocale(language, (locales as DateFilterLocale)[language]); + } + + return language; +} + +export function getLocale(): MXSessionLocale { + return window.mx + ? window.mx.session.getConfig().locale + : { + languageTag: "en-US", + code: "en_US", + firstDayOfWeek: 0, + patterns: { + date: "M/d/yyyy", + datetime: "M/d/yyyy, h:mm a", + time: "h:mm a" + } + }; +} diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/global.d.ts b/packages/pluggableWidgets/date-time-picker-web/typings/global.d.ts new file mode 100644 index 0000000000..fb3a5bd3b8 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/typings/global.d.ts @@ -0,0 +1,30 @@ +export interface MXLocalePatterns { + date: string; + datetime: string; + time: string; +} + +export interface MXSessionLocale { + code: string; + firstDayOfWeek: number; + languageTag: string; + patterns: MXLocalePatterns; +} + +export interface MXSessionConfig { + locale: MXSessionLocale; +} + +export interface MXSession { + getConfig(): MXSessionConfig; +} + +export interface MXGlobalObject { + session: MXSession; +} + +declare global { + interface Window { + mx?: MXGlobalObject; + } +} From 6290a3201be6ded303bd4587af86d52351fc896c Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:29:37 +0100 Subject: [PATCH 06/15] feat(date-time-picker-web): add DateTimePickerContainer component --- .../components/DateTimePickerContainer.tsx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx new file mode 100644 index 0000000000..b9836e0f27 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx @@ -0,0 +1,73 @@ +import classNames from "classnames"; +import ReactDatePicker from "react-datepicker"; +import { DateTimePickerContainerProps } from "typings/DateTimePickerProps"; +import { useController } from "../hooks/useController"; +import { useSetupProps } from "../hooks/useSetupProps"; + +export function DateTimePickerContainer(props: DateTimePickerContainerProps) { + const controller = useController({ + endDate: props.endDateAttribute?.status === "available" ? (props.endDateAttribute.value as Date) : undefined, + startDate: props.dateAttribute.status === "available" ? (props.dateAttribute.value as Date) : undefined, + type: props.type, + onChange: props.onChange + }); + const pickerProps = useSetupProps(props, controller); + const label = props.showLabel && props.label?.status === "available" ? props.label.value : null; + const portalId = `datepicker_` + Math.random(); + + console.info("Rendering DateTimePicker", label, pickerProps); + + // still have to add validation for max and min time and validation message + console.info("unused props", { + name: props.name, + editabilityCondition: props.editabilityCondition, + readOnlyStyle: props.readOnlyStyle, + visible: props.visible, + validationType: props.validationType, + customValidation: props.customValidation, + validationMessage: props.validationMessage + }); + + const hasValidationMessage = + props.validationMessage?.status === "available" && props.validationMessage.value.length > 0; + + return ( +
+
+
+ + {label ? ( + + ) : ( + + Date picker + + )} +
+ +
+ + + + {hasValidationMessage &&
{props.validationMessage?.value}
} +
+
+ ); +} From 31a2a497d5385fedf5fc282fe99afb28faf1f5e0 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 24 Nov 2025 14:29:50 +0100 Subject: [PATCH 07/15] feat(date-time-picker-web): add DateTimePicker and preview components --- .../src/DateTimePicker.editorPreview.tsx | 9 +++++++++ .../date-time-picker-web/src/DateTimePicker.tsx | 10 ++++++++++ 2 files changed, 19 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx new file mode 100644 index 0000000000..a60c2eb8ea --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx @@ -0,0 +1,9 @@ +import { ReactElement } from "react"; +import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; +import { DatePicker } from "./components/DatePicker"; +import "./ui/DateTimePicker.scss"; + +export function preview(props: DateTimePickerPreviewProps): ReactElement { + console.info("Rendering DateTimePicker preview with props:", props); + return ; +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx new file mode 100644 index 0000000000..d295e37d51 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx @@ -0,0 +1,10 @@ +import { ReactElement } from "react"; +import { DateTimePickerContainerProps } from "../typings/DateTimePickerProps"; +import { DateTimePickerContainer } from "./components/DateTimePickerContainer"; + +import "react-datepicker/dist/react-datepicker.css"; +import "./ui/DateTimePicker.scss"; + +export function DateTimePicker(props: DateTimePickerContainerProps): ReactElement { + return ; +} From d1cfca20e895c84c33251f8894f71d2ce3e1f9f9 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 26 Nov 2025 09:35:54 +0100 Subject: [PATCH 08/15] fix(date-time-picker-web): update types in controller and setup props --- .../src/helpers/DatePickerController.ts | 6 +++--- .../date-time-picker-web/src/hooks/useSetupProps.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts index ef31d3d463..8a280346d7 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts @@ -1,9 +1,9 @@ import { ActionValue } from "mendix"; import { action, computed, makeObservable, observable } from "mobx"; import { ClassAttributes, createRef, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler } from "react"; -import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker"; +import ReactDatePicker, { DatePickerProps, DatePicker } from "react-datepicker"; -interface DatePickerBackendProps extends ReactDatePickerProps, ClassAttributes {} +type DatePickerBackendProps = DatePickerProps & ClassAttributes; interface PickerState { startDate: Date | undefined; @@ -25,7 +25,7 @@ export class DatePickerController { private _defaultState: Array; private _type: "date" | "time" | "datetime" | "range"; expanded = false; - pickerRef = createRef>(); + pickerRef = createRef(); constructor(params: Params) { this._dates = this.getDefaults(params); diff --git a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts index 861de24379..330add5b11 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts @@ -96,7 +96,7 @@ export function useSetupProps( // Popper props ...popperProps - }; + } as DatePickerProps; } function formatPropsBuilder( From d187b6e05a84d73f486c8e03f65d9d761d59c071 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 26 Nov 2025 15:04:58 +0100 Subject: [PATCH 09/15] feat(date-time-picker-web): implement onChange handling in DatePickerController --- .../src/components/DateTimePickerContainer.tsx | 2 -- .../src/helpers/DatePickerController.ts | 8 ++++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx index b9836e0f27..12affb042f 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx @@ -15,8 +15,6 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) { const label = props.showLabel && props.label?.status === "available" ? props.label.value : null; const portalId = `datepicker_` + Math.random(); - console.info("Rendering DateTimePicker", label, pickerProps); - // still have to add validation for max and min time and validation message console.info("unused props", { name: props.name, diff --git a/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts index 8a280346d7..16e601e931 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts @@ -24,6 +24,7 @@ export class DatePickerController { private _timer = -1; private _defaultState: Array; private _type: "date" | "time" | "datetime" | "range"; + private _onChange?: ActionValue<"none">; expanded = false; pickerRef = createRef(); @@ -31,8 +32,7 @@ export class DatePickerController { this._dates = this.getDefaults(params); this._defaultState = this.getDefaults(params); this._type = params.type; - - // implement onChange action + this._onChange = params.onChange; makeObservable(this, { pickerState: computed, @@ -63,9 +63,13 @@ export class DatePickerController { const [start, end] = value as [Date | null, Date | null]; this._dates[0] = start ?? undefined; this._dates[1] = end ?? undefined; + + this._onChange?.canExecute && !this._onChange.isExecuting && this._onChange.execute(); return; } else { this._dates[0] = value as Date; + + this._onChange?.canExecute && !this._onChange.isExecuting && this._onChange.execute(); return; } }; From 5f31e2407a873c64dcc83825c52a96324786a51c Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 26 Nov 2025 17:51:14 +0100 Subject: [PATCH 10/15] fix(date-time-picker-web): update label property and remove unused enum values --- .../date-time-picker-web/src/DateTimePicker.xml | 5 +---- .../date-time-picker-web/typings/DateTimePickerProps.d.ts | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml index 597fc5c07a..449efea5cb 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml @@ -58,10 +58,9 @@ Show label - + Label caption - @@ -103,8 +102,6 @@ None Required - Date in the future - Date in the past Custom diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts index 72e7e1bad2..691dfc814b 100644 --- a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts +++ b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts @@ -12,7 +12,7 @@ export type EditableEnum = "default" | "never" | "conditionally"; export type ReadOnlyStyleEnum = "default" | "control" | "text"; -export type ValidationTypeEnum = "none" | "required" | "future" | "past" | "custom"; +export type ValidationTypeEnum = "none" | "required" | "custom"; export interface DateTimePickerContainerProps { name: string; From e045b349916e2c7526044643dbf4c056b1a1ae1f Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 26 Nov 2025 17:52:13 +0100 Subject: [PATCH 11/15] feat(date-time-picker-web): enhance DateTimePicker preview and container layout --- .../src/DateTimePicker.editorPreview.tsx | 41 +++++++++++++++++-- .../components/DateTimePickerContainer.tsx | 18 ++++---- .../src/ui/DateTimePicker.scss | 3 +- 3 files changed, 48 insertions(+), 14 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx index a60c2eb8ea..cdddccf847 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx @@ -1,9 +1,44 @@ import { ReactElement } from "react"; import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; -import { DatePicker } from "./components/DatePicker"; import "./ui/DateTimePicker.scss"; export function preview(props: DateTimePickerPreviewProps): ReactElement { - console.info("Rendering DateTimePicker preview with props:", props); - return ; + const label = props.showLabel ? props.label : null; + const portalId = `datepicker_` + Math.random(); + + return ( +
+ {label ? ( +
+
+ + +
+ ) : ( + + Date picker + + )} + +
+
+
+ +
+
+ + +
+
+ ); } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx index 12affb042f..b20b5b05d2 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx @@ -35,19 +35,19 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) { data-focusindex={props.tabIndex} style={props.style} > -
-
+ {label ? ( +
+
- {label ? ( - ) : ( - - Date picker - - )} -
+
+ ) : ( + + Date picker + + )}
diff --git a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss index 43d981b8ff..f9603e2185 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss +++ b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss @@ -22,8 +22,7 @@ &-wrapper { align-items: center; display: flex; - flex: 0 0 75%; - max-width: 75%; + flex: 1; padding: 0 16px; } From 335d5d17ad442209e284941210dffc0d40906857 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 26 Nov 2025 17:52:46 +0100 Subject: [PATCH 12/15] refactor(date-time-picker-web): hide properties and start editor config preview layout --- .../src/DateTimePicker.editorConfig.ts | 194 ++++++------------ 1 file changed, 67 insertions(+), 127 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts index 2fe7a3f94e..2f18c4da07 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts @@ -1,140 +1,80 @@ +import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools"; +import { + container, + ContainerProps, + dropzone, + structurePreviewPalette, + StructurePreviewProps +} from "@mendix/widget-plugin-platform/preview/structure-preview-api"; import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; -export type Platform = "web" | "desktop"; - -export type Properties = PropertyGroup[]; - -type PropertyGroup = { - caption: string; - propertyGroups?: PropertyGroup[]; - properties?: Property[]; -}; - -type Property = { - key: string; - caption: string; - description?: string; - objectHeaders?: string[]; // used for customizing object grids - objects?: ObjectProperties[]; - properties?: Properties[]; -}; - -type ObjectProperties = { - properties: PropertyGroup[]; - captions?: string[]; // used for customizing object grids -}; - -export type Problem = { - property?: string; // key of the property, at which the problem exists - severity?: "error" | "warning" | "deprecation"; // default = "error" - message: string; // description of the problem - studioMessage?: string; // studio-specific message, defaults to message - url?: string; // link with more information about the problem - studioUrl?: string; // studio-specific link -}; - -type BaseProps = { - type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource"; - grow?: number; // optionally sets a growth factor if used in a layout (default = 1) -}; - -type ImageProps = BaseProps & { - type: "Image"; - document?: string; // svg image - data?: string; // base64 image - property?: object; // widget image property object from Values API - width?: number; // sets a fixed maximum width - height?: number; // sets a fixed maximum height -}; - -type ContainerProps = BaseProps & { - type: "Container" | "RowLayout"; - children: PreviewProps[]; // any other preview element - borders?: boolean; // sets borders around the layout to visually group its children - borderRadius?: number; // integer. Can be used to create rounded borders - backgroundColor?: string; // HTML color, formatted #RRGGBB - borderWidth?: number; // sets the border width - padding?: number; // integer. adds padding around the container -}; - -type RowLayoutProps = ContainerProps & { - type: "RowLayout"; - columnSize?: "fixed" | "grow"; // default is fixed -}; +export function getProperties(values: DateTimePickerPreviewProps, defaultProperties: Properties): Properties { + if (values.type !== "date" && values.type !== "range") { + hidePropertiesIn(defaultProperties, values, ["dateFormat"]); + } -type TextProps = BaseProps & { - type: "Text"; - content: string; // text that should be shown - fontSize?: number; // sets the font size - fontColor?: string; // HTML color, formatted #RRGGBB - bold?: boolean; - italic?: boolean; -}; + if (values.type !== "time") { + hidePropertiesIn(defaultProperties, values, ["timeFormat"]); + } -type DropZoneProps = BaseProps & { - type: "DropZone"; - property: object; // widgets property object from Values API - placeholder: string; // text to be shown inside the dropzone when empty - showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource -}; + if (values.type !== "datetime") { + hidePropertiesIn(defaultProperties, values, ["dateTimeFormat"]); + } -type SelectableProps = BaseProps & { - type: "Selectable"; - object: object; // object property instance from the Value API - child: PreviewProps; // any type of preview property to visualize the object instance -}; + if (values.type !== "range") { + hidePropertiesIn(defaultProperties, values, ["endDateAttribute"]); + } -type DatasourceProps = BaseProps & { - type: "Datasource"; - property: object | null; // datasource property object from Values API - child?: PreviewProps; // any type of preview property component (optional) -}; + if (values.showLabel === false) { + hidePropertiesIn(defaultProperties, values, ["label"]); + } -export type PreviewProps = - | ImageProps - | ContainerProps - | RowLayoutProps - | TextProps - | DropZoneProps - | SelectableProps - | DatasourceProps; + if (values.editable !== "conditionally") { + hidePropertiesIn(defaultProperties, values, ["editabilityCondition"]); + } -export function getProperties( - _values: DateTimePickerPreviewProps, - defaultProperties: Properties /*, target: Platform*/ -): Properties { - // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally. - /* Example - if (values.myProperty === "custom") { - delete defaultProperties.properties.myOtherProperty; + if (values.validationType !== "custom") { + hidePropertiesIn(defaultProperties, values, ["customValidation"]); } - */ + return defaultProperties; } -// export function check(_values: DateTimePickerPreviewProps): Problem[] { -// const errors: Problem[] = []; -// // Add errors to the above array to throw errors in Studio and Studio Pro. -// /* Example -// if (values.myProperty !== "custom") { -// errors.push({ -// property: `myProperty`, -// message: `The value of 'myProperty' is different of 'custom'.`, -// url: "https://github.com/myrepo/mywidget" -// }); -// } -// */ -// return errors; -// } - -// export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps { -// // Customize your pluggable widget appearance for Studio Pro. -// return { -// type: "Container", -// children: [] -// } -// } +export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean): StructurePreviewProps { + const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"]; + const structurePreviewChildren: StructurePreviewProps[] = []; + let dropdownPreviewChildren: StructurePreviewProps[] = []; + let readOnly = values.readOnly; + + if (structurePreviewChildren.length === 0) { + structurePreviewChildren.push({ + type: "Text", + content: values.dateAttribute ? `[${values.dateAttribute}]` : "[Date time picker]", + fontColor: palette.text.data + }); + } -// export function getCustomCaption(values: DateTimePickerPreviewProps, platform: Platform): string { -// return "DateTimePicker"; -// } + return { + type: "Container", + children: [ + { + type: "RowLayout", + columnSize: "grow", + borders: true, + borderWidth: 1, + borderRadius: 2, + backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container, + children: [ + { + type: "Container", + grow: 1, + padding: 4, + children: structurePreviewChildren + }, + container({ grow: 0, padding: 4 })() + ] + }, + ...dropdownPreviewChildren + ] + }; +} From 46c50878c26b5e8794ec922a347f5ecfbe888f5d Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 1 Dec 2025 17:28:44 +0100 Subject: [PATCH 13/15] refactor(date-time-picker-web): simplify properties by replacing with system properties --- .../src/DateTimePicker.xml | 41 ++----------------- .../typings/DateTimePickerProps.d.ts | 27 +----------- 2 files changed, 5 insertions(+), 63 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml index 449efea5cb..080c241642 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml @@ -54,46 +54,13 @@ - - Show label - - - - Label caption - - + - - Editable - - - Default - Never - Conditionally - - - - Condition - - - - - Read-only style - - - Based on data view (Control) - Control - Text - - + - - - Visible - - - + + diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts index 691dfc814b..c536697ade 100644 --- a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts +++ b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts @@ -3,22 +3,16 @@ * WARNING: All changes made to this file will be overwritten * @author Mendix Widgets Framework Team */ -import { CSSProperties } from "react"; import { ActionValue, DynamicValue, EditableValue } from "mendix"; export type TypeEnum = "date" | "time" | "range" | "datetime"; -export type EditableEnum = "default" | "never" | "conditionally"; - -export type ReadOnlyStyleEnum = "default" | "control" | "text"; - export type ValidationTypeEnum = "none" | "required" | "custom"; export interface DateTimePickerContainerProps { name: string; - class: string; - style?: CSSProperties; tabIndex?: number; + id: string; type: TypeEnum; dateFormat: string; timeFormat: string; @@ -26,12 +20,6 @@ export interface DateTimePickerContainerProps { placeholder?: DynamicValue; dateAttribute: EditableValue; endDateAttribute?: EditableValue; - showLabel: boolean; - label?: DynamicValue; - editable: EditableEnum; - editabilityCondition?: DynamicValue; - readOnlyStyle: ReadOnlyStyleEnum; - visible?: DynamicValue; validationType: ValidationTypeEnum; customValidation?: DynamicValue; validationMessage?: DynamicValue; @@ -42,13 +30,6 @@ export interface DateTimePickerContainerProps { } export interface DateTimePickerPreviewProps { - /** - * @deprecated Deprecated since version 9.18.0. Please use class property instead. - */ - className: string; - class: string; - style: string; - styleObject?: CSSProperties; readOnly: boolean; renderMode: "design" | "xray" | "structure"; translate: (text: string) => string; @@ -59,12 +40,6 @@ export interface DateTimePickerPreviewProps { placeholder: string; dateAttribute: string; endDateAttribute: string; - showLabel: boolean; - label: string; - editable: EditableEnum; - editabilityCondition: string; - readOnlyStyle: ReadOnlyStyleEnum; - visible: string; validationType: ValidationTypeEnum; customValidation: string; validationMessage: string; From c6d9bbc958f69a7e2510f92078ddb74aadfd6719 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 1 Dec 2025 17:29:25 +0100 Subject: [PATCH 14/15] feat(date-time-picker-web): add icon SVG and update structure mode layout --- .../src/DateTimePicker.editorConfig.ts | 67 ++++++++++--------- .../date-time-picker-web/src/assets/close.svg | 3 + .../typings/declare-svg.ts | 4 ++ 3 files changed, 41 insertions(+), 33 deletions(-) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/assets/close.svg create mode 100644 packages/pluggableWidgets/date-time-picker-web/typings/declare-svg.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts index 2f18c4da07..d4585980c0 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts @@ -2,11 +2,14 @@ import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools"; import { container, ContainerProps, - dropzone, + rowLayout, structurePreviewPalette, - StructurePreviewProps + StructurePreviewProps, + svgImage } from "@mendix/widget-plugin-platform/preview/structure-preview-api"; import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; +import IconSVG from "./assets/close.svg"; +const IconSVGDark = IconSVG.replace('fill="#000000"', 'fill="#FFFFFF"'); export function getProperties(values: DateTimePickerPreviewProps, defaultProperties: Properties): Properties { if (values.type !== "date" && values.type !== "range") { @@ -25,14 +28,6 @@ export function getProperties(values: DateTimePickerPreviewProps, defaultPropert hidePropertiesIn(defaultProperties, values, ["endDateAttribute"]); } - if (values.showLabel === false) { - hidePropertiesIn(defaultProperties, values, ["label"]); - } - - if (values.editable !== "conditionally") { - hidePropertiesIn(defaultProperties, values, ["editabilityCondition"]); - } - if (values.validationType !== "custom") { hidePropertiesIn(defaultProperties, values, ["customValidation"]); } @@ -43,7 +38,7 @@ export function getProperties(values: DateTimePickerPreviewProps, defaultPropert export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean): StructurePreviewProps { const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"]; const structurePreviewChildren: StructurePreviewProps[] = []; - let dropdownPreviewChildren: StructurePreviewProps[] = []; + // let dropdownPreviewChildren: StructurePreviewProps[] = []; let readOnly = values.readOnly; if (structurePreviewChildren.length === 0) { @@ -54,27 +49,33 @@ export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boole }); } - return { - type: "Container", - children: [ - { - type: "RowLayout", - columnSize: "grow", - borders: true, - borderWidth: 1, - borderRadius: 2, - backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container, - children: [ - { - type: "Container", - grow: 1, - padding: 4, - children: structurePreviewChildren - }, - container({ grow: 0, padding: 4 })() - ] - }, - ...dropdownPreviewChildren + return container()( + rowLayout({ + columnSize: "grow", + borders: true, + borderWidth: 1, + borderRadius: 2, + backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container + })( + container({ + grow: 1, + padding: 4 + })(...structurePreviewChildren), + getIconPreview(isDarkMode) + ) + ); +} + +function getIconPreview(isDarkMode: boolean): ContainerProps { + return container({ + grow: 0, + padding: 4 + })( + ...[ + container({ padding: 1 })(), + svgImage({ width: 16, height: 16 })( + decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", "")) + ) ] - }; + ); } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/assets/close.svg b/packages/pluggableWidgets/date-time-picker-web/src/assets/close.svg new file mode 100644 index 0000000000..e5a5675599 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/assets/close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/declare-svg.ts b/packages/pluggableWidgets/date-time-picker-web/typings/declare-svg.ts new file mode 100644 index 0000000000..e6958d5a9f --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/typings/declare-svg.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: string; + export = content; +} From 569d1b04cba85f54fa32fb8d2b35dcb19de16970 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 1 Dec 2025 17:30:39 +0100 Subject: [PATCH 15/15] refactor(date-time-picker-web): remove hardcodded label from DateTimePicker and update styles --- .../src/DateTimePicker.editorPreview.tsx | 45 +++++---------- .../components/DateTimePickerContainer.tsx | 56 ++++++------------- .../src/hooks/useSetupProps.ts | 8 ++- .../src/ui/DateTimePicker.scss | 25 +-------- 4 files changed, 37 insertions(+), 97 deletions(-) diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx index cdddccf847..97616f235b 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx @@ -3,42 +3,23 @@ import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; import "./ui/DateTimePicker.scss"; export function preview(props: DateTimePickerPreviewProps): ReactElement { - const label = props.showLabel ? props.label : null; - const portalId = `datepicker_` + Math.random(); - return (
- {label ? ( -
-
- - -
- ) : ( - - Date picker - - )} - -
-
-
- -
+
+
+
- -
+ +
); } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx index b20b5b05d2..d29ff78457 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx @@ -1,4 +1,3 @@ -import classNames from "classnames"; import ReactDatePicker from "react-datepicker"; import { DateTimePickerContainerProps } from "typings/DateTimePickerProps"; import { useController } from "../hooks/useController"; @@ -12,15 +11,12 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) { onChange: props.onChange }); const pickerProps = useSetupProps(props, controller); - const label = props.showLabel && props.label?.status === "available" ? props.label.value : null; const portalId = `datepicker_` + Math.random(); // still have to add validation for max and min time and validation message console.info("unused props", { name: props.name, - editabilityCondition: props.editabilityCondition, - readOnlyStyle: props.readOnlyStyle, - visible: props.visible, + id: props.id, validationType: props.validationType, customValidation: props.customValidation, validationMessage: props.validationMessage @@ -30,42 +26,22 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) { props.validationMessage?.status === "available" && props.validationMessage.value.length > 0; return ( -
- {label ? ( -
-
+
+ - -
- ) : ( - - Date picker - - )} - -
- - - - {hasValidationMessage &&
{props.validationMessage?.value}
} -
+ + {hasValidationMessage &&
{props.validationMessage?.value}
}
); } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts index 330add5b11..1fdec33f71 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts +++ b/packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts @@ -16,7 +16,7 @@ export function useSetupProps( dateTimeFormat, placeholder, dateAttribute, - editable, + endDateAttribute, ariaRequired, onEnter, onLeave @@ -34,7 +34,7 @@ export function useSetupProps( timeFormat, dateTimeFormat, dateAttribute.value ?? new Date(), - null, + endDateAttribute?.value ?? null, locale ); @@ -59,6 +59,8 @@ export function useSetupProps( ] }; + const disabled = dateAttribute.readOnly || false; + return { // Static props allowSameDay: false, @@ -76,7 +78,7 @@ export function useSetupProps( // Base props ariaLabelledBy: `${id}-label`, ariaRequired: ariaRequired.toString(), - disabled: editable === "never", + disabled, locale: calendarLocale, placeholderText: placeholder?.status === "available" ? placeholder.value : "", tabIndex: tabIndex ?? 0, diff --git a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss index f9603e2185..f3e49dfd1c 100644 --- a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss +++ b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss @@ -2,29 +2,10 @@ align-items: center; color: var(--font-color-default); display: flex; + flex: 1; font-size: var(--font-size-small); - margin: 0 -15px 16px -15px; - - &-label-wrapper { - flex: 0 0 25%; - max-width: 25%; - padding: 0 16px; - } - - &-label { - font-size: var(--font-size-default); - font-weight: 600; - text-align: right; - text-overflow: ellipsis; - width: 100%; - } - - &-wrapper { - align-items: center; - display: flex; - flex: 1; - padding: 0 16px; - } + margin: 0 -15px; + padding: 0 16px; &-input { background-color: var(--bg-color-secondary);