@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/select/components/value-component-single.tsx

@@ -0,0 +1,27 @@
+import { IValueComponentSingleProps } from '../types'
+import { FC, isDefined } from '@helpers'
+import { memo } from 'react'
+import { SelectLabel } from './select-label'
+
+const ValueComponentSingle: FC<IValueComponentSingleProps> = (props) => {
+  const LabelComponent = isDefined(props.labelComponent) ? props.labelComponent : SelectLabel
+  const className = ['value-single', props.className]
+    .filter(c => Boolean(c))
+    .join(' ')
+
+  return (
+    <LabelComponent
+      active
+      type="value-single"
+      className={className}
+      {...props.option}
+      default
+      style={{pointerEvents: 'none'}}
+    >
+      {props.option.label}
+    </LabelComponent>
+  )
+}
+
+
+export default memo(ValueComponentSingle) as typeof ValueComponentSingle

package/src/lib/components/select/components/value.tsx

@@ -0,0 +1,370 @@
+import { defaultTo, FC, is, isDefined, isEmpty, isNil, maybeRender, Nothing, safeArray } from '@helpers'
+import styled, { css } from 'styled-components'
+import { Borders, Focused, Icons, Margin, Padding, Surface, Text } from '@foundations'
+import { Body, Label } from 'components/typography'
+import { IOption, IValueProps, DEFAULT_PLACEHOLDER, labelPositionType } from '../types'
+import ValueComponentMulti from './value-component-multi'
+import ValueComponentSingle from './value-component-single'
+import { getValueOptions, keys, toKey } from '../utils'
+import React, { createRef, CSSProperties, memo, RefObject, useEffect } from 'react'
+import { IconMinor } from 'components/icon'
+import { Flex, SpaceBetween } from 'components/layout'
+import { Button } from 'components/molecules/button'
+
+interface IErrorProps {
+  visible?: boolean
+}
+
+interface IValueContainerProps {
+  disabled?: boolean
+  focused?: boolean
+  hasLabel?: boolean
+  invalid?: boolean
+  multi?: boolean
+  menuIsOpen?: boolean
+}
+
+interface IValueLeftProps {
+  multi?: boolean
+  showClearer?: boolean
+  hasValue?: boolean
+}
+
+interface IClearButton {
+  plain: boolean
+  subtle: boolean
+}
+
+const valueStyles: (props: { canSearch?: boolean }) => CSSProperties = ({ canSearch }) => ({
+  minWidth: '1px',
+  marginLeft: '-1px',
+  userSelect: 'text',
+  opacity: is(canSearch) ? 1 : 0,
+  position: is(canSearch) ? 'relative' : 'absolute',
+  left: is(canSearch) ? '1px' : '0',
+  outline: 'none',
+  fontFamily: 'Inter',
+  fontWeight: 400,
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: `${Text.Default}`
+})
+
+const ValueContainer = styled(SpaceBetween)`
+  pointer-events: ${(props: IValueContainerProps) =>
+    is(props.disabled) ? 'none' : 'auto'};
+  padding: ${Padding.xs} ${Padding.none};
+  background:  ${(props: IValueContainerProps) =>
+    is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default};
+  cursor: default;
+  border: 1px solid ${(props: IValueContainerProps) =>
+    is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default};
+  border-radius: 6px;
+  outline-offset: -2px;
+
+  ${(props: IValueContainerProps) => is(props.menuIsOpen) && css`
+    outline: 2px solid ${Focused.Default};
+  `}
+
+  ${(props: IValueContainerProps) =>
+    (!is(props.disabled) && !is(props.invalid)) && `
+
+    &:focus  {
+      outline: 2px solid ${Focused.Default}
+    }
+
+    &:focus-within {
+      outline: 2px solid ${Focused.Default}
+    }
+  `}
+`
+
+const ValueWrapper = styled(Flex)<{label?: string, labelPosition?: string}>`
+  width: 100%;
+  display: ${({label, labelPosition}) =>
+    isDefined(label)
+    && !isEmpty(label)
+    && labelPosition === labelPositionType.TOP ? 'block' : 'flex' };
+`
+
+const ValueLabel = styled(Label)<{labelPosition: string | undefined}>`
+  padding-left: ${Padding.xs};
+  margin-bottom: ${({labelPosition}) => 
+    labelPosition === labelPositionType.TOP ? Margin.xxs : Margin.none
+  };
+  display: flex;
+  align-self: ${({labelPosition}) => 
+    labelPosition === labelPositionType.TOP ? 'flex-start' : 'center'
+  };
+  width: fit-content;
+  white-space: pre;
+  ${({labelPosition}) =>
+    (labelPosition === labelPositionType.TOP) && css`
+    flex-basis: 100%;
+  `}
+`
+
+const ValueLeft = styled(Flex)`
+  padding-left: ${Padding.xs};
+  width: 100%;
+  flex-wrap: ${(props: IValueLeftProps) =>
+    is(props.multi) && is(props.hasValue) ? 'wrap' : 'nowrap'};
+  user-select: none;
+  min-width: 0;
+  min-height: 20px;
+  box-sizing: border-box;
+  gap: ${(props: IValueLeftProps) =>
+    is(props.multi) ? '4px' : 0};
+`
+
+const ValueRight = styled(Flex)`
+  padding-right: ${Padding.xxs};
+  cursor: pointer;
+`
+
+const Placeholder = styled(Label)`
+  pointer-events: none;
+  color: ${Text.Light};
+`
+
+const ClearButton = styled(Button).attrs<IClearButton>({
+  plain: true,
+  subtle: true,
+})`
+  padding: ${Padding.none};
+  margin-right: ${Margin.none};
+  gap: 0;
+  &:focus  {
+    outline: none;
+  }
+  &:active {
+    background-color: transparent;
+  }
+`
+
+const ErrorMessage = styled.div`
+  display: ${(props: IErrorProps) => is(props.visible) ? 'flex' : 'none'};
+  flex-direction: 'row';
+  width: 100%;
+  padding: ${Padding.xxs} ${Padding.none};
+  & path {
+    fill: ${Icons.Critical};
+  }
+  div {
+    color: ${Text.Critical};
+    margin: ${Margin.none} ${Margin.xxs}
+  }
+`
+
+const Value: FC<IValueProps> = (props) => {
+  const search: RefObject<HTMLSpanElement> = createRef()
+
+  useEffect(() => {
+    if (isDefined(search.current) && !is(props.focused)) {
+      search.current.innerText = ''
+    }
+
+  }, [props.value, props.focused, search])
+
+  const {
+    options = [],
+    value,
+    disabled,
+    clearable,
+    open,
+    multi,
+    focused,
+    invalid,
+    errors,
+    label,
+    searchable,
+    labelPosition = labelPositionType.TOP
+  } = props
+  const valueOptions: IOption[] = getValueOptions(
+    options,
+    value,
+    multi
+  )
+  const showClearer = is(clearable) && valueOptions.length > 0
+  const searchAtStart = !is(multi) || valueOptions.length === 0
+  const searchAtEnd = is(multi) && valueOptions.length > 0
+
+  const renderSearch = () => {
+    const {
+      onSearchFocus,
+      onSearchBlur
+    } = props
+
+    if (is(disabled) || !is(searchable)) {
+      return <Nothing />
+    }
+
+    const canSearch = (open && is(searchable))
+      || (!isDefined(value) && is(searchable))
+      || isDefined(search.current)
+    
+    /** 
+    * @TODO this is a hack to be able to use the ref in react-web-client
+    * RWC uses styled-components < v4 and expects the ref to be passes as
+    * "innerRef" not just "ref", but product-language uses > v4 and wants
+    * to use ref. So for some components that need a ref, like this one
+    * we will have to use a div and style it the old fashioned way until
+    * we upgrade rwc's styled-components or drop rwc
+    */
+    return (
+      <span
+        className="search"
+        contentEditable
+        style={{ ...valueStyles({ canSearch }) }}
+        onInput={onSearch}
+        onKeyDown={onKeyDown}
+        onFocus={onSearchFocus}
+        onBlur={onSearchBlur}
+        ref={search}
+      />
+    )
+  }
+
+  const renderLabel = () => {
+    return maybeRender(label,
+      <ValueLabel labelPosition={labelPosition} subtle subdued>{label}</ValueLabel>)
+  }
+
+  const renderValues = () => {
+    const {
+      placeholder,
+      labelComponent,
+    } = props
+
+    if (isDefined(search) && is(searchable) && open && !is(multi)) {
+      return <Nothing />
+    }
+
+    if (valueOptions.length === 0 && isNil((search?.current))) {
+      return <Placeholder>{defaultTo(placeholder, DEFAULT_PLACEHOLDER)}</Placeholder>
+    }
+
+    return valueOptions.map((option) =>
+      is(multi) ? (
+        <ValueComponentMulti
+          key={toKey(option.value)}
+          option={option}
+          labelComponent={labelComponent}
+          options={valueOptions}
+          onRemove={props.onOptionRemove}
+        />
+      ) : (
+        <ValueComponentSingle
+          key={toKey(option.value)}
+          option={option}
+          labelComponent={labelComponent}
+        />
+      )
+    )
+  }
+
+  const focus = (): void => {
+    const el = search.current
+
+    if (isDefined(el)) {
+      el.focus()
+    }
+  }
+
+  const onClick = () => {
+    if (!is(props.disabled)) {
+      focus()
+      props.onClick()
+    }
+  }
+
+  const onClear = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation()
+    props.onClear()
+  }
+
+  const onSearch = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+
+    if (is(props.searchable)) {
+      props.onSearch(event.currentTarget.innerText.trim())
+    } else {
+      event.preventDefault()
+    }
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+
+    if (
+      (!is(searchable) && event.key !== keys.TAB) ||
+      event.key === keys.ENTER ||
+      event.key === keys.ARROW_UP ||
+      event.key === keys.ARROW_DOWN
+    ) {
+      event.preventDefault()
+    }
+
+  }
+
+  return (
+    <React.Fragment>
+      <ValueContainer
+        data-role="value"
+        className="select-value"
+        disabled={disabled}
+        focused={focused}
+        invalid={invalid}
+        hasLabel={isDefined(props.label)}
+        multi
+        menuIsOpen={open}
+        tabIndex={0}
+        onClick={onClick}
+        center
+      >
+        <ValueWrapper
+          label={label}
+          labelPosition={labelPosition}
+        >
+          {renderLabel()}
+          <ValueLeft
+            className="value-left"
+            multi={multi}
+            showClearer={showClearer}
+            hasValue={!(valueOptions.length === 0)}
+          >
+            {searchAtStart && renderSearch()}
+            {renderValues()}
+            {searchAtEnd && renderSearch()}
+          </ValueLeft>
+        </ValueWrapper>
+        <ValueRight
+          className="value-right"
+          center
+        >
+          {showClearer && (
+            <ClearButton
+              tabIndex={-1}
+              className="clearer"
+              onClick={onClear}
+              IconPrefix={IconMinor.Xmark}
+            />
+          )}
+          {is(searchable)
+            ?  <IconMinor.MagnifyingGlass />
+            : open
+              ? <IconMinor.ChevronUpSolid />
+              : <IconMinor.ChevronDownSolid />
+          }
+        </ValueRight>
+      </ValueContainer>
+        {safeArray(errors).map((e) => (
+          <ErrorMessage visible={!open} key={e.message}>
+            <IconMinor.CircleExclamation />
+            <Body>{e.message}</Body>
+          </ErrorMessage>
+        ))}
+      </React.Fragment>
+
+  )
+}
+
+export default memo(Value) as typeof Value

