@kaizen/components 0.0.0-canary-debug-kaizen-provider-final-20250107212529 → 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815

package/dist/esm/__rc__/Select/Select.mjs

@@ -42,14 +42,14 @@ const Select = /*#__PURE__*/function () {
       selectedKey = _a.selectedKey,
       description = _a.description,
       _c = _a.placeholder,
-      placeholder = _c === void 0 ? '' : _c,
+      placeholder = _c === undefined ? '' : _c,
       isDisabled = _a.isDisabled,
       portalContainerId = _a.portalContainerId,
       restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+    var id = propsId !== null && propsId !== undefined ? propsId : fallbackId;
     var descriptionId = "".concat(id, "--description");
     var popoverId = "".concat(id, "--popover");
     var disabledKeys = getDisabledKeysFromItems(items);
@@ -57,7 +57,7 @@ const Select = /*#__PURE__*/function () {
       label: label,
       items: items,
       children: transformSelectItemToCollectionElement,
-      disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
+      disabledKeys: disabledValues !== null && disabledValues !== undefined ? disabledValues : disabledKeys,
       selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
       placeholder: placeholder,
@@ -78,13 +78,13 @@ const Select = /*#__PURE__*/function () {
     // Issue: https://github.com/adobe/react-spectrum/issues/4091
     var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
     var triggerProps = __assign(__assign({}, reactAriaTriggerProps), {
-      'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
+      'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === undefined ? undefined : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
     });
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
     var selectToggleProps = __assign(__assign({}, buttonProps), {
       label: label,
       labelProps: labelProps,
-      value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+      value: (_b = state === null || state === undefined ? undefined : state.selectedItem) === null || _b === undefined ? undefined : _b.rendered,
       valueProps: valueProps,
       isOpen: state.isOpen,
       placeholder: placeholder,
@@ -111,7 +111,7 @@ const Select = /*#__PURE__*/function () {
       triggerRef: triggerRef
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.container
-    }, trigger === undefined ? ( /*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && ( /*#__PURE__*/React.createElement(Popover, {
+    }, trigger === undefined ? (/*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && (/*#__PURE__*/React.createElement(Popover, {
       id: popoverId,
       portalContainer: portalContainer,
       refs: refs
@@ -119,11 +119,11 @@ const Select = /*#__PURE__*/function () {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
       menuProps: menuProps
-    }, children))))), validationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
+    }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
       message: validationMessage,
       status: status,
       reversed: isReversed
-    }))), description && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({}, descriptionProps, {
+    }))), description && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, descriptionProps, {
       id: descriptionId,
       message: description,
       reversed: isReversed

package/dist/esm/__rc__/Select/hooks/useHasStableYPosition.mjs

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
+ * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
+ * This now polls to check if the element's position is stable by comparing the first and last position.
+ */
+var useHasStableYPosition = function (ref) {
+  var _a = useState(false),
+    isStable = _a[0],
+    setIsStable = _a[1];
+  var _b = useState(null),
+    lastYPosition = _b[0],
+    setLastYPosition = _b[1];
+  useEffect(function () {
+    var checkPosition = function () {
+      if (ref.current) {
+        var y = ref.current.getBoundingClientRect().y;
+        if (lastYPosition === null) {
+          setLastYPosition(y);
+        } else if (y === lastYPosition) {
+          setIsStable(true);
+        } else {
+          setLastYPosition(y);
+        }
+      }
+    };
+    var intervalId = setInterval(checkPosition, 1);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [ref, lastYPosition]);
+  return isStable;
+};
+export { useHasStableYPosition };

package/dist/esm/__rc__/Select/subcomponents/ListBox/ListBox.mjs

@@ -2,8 +2,8 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { useListBox } from '@react-aria/listbox';
 import classnames from 'classnames';
-import { useIsClientReady } from '../../../../__utilities__/useIsClientReady/useIsClientReady.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
+import { useHasStableYPosition } from '../../hooks/useHasStableYPosition.mjs';
 import styles from './ListBox.module.scss.mjs';
 
 /** A util to retrieve the key of the correct focusable items based of the focus strategy
@@ -35,32 +35,31 @@ const ListBox = /*#__PURE__*/function () {
       menuProps = _a.menuProps,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
-    var isClientReady = useIsClientReady();
     var state = useSelectContext().state;
     var ref = useRef(null);
+    var hasStableYPosition = useHasStableYPosition(ref);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
       disallowEmptySelection: true,
       // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
       autoFocus: false
     }), state, ref).listBoxProps;
     /**
-     * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
+     * This uses the hasStableYPosition to determine if the position is stable within the window
      */
     useEffect(function () {
       var _a;
-      if (isClientReady) {
+      if (hasStableYPosition) {
         var optionKey = getOptionKeyFromCollection(state);
         var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
         if (focusToElement) {
           focusToElement.focus();
         } else {
-          // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
-          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+          (_a = ref.current) === null || _a === undefined ? undefined : _a.focus();
         }
       }
       // Only run this effect for checking the first successful render
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isClientReady]);
+    }, [hasStableYPosition]);
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,
       className: classnames(styles.listBox, classNameOverride)

