@intility/bifrost-react-select 0.0.0-bifrost5-20241202131439

package/CHANGELOG.md

@@ -0,0 +1,114 @@
+# @intility/bifrost-react-select
+
+## 0.0.0-bifrost5-20241202131439
+
+### Patch Changes
+
+- Updated dependencies [582d87e]
+- Updated dependencies [65c4ebd]
+- Updated dependencies [11e52eb]
+- Updated dependencies [11e52eb]
+- Updated dependencies [285f893]
+  - @intility/bifrost-react@0.0.0-bifrost5-20241202131439
+
+## 4.3.1
+
+### Patch Changes
+
+- 9ac0d65: allow react 17 as a peer dep
+
+## 4.3.0
+
+### Minor Changes
+
+- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
+
+  - `<Input>`
+  - `<DatePicker>`
+  - `<FieldGroup.Item>`
+  - `<Select>`
+
+### Patch Changes
+
+- f70f414: Use `theme` color for selected checkbox with multi-select
+- c2dfb58: Added translation text for select loading state
+
+## 4.2.4 - 2024-08-07
+
+### Patch Changes
+
+- 2308f1a: Update multi-select checkboxes to more closely match bifrost checkbox styling.
+
+## 4.2.3 - 2024-08-06
+
+### Patch Changes
+
+- 633e7b2: chore: avoid internal barrel file imports
+- 899927b: Fix: form field height should follow browser font-size setting. Use `rem` over `px` for height-related units for form fields (input, button, select, datepicker).
+
+## 4.2.2 - 2024-07-30
+
+### Patch Changes
+
+- 3434ad1: Update Select styling to match new bifrost Button
+
+  - Increased `border-radius` (from xs to s)
+  - Slight `border-color` tweaks
+
+- 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
+
+## 4.2.1 - 2024-06-21
+
+### Patch Changes
+
+- ba934052: Change option hover background to bfc-base-1
+
+## 4.2.0 - 2024-06-13
+
+### Minor Changes
+
+- 833a15e4: Fix: update Select styling to allow `menuPlacement="top"` and more closely match DatePicker #754
+
+## 4.1.0 - 2024-05-31
+
+### Minor Changes
+
+- ab69807d: Styling changes for Select input #740
+
+## 4.0.3 - 2024-05-16
+
+### Patch Changes
+
+- 3db0503a: Fix: `selectComponents` properties should now correcly be non-null
+
+## 4.0.2 - 2024-04-10
+
+### Patch Changes
+
+- 26deecde: Fix de-dupe issues by un-pinning `@intility/bifrost-react` version number and and moved to `devDependencies` and `peerDependencies`.
+- Updated dependencies [79b9ab5d]
+  - @intility/bifrost-react@4.0.2
+
+## 4.0.1 - 2024-04-05
+
+### Patch Changes
+
+- 611f82ca: Removed unnecessary files from npm package output.
+- 63f4c54d: fix: Select menu background color is no longer transparent for grouped options.
+- Updated dependencies [611f82ca]
+  - @intility/bifrost-react@4.0.1
+
+## 4.0.0 - 2024-04-03 (first release, previously part of @intility/bifrost-react)
+
+### Minor Changes
+
+- 62b02461: Include JSDoc comments in typescript definition output
+- 6b355639: New styling for inputs, now always outlined.
+
+### Patch Changes
+
+- 217c8741: Named export for Select and DatePicker
+- a903f282: Fix: export typescript types used in react components
+- e410a910: New base color values for light mode #711
+- 165904af: Use deep imports from @intility/bifrost-react
+- fdc6caee: Fix: select dropdown background should no longer bleed outside border radius when opened

package/dist/Select.d.ts

