cx 26.2.2 → 26.2.4

package/src/widgets/form/maps.scss

@@ -0,0 +1,81 @@
+@use "../variables" as *;
+@use "../../util/scss/clockwise" as *;
+
+$cx-label-state-style-map: (
+   default: (
+      padding: $cx-default-label-padding,
+      font-size: $cx-default-label-font-size,
+      font-family: $cx-default-label-font-family,
+      font-weight: $cx-default-label-font-weight,
+      line-height: $cx-default-label-line-height,
+      color: $cx-default-label-color,
+      border-style: solid,
+      border-width: $cx-default-box-border-width-top 0 $cx-default-box-border-width-bottom 0,
+      border-color: transparent,
+   ),
+   hover: (),
+   active: (),
+   disabled: (
+      color: #bdbdbd,
+   ),
+) !default;
+
+$cx-slider-handle-styles: (
+   default: (
+      background-color: $cx-default-slider-handle-background-color,
+      border-style: solid,
+      border-width: $cx-default-slider-handle-border-width,
+      border-color: $cx-default-slider-handle-border-color,
+      border-radius: $cx-default-slider-handle-border-radius,
+      box-shadow: $cx-default-slider-handle-box-shadow,
+   ),
+   hover: (
+      box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
+   ),
+   focus: (
+      border-color: rgba(77, 144, 254, 0.8),
+      outline: none,
+      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
+   ),
+   disabled: (),
+   active: (
+      background: rgb(220, 220, 220),
+   ),
+) !default;
+
+$cx-switch-handle-styles: (
+   default: (
+      background-color: $cx-default-switch-handle-background-color,
+      border-style: solid,
+      border-width: $cx-default-switch-handle-border-width,
+      border-color: $cx-default-switch-handle-border-color,
+      border-radius: $cx-default-switch-handle-border-radius,
+      box-shadow: $cx-default-switch-handle-box-shadow,
+   ),
+   hover: (
+      box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
+   ),
+   focus: (
+      border-color: rgba(77, 144, 254, 0.8),
+      outline: none,
+      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
+   ),
+   disabled: (),
+   active: (
+      background: rgb(220, 220, 220),
+   ),
+   on: (),
+   on-active: (),
+) !default;
+
+$cx-empty-text: (
+   color: $cx-default-empty-text-color,
+) !default;
+
+@forward "./Field.maps.scss";
+@forward "./Calendar.maps.scss";
+@forward "./MonthPicker.maps.scss";
+@forward "./Checkbox.maps.scss";
+@forward "./Radio.maps.scss";
+@forward "./ColorPicker.maps.scss";
+@forward "./LookupField.maps.scss";

package/src/widgets/form/variables.scss