package/dist/esm/__rc__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs

@@ -16,7 +16,7 @@ const ListBoxSection = /*#__PURE__*/function () {
       groupProps = _b.groupProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", __assign({}, itemProps, {
       className: styles.sectionWrapper
-    }), section.rendered && ( /*#__PURE__*/React.createElement(Heading, __assign({
+    }), section.rendered && (/*#__PURE__*/React.createElement(Heading, __assign({
       tag: "span",
       variant: "heading-6"
     }, headingProps, {

package/dist/esm/__rc__/Select/subcomponents/ListItem/ListItem.mjs

@@ -4,10 +4,10 @@ import { Option } from '../Option/Option.mjs';
 const ListItem = /*#__PURE__*/function () {
   const ListItem = function (_a) {
     var item = _a.item;
-    return item.type === 'section' ? ( /*#__PURE__*/React.createElement(ListBoxSection, {
+    return item.type === 'section' ? (/*#__PURE__*/React.createElement(ListBoxSection, {
       key: item.key,
       section: item
-    })) : ( /*#__PURE__*/React.createElement(Option, {
+    })) : (/*#__PURE__*/React.createElement(Option, {
       key: item.key,
       item: item
     }));

package/dist/esm/__rc__/Select/subcomponents/Option/Option.mjs

@@ -32,7 +32,7 @@ const Option = /*#__PURE__*/function () {
             return state.setSelectedKey(item.key);
           }, 250);
         } else {
-          onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
+          onPointerUp === null || onPointerUp === undefined ? undefined : onPointerUp(e);
         }
       }
     }), {

package/dist/esm/__rc__/Select/subcomponents/SelectToggle/SelectToggle.mjs

@@ -12,7 +12,7 @@ const SelectToggle = /*#__PURE__*/function () {
       valueProps = _a.valueProps,
       isOpen = _a.isOpen,
       _b = _a.placeholder,
-      placeholder = _b === void 0 ? 'Select' : _b,
+      placeholder = _b === undefined ? 'Select' : _b,
       status = _a.status,
       isDisabled = _a.isDisabled,
       isReversed = _a.isReversed,
@@ -31,7 +31,7 @@ const SelectToggle = /*#__PURE__*/function () {
       className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === 'error' && styles.error, status === 'caution' && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
     }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
       className: styles.value
-    }), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
+    }), value !== null && value !== undefined ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
       name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
       isPresentational: true,
       className: styles.icon

package/dist/esm/__rc__/Select/utils/transformSelectItemToCollectionElement.mjs

@@ -2,7 +2,7 @@ import React from 'react';
 import { Section, Item } from '@react-stately/collections';
 import { isSelectOptionGroup } from './isSelectOptionGroup.mjs';
 var transformSelectItemToCollectionElement = function (item) {
-  return isSelectOptionGroup(item) ? ( /*#__PURE__*/React.createElement(Section, {
+  return isSelectOptionGroup(item) ? (/*#__PURE__*/React.createElement(Section, {
     key: item.label,
     title: item.label,
     items: item.options
@@ -10,7 +10,7 @@ var transformSelectItemToCollectionElement = function (item) {
     return /*#__PURE__*/React.createElement(Item, {
       key: child.value
     }, child.label);
-  })) : ( /*#__PURE__*/React.createElement(Item, {
+  })) : (/*#__PURE__*/React.createElement(Item, {
     key: item.value
   }, item.label));
 };

package/dist/esm/__rc__/Tabs/subcomponents/Tab/Tab.mjs

@@ -18,14 +18,11 @@ var Tab = function (props) {
   }, restProps);
   return /*#__PURE__*/React.createElement(Tab$1, __assign({
     "data-kz-tab": true
-  }, tabProps), function (_a) {
-    var isSelected = _a.isSelected,
-      isFocusVisible = _a.isFocusVisible,
-      isHovered = _a.isHovered;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children, badge && ( /*#__PURE__*/React.createElement("span", {
+  }, tabProps), function (TabRenderProps) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(TabRenderProps) : children, badge && (/*#__PURE__*/React.createElement("span", {
       className: styles.badge
     }, /*#__PURE__*/React.createElement(Badge, {
-      variant: isSelected || isFocusVisible || isHovered ? 'active' : 'default'
+      variant: TabRenderProps.isSelected || TabRenderProps.isFocusVisible || TabRenderProps.isHovered ? 'active' : 'default'
     }, badge))));
   });
 };

package/dist/esm/__rc__/Tabs/subcomponents/TabList/TabList.mjs

@@ -13,7 +13,7 @@ import styles from './TabList.module.css.mjs';
 var TabList = function (props) {
   var ariaLabel = props["aria-label"],
     _a = props.noPadding,
-    noPadding = _a === void 0 ? false : _a,
+    noPadding = _a === undefined ? false : _a,
     children = props.children,
     className = props.className,
     testId = props["data-testid"],
@@ -36,7 +36,7 @@ var TabList = function (props) {
     containerElement = _f[0],
     setContainerElement = _f[1];
   var tabListContext = useContext(TabListStateContext);
-  var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  var selectedKey = tabListContext === null || tabListContext === undefined ? undefined : tabListContext.selectedKey;
   useEffect(function () {
     if (!isDocumentReady) {
       setIsDocumentReady(true);
@@ -50,7 +50,7 @@ var TabList = function (props) {
     if (!isDocumentReady) {
       return;
     }
-    var tabs = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll('[data-kz-tab]');
+    var tabs = containerElement === null || containerElement === undefined ? undefined : containerElement.querySelectorAll('[data-kz-tab]');
     if (!tabs) {
       return;
     }
@@ -87,7 +87,7 @@ var TabList = function (props) {
       return;
     }
     // Scroll selected tab into view
-    (_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+    (_a = containerElement === null || containerElement === undefined ? undefined : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === undefined ? undefined : _a.scrollIntoView({
       block: 'nearest',
       inline: 'center'
     });

package/dist/esm/__rc__/Tag/Tag/Tag.mjs

@@ -8,7 +8,7 @@ const Tag = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       icon = _a.icon,
       _b = _a.color,
-      color = _b === void 0 ? 'gray' : _b,
+      color = _b === undefined ? 'gray' : _b,
       restProps = __rest(_a, ["children", "classNameOverride", "icon", "color"]);
     return /*#__PURE__*/React.createElement("span", __assign({
       className: classnames(styles.tag, styles[color], classNameOverride)

package/dist/esm/__rc__/Tooltip/Tooltip.mjs

@@ -27,7 +27,7 @@ const Tooltip = /*#__PURE__*/function () {
       setShouldInlineHiddenContent = _b[1];
     useLayoutEffect(function () {
       var _a;
-      setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-inline-hidden-content')));
+      setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === undefined ? undefined : triggerRef.current) === null || _a === undefined ? undefined : _a.getAttribute('data-inline-hidden-content')));
     }, [triggerRef]);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip$1, __assign({
       ref: ref,
@@ -36,7 +36,7 @@ const Tooltip = /*#__PURE__*/function () {
       className: mergeClassNames(styles.tooltip, className, reverseColors && styles.reversed)
     }), function (renderProps) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverlayArrow, null), typeof children === 'function' ? children(renderProps) : children);
-    }), shouldInlineHiddenContent ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, typeof children === 'function' ? contextState && children({
+    }), shouldInlineHiddenContent ? (/*#__PURE__*/React.createElement(VisuallyHidden, null, typeof children === 'function' ? contextState && children({
       placement: 'center',
       isEntering: false,
       isExiting: false,

package/dist/esm/__utilities__/ReversedColors/v3/ReversedColors.mjs

@@ -6,7 +6,7 @@ var useReversedColors = function () {
 var ReversedColors = function (_a) {
   var children = _a.children,
     _b = _a.isReversed,
-    isReversed = _b === void 0 ? true : _b;
+    isReversed = _b === undefined ? true : _b;
   return /*#__PURE__*/React.createElement(ReversedColorsContext.Provider, {
     value: isReversed
   }, children);

package/dist/esm/__utilities__/isRTL/isRTL.mjs

@@ -4,6 +4,6 @@
  */
 var isRTL = function (element) {
   var _a;
-  return !!((_a = element.closest('[dir]')) === null || _a === void 0 ? void 0 : _a.matches('[dir="rtl"]'));
+  return !!((_a = element.closest('[dir]')) === null || _a === undefined ? undefined : _a.matches('[dir="rtl"]'));
 };
 export { isRTL };

package/dist/esm/utils/getNodeText.mjs

@@ -5,7 +5,7 @@ var getNodeText = function (node) {
   if (!node) return '';
   if (typeof node === 'string' || typeof node === 'number') return node;
   if (node instanceof Array) return node.map(getNodeText).join('');
-  if ( /*#__PURE__*/React.isValidElement(node)) return getNodeText(node.props.children);
+  if (/*#__PURE__*/React.isValidElement(node)) return getNodeText(node.props.children);
   return '';
 };
 export { getNodeText };

package/dist/esm/utils/mergeClassNames.mjs

@@ -14,10 +14,10 @@ var mergeClassNames = function () {
     return typeof className === 'function';
   });
   // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
-  if (!containsFunction) return classnames.apply(void 0, classNames);
+  if (!containsFunction) return classnames.apply(undefined, classNames);
   // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
   return function (state) {
-    return classnames.apply(void 0, classNames.map(function (className) {
+    return classnames.apply(undefined, classNames.map(function (className) {
       return typeof className === 'function' ? className(state) : className;
     }));
   };

package/dist/esm/utils/useMediaQueries.mjs

@@ -4,7 +4,7 @@ var subtractOnePixel = function (breakpoint) {
   return "".concat(parseInt(breakpoint, 10) - 1, "px");
 };
 var useMediaQueries = function (propQueries) {
-  if (propQueries === void 0) {
+  if (propQueries === undefined) {
     propQueries = {};
   }
   if (typeof window === 'undefined') {

package/dist/esm/utils/useResizeObserver.mjs

@@ -14,7 +14,7 @@ var defaultCallback = function (entry) {
  * @deprecated use native `ResizeObserver` DOM API instead
  */
 var useResizeObserver = function (resolveEntry) {
-  if (resolveEntry === void 0) {
+  if (resolveEntry === undefined) {
     resolveEntry = defaultCallback;
   }
   var destroyResizeObserverRef = useRef(undefined);