@intility/bifrost-react-select 4.0.0-alpha.3

package/src/Select.tsx

@@ -0,0 +1,436 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+'use client'
+
+import { CSSProperties, forwardRef, ReactNode, RefAttributes } from 'react'
+import ReactSelectDefaultExport, {
+  GroupBase,
+  Props as ReactSelectProps,
+  SelectInstance,
+  components
+} from 'react-select'
+import AsyncReactSelect, {
+  AsyncProps as AsyncSelectProps
+} from 'react-select/async'
+import CreatableReactSelect, {
+  CreatableProps as CreatableSelectProps
+} from 'react-select/creatable'
+import AsyncCreatableReactSelect, {
+  AsyncCreatableProps as AsyncCreatableSelectProps
+} from 'react-select/async-creatable'
+import classNames from 'classnames'
+import {
+  Description,
+  Feedback,
+  Label,
+  useUniqueId
+} from '@intility/bifrost-react'
+
+import {
+  DropdownIndicator,
+  ClearIndicator,
+  CustomInput,
+  CustomMenuList,
+  CustomOption,
+  LoadingIndicator
+} from './overrides'
+
+const ReactSelect =
+  (
+    ReactSelectDefaultExport as unknown as {
+      default: typeof ReactSelectDefaultExport
+    }
+  ).default ?? ReactSelectDefaultExport
+
+export const selectStyles = {
+  container: provided => ({
+    ...provided,
+    '.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': {
+      borderBottomColor: state.isFocused
+        ? '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)'
+      }
+    },
+    backgroundColor: state.isDisabled
+      ? 'var(--bfc-base-dimmed)'
+      : 'var(--bfc-base-3)',
+    border: 0,
+    borderBottomWidth: '2px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: state.isFocused
+      ? 'var(--bfc-base-c-theme)'
+      : state.isDisabled
+      ? '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'
+  }),
+  indicatorSeparator: () => ({
+    display: 'none'
+  }),
+  indicatorsContainer: provided => ({
+    ...provided,
+    alignItems: 'flex-start',
+    padding: '7.5px 0'
+  }),
+  clearIndicator: provided => ({
+    ...provided,
+    '&:hover': {
+      color: 'var(--bfc-base-c-1)'
+    },
+    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)'
+  }),
+  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: 'var(--bfc-base-3)',
+    boxShadow: 'none',
+    borderRadius: 'none',
+    marginTop: 0,
+    zIndex: 3
+  }),
+  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)'
+  }),
+  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-checkbox': {
+      marginRight: 'var(--bfs8)',
+      color: 'var(--bfc-theme)'
+    },
+    '& .bf-select-selected-icon': {
+      color: 'var(--bfc-base-c-theme)',
+      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: state.isDisabled
+      ? 'var(--bfc-base-c-inverted-2)'
+      : 'var(--bfc-theme-c)',
+    borderRadius: 'var(--bfl-border-radius)'
+  }),
+  multiValueLabel: (provided, state) => ({
+    ...provided,
+    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)'
+      : 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)'
+    },
+    '&:active': {
+      background: 'var(--bfc-theme-2)'
+    },
+    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: Partial<typeof components> = {
+  DropdownIndicator,
+  Input: CustomInput,
+  MenuList: CustomMenuList,
+  ClearIndicator,
+  Option: CustomOption,
+  LoadingIndicator
+}
+
+const selectStates = ['default', 'alert'] as const
+export type SelectState = (typeof selectStates)[number]
+
+/**
+ *  Select HOC
+ */
+const SelectHOC = <Type, Selector>(Selector: Selector) => {
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const GeneratedSelect: Type = forwardRef<any, any>(
+    (
+      {
+        label,
+        hideLabel = false,
+        isDisabled = false,
+        state,
+        feedback,
+        required = false,
+        description,
+        requiredNoLabel = false,
+        optional = false,
+        inputId,
+        className,
+        style,
+        loading = false,
+        components,
+        ...props
+      },
+      ref
+    ) => {
+      const selectId = useUniqueId(inputId)
+
+      return (
+        <div
+          className={classNames(
+            className,
+            { 'bf-select-container': true },
+            { 'bf-select-disabled': isDisabled },
+            { 'bf-select-alert': !isDisabled && state === 'alert' }
+          )}
+          style={style}
+          data-testid='bf-select-container'
+        >
+          {!hideLabel && (
+            <Label
+              htmlFor={selectId}
+              required={!isDisabled && required && !requiredNoLabel}
+              optional={optional}
+              disabled={isDisabled}
+            >
+              {label}
+            </Label>
+          )}
+          <Description>{description}</Description>
+          {/* @ts-ignore */}
+          <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}
+            {...props}
+          />
+          <Feedback>{feedback}</Feedback>
+        </div>
+      )
+    }
+  )
+
+  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
+  /** 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
+}
+
+// Each select get its own type which uses the correctly imported props
+// And calls the HOC
+// The resulting component should be correctly typed
+
+// Plain Select
+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
+ */
+const SelectComponent: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
+  ReactSelect
+)
+SelectComponent.displayName = 'Select'
+
+// Async Select
+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
+}
+
+const AsyncSelect = SelectHOC<AsyncType, typeof AsyncReactSelect>(
+  AsyncReactSelect
+)
+
+AsyncSelect.displayName = 'AsyncSelect'
+
+// Creatable Select
+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
+}
+
+const CreatableSelect = SelectHOC<CreatableType, typeof CreatableReactSelect>(
+  CreatableReactSelect
+)
+
+CreatableSelect.displayName = 'CreatableSelect'
+
+// Async Creatable Select
+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
+}
+
+const AsyncCreatableSelect = SelectHOC<
+  AsyncCreatableType,
+  typeof AsyncCreatableReactSelect
+>(AsyncCreatableReactSelect)
+
+AsyncCreatableSelect.displayName = 'AsyncCreatableSelect'
+
+export { AsyncSelect, CreatableSelect, AsyncCreatableSelect }
+export default SelectComponent