@@ -1,355 +1,111 @@
-@use "sass:map";
-
-@if cx-call-once("cx/widgets/checker-background") {
-   %cx-checker-bg {
-      background-repeat: repeat;
-      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
-   }
-}
-
-$cx-use-box-line-height-fix: true !default;
-
-// Appearance
-$cx-default-input-font-family: $cx-default-box-font-family !default;
-$cx-default-input-font-size: $cx-default-box-font-size !default;
-$cx-default-input-border-color: $cx-default-border-color !default;
-$cx-default-input-border-radius: $cx-default-border-radius !default;
-$cx-default-input-background-color: white !default;
-$cx-default-input-color: black !default;
-$cx-default-input-placeholder-color: $cx-default-empty-text-color !default;
-$cx-default-input-width: 180px !default;
-$cx-default-input-padding: $cx-default-box-padding !default;
-
-$cx-input-placeholder: (
-   color: $cx-default-input-placeholder-color,
-   opacity: 1,
-) !default;
-
-$cx-input-state-style-map: (
-   default: (
-      line-height: $cx-default-box-line-height,
-      padding: $cx-default-input-padding,
-      border-width: $cx-default-box-border-width,
-      font-size: $cx-default-input-font-size,
-      font-family: $cx-default-input-font-family,
-      border-color: $cx-default-input-border-color,
-      border-style: solid,
-      border-radius: $cx-default-input-border-radius,
-      background-color: $cx-default-input-background-color,
-      color: $cx-default-input-color,
-      outline-offset: 0,
-      box-shadow: none,
-      text-overflow: ellipsis,
-      -ms-appearance: none,
-      -moz-appearance: none,
-      -webkit-appearance: none,
-   ),
-   hover: (),
-   focus: (
-      border-color: rgba(77, 144, 254, 0.8),
-      outline: none,
-      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
-   ),
-   disabled: (
-      background: rgb(235, 235, 228),
-      color: rgb(84, 84, 84),
-      pointer-events: none,
-   ),
-   error: (
-      border-color: rgba(220, 0, 9, 0.8),
-   ),
-   error-focus: (
-      box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
-   ),
-) !default;
-
-$cx-default-checkbox-size: 14px !default;
-$cx-default-radio-size: 14px !default;
-$cx-default-input-icon-size: $cx-default-icon-size !default;
-
-// Tool
-$cx-default-input-tool-size: $cx-default-box-line-height !default;
-$cx-default-input-left-tool-spacing: cx-left($cx-default-box-padding) !default;
-$cx-default-input-right-tool-spacing: 1px !default;
-$cx-default-input-left-tool-size: $cx-default-input-tool-size !default;
-$cx-default-input-left-tool-left: cx-calc(
-   cx-left($cx-default-input-padding),
-   cx-left($cx-default-box-border-width)
-) !default;
-$cx-default-input-right-tool-right: cx-calc(
-   cx-right($cx-default-input-padding),
-   cx-right($cx-default-box-border-width)
-) !default;
-
-// Left Icon
-$cx-input-left-icon-state-style-map: (
-   default: (
-      font-size: $cx-default-icon-size,
-      left: $cx-default-input-left-tool-left,
-      top: 50%,
-      margin-top: -$cx-default-input-left-tool-size * 0.5,
-      height: $cx-default-input-left-tool-size,
-      width: $cx-default-input-left-tool-size,
-      line-height: $cx-default-input-left-tool-size,
-      opacity: 0.6,
-      text-align: center,
-   ),
-   hover: (
-      opacity: 1,
-   ),
-   active: (),
-   focus: (),
-   error: (),
-) !default;
-
-//Right Icon
-$cx-input-right-icon-state-style-map: (
-   default: (
-      font-size: $cx-default-icon-size,
-      right: $cx-default-input-right-tool-right,
-      top: 50%,
-      margin-top: -$cx-default-input-tool-size * 0.5,
-      height: $cx-default-input-tool-size,
-      width: $cx-default-input-tool-size,
-      line-height: $cx-default-input-tool-size,
-      opacity: 0.6,
-      text-align: center,
-      cursor: pointer,
-   ),
-   hover: (
-      opacity: 1,
-   ),
-   active: (),
-   focus: (),
-   error: (),
-) !default;
-
-// Clear Icon
-$cx-default-clear-size: $cx-default-input-tool-size !default;
-$cx-default-clear-color: #828282 !default;
-$cx-default-clear-spacing: 1px !default; //additional padding on the left of the clear box
-
-$cx-clear-state-style-map: (
-   default: (
-      font-size: $cx-default-icon-size,
-      right: $cx-default-input-right-tool-right,
-      top: 50%,
-      margin-top: -$cx-default-clear-size * 0.5,
-      height: $cx-default-clear-size,
-      width: $cx-default-clear-size,
-      line-height: $cx-default-clear-size,
-      color: $cx-default-clear-color,
-      border-radius: $cx-default-border-radius,
-      text-align: center,
-   ),
-   hover: (
-      background-color: rgba(128, 128, 128, 0.2),
-   ),
-   active: (),
-   focus: (),
-   error: (),
-) !default;
-
-// Label
-
-$cx-default-label-padding: $cx-default-box-padding 0 !default;
-$cx-default-label-font-size: $cx-default-box-font-size !default;
-$cx-default-label-font-family: $cx-default-box-font-family !default;
-$cx-default-label-font-weight: normal !default;
-$cx-default-label-line-height: $cx-default-box-line-height !default;
-$cx-default-label-color: null !default;
-$cx-default-label-asterisk-color: #a80000 !default;
-
-$cx-label-state-style-map: (
-   default: (
-      padding: $cx-default-label-padding,
-      font-size: $cx-default-label-font-size,
-      font-family: $cx-default-label-font-family,
-      font-weight: $cx-default-label-font-weight,
-      line-height: $cx-default-label-line-height,
-      color: $cx-default-label-color,
-      border-style: solid,
-      border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
-      border-color: transparent,
-   ),
-   hover: (),
-   active: (),
-   disabled: (
-      color: #bdbdbd,
-   ),
-) !default;
-
-// STANDARD FORM FIELD (textfield, numberfield, lookupfield, select,...)
-$cx-std-field-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ()) !default;
-
-// COLORFIELD
-$cx-default-colorfield-font-family: "Consolas", monospace !default;
-
-// MONTHPICKER
-$cx-default-monthpicker-font-size: smaller !default;
-$cx-default-monthpicker-font-weight: normal !default;
-
-// SLIDER
-$cx-default-slider-axis-size: 8px !default;
-$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
-$cx-default-slider-range-background-color: #98d4ff !default;
-
-// handle
-$cx-default-slider-handle-size: 18px !default;
-$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
-$cx-default-slider-handle-border-width: 1px !default;
-$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
-$cx-default-slider-handle-border-radius: 50% !default;
-$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-$cx-slider-handle-styles: (
-   default: (
-      background-color: $cx-default-slider-handle-background-color,
-      border-style: solid,
-      border-width: $cx-default-slider-handle-border-width,
-      border-color: $cx-default-slider-handle-border-color,
-      border-radius: $cx-default-slider-handle-border-radius,
-      box-shadow: $cx-default-slider-handle-box-shadow,
-   ),
-   hover: (
-      box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
-   ),
-   focus: (
-      border-color: rgba(77, 144, 254, 0.8),
-      outline: none,
-      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
-   ),
-   disabled: (),
-   active: (
-      background: rgb(220, 220, 220),
-   ),
-) !default;
-
-// SWITCH
-$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
-$cx-default-switch-range-background-color: #87cc8a !default;
-$cx-default-switch-axis-size: 20px !default;
-$cx-default-switch-width: 32px !default;
-
-$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
-$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
-$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
-$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
-$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
-$cx-default-switch-handle-size: 18px !default;
-
-$cx-switch-handle-styles: (
-   default: (
-      background-color: $cx-default-switch-handle-background-color,
-      border-style: solid,
-      border-width: $cx-default-switch-handle-border-width,
-      border-color: $cx-default-switch-handle-border-color,
-      border-radius: $cx-default-switch-handle-border-radius,
-      box-shadow: $cx-default-switch-handle-box-shadow,
-   ),
-   hover: (
-      box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
-   ),
-   focus: (
-      border-color: rgba(77, 144, 254, 0.8),
-      outline: none,
-      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
-   ),
-   disabled: (),
-   active: (
-      background: rgb(220, 220, 220),
-   ),
-   on: (),
-   on-active: (),
-) !default;
-
-// TEXTAREA
-$cx-default-textarea-width: 300px !default;
-$cx-textarea-state-style-map: cx-deep-map-merge(
-   $cx-input-state-style-map,
-   (
-      default: (
-         line-height: normal,
-      ),
-   )
-);
-
-// LOOKUPFIELD TAG
-$cx-default-input-tag-spacing: 3px !default;
-$cx-default-input-tag-font-size: null !default;
-$cx-default-input-tag-background-color: #eee !default;
-$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
-$cx-default-input-tag-padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing) !default;
-
-$cx-input-tag-state-style-map: (
-   default: (
-      font-size: $cx-default-input-tag-font-size,
-      background-color: $cx-default-input-tag-background-color,
-      margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing,
-      padding: $cx-default-input-tag-padding,
-      padding-right: cx-calc($cx-default-clear-size, 2px),
-      border-radius: $cx-default-input-tag-border-radius,
-   ),
-) !default;
-
-$cx-input-tag-clear-state-style-map: cx-deep-map-merge(
-   $cx-clear-state-style-map,
-   (
-      default: (
-         right: round($cx-default-input-tag-border-radius * 0.125),
-      ),
-   )
-) !default;
-
-// CALENDAR
-@import "Calendar.variables";
-@import "Checkbox.variables";
-@import "Radio.variables";
-@import "ColorPicker.variables";
-
-$cx-dependencies: map.merge(
-   $cx-dependencies,
-   (
-      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
-      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
-         "cx/widgets/Dropdown",
-      "cx/widgets/DateField": "cx/widgets/DateTimeField",
-      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
-      "cx/widgets/TextField": "cx/widgets/Field",
-      "cx/widgets/NumberField": "cx/widgets/Field",
-      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
-      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
-      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List"
-         "cx/widgets/HighlightedSearchText",
-      "cx/widgets/Select": "cx/widgets/Field",
-      "cx/widgets/Slider": "cx/widgets/Field",
-      "cx/widgets/Switch": "cx/widgets/Field",
-   )
-);
-
-// DATE TIME PICKER
-$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
-$cx-default-datetimepicker-background-color: #fff !default;
-$cx-default-datetimepicker-border-width: 1px !default;
-$cx-default-datetimepicker-border-radius: 0 !default;
-$cx-default-datetimepicker-border-color: #d3d3d3 !default;
-$cx-default-datetimepicker-padding: 0 5px !default;
-
-// wheel
-$cx-default-wheel-clip-background-color: #fff !default;
-$cx-default-wheel-clip-border-width: 1px !default;
-$cx-default-wheel-clip-border-radius: 0 !default;
-$cx-default-wheel-clip-border-color: #d3d3d3 !default;
-
-$cx-wheel-selection-state-style-map: (
-   default: (
-      border-width: 2px 0 2px 0,
-      border-style: solid,
-      border-color: #9bc8ff,
-      background-color: rgba(#9bc8ff, 0.1),
-   ),
-   active: (
-      border-color: #3c7eff,
-      background: rgba(#3c7eff, 0.1),
-   ),
-) !default;
+@use "sass:map";
+@use "../../util/scss/include.scss" as *;
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../box.scss" as *;
+@use "./Field.variables.scss" as *;
+
+// Label
+$cx-default-label-padding: $cx-default-box-padding 0 !default;
+$cx-default-label-font-size: $cx-default-box-font-size !default;
+$cx-default-label-font-family: $cx-default-box-font-family !default;
+$cx-default-label-font-weight: normal !default;
+$cx-default-label-line-height: $cx-default-box-line-height !default;
+$cx-default-label-color: null !default;
+$cx-default-label-asterisk-color: #a80000 !default;
+
+// DATE TIME PICKER
+$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
+$cx-default-datetimepicker-background-color: #fff !default;
+$cx-default-datetimepicker-border-width: 1px !default;
+$cx-default-datetimepicker-border-radius: 0 !default;
+$cx-default-datetimepicker-border-color: #d3d3d3 !default;
+$cx-default-datetimepicker-padding: 0 5px !default;
+
+// wheel
+$cx-default-wheel-clip-background-color: #fff !default;
+$cx-default-wheel-clip-border-width: 1px !default;
+$cx-default-wheel-clip-border-radius: 0 !default;
+$cx-default-wheel-clip-border-color: #d3d3d3 !default;
+
+$cx-wheel-selection-state-style-map: (
+   default: (
+      border-width: 2px 0 2px 0,
+      border-style: solid,
+      border-color: #9bc8ff,
+      background-color: rgba(#9bc8ff, 0.1),
+   ),
+   active: (
+      border-color: #3c7eff,
+      background: rgba(#3c7eff, 0.1),
+   ),
+) !default;
+
+// COLORFIELD
+$cx-default-colorfield-font-family: "Consolas", monospace !default;
+
+// MONTHPICKER
+@forward "./MonthPicker.variables.scss";
+
+// SLIDER
+$cx-default-slider-axis-size: 8px !default;
+$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
+$cx-default-slider-range-background-color: #98d4ff !default;
+
+// handle
+$cx-default-slider-handle-size: 18px !default;
+$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
+$cx-default-slider-handle-border-width: 1px !default;
+$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
+$cx-default-slider-handle-border-radius: 50% !default;
+$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+// SWITCH
+$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
+$cx-default-switch-range-background-color: #87cc8a !default;
+$cx-default-switch-axis-size: 20px !default;
+$cx-default-switch-width: 32px !default;
+
+$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
+$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
+$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
+$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
+$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
+$cx-default-switch-handle-size: 18px !default;
+
+// TEXTAREA
+$cx-default-textarea-width: 300px !default;
+
+// LOOKUPFIELD TAG
+$cx-default-input-tag-spacing: 3px !default;
+$cx-default-input-tag-font-size: null !default;
+$cx-default-input-tag-background-color: #eee !default;
+$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
+$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
+
+// Note: Field.variables.scss is @use'd above, not @forward'd here
+// to avoid "module already loaded" errors with @forward...with() configuration
+@forward "./Calendar.variables.scss";
+@forward "./Checkbox.variables.scss";
+@forward "./Radio.variables.scss";
+@forward "./ColorPicker.variables.scss";
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
+      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
+         "cx/widgets/Dropdown",
+      "cx/widgets/DateField": "cx/widgets/DateTimeField",
+      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
+      "cx/widgets/TextField": "cx/widgets/Field",
+      "cx/widgets/NumberField": "cx/widgets/Field",
+      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
+      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
+      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
+      "cx/widgets/Select": "cx/widgets/Field",
+      "cx/widgets/Slider": "cx/widgets/Field",
+      "cx/widgets/Switch": "cx/widgets/Field",
+   )
+);

package/src/widgets/grid/Grid.scss

@@ -1,4 +1,13 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
 @mixin cx-grid(
    $name: "grid",
@@ -31,6 +40,7 @@
          border-collapse: collapse;
          width: 100%;
          position: relative;
+         font-size: inherit;
       }
 
       .#{$state}aligned-left {
@@ -53,6 +63,7 @@
 
          &.#{$state}border {
             border: 1px solid $cx-default-grid-border-color;
+            background: $cx-default-grid-background;
 
             table {
                border: none;
@@ -92,6 +103,7 @@
                vertical-align: top;
                min-width: 100%;
                min-height: 100%;
+               padding-top: $cx-default-grid-scroll-wrapper-padding-top;
             }
          }
       }