@@ -0,0 +1,100 @@
+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";
+import { AsyncCreatableProps as AsyncCreatableSelectProps } from "react-select/async-creatable";
+export declare const selectStyles: {
+    container: (provided: any) => any;
+    control: (provided: any, state: any) => any;
+    indicatorSeparator: () => {
+        display: string;
+    };
+    indicatorsContainer: (provided: any) => any;
+    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;
+    singleValue: (provided: any, state: any) => any;
+    option: (provided: any, state: any) => any;
+    multiValue: (provided: any, state: any) => any;
+    multiValueLabel: (provided: any) => any;
+    multiValueRemove: (provided: any, state: any) => any;
+    group: (provided: any) => any;
+    groupHeading: (provided: any) => any;
+};
+export declare const selectComponents: typeof originalComponents;
+declare const selectStates: readonly ["default", "alert"];
+export type SelectState = (typeof selectStates)[number];
+export type SelectProps = {
+    /** Required label text */
+    label: ReactNode;
+    /** Hide label text, will add label prop as aria-label for screen readers */
+    hideLabel?: boolean;
+    /** Description text to show more information */
+    description?: ReactNode;
+    /** Available states: `default` and `alert` */
+    state?: SelectState;
+    /** Feedback text below the Select component */
+    feedback?: ReactNode;
+    /** Required prop indicating mandatory field */
+    required?: boolean;
+    /** Bool to mark Select component required, but hides the required label */
+    requiredNoLabel?: boolean;
+    /** Marks Select component as optional */
+    optional?: boolean;
+    /** Inline CSS styles */
+    style?: CSSProperties;
+    /** Displays a loading spinner */
+    loading?: boolean;
+    /** Decrease height of the input from `40px` to `32px` */
+    small?: boolean;
+};
+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;
+    displayName?: string;
+};
+/**
+ *  Select component - dropdown list
+ */
+export declare const Select: SelectType;
+export type AsyncType = {
+    <OptionType = {
+        label: string;
+        value: string;
+    }, 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;
+    displayName?: string;
+};
+declare const AsyncSelect: AsyncType;
+export type CreatableType = {
+    <OptionType = {
+        label: string;
+        value: string;
+    }, 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;
+    displayName?: string;
+};
+declare const CreatableSelect: CreatableType;
+export type AsyncCreatableType = {
+    <OptionType = {
+        label: string;
+        value: string;
+    }, 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;
+    displayName?: string;
+};
+declare const AsyncCreatableSelect: AsyncCreatableType;
+export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
+export default Select;

package/dist/Select.js

