@intility/bifrost-react-select 5.0.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- c7e5540: Bump `react-select` dependency to `5.10.1`
+
+### Patch Changes
+
+- 30fd9d3: Fix: Avoid wrapping `<Select isMulti>` with a single long-worded option selected. #178
+
 ## 5.0.2
 
 ### Patch Changes
@@ -44,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>`
@@ -73,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)=>({
@@ -55,7 +56,7 @@ export const selectStyles = {
                 borderBottomRightRadius: "var(--bf-radius-s)"
             },
             backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
-            borderWidth: "1px",
+            borderWidth: 1,
             borderStyle: "solid",
             borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
             boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
@@ -81,7 +82,7 @@ export const selectStyles = {
             },
             color: "var(--bfc-base-c-2)",
             cursor: "pointer",
-            padding: "var(--bfs4)",
+            padding: 4,
             margin: "1px 4px 0px 0px"
         }),
     dropdownIndicator: (provided, state)=>({
@@ -91,28 +92,24 @@ export const selectStyles = {
             },
             color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
             cursor: "pointer",
-            padding: "var(--bfs4)",
+            padding: 4,
             marginRight: 8
         }),
     input: (provided)=>({
             ...provided,
-            ".bf-select-small &": {
-                marginBlock: 0
-            },
             color: "var(--bfc-base-c)",
             fontFamily: "inherit",
-            fontSize: "var(--bf-font-size-l)"
-        }),
-    menuPortal: (provided)=>({
-            ...provided,
-            zIndex: 9999
+            fontSize: "var(--bf-font-size-l)",
+            margin: 0,
+            padding: 0
         }),
     menu: (provided)=>({
             ...provided,
+            position: "static",
+            margin: 0,
             backgroundColor: "transparent",
             boxShadow: "none",
-            borderRadius: "none",
-            zIndex: 3
+            borderRadius: "none"
         }),
     menuList: (provided)=>({
             ...provided,
@@ -148,7 +145,7 @@ export const selectStyles = {
             color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
             "& .bf-select-selected-icon": {
                 color: "var(--bfc-base-c)",
-                marginLeft: "var(--bfs4)"
+                marginLeft: 4
             },
             "&:hover": {
                 backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base)",
@@ -164,7 +161,8 @@ export const selectStyles = {
             backgroundColor: "var(--bfc-base)",
             borderRadius: "var(--bf-radius-xs)",
             border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
-            opacity: state.isDisabled ? 0.5 : 1
+            opacity: state.isDisabled ? 0.5 : 1,
+            maxWidth: "calc(100% - 10px)"
         }),
     multiValueLabel: (provided)=>({
             ...provided,
@@ -177,7 +175,7 @@ export const selectStyles = {
             color: "var(--bfc-base-c-2)",
             paddingLeft: 5,
             paddingRight: 5,
-            background: state.isFocused && "var(--bfc-theme-2)",
+            background: state.isFocused ? "var(--bfc-theme-2)" : undefined,
             "&:hover": {
                 color: "var(--bfc-base-c)",
                 cursor: "pointer",
@@ -187,14 +185,14 @@ export const selectStyles = {
                 background: "var(--bfc-base-3)"
             },
             svg: {
-                marginTop: "1px"
+                marginTop: 1
             }
         }),
     group: (provided)=>({
             ...provided,
-            padding: "var(--bfs6) 0",
+            padding: "6px 0",
             "&:first-of-type": {
-                marginTop: "var(--bfs4)"
+                marginTop: 4
             }
         }),
     groupHeading: (provided)=>({
@@ -202,7 +200,7 @@ export const selectStyles = {
             textTransform: "capitalize",
             color: "var(--bfc-base-c-2)",
             fontSize: "var(--bf-font-size-s)",
-            marginBottom: "var(--bfs2)"
+            marginBottom: 2
         })
 };
 export const selectComponents = {
@@ -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.0.2",
+  "version": "5.2.0",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -44,14 +44,14 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^5.2.1"
+    "@intility/bifrost-react": "^5.7.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.2.6",
-    "react-select": "^5.7.7"
+    "react-select": "^5.10.1"
   },
   "files": [
     "CHANGELOG.md",