@northlight/ui 2.41.0 → 2.41.1

package/lib/components/select/select-field.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef } from 'react'
+import { XCloseSolid } from '@northlight/icons'
+import { equals, identity, isNil } from 'ramda'
+import { Option, SelectFieldProps } from './types'
+import { Field } from '../form'
+import { Select } from './select'
+import { HStack } from '../stack'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { InputGroupWrapper } from '../../internal-components'
+
+const BaseSelectField = <T extends Option, K extends boolean = false>(
+  {
+    name,
+    label,
+    options,
+    direction = 'column',
+    isMulti,
+    isRequired,
+    validate,
+    isClearable = true,
+    onChange: onChangeCallback = identity,
+    inputLeftElement,
+    inputRightElement,
+    ...rest
+  }: SelectFieldProps<T, K>,
+  ref: React.Ref<HTMLDivElement>
+) => (
+  <Field
+    name={ name }
+    label={ label }
+    direction={ direction }
+    isRequired={ isRequired }
+    noLabelConnection={ true }
+    validate={ validate }
+    ref={ ref }
+  >
+    { ({ value, onChange }) => (
+      <HStack w="full">
+        <InputGroupWrapper
+          inputLeftElement={ inputLeftElement }
+          inputRightElement={ inputRightElement }
+        >
+          <Select<T, K>
+            name={ name }
+            options={ options }
+            isMulti={ isMulti }
+            onChange={ (values, event) => {
+              onChange(
+                isMulti
+                  ? (values as T[]).map((item: any) => item.value)
+                  : (values as T).value
+              )
+              onChangeCallback(values as K extends true ? T[] : T, event)
+            } }
+            value={
+              value
+                ? (options
+                  ?.flatMap((inner: any) =>
+                    (inner.options ? inner.options : inner)
+                  )
+                  .filter((option: any) =>
+                    (isMulti
+                      ? value.includes(option.value)
+                      : equals(value, option.value))
+                  ) as any)
+                : null
+            }
+            { ...rest }
+          />
+        </InputGroupWrapper>
+        <IconButton
+          aria-label={ `${name}-close-button` }
+          variant="danger"
+          size="sm"
+          fontSize="xs"
+          hidden={ isNil(value) || !isClearable }
+          onClick={ () => {
+            onChange(undefined)
+            onChangeCallback(undefined, { action: 'clear', removedValues: value })
+          } }
+          icon={ <Icon as={ XCloseSolid } /> }
+        />
+      </HStack>
+    ) }
+  </Field>
+  )
+
+export const SelectField = forwardRef(BaseSelectField)

package/lib/components/select/select.tsx