package/src/assets/bfSpinner.ts

@@ -0,0 +1,37 @@
+import {
+  IconDefinition,
+  IconName,
+  IconPathData,
+  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 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'
+]
+
+const definition: IconDefinition = {
+  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/src/index.ts

@@ -0,0 +1,8 @@
+export {
+  default,
+  AsyncSelect,
+  CreatableSelect,
+  AsyncCreatableSelect,
+  selectStyles,
+  selectComponents
+} from './Select'

package/src/overrides/ClearIndicator.internal.tsx

@@ -0,0 +1,13 @@
+import { Icon } from '@intility/bifrost-react'
+import { components } from 'react-select'
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark'
+
+const ClearIndicator = props => {
+  return (
+    <components.ClearIndicator {...props}>
+      <Icon icon={faXmark} />
+    </components.ClearIndicator>
+  )
+}
+
+export default ClearIndicator

package/src/overrides/CustomInput.internal.tsx

@@ -0,0 +1,32 @@
+import { components, Props } from 'react-select'
+
+const CustomInput = props => {
+  const { required, value } = props.selectProps as Props & { required: boolean }
+  const updatedProps = {
+    ...props,
+    autoComplete: 'noAutocomplete'
+  }
+
+  return (
+    <>
+      <components.Input {...updatedProps} />
+      <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 as any)?.label ?? ''} // casting to any, because we don't know the type of an option
+        tabIndex={-1}
+        autoComplete='noAutocomplete'
+        required={required}
+        data-testid='bf-select-input'
+      />
+    </>
+  )
+}
+
+export default CustomInput

package/src/overrides/CustomMenuList.internal.tsx

@@ -0,0 +1,15 @@
+import { components } from 'react-select'
+
+const CustomMenuList = props => {
+  return (
+    <components.MenuList
+      data-testid='bf-select-menulist'
+      className='bf-scrollbar-small'
+      {...props}
+    >
+      {props.children}
+    </components.MenuList>
+  )
+}
+
+export default CustomMenuList

package/src/overrides/CustomOption.internal.tsx

@@ -0,0 +1,29 @@
+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 (
+    <components.Option {...props}>
+      {props.isMulti && (
+        <div>
+          <Icon
+            icon={props.isSelected ? faCheckSquare : faSquare}
+            fixedWidth
+            className='bf-select-checkbox'
+          />
+        </div>
+      )}
+      {props.children}
+      {!props.isMulti && props.isSelected && (
+        <div>
+          <Icon icon={faCheck} fixedWidth className='bf-select-selected-icon' />
+        </div>
+      )}
+    </components.Option>
+  )
+}
+
+export default CustomOption

package/src/overrides/DropdownIndicator.internal.tsx

@@ -0,0 +1,13 @@
+import { components } from 'react-select'
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
+import { Icon } from '@intility/bifrost-react'
+
+const DropdownIndicator = props => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <Icon icon={faCaretDown} />
+    </components.DropdownIndicator>
+  )
+}
+
+export default DropdownIndicator

package/src/overrides/LoadingIndicator.internal.tsx

@@ -0,0 +1,9 @@
+import { Icon } from '@intility/bifrost-react'
+
+import bfSpinner from '../assets/bfSpinner'
+
+export default function LoadingIndicator() {
+  return (
+    <Icon icon={bfSpinner} spin fixedWidth className='bf-input-loading-icon' />
+  )
+}

package/src/overrides/index.ts

@@ -0,0 +1,6 @@
+export { default as ClearIndicator } from './ClearIndicator.internal'
+export { default as CustomInput } from './CustomInput.internal'
+export { default as LoadingIndicator } from './LoadingIndicator.internal'
+export { default as CustomMenuList } from './CustomMenuList.internal'
+export { default as DropdownIndicator } from './DropdownIndicator.internal'
+export { default as CustomOption } from './CustomOption.internal'

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": false,
+    "isolatedModules": false,
+    "noEmit": false,
+    "allowJs": false,
+    "sourceMap": false,
+    "moduleResolution": "Bundler",
+    "emitDeclarationOnly": true,
+    "outDir": "dist"
+  },
+  "include": ["./src/"],
+  "exclude": []
+}

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: '../test-setup.ts',
+    css: true
+  }
+})