@bpmn-io/form-js-viewer 1.8.8 → 1.9.2

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/assets/form-js-base.css

@@ -49,6 +49,7 @@
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
   --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
+  --color-background-pre: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
 
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
@@ -66,6 +67,7 @@
   --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
   --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
   --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
+  --color-borders-pre: var(--cds-border-subtle, var(--color-grey-225-10-85));
 
   --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
   --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
@@ -833,6 +835,13 @@
   white-space: nowrap;
 }
 
+.fjs-container .fjs-form-field-html pre,
+.fjs-container .fjs-form-field-text pre {
+  border: 1px solid var(--color-borders-pre);
+  background: var(--color-background-pre);
+  padding: 4px;
+}
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {
@@ -1180,6 +1189,10 @@
   color: var(--color-warning);
 }
 
+.fjs-container .fjs-repeat-row-collapsed {
+  display: none;
+}
+
 .fjs-container .fjs-repeat-render-footer {
   display: flex;
   flex-direction: row;

package/dist/assets/form-js.css

@@ -44,6 +44,7 @@
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
   --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
+  --color-background-pre: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
   --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
@@ -59,6 +60,7 @@
   --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
   --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
   --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
+  --color-borders-pre: var(--cds-border-subtle, var(--color-grey-225-10-85));
   --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
   --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
   --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
@@ -793,6 +795,13 @@
   white-space: nowrap;
 }
 
+.fjs-container .fjs-form-field-html pre,
+.fjs-container .fjs-form-field-text pre {
+  border: 1px solid var(--color-borders-pre);
+  background: var(--color-background-pre);
+  padding: 4px;
+}
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {
@@ -1140,6 +1149,10 @@
   color: var(--color-warning);
 }
 
+.fjs-container .fjs-repeat-row-collapsed {
+  display: none;
+}
+
 .fjs-container .fjs-repeat-render-footer {
   display: flex;
   flex-direction: row;

package/dist/index.cjs

@@ -8,6 +8,7 @@ var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var isEqual = require('lodash/isEqual');
+var luxon = require('luxon');
 var flatpickr = require('flatpickr');
 var React = require('preact/compat');
 var DOMPurify = require('dompurify');
@@ -1438,16 +1439,16 @@ function parseIsoTime(isoTimeString) {
     return parseBasicMinutes(isoTimeString);
   }
 }
+
+/**
+ * Returns the date object as a simple 'YYYY-MM-DD' formatted date in the local timezone.
+ *
+ * @param {*} date The date object to serialize.
+ * @returns {string} The serialized date.
+ */
 function serializeDate(date) {
-  var d = new Date(date),
-    month = '' + (d.getMonth() + 1),
-    day = '' + d.getDate(),
-    year = d.getFullYear();
-  if (month.length < 2) month = '0' + month;
-  if (day.length < 2) day = '0' + day;
-  return [year, month, day].join('-');
+  return luxon.DateTime.fromJSDate(date).toISODate();
 }
-
 // this method is used to make the `new Date(value)` parsing behavior stricter
 function isDateTimeInputInformationSufficient(value) {
   if (!value || typeof value !== 'string') return false;
@@ -2867,7 +2868,7 @@ function Datetime(props) {
     switch (subtype) {
       case DATETIME_SUBTYPES.DATE:
         {
-          date = new Date(Date.parse(value));
+          date = typeof value === 'string' ? luxon.DateTime.fromISO(value).toJSDate() : new Date(NaN);
           break;
         }
       case DATETIME_SUBTYPES.TIME:
@@ -6808,6 +6809,7 @@ class RepeatRenderManager {
     const hasChildren = repeaterField.components && repeaterField.components.length > 0;
     const showRemove = repeaterField.allowAddRemove && hasChildren;
     const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
+    const hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
     const onDeleteItem = index => {
       const updatedValues = values.slice();
       updatedValues.splice(index, 1);
@@ -6818,8 +6820,8 @@ class RepeatRenderManager {
       });
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
         itemIndex: itemIndex,
         itemValue: itemValue,
         parentExpressionContextInfo: parentExpressionContextInfo,
@@ -6829,7 +6831,20 @@ class RepeatRenderManager {
         onDeleteItem: onDeleteItem,
         showRemove: showRemove,
         ...restProps
-      }, itemIndex))
+      }, itemIndex)), hiddenValues.length > 0 ? jsxRuntime.jsx("div", {
+        className: "fjs-repeat-row-collapsed",
+        children: hiddenValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
+          itemIndex: itemIndex + nonCollapsedItems,
+          itemValue: itemValue,
+          parentExpressionContextInfo: parentExpressionContextInfo,
+          repeaterField: repeaterField,
+          RowsRenderer: RowsRenderer,
+          indexes: indexes,
+          onDeleteItem: onDeleteItem,
+          showRemove: showRemove,
+          ...restProps
+        }, itemIndex))
+      }) : null]
     });
   }
   RepeatFooter(props) {