@intility/bifrost-react-select 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/Select.tsx

@@ -1,29 +1,29 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-'use client'
+"use client";
 
-import { CSSProperties, forwardRef, ReactNode, RefAttributes } from 'react'
+import { CSSProperties, forwardRef, ReactNode, RefAttributes } from "react";
 import ReactSelectDefaultExport, {
   GroupBase,
   Props as ReactSelectProps,
   SelectInstance,
-  components
-} from 'react-select'
+  components,
+} from "react-select";
 import AsyncReactSelect, {
-  AsyncProps as AsyncSelectProps
-} from 'react-select/async'
+  AsyncProps as AsyncSelectProps,
+} from "react-select/async";
 import CreatableReactSelect, {
-  CreatableProps as CreatableSelectProps
-} from 'react-select/creatable'
+  CreatableProps as CreatableSelectProps,
+} from "react-select/creatable";
 import AsyncCreatableReactSelect, {
-  AsyncCreatableProps as AsyncCreatableSelectProps
-} from 'react-select/async-creatable'
-import classNames from 'classnames'
+  AsyncCreatableProps as AsyncCreatableSelectProps,
+} from "react-select/async-creatable";
+import classNames from "classnames";
 import {
   Description,
   Feedback,
   Label,
-  useUniqueId
-} from '@intility/bifrost-react'
+  useUniqueId,
+} from "@intility/bifrost-react";
 
 import {
   DropdownIndicator,
@@ -31,197 +31,197 @@ import {
   CustomInput,
   CustomMenuList,
   CustomOption,
-  LoadingIndicator
-} from './overrides'
+  LoadingIndicator,
+} from "./overrides";
 
 const ReactSelect =
   (
     ReactSelectDefaultExport as unknown as {
-      default: typeof ReactSelectDefaultExport
+      default: typeof ReactSelectDefaultExport;
     }
-  ).default ?? ReactSelectDefaultExport
+  ).default ?? ReactSelectDefaultExport;
 
 export const selectStyles = {
-  container: provided => ({
+  container: (provided) => ({
     ...provided,
-    '.bf-label-description + &, .bf-label + &': {
-      marginTop: 'var(--bfs4)' // add margin-top only when label or description is direct sibling with select
-    }
+    ".bf-label-description + &, .bf-label + &": {
+      marginTop: "var(--bfs4)", // add margin-top only when label or description is direct sibling with select
+    },
   }),
   control: (provided, state) => ({
     ...provided,
-    '&:hover': {
+    "&:hover": {
       borderBottomColor: state.isFocused
-        ? 'var(--bfc-base-c-theme)'
-        : 'var(--bfc-base-c-inverted-2)',
+        ? "var(--bfc-base-c-theme)"
+        : "var(--bfc-base-c-inverted-2)",
       // Change color of dropdown icon when hover on Select
-      '.bf-select__dropdown-indicator': {
-        color: 'var(--bfc-theme-3)'
-      }
+      ".bf-select__dropdown-indicator": {
+        color: "var(--bfc-theme-3)",
+      },
     },
     backgroundColor: state.isDisabled
-      ? 'var(--bfc-base-dimmed)'
-      : 'var(--bfc-base-3)',
+      ? "var(--bfc-base-dimmed)"
+      : "var(--bfc-base-3)",
     border: 0,
-    borderBottomWidth: '2px',
-    borderBottomStyle: 'solid',
+    borderBottomWidth: "2px",
+    borderBottomStyle: "solid",
     borderBottomColor: state.isFocused
-      ? 'var(--bfc-base-c-theme)'
+      ? "var(--bfc-base-c-theme)"
       : state.isDisabled
-      ? 'transparent'
-      : 'var(--bfc-base-c-wcag)',
-    boxShadow: state.isFocused && '0 0 0 1px var(--bfc-theme-3)',
+        ? "transparent"
+        : "var(--bfc-base-c-wcag)",
+    boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
     borderRadius: state.selectProps.menuIsOpen
-      ? ' var(--bfl-border-radius) var(--bfl-border-radius) 0 0'
-      : 'var(--bfl-border-radius)',
-    minHeight: 'var(--bfs40)',
-    cursor: 'text'
+      ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
+      : "var(--bf-radius-xs)",
+    minHeight: "var(--bfs40)",
+    cursor: "text",
   }),
   indicatorSeparator: () => ({
-    display: 'none'
+    display: "none",
   }),
-  indicatorsContainer: provided => ({
+  indicatorsContainer: (provided) => ({
     ...provided,
-    alignItems: 'flex-start',
-    padding: '7.5px 0'
+    alignItems: "flex-start",
+    padding: "7.5px 0",
   }),
-  clearIndicator: provided => ({
+  clearIndicator: (provided) => ({
     ...provided,
-    '&:hover': {
-      color: 'var(--bfc-base-c-1)'
+    "&:hover": {
+      color: "var(--bfc-base-c-1)",
     },
-    color: 'var(--bfc-base-c-2)',
-    cursor: 'pointer',
-    padding: 'var(--bfs4)',
-    margin: '1px var(--bfs4) 0px 0px'
+    color: "var(--bfc-base-c-2)",
+    cursor: "pointer",
+    padding: "var(--bfs4)",
+    margin: "1px var(--bfs4) 0px 0px",
   }),
   dropdownIndicator: (provided, state) => ({
     ...provided,
-    color: state.isDisabled ? 'var(--bfc-base-c-2)' : 'var(--bfc-theme-1)',
-    cursor: 'pointer',
-    padding: 'var(--bfs4)',
-    marginRight: 'var(--bfs8)'
+    color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
+    cursor: "pointer",
+    padding: "var(--bfs4)",
+    marginRight: "var(--bfs8)",
   }),
-  input: provided => ({
+  input: (provided) => ({
     ...provided,
-    color: 'var(--bfc-base-c-1)',
-    fontFamily: 'inherit',
-    fontSize: 'var(--bf-font-size-l)'
+    color: "var(--bfc-base-c-1)",
+    fontFamily: "inherit",
+    fontSize: "var(--bf-font-size-l)",
   }),
-  menuPortal: provided => ({
+  menuPortal: (provided) => ({
     ...provided,
-    zIndex: 9999
+    zIndex: 9999,
   }),
-  menu: provided => ({
+  menu: (provided) => ({
     ...provided,
-    backgroundColor: 'var(--bfc-base-3)',
-    boxShadow: 'none',
-    borderRadius: 'none',
+    backgroundColor: "var(--bfc-base-3)",
+    boxShadow: "none",
+    borderRadius: "none",
     marginTop: 0,
-    zIndex: 3
+    zIndex: 3,
   }),
-  menuList: provided => ({
+  menuList: (provided) => ({
     ...provided,
     padding: 0,
-    boxShadow: '0 0 0 1px var(--bfc-theme-3)',
-    borderRadius: '0 0 var(--bfl-border-radius) var(--bfl-border-radius)'
+    boxShadow: "0 0 0 1px var(--bfc-theme-3)",
+    borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
   }),
-  placeholder: provided => ({
+  placeholder: (provided) => ({
     ...provided,
-    color: 'var(--bfc-base-c-2)',
-    fontSize: 'var(--bf-font-size-l)'
+    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)'
+      ? "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',
+    display: "flex",
+    justifyContent: !state.isMulti ? "space-between" : "normal",
+    alignItems: "baseline",
+    padding: "7px 12px",
     backgroundColor: state.isDisabled
-      ? 'var(--bfc-base-dimmed)'
+      ? "var(--bfc-base-dimmed)"
       : state.isFocused
-      ? 'var(--bfc-base-1)'
-      : 'var(--bfc-base-3)',
-    color: 'var(--bfc-base-c)',
-    '& .bf-select-checkbox': {
-      marginRight: 'var(--bfs8)',
-      color: 'var(--bfc-theme)'
+        ? "var(--bfc-base-1)"
+        : "var(--bfc-base-3)",
+    color: "var(--bfc-base-c)",
+    "& .bf-select-checkbox": {
+      marginRight: "var(--bfs8)",
+      color: "var(--bfc-theme)",
     },
-    '& .bf-select-selected-icon': {
-      color: 'var(--bfc-base-c-theme)',
-      marginLeft: 'var(--bfs4)'
+    "& .bf-select-selected-icon": {
+      color: "var(--bfc-base-c-theme)",
+      marginLeft: "var(--bfs4)",
     },
-    '&:hover': {
+    "&:hover": {
       backgroundColor: state.isDisabled
-        ? 'var(--bfc-base-dimmed)'
-        : 'var(--bfc-base-1)',
-      cursor: state.isDisabled ? 'default' : 'pointer'
+        ? "var(--bfc-base-dimmed)"
+        : "var(--bfc-base-1)",
+      cursor: state.isDisabled ? "default" : "pointer",
     },
-    fontSize: 'var(--bf-font-size-l)',
+    fontSize: "var(--bf-font-size-l)",
     fontWeight: state.isSelected ? 600 : 400,
-    wordBreak: 'break-word',
-    whiteSpace: 'normal'
+    wordBreak: "break-word",
+    whiteSpace: "normal",
   }),
   multiValue: (provided, state) => ({
     ...provided,
     backgroundColor: state.isDisabled
-      ? 'var(--bfc-base-c-inverted-2)'
-      : 'var(--bfc-theme-c)',
-    borderRadius: 'var(--bfl-border-radius)'
+      ? "var(--bfc-base-c-inverted-2)"
+      : "var(--bfc-theme-c)",
+    borderRadius: "var(--bf-radius-xs)",
   }),
   multiValueLabel: (provided, state) => ({
     ...provided,
-    color: state.isDisabled ? 'var(--bfc-base-1)' : 'var(--bfc-base-c-theme)',
-    fontSize: 'var(--bf-font-size-m)'
+    color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
+    fontSize: "var(--bf-font-size-m)",
   }),
   multiValueRemove: (provided, state) => ({
     ...provided,
     color: state.isDisabled
-      ? 'var(--bfc-base-1)'
+      ? "var(--bfc-base-1)"
       : state.isFocused
-      ? 'var(--bfc-theme-c-base-3)'
-      : 'var(--bfc-theme-1)',
-    borderRadius: 'unset',
-    borderTopRightRadius: 'var(--bfl-border-radius)',
-    borderBottomRightRadius: 'var(--bfl-border-radius)',
-    paddingLeft: 'var(--bfs2)',
-    paddingRight: 'var(--bfs2)',
-    marginLeft: 'var(--bfs2)',
-    background: state.isFocused && 'var(--bfc-theme-2)',
-    '&:hover': {
-      color: 'var(--bfc-theme-c-base-3)',
-      cursor: 'pointer',
-      background: 'var(--bfc-theme)'
+        ? "var(--bfc-theme-c-base-3)"
+        : "var(--bfc-theme-1)",
+    borderRadius: "unset",
+    borderTopRightRadius: "var(--bf-radius-xs)",
+    borderBottomRightRadius: "var(--bf-radius-xs)",
+    paddingLeft: "var(--bfs2)",
+    paddingRight: "var(--bfs2)",
+    marginLeft: "var(--bfs2)",
+    background: state.isFocused && "var(--bfc-theme-2)",
+    "&:hover": {
+      color: "var(--bfc-theme-c-base-3)",
+      cursor: "pointer",
+      background: "var(--bfc-theme)",
     },
-    '&:active': {
-      background: 'var(--bfc-theme-2)'
+    "&:active": {
+      background: "var(--bfc-theme-2)",
     },
     svg: {
-      marginTop: '1px'
-    }
+      marginTop: "1px",
+    },
   }),
-  group: provided => ({
+  group: (provided) => ({
     ...provided,
-    padding: 'var(--bfs6) 0',
-    '&:first-of-type': {
-      marginTop: 'var(--bfs4)'
-    }
+    padding: "var(--bfs6) 0",
+    "&:first-of-type": {
+      marginTop: "var(--bfs4)",
+    },
   }),
-  groupHeading: provided => ({
+  groupHeading: (provided) => ({
     ...provided,
-    textTransform: 'capitalize',
-    color: 'var(--bfc-base-c-2)',
-    fontSize: 'var(--bf-font-size-s)',
-    marginBottom: 'var(--bfs2)'
-  })
-}
+    textTransform: "capitalize",
+    color: "var(--bfc-base-c-2)",
+    fontSize: "var(--bf-font-size-s)",
+    marginBottom: "var(--bfs2)",
+  }),
+};
 
 export const selectComponents: Partial<typeof components> = {
   DropdownIndicator,
@@ -229,11 +229,11 @@ export const selectComponents: Partial<typeof components> = {
   MenuList: CustomMenuList,
   ClearIndicator,
   Option: CustomOption,
-  LoadingIndicator
-}
+  LoadingIndicator,
+};
 
-const selectStates = ['default', 'alert'] as const
-export type SelectState = (typeof selectStates)[number]
+const selectStates = ["default", "alert"] as const;
+export type SelectState = (typeof selectStates)[number];
 
 /**
  *  Select HOC
@@ -260,20 +260,20 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
         components,
         ...props
       },
-      ref
+      ref,
     ) => {
-      const selectId = useUniqueId(inputId)
+      const selectId = useUniqueId(inputId);
 
       return (
         <div
           className={classNames(
             className,
-            { 'bf-select-container': true },
-            { 'bf-select-disabled': isDisabled },
-            { 'bf-select-alert': !isDisabled && state === 'alert' }
+            { "bf-select-container": true },
+            { "bf-select-disabled": isDisabled },
+            { "bf-select-alert": !isDisabled && state === "alert" },
           )}
           style={style}
-          data-testid='bf-select-container'
+          data-testid="bf-select-container"
         >
           {!hideLabel && (
             <Label
@@ -290,11 +290,11 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
           <Selector
             ref={ref}
             inputId={selectId}
-            placeholder=''
+            placeholder=""
             components={{ ...selectComponents, ...components }}
             styles={selectStyles}
             isDisabled={isDisabled}
-            classNamePrefix='bf-select'
+            classNamePrefix="bf-select"
             required={!isDisabled && (required || requiredNoLabel)}
             aria-label={label}
             hideSelectedOptions={false}
@@ -304,37 +304,37 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
           />
           <Feedback>{feedback}</Feedback>
         </div>
-      )
-    }
-  )
+      );
+    },
+  );
 
-  return GeneratedSelect
-}
+  return GeneratedSelect;
+};
 
 // this is somewhat useless on it's own
 // has to be combined with one of the Select's props
 export type SelectProps = {
   /** Required label text */
-  label: ReactNode
+  label: ReactNode;
   /** Hide label text, will add label prop as aria-label for screen readers */
-  hideLabel?: boolean
+  hideLabel?: boolean;
   /** Description text to show more information */
-  description?: ReactNode
+  description?: ReactNode;
   /** Available states: `default` and `alert` */
-  state?: SelectState
+  state?: SelectState;
   /** Feedback text below the Select component */
-  feedback?: ReactNode
+  feedback?: ReactNode;
   /** Required prop indicating mandatory field */
-  required?: boolean
+  required?: boolean;
   /** Bool to mark Select component required, but hides the required label */
-  requiredNoLabel?: boolean
+  requiredNoLabel?: boolean;
   /** Marks Select component as optional */
-  optional?: boolean
+  optional?: boolean;
   /** Inline CSS styles */
-  style?: CSSProperties
+  style?: CSSProperties;
   /** Displays a loading spinner */
-  loading?: boolean
-}
+  loading?: boolean;
+};
 
 // Each select get its own type which uses the correctly imported props
 // And calls the HOC
@@ -345,22 +345,22 @@ export type SelectType = {
   <
     OptionType = { label: string; value: string },
     IsMulti extends boolean = false,
-    Group extends GroupBase<OptionType> = GroupBase<OptionType>
+    Group extends GroupBase<OptionType> = GroupBase<OptionType>,
   >(
     props: ReactSelectProps<OptionType, IsMulti, Group> &
       RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps
-  ): React.ReactElement | null
-  displayName?: string
-}
+      SelectProps,
+  ): React.ReactElement | null;
+  displayName?: string;
+};
 
 /**
  *  Select component - dropdown list
  */
 const SelectComponent: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
-  ReactSelect
-)
-SelectComponent.displayName = 'Select'
+  ReactSelect,
+);
+SelectComponent.displayName = "Select";
 
 // Async Select
 export type AsyncType = {
@@ -368,22 +368,22 @@ export type AsyncType = {
     OptionType = { label: string; value: string },
     IsMulti extends boolean = false,
     Group extends GroupBase<OptionType> = {
-      options: OptionType[]
-      label?: string
-    }
+      options: OptionType[];
+      label?: string;
+    },
   >(
     props: AsyncSelectProps<OptionType, IsMulti, Group> &
       RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps
-  ): React.ReactElement | null
-  displayName?: string
-}
+      SelectProps,
+  ): React.ReactElement | null;
+  displayName?: string;
+};
 
 const AsyncSelect = SelectHOC<AsyncType, typeof AsyncReactSelect>(
-  AsyncReactSelect
-)
+  AsyncReactSelect,
+);
 
-AsyncSelect.displayName = 'AsyncSelect'
+AsyncSelect.displayName = "AsyncSelect";
 
 // Creatable Select
 export type CreatableType = {
@@ -391,22 +391,22 @@ export type CreatableType = {
     OptionType = { label: string; value: string },
     IsMulti extends boolean = false,
     Group extends GroupBase<OptionType> = {
-      options: OptionType[]
-      label?: string
-    }
+      options: OptionType[];
+      label?: string;
+    },
   >(
     props: CreatableSelectProps<OptionType, IsMulti, Group> &
       RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps
-  ): React.ReactElement | null
-  displayName?: string
-}
+      SelectProps,
+  ): React.ReactElement | null;
+  displayName?: string;
+};
 
 const CreatableSelect = SelectHOC<CreatableType, typeof CreatableReactSelect>(
-  CreatableReactSelect
-)
+  CreatableReactSelect,
+);
 
-CreatableSelect.displayName = 'CreatableSelect'
+CreatableSelect.displayName = "CreatableSelect";
 
 // Async Creatable Select
 export type AsyncCreatableType = {
@@ -414,23 +414,23 @@ export type AsyncCreatableType = {
     OptionType = { label: string; value: string },
     IsMulti extends boolean = false,
     Group extends GroupBase<OptionType> = {
-      options: OptionType[]
-      label?: string
-    }
+      options: OptionType[];
+      label?: string;
+    },
   >(
     props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> &
       RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps
-  ): React.ReactElement | null
-  displayName?: string
-}
+      SelectProps,
+  ): React.ReactElement | null;
+  displayName?: string;
+};
 
 const AsyncCreatableSelect = SelectHOC<
   AsyncCreatableType,
   typeof AsyncCreatableReactSelect
->(AsyncCreatableReactSelect)
+>(AsyncCreatableReactSelect);
 
-AsyncCreatableSelect.displayName = 'AsyncCreatableSelect'
+AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
 
-export { AsyncSelect, CreatableSelect, AsyncCreatableSelect }
-export default SelectComponent
+export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
+export default SelectComponent;

package/src/assets/bfSpinner.ts

@@ -2,25 +2,25 @@ import {
   IconDefinition,
   IconName,
   IconPathData,
-  IconPrefix
-} from '@fortawesome/fontawesome-svg-core'
+  IconPrefix,
+} from "@fortawesome/fontawesome-svg-core";
 
-const prefix = 'fac' as IconPrefix
-const iconName = 'bf-spinner' as IconName
-const width = 18
-const height = 18
-const aliases = []
-const unicode = ''
+const prefix = "fac" as IconPrefix;
+const iconName = "bf-spinner" as IconName;
+const width = 18;
+const height = 18;
+const aliases = [];
+const unicode = "";
 const svgPathData: IconPathData = [
-  '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'
-]
+  "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: IconDefinition = {
   prefix,
   iconName,
-  icon: [width, height, aliases, unicode, svgPathData]
-}
+  icon: [width, height, aliases, unicode, svgPathData],
+};
 
 export {
   definition as default,
@@ -33,5 +33,5 @@ export {
   aliases as ligatures,
   unicode,
   svgPathData,
-  aliases
-}
+  aliases,
+};

package/src/index.ts

@@ -4,5 +4,5 @@ export {
   CreatableSelect,
   AsyncCreatableSelect,
   selectStyles,
-  selectComponents
-} from './Select'
+  selectComponents,
+} from "./Select";