Merge branch 'master' into STCOM-1406

CHANGELOG.md

@@ -20,6 +20,8 @@
 * `<Tooltip>` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391.
 * `<AdvancedSearchRow>` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195.
 * *BREAKING* Update `@csstools` postcss plugins to current versions in sync with `@folio/stripes-cli`. Refs STCOM-1404.
+* Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386.
+* Calendar - improved color contrast of edge month days, as per WCAG standards. Changed hover bg color of edge/month days. Increased weight of day numbers overall. Refs STCOM-1390.
 * *BREAKING* Update `react-intl` to `^7`. Refs STCOM-1406.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)

lib/Datepicker/Calendar.css

@@ -55,13 +55,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    font-weight: 600;
 
     &:hover {
-      background-color: #eee;
+      background-color: var(--color-focus-shadow);
     }
 
     &.muted {
       color: var(--color-fill-disabled);
+
+      &:hover {
+        background-color: #eee;
+      }
     }
 
     &.today {

lib/Paneset/Paneset.js

@@ -442,10 +442,15 @@ class Paneset extends React.Component {
           this.interval = null;
         });
       } else {
-        // insert sorted by left coordinate of clientrect...
-        const newPanes = insertByClientRect(newState.panes, paneObject);
-        newState = Object.assign(newState, { panes: newPanes, changeType: 'added' });
-        // newState = this.insertPaneObject(newState, paneObject);
+        // check for duplicate id's before registering. Registration happens on mount.
+        // This will help with mount-twice strict mode strangeness
+        const paneExists = newState.panes.findIndex((p) => p.id === paneObject.id)
+        if (paneExists === -1) {
+          // insert sorted by left coordinate of clientrect...
+          const newPanes = insertByClientRect(newState.panes, paneObject);
+          newState = Object.assign(newState, { panes: newPanes, changeType: 'added' });
+          // newState = this.insertPaneObject(newState, paneObject);
+        }
       }
       return newState;
     }, () => {

lib/variables.css

@@ -14,7 +14,7 @@
   --color-fill-table-row-even: rgba(0 0 0 / 3%);
   --color-fill-form-element: var(--color-fill);
   --color-fill-current: rgba(0 0 0 / 62%);
-  --color-fill-disabled: rgba(0 0 0 / 15%);
+  --color-fill-disabled: rgba(0 0 0 / 54%);
   --color-fill-hover: rgba(37 118 195 / 20%);
   --color-fill-focus: rgba(37 118 195 / 20%);
   --color-focus-shadow:  rgba(166 212 255 / 65%);