Merge branch 'main' into deps/pnpm-action-setup-2.x

Author: rahmanunver

packages/modules/data-widgets/CHANGELOG.md

@@ -6,6 +6,50 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [2.8.5] DataWidgets - 2023-08-10
+
+### Fixed
+
+-   We fixed an issue where a data grid's border went missing if the Hiding property (found in Column capabilities) was set to No.
+
+### [2.6.0] DatagridDateFilter
+
+#### Changed
+
+-   We changed the DOM Structure for date filter to appear inline with the container in order to make the component more accessible.
+
+### [2.5.0] DatagridDropdownFilter
+
+#### Changed
+
+-   We changed the DOM Structure for dropdown filter to appear inline with the container in order to make the component more accessible.
+
+### [2.8.0] Datagrid
+
+#### Changed
+
+-   We improved accessibility of the Datagrid widget.
+
+-   We changed the DOM Structure for filter options to appear inline with the container in order to make the component more accessible.
+
+#### Fixed
+
+-   We fixed table header sticky position incorrectly overlap with dropdown.
+
+### [1.3.4] Gallery
+
+#### Fixed
+
+-   We improved accessibility of the Gallery widget.
+
+### [1.1.2] TreeNode
+
+#### Fixed
+
+-   We fixed Atlas icon unable to be shown on tree node.
+
+-   We fixed an issue where tree child not directly refreshed after updating the data.
+
 ## [2.8.4] DataWidgets - 2023-07-13
 
 ### [2.7.5] Datagrid

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-design-properties.scss

@@ -28,36 +28,34 @@
 }
 
 .table-bordered-all {
-    .th {
-        border-top-width: 1px;
-        border-top-style: solid;
+    .th,
+    .td {
         border-left-width: 1px;
         border-left-style: solid;
 
         // Column for the visibility when a column can be hidden
         &.column-selector {
             border-left-width: 0;
+        }
+
+        &:last-child,
+        &.column-selector {
             border-right-width: 1px;
             border-right-style: solid;
         }
     }
+    .th {
+        border-top-width: 1px;
+        border-top-style: solid;
+    }
 
     .td {
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        border-left-width: 1px;
-        border-left-style: solid;
 
         &.td-borders {
             border-top-width: 1px;
         }
-
-        // Column for the visibility when a column can be hidden
-        &.column-selector {
-            border-left-width: 0;
-            border-right-width: 1px;
-            border-right-style: solid;
-        }
     }
 }
 

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss

@@ -174,7 +174,6 @@ $item-min-height: 32px;
     background: $background-color;
     border-radius: 8px;
     box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
-    overflow-x: hidden;
     max-height: 40vh;
     z-index: 102;
 }
@@ -183,7 +182,6 @@ $item-min-height: 32px;
     background: $background-color;
     border-radius: 8px;
     box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
-    overflow-x: hidden;
     max-height: 40vh;
     z-index: 140;
 
