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

package/src/overrides/ClearIndicator.internal.tsx

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

package/src/overrides/CustomInput.internal.tsx

@@ -1,11 +1,13 @@
-import { components, Props } from 'react-select'
+import { components, Props } from "react-select";
 
-const CustomInput = props => {
-  const { required, value } = props.selectProps as Props & { required: boolean }
+const CustomInput = (props) => {
+  const { required, value } = props.selectProps as Props & {
+    required: boolean;
+  };
   const updatedProps = {
     ...props,
-    autoComplete: 'noAutocomplete'
-  }
+    autoComplete: "noAutocomplete",
+  };
 
   return (
     <>
@@ -14,19 +16,19 @@ const CustomInput = props => {
         style={{
           opacity: 0,
           height: 0,
-          position: 'absolute',
-          pointerEvents: 'none'
+          position: "absolute",
+          pointerEvents: "none",
         }}
-        onChange={e => e.preventDefault()}
+        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
+        value={(value as any)?.label ?? ""} // casting to any, because we don't know the type of an option
         tabIndex={-1}
-        autoComplete='noAutocomplete'
+        autoComplete="noAutocomplete"
         required={required}
-        data-testid='bf-select-input'
+        data-testid="bf-select-input"
       />
     </>
-  )
-}
+  );
+};
 
-export default CustomInput
+export default CustomInput;

package/src/overrides/CustomMenuList.internal.tsx

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

package/src/overrides/CustomOption.internal.tsx

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

package/src/overrides/DropdownIndicator.internal.tsx

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

package/src/overrides/LoadingIndicator.internal.tsx

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

package/src/overrides/index.ts

@@ -1,6 +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'
+export { default as ClearIndicator } from "./ClearIndicator.internal.js";
+export { default as CustomInput } from "./CustomInput.internal.js";
+export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
+export { default as CustomMenuList } from "./CustomMenuList.internal.js";
+export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
+export { default as CustomOption } from "./CustomOption.internal.js";

package/tsconfig.json

@@ -2,12 +2,12 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "declaration": true,
+    "rootDir": "src",
     "declarationMap": false,
     "isolatedModules": false,
     "noEmit": false,
     "allowJs": false,
     "sourceMap": false,
-    "moduleResolution": "Bundler",
     "emitDeclarationOnly": true,
     "outDir": "dist"
   },

package/vitest.config.ts

@@ -1,12 +1,12 @@
-import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vitest/config'
+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
-  }
-})
+    environment: "jsdom",
+    setupFiles: "../test-setup.ts",
+    css: true,
+  },
+});

package/dist/index.d.ts

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

package/dist/index.js

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

package/src/Select.md

