@intility/bifrost-react-select 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @intility/bifrost-react-select
 
+## 5.2.0
+
+### Minor Changes
+
+- a161a0c: `<Select>` menu dropdown now uses bifrost `<Dropdown>` internally
+  - should fix layering issues (overlapping and/or scrollbars) when used inside
+    `<Modal>`, `<Nav.Group>`, and `<Dropdown>`
+
 ## 5.1.0
 
 ### Minor Changes
@@ -54,7 +62,6 @@
 ### Minor Changes
 
 - 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
-
   - `<Input>`
   - `<DatePicker>`
   - `<FieldGroup.Item>`
@@ -83,7 +90,6 @@
 ### Patch Changes
 
 - 3434ad1: Update Select styling to match new bifrost Button
-
   - Increased `border-radius` (from xs to s)
   - Slight `border-color` tweaks
 

package/dist/Select.d.ts

@@ -1,4 +1,3 @@
-import { CSSProperties, ReactNode, RefAttributes } from "react";
 import { GroupBase, Props as ReactSelectProps, SelectInstance, components as originalComponents } from "react-select";
 import { AsyncProps as AsyncSelectProps } from "react-select/async";
 import { CreatableProps as CreatableSelectProps } from "react-select/creatable";
@@ -13,7 +12,6 @@ export declare const selectStyles: {
     clearIndicator: (provided: any) => any;
     dropdownIndicator: (provided: any, state: any) => any;
     input: (provided: any) => any;
-    menuPortal: (provided: any) => any;
     menu: (provided: any) => any;
     menuList: (provided: any) => any;
     placeholder: (provided: any) => any;
@@ -30,15 +28,15 @@ export declare const selectComponents: typeof originalComponents;
 export type SelectState = "default" | "alert";
 export type SelectProps = {
     /** Required label text */
-    label: ReactNode;
+    label: React.ReactNode;
     /** Hide label text, will add label prop as aria-label for screen readers */
     hideLabel?: boolean;
     /** Description text to show more information */
-    description?: ReactNode;
+    description?: React.ReactNode;
     /** Available states: `default` and `alert` */
     state?: SelectState;
     /** Feedback text below the Select component */
-    feedback?: ReactNode;
+    feedback?: React.ReactNode;
     /** Required prop indicating mandatory field */
     required?: boolean;
     /** Bool to mark Select component required, but hides the required label */
@@ -46,7 +44,7 @@ export type SelectProps = {
     /** Marks Select component as optional */
     optional?: boolean;
     /** Inline CSS styles */
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     /** Displays a loading spinner */
     loading?: boolean;
     /** Decrease height of the input from `40px` to `32px` */
@@ -56,7 +54,7 @@ export type SelectType = {
     <OptionType = {
         label: string;
         value: string;
-    }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
+    }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
     displayName?: string;
 };
 /**
@@ -70,7 +68,7 @@ export type AsyncType = {
     }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
         options: OptionType[];
         label?: string;
-    }>(props: AsyncSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
+    }>(props: AsyncSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
     displayName?: string;
 };
 declare const AsyncSelect: AsyncType;
@@ -81,7 +79,7 @@ export type CreatableType = {
     }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
         options: OptionType[];
         label?: string;
-    }>(props: CreatableSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
+    }>(props: CreatableSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
     displayName?: string;
 };
 declare const CreatableSelect: CreatableType;
@@ -92,7 +90,7 @@ export type AsyncCreatableType = {
     }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
         options: OptionType[];
         label?: string;
-    }>(props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
+    }>(props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
     displayName?: string;
 };
 declare const AsyncCreatableSelect: AsyncCreatableType;

package/dist/Select.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */ "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import ReactSelectDefaultExport, { components as originalComponents } from "react-select";
 import AsyncReactSelect from "react-select/async";
 import CreatableReactSelect from "react-select/creatable";
@@ -17,6 +17,7 @@ import CustomMenuList from "./overrides/CustomMenuList.internal.js";
 import ClearIndicator from "./overrides/ClearIndicator.internal.js";
 import CustomOption from "./overrides/CustomOption.internal.js";
 import LoadingIndicator from "./overrides/LoadingIndicator.internal.js";
+import Menu, { SelectRefCtx } from "./overrides/Menu.internal.js";
 const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
 export const selectStyles = {
     container: (provided)=>({
@@ -102,16 +103,13 @@ export const selectStyles = {
             margin: 0,
             padding: 0
         }),
-    menuPortal: (provided)=>({
-            ...provided,
-            zIndex: 9999
-        }),
     menu: (provided)=>({
             ...provided,
+            position: "static",
+            margin: 0,
             backgroundColor: "transparent",
             boxShadow: "none",
-            borderRadius: "none",
-            zIndex: 3
+            borderRadius: "none"
         }),
     menuList: (provided)=>({
             ...provided,
@@ -210,6 +208,8 @@ export const selectComponents = {
     DropdownIndicator,
     Input: CustomInput,
     MenuList: CustomMenuList,
+    // @ts-ignore
+    Menu,
     ClearIndicator,
     Option: CustomOption,
     LoadingIndicator
@@ -222,48 +222,59 @@ export const selectComponents = {
     const GeneratedSelect = /*#__PURE__*/ forwardRef(({ label, hideLabel = false, isDisabled = false, state, feedback, required = false, description, requiredNoLabel = false, optional = false, inputId, className, style, loading = false, components, small = false, ...props }, ref)=>{
         const selectId = useUniqueId(inputId);
         const locale = useLocale();
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classNames(className, "bf-select-container", "bf-open-sans", {
-                "bf-select-disabled": isDisabled,
-                "bf-select-alert": !isDisabled && state === "alert",
-                "bf-select-small": small
-            }),
-            style: style,
-            "data-testid": "bf-select-container",
-            children: [
-                !hideLabel && /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: selectId,
-                    required: !isDisabled && required && !requiredNoLabel,
-                    optional: optional,
-                    disabled: isDisabled,
-                    children: label
-                }),
-                /*#__PURE__*/ _jsx(Description, {
-                    children: description
-                }),
-                /*#__PURE__*/ _jsx(Selector, {
-                    ref: ref,
-                    inputId: selectId,
-                    placeholder: "",
-                    components: {
-                        ...selectComponents,
-                        ...components
-                    },
-                    styles: selectStyles,
-                    isDisabled: isDisabled,
-                    classNamePrefix: "bf-select",
-                    required: !isDisabled && (required || requiredNoLabel),
-                    "aria-label": label,
-                    hideSelectedOptions: false,
-                    closeMenuOnSelect: props.isMulti ? false : true,
-                    isLoading: loading ?? props.isLoading,
-                    loadingMessage: ()=>locale.loading + "...",
-                    ...props
+        const [controlElement, setControlElement] = useState(null);
+        return /*#__PURE__*/ _jsx(SelectRefCtx.Provider, {
+            value: controlElement,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: classNames(className, "bf-select-container", "bf-open-sans", {
+                    "bf-select-disabled": isDisabled,
+                    "bf-select-alert": !isDisabled && state === "alert",
+                    "bf-select-small": small
                 }),
-                /*#__PURE__*/ _jsx(Feedback, {
-                    children: feedback
-                })
-            ]
+                style: style,
+                "data-testid": "bf-select-container",
+                children: [
+                    !hideLabel && /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: selectId,
+                        required: !isDisabled && required && !requiredNoLabel,
+                        optional: optional,
+                        disabled: isDisabled,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(Description, {
+                        children: description
+                    }),
+                    /*#__PURE__*/ _jsx(Selector, {
+                        ref: (r)=>{
+                            setControlElement(r?.controlRef ?? null);
+                            if (typeof ref === "function") {
+                                ref(r);
+                            } else if (ref != null) {
+                                ref.current = r;
+                            }
+                        },
+                        inputId: selectId,
+                        placeholder: "",
+                        components: {
+                            ...selectComponents,
+                            ...components
+                        },
+                        styles: selectStyles,
+                        isDisabled: isDisabled,
+                        classNamePrefix: "bf-select",
+                        required: !isDisabled && (required || requiredNoLabel),
+                        "aria-label": label,
+                        hideSelectedOptions: false,
+                        closeMenuOnSelect: props.isMulti ? false : true,
+                        isLoading: loading ?? props.isLoading,
+                        loadingMessage: ()=>locale.loading + "...",
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx(Feedback, {
+                        children: feedback
+                    })
+                ]
+            })
         });
     });
     return GeneratedSelect;

package/dist/overrides/Menu.internal.d.ts

@@ -0,0 +1,3 @@
+import { components } from "react-select";
+export declare const SelectRefCtx: import("react").Context<HTMLDivElement | null>;
+export default function Menu(props: React.ComponentProps<typeof components.Menu>): import("react/jsx-runtime").JSX.Element;

package/dist/overrides/Menu.internal.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from "@intility/bifrost-react";
+import useResizeObserver from "@intility/bifrost-react/hooks/useResizeObserver";
+import { createContext, useContext, useRef } from "react";
+import { components } from "react-select";
+export const SelectRefCtx = /*#__PURE__*/ createContext(null);
+export default function Menu(props) {
+    const { menuPlacement, menuPosition } = props;
+    const controlElement = useContext(SelectRefCtx);
+    // Keep width of dropdown in sync with select control
+    const divRef = useRef(null);
+    useResizeObserver(controlElement, (entry)=>{
+        if (!divRef.current) return;
+        divRef.current.style.width = entry.borderBoxSize[0].inlineSize + "px";
+    });
+    return /*#__PURE__*/ _jsx(Dropdown, {
+        unstyled: true,
+        noArrow: true,
+        visible: true,
+        reference: controlElement,
+        placement: menuPlacement === "auto" ? "bottom" : menuPlacement,
+        strategy: menuPosition,
+        offset: [
+            0,
+            4
+        ],
+        content: /*#__PURE__*/ _jsx("div", {
+            ref: divRef,
+            style: {
+                width: controlElement?.offsetWidth
+            },
+            children: /*#__PURE__*/ _jsx(components.Menu, {
+                ...props
+            })
+        })
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -44,7 +44,7 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^5.3.0"
+    "@intility/bifrost-react": "^5.7.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",