@kaizen/components 1.79.1 → 1.79.2

package/dist/cjs/src/__next__/Select/Select.cjs

@@ -132,7 +132,8 @@ var Select = function (_a) {
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
-    menuProps: menuProps
+    menuProps: menuProps,
+    popoverRef: refs.floating
   }, children)))), validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, {
     id: validationId,
     message: validationMessage,

package/dist/cjs/src/__next__/Select/subcomponents/Overlay/Overlay.cjs

@@ -14,7 +14,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Overlay = function (_a) {
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+    popoverRef = _a.popoverRef,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride", "popoverRef"]);
   var state = SelectContext.useSelectContext().state;
   // Handle events that should cause the menu to close,
   // e.g. blur, clicking outside, or pressing the escape key.
@@ -23,13 +24,12 @@ var Overlay = function (_a) {
     isDismissable: true,
     isOpen: state.isOpen,
     onClose: state.close
-  }, overlayRef).overlayProps;
+  }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
   // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return React__default.default.createElement("div", tslib.__assign({
-    ref: overlayRef,
     className: classNameOverride
   }, overlayProps, restProps), React__default.default.createElement(focus.FocusScope, {
     autoFocus: false,

package/dist/cjs/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.cjs

@@ -14,7 +14,8 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var SelectPopoverContents = function (_a) {
   var children = _a.children,
-    menuProps = _a.menuProps;
+    menuProps = _a.menuProps,
+    popoverRef = _a.popoverRef;
   var state = SelectContext.useSelectContext().state;
   // The collection structure is set by useSelectState's `children`
   // which we have used a util to ensure the following structure
@@ -23,7 +24,9 @@ var SelectPopoverContents = function (_a) {
   var itemNodes = Array.from(state.collection);
   return React__default.default.createElement("div", {
     className: SelectPopoverContents_module.selectPopoverContents
-  }, React__default.default.createElement(Overlay.Overlay, null, React__default.default.createElement(ListBox.ListBox, {
+  }, React__default.default.createElement(Overlay.Overlay, {
+    popoverRef: popoverRef
+  }, React__default.default.createElement(ListBox.ListBox, {
     menuProps: menuProps
   }, children ? children({
     items: itemNodes

package/dist/esm/src/__next__/Select/Select.mjs

@@ -124,7 +124,8 @@ const Select = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement(SelectProvider, {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
-      menuProps: menuProps
+      menuProps: menuProps,
+      popoverRef: refs.floating
     }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
       id: validationId,
       message: validationMessage,

package/dist/esm/src/__next__/Select/subcomponents/Overlay/Overlay.mjs

@@ -7,7 +7,8 @@ const Overlay = /*#__PURE__*/function () {
   const Overlay = function (_a) {
     var children = _a.children,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "classNameOverride"]);
+      popoverRef = _a.popoverRef,
+      restProps = __rest(_a, ["children", "classNameOverride", "popoverRef"]);
     var state = useSelectContext().state;
     // Handle events that should cause the menu to close,
     // e.g. blur, clicking outside, or pressing the escape key.
@@ -16,13 +17,12 @@ const Overlay = /*#__PURE__*/function () {
       isDismissable: true,
       isOpen: state.isOpen,
       onClose: state.close
-    }, overlayRef).overlayProps;
+    }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
     // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
     // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
     // In addition, add hidden <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
     return /*#__PURE__*/React.createElement("div", __assign({
-      ref: overlayRef,
       className: classNameOverride
     }, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
       autoFocus: false,

package/dist/esm/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs

@@ -7,7 +7,8 @@ import styles from './SelectPopoverContents.module.scss.mjs';
 const SelectPopoverContents = /*#__PURE__*/function () {
   const SelectPopoverContents = function (_a) {
     var children = _a.children,
-      menuProps = _a.menuProps;
+      menuProps = _a.menuProps,
+      popoverRef = _a.popoverRef;
     var state = useSelectContext().state;
     // The collection structure is set by useSelectState's `children`
     // which we have used a util to ensure the following structure
@@ -16,7 +17,9 @@ const SelectPopoverContents = /*#__PURE__*/function () {
     var itemNodes = Array.from(state.collection);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.selectPopoverContents
-    }, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ListBox, {
+    }, /*#__PURE__*/React.createElement(Overlay, {
+      popoverRef: popoverRef
+    }, /*#__PURE__*/React.createElement(ListBox, {
       menuProps: menuProps
     }, children ? children({
       items: itemNodes

package/dist/types/__next__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -3,8 +3,9 @@ import { type OverrideClassName } from "../../../../types/OverrideClassName";
 import { type SelectOption } from '../../types';
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const Overlay: {
-    <Option extends SelectOption>({ children, classNameOverride, ...restProps }: OverlayProps): JSX.Element;
+    <Option extends SelectOption>({ children, classNameOverride, popoverRef, ...restProps }: OverlayProps): JSX.Element;
     displayName: string;
 };

package/dist/types/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.d.ts

@@ -6,8 +6,9 @@ export type SelectPopoverContentsProps<Option extends SelectOption> = {
         items: SelectItemNode<Option>[];
     }) => React.ReactNode;
     menuProps: AriaListBoxOptions<SelectItem<Option>>;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const SelectPopoverContents: {
-    <Option extends SelectOption>({ children, menuProps, }: SelectPopoverContentsProps<Option>): JSX.Element;
+    <Option extends SelectOption>({ children, menuProps, popoverRef, }: SelectPopoverContentsProps<Option>): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.1",
+  "version": "1.79.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/__next__/Select/Select.tsx

@@ -183,7 +183,9 @@ export const Select = <Option extends SelectOption = SelectOption>({
         {state.isOpen && (
           <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
-              <SelectPopoverContents menuProps={menuProps}>{children}</SelectPopoverContents>
+              <SelectPopoverContents menuProps={menuProps} popoverRef={refs.floating}>
+                {children}
+              </SelectPopoverContents>
             </SelectProvider>
           </Popover>
         )}

package/src/__next__/Select/subcomponents/Overlay/Overlay.tsx

@@ -7,11 +7,13 @@ import { type SelectOption } from '../../types'
 
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
   children: React.ReactNode
+  popoverRef?: React.RefObject<Element | null>
 }
 
 export const Overlay = <Option extends SelectOption>({
   children,
   classNameOverride,
+  popoverRef,
   ...restProps
 }: OverlayProps): JSX.Element => {
   const { state } = useSelectContext<Option>()
@@ -21,7 +23,7 @@ export const Overlay = <Option extends SelectOption>({
   const overlayRef = React.useRef<HTMLDivElement>(null)
   const { overlayProps } = useOverlay(
     { isDismissable: true, isOpen: state.isOpen, onClose: state.close },
-    overlayRef,
+    popoverRef ?? overlayRef,
   )
 
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
@@ -29,7 +31,7 @@ export const Overlay = <Option extends SelectOption>({
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return (
-    <div ref={overlayRef} className={classNameOverride} {...overlayProps} {...restProps}>
+    <div className={classNameOverride} {...overlayProps} {...restProps}>
       {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
       <FocusScope autoFocus={false} restoreFocus>
         <DismissButton onDismiss={state.close} />

package/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.tsx

@@ -10,11 +10,13 @@ import styles from './SelectPopoverContents.module.scss'
 export type SelectPopoverContentsProps<Option extends SelectOption> = {
   children?: (args: { items: SelectItemNode<Option>[] }) => React.ReactNode
   menuProps: AriaListBoxOptions<SelectItem<Option>>
+  popoverRef?: React.RefObject<Element | null>
 }
 
 export const SelectPopoverContents = <Option extends SelectOption>({
   children,
   menuProps,
+  popoverRef,
 }: SelectPopoverContentsProps<Option>): JSX.Element => {
   const { state } = useSelectContext<Option>()
 
@@ -26,7 +28,7 @@ export const SelectPopoverContents = <Option extends SelectOption>({
 
   return (
     <div className={styles.selectPopoverContents}>
-      <Overlay<Option>>
+      <Overlay<Option> popoverRef={popoverRef}>
         <ListBox<Option> menuProps={menuProps}>
           {children ? children({ items: itemNodes }) : <ListItems<Option> items={itemNodes} />}
         </ListBox>