@@ -214,6 +212,7 @@ $item-min-height: 32px;
 
 .dropdown-container {
     flex: 1;
+    position: relative;
 
     .dropdown-triggerer {
         caret-color: transparent;
@@ -231,7 +230,7 @@ $item-min-height: 32px;
 
     .dropdown-list {
         position: absolute;
-        width: max-content;
+        min-width: 100%;
         left: 0;
         margin: 0 $spacing-small;
         padding: 0;
@@ -279,10 +278,6 @@ $item-min-height: 32px;
     }
 }
 
-.date-filter-container {
-    z-index: 102;
-}
-
 /**
 Icons
  */
@@ -352,13 +347,13 @@ div:not(.table-compact) > .table {
     .th {
         .filter-selector {
             .filter-selectors {
-                margin: 0 $spacing-medium;
+                margin: 0;
             }
         }
 
         .dropdown-container {
             .dropdown-list {
-                margin: 0 $spacing-medium;
+                margin: 0;
             }
         }
     }

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -17,6 +17,18 @@ $brand-primary: #264ae5 !default;
 $brand-light: #e6eaff !default;
 $grid-selected-row-background: $brand-light;
 
+.sticky-sentinel {
+    &.container-stuck {
+        & + .table {
+            .th {
+                position: -webkit-sticky; /* Safari */
+                position: sticky;
+                z-index: 50;
+            }
+        }
+    }
+}
+
 .table {
     position: relative;
     border-width: 0;
@@ -46,10 +58,7 @@ $grid-selected-row-background: $brand-light;
         border-width: 0;
         border-color: $grid-border-color;
         padding: $spacing-medium;
-        position: -webkit-sticky; /* Safari */
-        position: sticky;
         top: 0;
-        z-index: 50;
         min-width: 0;
 
         /* Clickable column header (Sortable) */

packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss

@@ -94,7 +94,13 @@ $border-color: #d7d7d7 !default;
 }
 
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start, .react-datepicker__day--range-end),
-.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range, .react-datepicker__day--selecting-range-start) {
+.react-datepicker__day--in-selecting-range:not(
+        .react-datepicker__day--in-range,
+        .react-datepicker__month-text--in-range,
+        .react-datepicker__quarter-text--in-range,
+        .react-datepicker__year-text--in-range,
+        .react-datepicker__day--selecting-range-start
+    ) {
     background-color: $day-range-background;
     color: $day-range-color;
 
@@ -136,5 +142,5 @@ Space between the fields and the popup
  */
 .react-datepicker-popper[data-placement^="bottom"] {
     margin-top: unset;
-    padding-top: 8px;
+    padding-top: 0;
 }

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [2.6.0] - 2023-08-10
+
+### Changed
+
+-   We changed the DOM Structure for date filter to appear inline with the container in order to make the component more accessible.
+
 ## [2.5.2] - 2023-06-21
 
 ### Fixed

packages/pluggableWidgets/datagrid-date-filter-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mendix/datagrid-date-filter-web",
   "widgetName": "DatagridDateFilter",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

packages/pluggableWidgets/datagrid-date-filter-web/src/components/DatePicker.tsx

@@ -14,7 +14,6 @@ import {
 import DatePickerComponent from "react-datepicker";
 import classNames from "classnames";
 import { isDate, isValid } from "date-fns";
-import { createPortal } from "react-dom";
 import replaceAllInserter from "string.prototype.replaceall";
 import { doubleMonthOrDayWhenSingle } from "../utils/utils";
 import CalendarIcon from "./CalendarIcon";
@@ -44,17 +43,13 @@ export const DatePicker = forwardRef(
     (props: DatePickerProps, ref: MutableRefObject<DatePickerComponent> | null): ReactElement => {
         const [open, setOpen] = useState(false);
         const buttonRef = useRef<HTMLButtonElement>(null);
-        const portalRef = useRef<HTMLDivElement>(null);
+        const dateFilterContainerRef = useRef<HTMLDivElement>(null);
         const id = useMemo(() => `datepicker_` + Math.random(), []);
-        const Portal = createPortal(
-            <div ref={portalRef} id={id} className="date-filter-container" style={{ position: "fixed" }} />,
-            document.body
-        );
 
         const buttonClick = useCallback(() => {
             setOpen(open => !open);
             setTimeout(() => {
-                (portalRef.current?.querySelector(".react-datepicker > button") as HTMLElement)?.focus();
+                (dateFilterContainerRef.current?.querySelector(".react-datepicker > button") as HTMLElement)?.focus();
             }, 10);
         }, []);
 
@@ -68,7 +63,7 @@ export const DatePicker = forwardRef(
 
         return (
             <Fragment>
-                {Portal}
+                <div ref={dateFilterContainerRef} id={id} className="date-filter-container" />
                 <span className="sr-only" id={`${props.id}-label`}>
                     {props.screenReaderInputCaption}
                 </span>

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/__snapshots__/DatagridDateFilter.spec.tsx.snap

@@ -22,6 +22,10 @@ exports[`Date Filter with single instance with multiple attributes renders corre
         </button>
       </div>
     </div>
+    <div
+      class="date-filter-container"
+      id="datepicker_0.123456789"
+    />
     <span
       class="sr-only"
       id="DateFilter1-label"
@@ -89,6 +93,10 @@ exports[`Date Filter with single instance with single attribute renders correctl
         </button>
       </div>
     </div>
+    <div
+      class="date-filter-container"
+      id="datepicker_0.123456789"
+    />
     <span
       class="sr-only"
       id="DateFilter1-label"

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -2,6 +2,10 @@
 
 exports[`Date picker component renders correctly 1`] = `
 [
+  <div
+    class="date-filter-container"
+    id="datepicker_0.123456789"
+  />,
   <span
     class="sr-only"
     id="undefined-label"
@@ -48,6 +52,10 @@ exports[`Date picker component renders correctly 1`] = `
 
 exports[`Date picker component renders correctly when is not adjustable 1`] = `
 [
+  <div
+    class="date-filter-container"
+    id="datepicker_0.123456789"
+  />,
   <span
     class="sr-only"
     id="undefined-label"
@@ -94,6 +102,10 @@ exports[`Date picker component renders correctly when is not adjustable 1`] = `
 
 exports[`Date picker component renders correctly with a11y properties 1`] = `
 [
+  <div
+    class="date-filter-container"
+    id="datepicker_0.123456789"
+  />,
   <span
     class="sr-only"
     id="undefined-label"
@@ -142,6 +154,10 @@ exports[`Date picker component renders correctly with a11y properties 1`] = `
 
 exports[`Date picker component renders correctly with different locale and date format 1`] = `
 [
+  <div
+    class="date-filter-container"
+    id="datepicker_0.123456789"
+  />,
   <span
     class="sr-only"
     id="undefined-label"