@@ -1,410 +0,0 @@
-<Message header='More props available'>
-This component is a wrapper for react-select. Visit [React Select](https://react-select.com/home) for full documentation.
-
-To see all available props, click [here](https://react-select.com/props).
-</Message>
-
-### Basic Select
-
-```jsx
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-;<Select
-  label='Country'
-  placeholder='- Select country -'
-  options={options}
-  description='Select your country of residence'
-/>
-```
-
-You can get and set the currently selected item using `value` and `onChange`.
-
-```jsx
-import { useState } from 'react'
-import { Select, Button } from '@intility/bifrost-react'
-
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-const [selected, setSelected] = useState(options[2])
-
-;<div>
-  <Select
-    label='Country'
-    placeholder='- Select country -'
-    description='Select your country of residence'
-    options={options}
-    value={selected}
-    onChange={item => setSelected(item)}
-  />
-  <p>Selected item: {selected.label}</p>
-  <Button onClick={() => setSelected(options[0])}>Select first option</Button>
-</div>
-```
-
-### Clearable
-
-Use `isClearable` prop for possibility to remove selected option with button.
-
-```jsx
-import { useState } from 'react'
-import { Select } from '@intility/bifrost-react'
-
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-const [selected, setSelected] = useState()
-
-;<Select
-  label='Country'
-  placeholder='- Select country -'
-  options={options}
-  onChange={item => setSelected(item)}
-  isClearable
-/>
-```
-
-### Validation
-
-`Select` can indicate an alert state based on input. Set `state` prop to `alert` to style it accordingly. Meanwhile, use `feedback` to provide additional information.
-
-Use the `required` prop to render `Select` as required. This will add `(required)` text after the label. You can hide this label with `requiredNoLabel`.
-
-<Message header='Read more'>
-  See usage demo at [Forms example](#/Welcome%20to%20Bifrost/Examples/Forms)
-</Message>
-
-```jsx
-import { useState } from 'react'
-import { Select } from '@intility/bifrost-react'
-
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-const [selected, setSelected] = useState()
-
-;<Select
-  label='Country'
-  placeholder='- Select country -'
-  description='Select your country of residence'
-  options={options}
-  onChange={item => setSelected(item)}
-  state={selected ? 'default' : 'alert'}
-  feedback={selected ? '' : 'Missing value'}
-  isClearable
-  required
-/>
-```
-
-### Multi Select
-
-Using the `isMulti` prop makes it possible to select multiple options.
-
-```jsx
-import { useState } from 'react'
-import { Select } from '@intility/bifrost-react'
-
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Finland', label: 'Finland' },
-  { value: 'France', label: 'France' },
-  { value: 'Spain', label: 'Spain' },
-  { value: 'Italy', label: 'Italy' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-const [selected, setSelected] = useState([])
-
-;<Select
-  label='Countries'
-  placeholder='- Select countries -'
-  description='Select countries you have visited'
-  options={options}
-  value={selected}
-  onChange={items => setSelected(items)}
-  isMulti
-/>
-```
-
-### Grouped options
-
-To make grouped options with labels you simply need to structure the `options` value a bit different.
-
-```jsx
-const options = [
-  {
-    label: 'Marvel',
-    options: [
-      { value: 'Iron Man', label: 'Iron Man' },
-      { value: 'Spider-man', label: 'Spider-man' },
-      { value: 'Star Lord', label: 'Star Lord' }
-    ]
-  },
-  {
-    label: 'DC',
-    options: [
-      { value: 'Superman', label: 'Superman' },
-      { value: 'Batman', label: 'Batman' },
-      { value: 'The Flash', label: 'The Flash' }
-    ]
-  }
-]
-
-;<div className='bfl-autocol'>
-  <Select
-    label='Superhero'
-    placeholder='- Select your hero -'
-    options={options}
-  />
-  <Select
-    label='Superheroes'
-    placeholder='- Select multiple heroes -'
-    options={options}
-    isMulti
-  />
-</div>
-```
-
-### Disabled
-
-Disable a `<Select>` with `isDisabled` prop.
-
-You can also disable an option with `isDisabled` property on the option object.
-
-```jsx
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark', isDisabled: true },
-  { value: 'Germany', label: 'Germany' }
-]
-
-;<div className='bfl-autocol'>
-  <Select
-    label='Disabled select'
-    placeholder='- Select country -'
-    description='This is a disabled component'
-    isDisabled
-  />
-  <Select
-    label='Disabled option'
-    placeholder='- Select country -'
-    description='Denmark option is disabled'
-    options={options}
-  />
-</div>
-```
-
-### Loading spinner
-
-The `loading` prop displays a loading spinner on the right hand side of the input.
-
-```jsx
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-;<Select
-  label='Country'
-  placeholder='- Select country -'
-  options={options}
-  loading
-/>
-```
-
-### Hide label
-
-The `label` prop is required, but you can hide it with `hideLabel`.
-
-```jsx
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-;<Select
-  label='Country'
-  hideLabel
-  placeholder='- Select country -'
-  options={options}
-/>
-```
-
-### Async
-
-AsyncSelect can be used to load options from a source as the user types.
-
-Try type 'No' in the demo below
-
-```jsx
-import { useState } from 'react'
-import { AsyncSelect } from '@intility/bifrost-react'
-
-const countries = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-const [selected, setSelected] = useState()
-
-function getAsyncOptions(inputValue) {
-  return new Promise((resolve, reject) => {
-    const filtered = countries.filter(c =>
-      String(c.label.toLowerCase()).startsWith(inputValue.toLowerCase())
-    )
-
-    resolve(filtered.slice(0, 3))
-  })
-}
-
-;<AsyncSelect
-  label='Country'
-  placeholder='- Select country -'
-  loadOptions={inputValue => getAsyncOptions(inputValue)}
-  onChange={item => setSelected(item)}
-  isClearable
-/>
-```
-
-### Creatable
-
-CreatableSelect can be used to create new options.
-
-Try to type 'England' and add the new option to the component
-
-```jsx
-import { useState } from 'react'
-import { CreatableSelect } from '@intility/bifrost-react'
-
-const countries = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-const [selected, setSelected] = useState()
-const [options, setOptions] = useState(countries)
-
-const handleCreate = option => {
-  const newOption = {
-    value: option,
-    label: option
-  }
-
-  setOptions(options => [...options, newOption])
-  setSelected(newOption)
-}
-
-;<CreatableSelect
-  label='Country'
-  placeholder='- Select country -'
-  options={options}
-  value={selected}
-  onChange={item => setSelected(item)}
-  onCreateOption={option => handleCreate(option)}
-  isClearable
-/>
-```
-
-### Replace components
-
-`react-select` allows you to [replace internal components](https://react-select.com/components) which allows for more advanced use cases.
-
-Let's say you have a multi-select, but don't want to display a badge for each selected item, but something like "Selected (4)" instead, you can replace the `ValueContainer` component:
-
-```jsx
-import { useState } from 'react'
-import { components } from 'react-select'
-import { Select } from '@intility/bifrost-react'
-
-const ValueContainer = ({ children, ...props }) => {
-  let [values, input] = children
-
-  if (Array.isArray(values)) {
-    // convert array of values to a string that will get displayed
-    values = `Selected (${values.length})`
-  }
-
-  return (
-    <components.ValueContainer {...props}>
-      {values}
-      {input}
-    </components.ValueContainer>
-  )
-}
-
-const options = [
-  { value: 'Norway', label: 'Norway' },
-  { value: 'Sweden', label: 'Sweden' },
-  { value: 'Denmark', label: 'Denmark' },
-  { value: 'Finland', label: 'Finland' },
-  { value: 'France', label: 'France' },
-  { value: 'Spain', label: 'Spain' },
-  { value: 'Italy', label: 'Italy' },
-  { value: 'Germany', label: 'Germany' }
-]
-
-const SelectDemo = () => {
-  const [selected, setSelected] = useState([])
-
-  return (
-    <Select
-      label='Countries'
-      placeholder='- Select countries -'
-      description='Select countries you have visited'
-      options={options}
-      value={selected}
-      onChange={items => setSelected(items)}
-      isMulti
-      // pass in the custom override
-      components={{
-        ValueContainer
-      }}
-    />
-  )
-}
-
-;<SelectDemo />
-```
-
-Bifrost replaces the following components internally:
-
-- ClearIndicator
-- DropdownIndicator
-- Input
-- LoadingIndicator
-- MenuList
-- Option
-
-To use or wrap our components in your own overrides, you can import them from `selectComponents` <Copy text="import { selectComponents } from '@intility/bifrost-react'" />
-
-```jsx static
-import { selectComponents } from '@intility/bifrost-react'
-// ...
-;<selectComponents.Option>...</selectComponents.Option>
-```

package/src/index.ts

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