@@ -112,6 +124,8 @@
       }
 
       &.#{$state}border {
+         background: $cx-default-grid-background;
+
          table {
             border: 1px solid $cx-default-grid-border-color;
          }
@@ -330,7 +344,7 @@
       width: $icon-size;
       height: $icon-size;
       top: 50%;
-      margin-top: -$icon-size * 0.5;
+      margin-top: cx-multiply($icon-size, -0.5);
       position: absolute;
       transition: transform 0.1s linear;
 
@@ -476,7 +490,6 @@
 
    .#{$element}#{$name}-group-caption {
       font-weight: bold;
-      font-size: 115%;
 
       td {
          padding: cx-get-state-rule($data-state-style-map, default, padding);
@@ -598,6 +611,10 @@
       border-right-style: solid;
       border-right-width: 1px;
 
+      & > .#{$element}#{$name}-fixed-table-wrapper {
+         padding-top: $cx-default-grid-scroll-wrapper-padding-top;
+      }
+
       &.#{$state}fixed-footer
          > .#{$element}#{$name}-fixed-table-wrapper
          > table

package/src/widgets/grid/Grid.spec.ts

@@ -0,0 +1,42 @@
+import assert from "assert";
+import { Grid } from "./Grid";
+import { Widget } from "../../ui/Widget";
+
+function collectKeys(
+   obj: any,
+   path = "",
+   result: Record<string, boolean> = {},
+   seen = new WeakSet(),
+): Record<string, boolean> {
+   if (!obj || typeof obj !== "object" || seen.has(obj)) return result;
+   seen.add(obj);
+   for (const key of Object.keys(obj)) {
+      const fullPath = path ? `${path}.${key}` : key;
+      result[fullPath] = true;
+      collectKeys(obj[key], fullPath, result, seen);
+   }
+   return result;
+}
+
+describe("Grid", () => {
+   it("should not mutate columns config during init", () => {
+      const config = {
+         type: Grid,
+         records: { bind: "records" },
+         columns: [
+            { header: "Name", field: "name" },
+            { header: "City", field: "city" },
+         ],
+      };
+
+      const keysBefore = collectKeys(config);
+
+      const widget = Widget.create(config) as Grid;
+      widget.init();
+
+      const keysAfter = collectKeys(config);
+      const newKeys = Object.keys(keysAfter).filter((k) => !keysBefore[k]);
+
+      assert.deepStrictEqual(newKeys, [], `Config was mutated. New keys: ${newKeys.join(", ")}`);
+   });
+});