@edvisor/product-language 0.10.2 → 0.10.3

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

@@ -1,27 +0,0 @@
-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

@@ -1,370 +0,0 @@
-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

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

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

@@ -1,148 +0,0 @@
-// 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()
-    
-  })
-})