@@ -0,0 +1,253 @@
+/* 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 ReactSelectDefaultExport, { components as originalComponents } from "react-select";
+import AsyncReactSelect from "react-select/async";
+import CreatableReactSelect from "react-select/creatable";
+import AsyncCreatableReactSelect from "react-select/async-creatable";
+import classNames from "classnames";
+import Description from "@intility/bifrost-react/Description";
+import Feedback from "@intility/bifrost-react/Feedback";
+import Label from "@intility/bifrost-react/Label";
+import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
+import useLocale from "@intility/bifrost-react/hooks/useLocale";
+import DropdownIndicator from "./overrides/DropdownIndicator.internal.js";
+import CustomInput from "./overrides/CustomInput.internal.js";
+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";
+const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
+export const selectStyles = {
+    container: (provided)=>({
+            ...provided,
+            ".bf-label-description + &, .bf-label + &": {
+                marginTop: "var(--bfs4)"
+            }
+        }),
+    control: (provided, state)=>({
+            ...provided,
+            "&:hover": {
+                borderColor: "var(--bfc-base-c-inverted)",
+                // Change color of dropdown icon when hover on Select
+                ".bf-select__dropdown-indicator": {
+                    color: "var(--bfc-base-c)"
+                }
+            },
+            backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
+            borderWidth: "1px",
+            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",
+            borderRadius: "var(--bf-radius-s)",
+            minHeight: undefined,
+            cursor: "text"
+        }),
+    indicatorSeparator: ()=>({
+            display: "none"
+        }),
+    indicatorsContainer: (provided)=>({
+            ...provided,
+            alignItems: "flex-start"
+        }),
+    clearIndicator: (provided)=>({
+            ...provided,
+            "&:hover": {
+                color: "var(--bfc-base-c-1)"
+            },
+            color: "var(--bfc-base-c-2)",
+            cursor: "pointer",
+            padding: "var(--bfs4)",
+            margin: "1px 4px 0px 0px"
+        }),
+    dropdownIndicator: (provided, state)=>({
+            ...provided,
+            color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
+            cursor: "pointer",
+            padding: "var(--bfs4)",
+            marginRight: 8
+        }),
+    input: (provided)=>({
+            ...provided,
+            color: "var(--bfc-base-c-1)",
+            fontFamily: "inherit",
+            fontSize: "var(--bf-font-size-l)"
+        }),
+    menuPortal: (provided)=>({
+            ...provided,
+            zIndex: 9999
+        }),
+    menu: (provided)=>({
+            ...provided,
+            backgroundColor: "transparent",
+            boxShadow: "none",
+            borderRadius: "none",
+            zIndex: 3
+        }),
+    menuList: (provided)=>({
+            ...provided,
+            backgroundColor: "var(--bfc-base-3)",
+            padding: 0,
+            border: "1px solid var(--bfc-base-c-wcag)",
+            borderRadius: "var(--bf-radius-s)"
+        }),
+    placeholder: (provided)=>({
+            ...provided,
+            color: "var(--bfc-base-c-2)",
+            fontSize: "var(--bf-font-size-l)"
+        }),
+    singleValue: (provided, state)=>({
+            ...provided,
+            color: state.selectProps.menuIsOpen ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
+            fontSize: "var(--bf-font-size-l)"
+        }),
+    option: (provided, state)=>({
+            ...provided,
+            display: "flex",
+            justifyContent: !state.isMulti ? "space-between" : "normal",
+            alignItems: "baseline",
+            padding: "7px 12px",
+            backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : state.isFocused ? "var(--bfc-base-1)" : "var(--bfc-base-3)",
+            color: "var(--bfc-base-c)",
+            "& .bf-select-selected-icon": {
+                color: "var(--bfc-base-c)",
+                marginLeft: "var(--bfs4)"
+            },
+            "&:hover": {
+                backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
+                cursor: state.isDisabled ? "default" : "pointer"
+            },
+            fontSize: "var(--bf-font-size-l)",
+            fontWeight: state.isSelected ? 600 : 400,
+            wordBreak: "break-word",
+            whiteSpace: "normal"
+        }),
+    multiValue: (provided, state)=>({
+            ...provided,
+            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
+        }),
+    multiValueLabel: (provided)=>({
+            ...provided,
+            fontSize: "var(--bf-font-size-m)",
+            padding: "1.5px 4px 1.5px 8px",
+            color: "inherit"
+        }),
+    multiValueRemove: (provided, state)=>({
+            ...provided,
+            color: "var(--bfc-base-c-2)",
+            paddingLeft: 5,
+            paddingRight: 5,
+            background: state.isFocused && "var(--bfc-theme-2)",
+            "&:hover": {
+                color: "var(--bfc-base-c-1)",
+                cursor: "pointer",
+                background: "var(--bfc-base-2)"
+            },
+            "&:active": {
+                background: "var(--bfc-base-3)"
+            },
+            svg: {
+                marginTop: "1px"
+            }
+        }),
+    group: (provided)=>({
+            ...provided,
+            padding: "var(--bfs6) 0",
+            "&:first-of-type": {
+                marginTop: "var(--bfs4)"
+            }
+        }),
+    groupHeading: (provided)=>({
+            ...provided,
+            textTransform: "capitalize",
+            color: "var(--bfc-base-c-2)",
+            fontSize: "var(--bf-font-size-s)",
+            marginBottom: "var(--bfs2)"
+        })
+};
+export const selectComponents = {
+    ...originalComponents,
+    DropdownIndicator,
+    Input: CustomInput,
+    MenuList: CustomMenuList,
+    ClearIndicator,
+    Option: CustomOption,
+    LoadingIndicator
+};
+const selectStates = [
+    "default",
+    "alert"
+];
+/**
+ *  Select HOC
+ */ const SelectHOC = (Selector)=>{
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
+    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": true
+            }, {
+                "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
+                }),
+                /*#__PURE__*/ _jsx(Feedback, {
+                    children: feedback
+                })
+            ]
+        });
+    });
+    return GeneratedSelect;
+};
+/**
+ *  Select component - dropdown list
+ */ export const Select = SelectHOC(ReactSelect);
+Select.displayName = "Select";
+const AsyncSelect = SelectHOC(AsyncReactSelect);
+AsyncSelect.displayName = "AsyncSelect";
+const CreatableSelect = SelectHOC(CreatableReactSelect);
+CreatableSelect.displayName = "CreatableSelect";
+const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
+AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
+export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
+export default Select;

package/dist/assets/bfSpinner.d.ts

@@ -0,0 +1,10 @@
+import { IconDefinition, IconName, IconPathData, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+declare const prefix: IconPrefix;
+declare const iconName: IconName;
+declare const width = 18;
+declare const height = 18;
+declare const aliases: never[];
+declare const unicode = "";
+declare const svgPathData: IconPathData;
+declare const definition: IconDefinition;
+export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases, };

package/dist/assets/bfSpinner.js

@@ -0,0 +1,22 @@
+const prefix = "fac";
+const iconName = "bf-spinner";
+const width = 18;
+const height = 18;
+const aliases = [];
+const unicode = "";
+const svgPathData = [
+    "M9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2ZM0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z",
+    "M8 1C8 0.447715 8.44772 0 9 0C13.9706 0 18 4.02944 18 9C18 9.55229 17.5523 10 17 10C16.4477 10 16 9.55229 16 9C16 5.13401 12.866 2 9 2C8.44772 2 8 1.55228 8 1Z"
+];
+const definition = {
+    prefix,
+    iconName,
+    icon: [
+        width,
+        height,
+        aliases,
+        unicode,
+        svgPathData
+    ]
+};
+export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases };

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

@@ -0,0 +1,2 @@
+declare const ClearIndicator: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ClearIndicator;