package/src/lib/components/select/index.tsx

@@ -0,0 +1,3 @@
+export * from './select'
+export * from './components/menu-list'
+export { IOption } from './types'

package/src/lib/components/select/select.test.tsx

@@ -0,0 +1,148 @@
+// eslint-disable-next-line no-restricted-syntax
+import { fireEvent, render, screen } from '@testing-library/react'
+import { IconMinor } from 'components/icon'
+import { Select, MenuList } from './index'
+
+describe('Select Tests', () => {
+
+  const options = [
+    {
+      label: 'Brasil',
+      value: 'BR'
+    },
+    {
+      label: 'Canada',
+      value: 'CA'
+    },
+    {
+      label: 'Mexico',
+      value: 'MX'
+    }
+  ]
+
+  it('should render the Select', async () => {
+    const { container } = render(<>
+      <Select />
+      <Select />
+    </>)
+
+    const select = container.getElementsByClassName('select')
+    expect(select.length).toBe(2)
+    
+  })
+
+  it('should render the container value', async () => {
+    const { container } = render(
+      <Select />
+    )
+
+    const valueContainer = container.getElementsByClassName('select-value')
+    expect(valueContainer.length).toBe(1)
+    
+  })
+
+  it('should render the Custom Label', async () => {
+      render(
+        <Select label='Test Select'/>
+      )
+
+      const select = screen.getByText('Test Select')
+      expect(select).toBeInTheDocument()
+      
+  })
+
+  it('should Open the menu on click', async () => {
+    
+    render(
+      <Select 
+        label='Test Select'
+        options={options}
+      />
+    )
+
+    const select = screen.getByText('Test Select')
+
+    const optionBeforClick = screen.queryByText('Brasil')
+    expect(optionBeforClick).not.toBeInTheDocument()
+
+    fireEvent(select, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+
+    const optionBRAfterClick = screen.getByText('Brasil')
+    const optionCAAfterClick = screen.getByText('Canada')
+    const optionMXCAAfterClick = screen.getByText('Mexico')
+
+    expect(optionBRAfterClick).toBeInTheDocument()
+    expect(optionCAAfterClick).toBeInTheDocument()
+    expect(optionMXCAAfterClick).toBeInTheDocument()
+    
+  })
+
+  it('Should Set a value on change', async () => {
+    
+    const handleChaqnge = jest.fn()
+    const handleClose = jest.fn()
+     
+    render(
+      <Select 
+        label='Test Select'
+        onChange={handleChaqnge}
+        onClose={handleClose}
+        options={options}
+      />
+    )
+
+    const select = screen.getByText('Test Select')
+
+    fireEvent(select, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+
+    const optionMX = screen.getByText('Mexico')
+
+    fireEvent(optionMX, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+    
+    expect(handleClose).toBeCalled()
+
+    const optionMXAfterMenuClose = screen.queryByText('Mexico')
+    expect(optionMXAfterMenuClose).toBeNull()
+
+    expect(handleChaqnge).toBeCalledWith('MX', {'label': 'Mexico', 'value': 'MX'})
+    
+  })
+
+  it('should render the custom menu', async () => {
+    
+    const setSelectOptions = options.map((opt, index) => ({
+      ...opt, 
+      icon: <IconMinor.Clone />, 
+      helperText: `Lorem ipsum dolor sit amet - ${index}`
+    }))
+    
+    render(
+      <Select 
+        menuComponent={MenuList}
+        label='Test Select'
+        options={setSelectOptions}
+      />
+    )
+
+    const select = screen.getByText('Test Select')
+
+    fireEvent(select, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+
+    expect(screen.getByText('Lorem ipsum dolor sit amet - 0')).toBeTruthy()
+    expect(screen.getByText('Lorem ipsum dolor sit amet - 1')).toBeTruthy()
+    expect(screen.getByText('Lorem ipsum dolor sit amet - 2')).toBeTruthy()
+    
+  })
+})