cx 25.11.1 → 26.0.1

package/src/widgets/overlay/tooltip-ops.ts

@@ -0,0 +1,173 @@
+import { BooleanProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { DropdownConfig } from "./Dropdown";
+import type { TooltipInstance } from "./Tooltip";
+
+export interface TooltipConfig extends DropdownConfig {
+   /** Text to be displayed inside the tooltip. */
+   text?: StringProp;
+
+   /** Text to be displayed in the header. */
+   title?: StringProp;
+
+   /**
+    * Set to true to make the tooltip always visible.
+    * This is useful e.g. in product tours, when instructions need to be shown, even if the mouse pointer is not around.
+    */
+   alwaysVisible?: BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to 'tooltip'. */
+   baseClass?: string;
+
+   /**
+    * Set to `true` to append the set `animate` state after the initial render.
+    * Appended CSS class may be used to add show/hide animations.
+    */
+   animate?: boolean;
+
+   /** Set to `true` to make the tooltip follow the mouse movement. */
+   trackMouse?: boolean;
+
+   trackMouseX?: boolean;
+   trackMouseY?: boolean;
+
+   /**
+    * This property controls how tooltips behave on touch events.
+    * Default value is `toggle` which means that the tooltip is shown on first tap and closed on the second tap.
+    * Use `ignore` to skip showing tooltips on touch events.
+    */
+   touchBehavior?: string;
+
+   /**
+    * Set to true to rely on browser's window mousemove event for getting mouse coordinates
+    * instead of using the element that tooltip is attached to.
+    */
+   globalMouseTracking?: boolean;
+
+   /** Tooltips are hidden as soon as the mouse leaves the related widget. Set this to true to keep the tooltip
+    * while the mouse is inside the tooltip itself. */
+   mouseTrap?: boolean;
+}
+
+export type TooltipProp = TooltipConfig | StringProp;
+
+/**
+ * Options passed to tooltip functions
+ */
+export interface TooltipOptions {
+   target?: Element;
+   tooltipName?: string;
+   data?: any;
+}
+
+export interface TooltipParentInstance {
+   tooltips: { [key: string]: TooltipInstance };
+}
+
+/**
+ * Tooltip operations implementation interface
+ * This is the actual implementation that gets wired via wireTooltipOps
+ */
+export interface TooltipOperations {
+   tooltipMouseMove(
+      e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent | Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipMouseLeave(
+      e: MouseEvent | React.MouseEvent | Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentDidMount(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentWillReceiveProps(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentWillUnmount(parentInstance: Instance & TooltipParentInstance): void;
+
+   tooltipParentDidUpdate(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+   ): void;
+}
+
+let impl: TooltipOperations | false = false;
+
+export function tooltipMouseMove(
+   e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent | Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl && tooltip) {
+      impl.tooltipMouseMove.call(impl, e, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipMouseLeave(
+   e: MouseEvent | React.MouseEvent | Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl && tooltip) {
+      impl.tooltipMouseLeave.call(impl, e, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentDidMount(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl) {
+      impl.tooltipParentDidMount.call(impl, element, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentWillReceiveProps(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl) {
+      impl.tooltipParentWillReceiveProps.call(impl, element, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentWillUnmount(parentInstance: Instance & TooltipParentInstance): void {
+   if (impl) {
+      impl.tooltipParentWillUnmount.call(impl, parentInstance);
+   }
+}
+
+export function tooltipParentDidUpdate(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+): void {
+   if (impl) {
+      impl.tooltipParentDidUpdate.call(impl, element, parentInstance, tooltip);
+   }
+}
+
+export function wireTooltipOps(ops: TooltipOperations): void {
+   impl = ops;
+}

package/src/widgets/overlay/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // TOOLTIP
 $cx-tooltip-background-color: white !default;
 $cx-tooltip-border-color: #d5d5d5 !default;
@@ -69,7 +71,7 @@ $cx-toast-mods: (
 // WINDOW
 @import "Window.variables";
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Overlay": "cx/widgets/captureMouse",

package/src/widgets/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // Padding
 $cx-default-padding-extra-small: 3px !default;
 $cx-default-padding-small: 5px !default;
@@ -132,7 +134,7 @@ $cx-highlightedsearchtext-style-map: (
    @extend .cxm-card !optional;
 }
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/FlexRow": "cx/widgets/FlexBox",

package/tsconfig.compile.json

@@ -0,0 +1,4 @@
+{
+   "extends": "./tsconfig.json",
+   "exclude": ["dist", "build", "**/*.spec.*"]
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/jsx-runtime": ["./jsx-runtime"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "downlevelIteration": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}

package/tsconfig.mocha.json

@@ -0,0 +1,14 @@
+{
+   "extends": "./tsconfig.json",
+   "compilerOptions": {
+      "module": "nodenext",
+      "moduleResolution": "nodenext",
+      "noEmit": true,
+      "paths": {
+         "cx/jsx-runtime": ["./src/jsx-runtime"]
+      }
+   },
+   "ts-node": {
+      "require": ["tsconfig-paths/register"]
+   }
+}

package/charts.d.ts

@@ -1 +0,0 @@
-export * from './src/charts';

package/charts.js

@@ -1 +0,0 @@
-export * from './dist/charts';

package/data.d.ts

@@ -1 +0,0 @@
-export * from './src/data';

package/data.js

@@ -1 +0,0 @@
-export * from './dist/data';

package/hooks.d.ts

@@ -1 +0,0 @@
-export * from './src/hooks';

package/hooks.js

@@ -1 +0,0 @@
-export * from './dist/hooks';

package/index.js

@@ -1,17 +0,0 @@
-import * as util from './util';
-import * as data from './data';
-import * as ui from './ui';
-import * as widgets from './widgets';
-import * as svg from './svg';
-import * as charts from './charts';
-import * as hooks from './hooks';
-
-export {
-   util,
-   data,
-   ui,
-   widgets,
-   svg,
-   charts,
-   hooks
-};

package/locale/de-de.js

@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'de-de';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dieses Feld wird benötigt.',
-   validatingText: 'Wird validiert...',
-   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Wird geladen...',
-   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
-   noResultsText: 'Keine Ergebnisse gefunden.',
-   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
-   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
-   minValueErrorText: 'Wählen Sie {0:d} oder später.',
-   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Heute',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ungültiges Datum eingegeben.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
-   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
-   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
-   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
-   inputErrorText: 'Ungültige Zahl eingegeben.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'Ungültige Eingabe.',
-   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
-   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Wird hochgeladen...'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nein"
-});

package/locale/en-us.js

@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'en-us';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'This field is required.',
-   validatingText: 'Validation is in progress...',
-   validationExceptionText: 'Something went wrong during input validation. Check log for more details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Loading...',
-   queryErrorText: 'Error occurred while querying for lookup data.',
-   noResultsText: 'No results found.',
-   minQueryLengthMessageText: 'Type in at least {0} character(s).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Select {0:d} or before.',
-   maxExclusiveErrorText: 'Select a date before {0:d}.',
-   minValueErrorText: 'Select {0:d} or later.',
-   minExclusiveErrorText: 'Select a date after {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Today',
-   startWithMonday: false
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Invalid date entered.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Enter {0} or less.',
-   maxExclusiveErrorText: 'Enter a number less than {0}.',
-   minValueErrorText: 'Enter {0} or more.',
-   minExclusiveErrorText: 'Enter a number greater than {0}.',
-   inputErrorText: 'Invalid number entered.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'The entered value is not valid.',
-   minLengthValidationErrorText: 'Enter {[{0}-{1}]} more character(s).',
-   maxLengthValidationErrorText: 'Use {0} characters or fewer.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Upload is in progress.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Yes",
-   noText: "No"
-});

package/locale/es-es.js

@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'es-es';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Este campo es requerido.',
-   validatingText: 'La validación está en progreso...',
-   validationExceptionText: 'Algo salió mal durante la validación de entrada. Revise el registro para más detalles.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Cargando...',
-   queryErrorText: 'Se produjo un error al consultar los datos de búsqueda.',
-   noResultsText: 'No se han encontrado resultados.',
-   minQueryLengthMessageText: 'Escriba al menos {0} caracteres.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Seleccione {0: d} o antes.',
-   maxExclusiveErrorText: 'Seleccione una fecha antes {0:d}.',
-   minValueErrorText: 'Seleccione {0: d} o posterior',
-   minExclusiveErrorText: 'Seleccione una fecha después de {0: d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Hoy',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Fecha introducida no es válida.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Ingrese {0} o menos.',
-   maxExclusiveErrorText: 'Ingrese un número menor que {0}.',
-   minValueErrorText: 'Ingrese {0} o más.',
-   minExclusiveErrorText: 'Ingrese un número mayor que {0}.',
-   inputErrorText: 'Número inválido ingresado.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'El valor ingresado no es válido.',
-   minLengthValidationErrorText: 'Ingrese {[{0} - {1}]} más caracteres.',
-   maxLengthValidationErrorText: 'Use {0} caracteres o menos.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'La carga está en progreso.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Sí",
-   noText: "No"
-});

package/locale/fr-fr.js

@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'fr-fr';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Ce champ est requis.',
-   validatingText: 'La validation est en cours ...',
-   validationExceptionText: "Une erreur s'est produite lors de la validation des entrées. Consultez le journal pour plus de détails."
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Chargement...',
-   queryErrorText: "Une erreur s'est produite lors de l'interrogation des données de recherche.",
-   noResultsText: 'Aucun résultat trouvé.',
-   minQueryLengthMessageText: 'Tapez au moins {0} caractère (s).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Sélectionnez {0:d} ou avant.',
-   maxExclusiveErrorText: 'Sélectionnez une date avant {0:d}.',
-   minValueErrorText: 'Sélectionnez {0:d} ou plus tard.',
-   minExclusiveErrorText: 'Sélectionnez une date après {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Aujourd\'hui',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Date invalide entrée.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Entrez {0} ou moins.',
-   maxExclusiveErrorText: 'Entrez un nombre inférieur à {0}.',
-   minValueErrorText: 'Entrez {0} ou plus.',
-   minExclusiveErrorText: 'Entrez un nombre supérieur à {0}.',
-   inputErrorText: 'Numéro invalide entré.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: "La valeur entrée n'est pas valide.",
-   minLengthValidationErrorText: 'Entrez {[{0} - {1}]} plus de caractères.',
-   maxLengthValidationErrorText: 'Utilisez {0} caractères ou moins.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Le téléchargement est en cours.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Oui",
-   noText: "Non"
-});

package/locale/nl-nl.js

@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'nl-nl';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dit veld is verplicht.',
-   validatingText: 'Validatie is bezig ...',
-   validationExceptionText: 'Er is een probleem opgetreden bij het valideren van de gegevens. Controleer het logboek voor meer details '
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Bezig met laden ...',
-   queryErrorText: 'Er is een fout opgetreden bij het weergeven van gegevens.',
-   noResultsText: 'Geen resultaten gevonden',
-   minQueryLengthMessageText: 'Voer minimaal {0} tekens in.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'De geselecteerde datum is later dan de laatst toegestane datum {0: d}',
-   maxExclusiveErrorText: 'De geselecteerde datum moet vóór {0: d}',
-   minValueErrorText: 'De geselecteerde datum is eerder dan {0: d}',
-   minExclusiveErrorText: 'De geselecteerde datum moet later zijn dan {0: d}',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Vandaag',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ongeldige datum.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Voer {0} of minder in.',
-   maxExclusiveErrorText: 'Voer een nummer in dat kleiner is dan {0}.',
-   minValueErrorText: 'Voer {0} of meer in.',
-   minExclusiveErrorText: 'Voer een getal in dat groter is dan {0}.',
-   inputErrorText: 'Ongeldig nummer.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'De ingevoerde waarde is ongeldig.',
-   minLengthValidationErrorText: 'Vul {[{0} - {1}]} extra karakters in.',
-   maxLengthValidationErrorText: 'Gebruik {0} tekens of minder.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Upload is bezig.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nee"
-});