package/dist/overrides/ClearIndicator.internal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "@intility/bifrost-react";
+import { components } from "react-select";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+const ClearIndicator = (props)=>{
+    return /*#__PURE__*/ _jsx(components.ClearIndicator, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            icon: faXmark
+        })
+    });
+};
+export default ClearIndicator;

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

@@ -0,0 +1,2 @@
+declare const CustomInput: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CustomInput;

package/dist/overrides/CustomInput.internal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { components } from "react-select";
+const CustomInput = (props)=>{
+    const { required, value } = props.selectProps;
+    const updatedProps = {
+        ...props,
+        autoComplete: "off"
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(components.Input, {
+                ...updatedProps
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                style: {
+                    opacity: 0,
+                    height: 0,
+                    position: "absolute",
+                    pointerEvents: "none"
+                },
+                onChange: (e)=>e.preventDefault(),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: value?.label ?? "",
+                tabIndex: -1,
+                autoComplete: "off",
+                required: required,
+                "data-testid": "bf-select-input"
+            })
+        ]
+    });
+};
+export default CustomInput;

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

@@ -0,0 +1,2 @@
+declare const CustomMenuList: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CustomMenuList;

package/dist/overrides/CustomMenuList.internal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+const CustomMenuList = (props)=>{
+    return /*#__PURE__*/ _jsx(components.MenuList, {
+        "data-testid": "bf-select-menulist",
+        className: "bf-scrollbar-small",
+        ...props,
+        children: props.children
+    });
+};
+export default CustomMenuList;

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

@@ -0,0 +1,2 @@
+declare const CustomOption: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CustomOption;

package/dist/overrides/CustomOption.internal.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+import { faSquare } from "@fortawesome/free-regular-svg-icons/faSquare";
+import { faCheckSquare } from "@fortawesome/free-solid-svg-icons/faCheckSquare";
+import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
+import { Icon } from "@intility/bifrost-react";
+const CustomOption = (props)=>{
+    return /*#__PURE__*/ _jsxs(components.Option, {
+        ...props,
+        children: [
+            props.isMulti && /*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    icon: props.isSelected ? faCheckSquare : faSquare,
+                    fixedWidth: true,
+                    marginRight: true,
+                    color: props.isSelected ? "var(--bfc-theme)" : "var(--bfc-base-c-2)"
+                })
+            }),
+            props.children,
+            !props.isMulti && props.isSelected && /*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    icon: faCheck,
+                    fixedWidth: true,
+                    className: "bf-select-selected-icon"
+                })
+            })
+        ]
+    });
+};
+export default CustomOption;

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

@@ -0,0 +1,2 @@
+declare const DropdownIndicator: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default DropdownIndicator;

package/dist/overrides/DropdownIndicator.internal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
+import { Icon } from "@intility/bifrost-react";
+const DropdownIndicator = (props)=>{
+    return /*#__PURE__*/ _jsx(components.DropdownIndicator, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            icon: faCaretDown
+        })
+    });
+};
+export default DropdownIndicator;

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

@@ -0,0 +1 @@
+export default function LoadingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/overrides/LoadingIndicator.internal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "@intility/bifrost-react";
+import bfSpinner from "../assets/bfSpinner.js";
+export default function LoadingIndicator() {
+    return /*#__PURE__*/ _jsx(Icon, {
+        icon: bfSpinner,
+        spin: true,
+        fixedWidth: true,
+        className: "bf-input-loading-icon"
+    });
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@intility/bifrost-react-select",
+  "version": "0.0.0-bifrost5-20241202131439",
+  "description": "React select component for Intility's design system, Bifrost.",
+  "type": "module",
+  "main": "dist/Select.js",
+  "scripts": {
+    "build": "run-p build:*",
+    "build:module": "swc ./src -d dist",
+    "build:types": "tsc",
+    "start": "run-p watch:*",
+    "watch:module": "npm run build:module -- --watch",
+    "watch:types": "npm run build:types -- --watch --preserveWatchOutput",
+    "clean": "rimraf dist",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./dist/Select.js"
+  },
+  "homepage": "https://bifrost.intility.com",
+  "keywords": [
+    "react",
+    "typescript",
+    "intility",
+    "design system",
+    "bifrost",
+    "select"
+  ],
+  "author": "Intility AS",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react-dom": ">=17.0.0",
+    "react": ">=17.0.0",
+    "@intility/bifrost-react": "0.0.0-bifrost5-20241202131439"
+  },
+  "devDependencies": {
+    "@intility/bifrost-react": "0.0.0-bifrost5-20241202131439"
+  },
+  "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"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist/**/*",
+    "!dist/**/*.test.*"
+  ]
+}