@kaizen/components 0.0.0-canary-update-floating-fms-20250715035144 → 0.0.0-canary-test-relative-floating-fix-20250717062523

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var VisuallyHidden = require('../../../../VisuallyHidden/VisuallyHidden.cjs');
 var ListBoxSection_module = require('./ListBoxSection.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -27,7 +28,7 @@ var ListBoxSection = function (_a) {
     className: ListBoxSection_module.listBoxSectionHeader,
     id: listSectionId,
     role: "presentation"
-  }, restProps.sectionHeader), Array.from(items).map(function (node) {
+  }, sectionName && React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, sectionName, ". "), restProps.sectionHeader), Array.from(items).map(function (node) {
     return node != undefined && children(node);
   })));
 };

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.mjs

@@ -1,5 +1,6 @@
 import { __rest } from 'tslib';
 import React, { useId } from 'react';
+import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
 import styles from './ListBoxSection.module.scss.mjs';
 const ListBoxSection = /*#__PURE__*/function () {
   const ListBoxSection = function (_a) {
@@ -20,7 +21,7 @@ const ListBoxSection = /*#__PURE__*/function () {
       className: styles.listBoxSectionHeader,
       id: listSectionId,
       role: "presentation"
-    }, restProps.sectionHeader)), Array.from(items).map(function (node) {
+    }, sectionName && /*#__PURE__*/React.createElement(VisuallyHidden, null, sectionName, ". "), restProps.sectionHeader)), Array.from(items).map(function (node) {
       return node != undefined && children(node);
     })));
   };

package/dist/styles.css

@@ -3776,6 +3776,7 @@
     padding: 0;
   }
   .ListBoxSection-module_listBoxSectionHeader__N-2Fi {
+    position: relative;
     font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
     font-size: var(--typography-heading-6-font-size, 0.875rem);
     font-weight: var(--typography-heading-6-font-weight, 600);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-update-floating-fms-20250715035144",
+  "version": "0.0.0-canary-test-relative-floating-fix-20250717062523",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -414,7 +414,6 @@ export const ShouldFlip: Story = {
   args: {
     floatingConfig: {
       shouldFlip: true,
-      shouldResize: false,
     },
   },
   parameters: {

package/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss

@@ -10,6 +10,7 @@
   }
 
   .listBoxSectionHeader {
+    position: relative; // this is needed to ensure the VisuallyHidden element doesn't impact the scroll height of the list
     font-family: $typography-heading-6-font-family;
     font-size: $typography-heading-6-font-size;
     font-weight: $typography-heading-6-font-weight;

package/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx

@@ -47,7 +47,7 @@ export const ListBoxSection = ({
       >
         {hasSectionHeader && (
           <li className={styles.listBoxSectionHeader} id={listSectionId} role="presentation">
-            {/* {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>} */}
+            {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>}
             {restProps.sectionHeader}
           </li>
         )}