@@ -0,0 +1,209 @@
+import React, { Ref, forwardRef, useMemo, useRef } from 'react'
+import {
+  Select as ChakraReactSelect,
+  GroupBase,
+  OptionsOrGroups,
+  SelectInstance,
+} from 'chakra-react-select'
+import { Box } from '@chakra-ui/react'
+import { always, equals, identity, is } from 'ramda'
+import { Option, SelectProps } from './types'
+import { customSelectStyles } from '../../theme/components/select/custom-select'
+import { useSelectCallbacks } from '../../hooks'
+import { getComponents } from '../search-bar/get-components'
+import { getMatchingValue } from './get-matching-value'
+import { theme } from '../../theme'
+
+/**
+ * Select component that provides a customizable and accessible select input.
+ * It is built on top of Chakra UI and Chakra React Select components.
+ *
+ * @see SearchBar
+ * @see {@link https://northlight.dev/reference/select}
+ *
+ * @example (Example)
+ * ## Single Select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Clearable Select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ *   isClearable={ true }
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Multi select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ *   isMulti
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Event meta
+ * _There is a second argument passed to the handlechange that can be useful
+ * for knowing which elements where adding/removed_
+ * (?
+ * () => {
+ *   const handleChange = (val, e) => {
+    switch (e.action) {
+      case 'select-option':
+        //on add value
+        console.log(e.option)
+        break
+      case 'pop-value':
+        //on remove value
+        console.log(e.removedValue.categoryKey)
+        break
+      default:
+        break
+    }
+  }
+ *  return <Select onChange={handleChange} options={[{label: '1', value: '1'}]} isMulti={true}/>
+ *
+ * }
+ * ?)
+ *
+ * @example (Example)
+ * ##Customizing
+ * There are two special props for easy customization
+ * * customOption
+ * * customTag
+ *
+ * This are themselves react components
+ * (?
++const customOption = ({ label }) => (
+  <HStack>
+    <Avatar name={label} />
+    <P>{label}</P>
+  </HStack>
+);
+
+const customTag = ({ label }) => {
+  const [ isIncluded, setIsIncluded ] = useState(true)
+  const toggle = () => setIsIncluded((prev) => !prev)
+
+  return (
+    <Flex>
+      <Button
+        size="xs"
+        onClick={ toggle }
+        onMouseDown={ (e) => e.stopPropagation() }
+      >
+        { isIncluded ? 'Include' : 'Exclude' }
+      </Button>
+      <Tag>{ label }</Tag>
+    </Flex>
+  )
+}
+
+const CustomSelect = () => (
+  <Select
+  customOption={customOption}
+          customTag={ customTag }
+          isMulti={true}
+    options={[
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ]}
+
+  />
+);
+
+render(<CustomSelect />);
+ *
+ * ?)
+  *
+ *
+ * @example (Example)
+ * ## Testing
+ * You can grab the test id for the select by
+ * **screen.getByTestId('custom-testid)
+ * .children[0].children[2].children[0].children[1].children[0]**
+ * (?
+ * <Select
+  * data-testid="custom-test-id"
+ * />
+ * ?)
+*/
+export const Select = forwardRef(<T extends Option, K extends boolean = false>({
+  options,
+  isMulti,
+  onChange = identity,
+  onAdd = identity,
+  onRemove = identity,
+  isLoading,
+  loadingList = () => null,
+  'data-testid': testId,
+  customOption = null,
+  customTag = null,
+  isClearable = false,
+  value,
+  icon,
+  components,
+  generateComponentsUpdateKey = always(0),
+  ...rest
+}: SelectProps<T, K>,
+  ref: Ref<SelectInstance<T, K, GroupBase<T>>>
+) => {
+  const handleChange = useSelectCallbacks<T, K>({
+    onChange,
+    onAdd,
+    onRemove,
+    isMulti,
+    value: is(Array, value) ? (value as T[]) : [],
+  })
+
+  const customComponents = useMemo(
+    () => getComponents<T>(components),
+    [ generateComponentsUpdateKey() ]
+  )
+
+  const prevOptions = useRef<OptionsOrGroups<T, GroupBase<T>> | undefined>(
+    options
+  )
+  const renderedOptions = useMemo(() => {
+    if (!equals(prevOptions.current, options)) {
+      prevOptions.current = options
+    }
+    return prevOptions.current
+  }, [ options ])
+
+  return (
+    <Box w="full" data-testid={ testId } cursor="pointer">
+      <ChakraReactSelect
+        isMulti={ isMulti }
+        options={ renderedOptions }
+        useBasicStyles={ true }
+        closeMenuOnSelect={ !isMulti }
+        hideSelectedOptions={ false }
+        isClearable={ isClearable }
+        onChange={ handleChange }
+        selectedOptionStyle="check"
+        chakraStyles={ customSelectStyles }
+        isLoading={ isLoading }
+        { ...(isLoading && { components: { MenuList: loadingList } }) }
+        value={ getMatchingValue(value, options) }
+        customOption={ customOption }
+        customTag={ customTag }
+        icon={ icon }
+        components={ customComponents }
+        ref={ ref }
+        menuPortalTarget={ document.body }
+        styles={ { menuPortal: (base) => ({ ...base, zIndex: theme.zIndices.popover }) } }
+        { ...rest }
+      />
+    </Box>
+  )
+})

package/lib/components/select/sortable-select-values.tsx

@@ -0,0 +1,49 @@
+import React, { MouseEventHandler } from 'react'
+import {
+  MultiValueProps,
+  MultiValueRemoveProps,
+  chakraComponents,
+} from 'chakra-react-select'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Box } from '@chakra-ui/react'
+import { Option } from './types'
+
+export const SortableMultiValue = <T extends Option>(props: MultiValueProps<T, true>) => {
+  const onMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  const innerProps = { ...props.innerProps, onMouseDown }
+  const { attributes, listeners, setNodeRef, transform, transition } =
+        useSortable({
+          id: props.data.value,
+        })
+
+  return (
+    <Box
+      ref={ setNodeRef }
+      transform={ CSS.Translate.toString(transform) }
+      transition={ transition }
+      cursor="grab"
+      _hover={ { opacity: 0.8 } }
+      _active={ { cursor: 'grabbing' } }
+      { ...attributes }
+      { ...listeners }
+    >
+      <chakraComponents.MultiValue { ...props } innerProps={ innerProps } />
+    </Box>
+  )
+}
+
+export const SortableMultiValueRemove = <T extends Option>(
+  { innerProps, ...props }: MultiValueRemoveProps<T, true>
+) => (
+  <chakraComponents.MultiValueRemove
+    { ...props }
+    innerProps={ {
+      onPointerDown: (e) => e.stopPropagation(),
+      ...innerProps,
+    } }
+  />
+  )