hrm_ui_lib 1.0.0

package/src/components/Select/SharedComponents/ButtonSelectWrapper/Button/Button.tsx

@@ -0,0 +1,52 @@
+import React, { LegacyRef, ReactElement } from 'react'
+import classnames from 'classnames'
+import { Text } from '../../../../Text'
+import { IconCaretDownFilled, IconCaretUpFilled } from '../../../../SVGIcons'
+
+type TProps = {
+  buttonText: string
+  size?: 'small' | 'medium' | 'large'
+  className?: string
+  disabled?: boolean
+  dataId?: string
+  onClick: () => void
+  refHandler?: LegacyRef<HTMLButtonElement> | undefined
+  selectedItemsLabels: string
+  isOpen?: boolean
+  type?: 'primary' | 'secondary' | 'tertiary'
+}
+
+export const Button = (props: TProps): ReactElement => {
+  const {
+    type,
+    buttonText,
+    size = 'large',
+    className = '',
+    isOpen,
+    disabled,
+    dataId = '',
+    onClick,
+    refHandler = null,
+    selectedItemsLabels
+  } = props
+
+  return (
+    <button
+      type="button"
+      ref={refHandler}
+      data-id={dataId}
+      disabled={disabled}
+      className={classnames('btn', `btn--${type}`, `btn--${size}`, `btn--${size}`, className)}
+      onClick={onClick}
+    >
+      <>
+        <Text className="btn__text mr-4" type={selectedItemsLabels ? 'tertiary' : 'secondary'}>
+          {`${buttonText}${selectedItemsLabels ? '  |' : ''}`}
+        </Text>
+
+        {selectedItemsLabels ? <Text className="btn__text ml-4">{selectedItemsLabels}</Text> : null}
+        {isOpen ? <IconCaretUpFilled size="xsmall" /> : <IconCaretDownFilled size="xsmall" />}
+      </>
+    </button>
+  )
+}

package/src/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.tsx

@@ -0,0 +1,100 @@
+import React, { ReactElement, useMemo, useRef } from 'react'
+import classNames from 'classnames'
+import { Button } from './Button/Button'
+
+import {
+  useGetElemPositions,
+  useGetElemSizes,
+  useGetHasBottomSpace,
+  useGetHasTopSpace
+} from '../../../../hooks'
+import { TSelectWrapperProps } from '../../types'
+import { noop } from '../../../../utils/helpers'
+import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts'
+import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll'
+
+export const ButtonSelectWrapper = (props: TSelectWrapperProps): ReactElement => {
+  const {
+    children,
+    size,
+    className,
+    dropdownWidth,
+    align = 'left',
+    offsets,
+    isOpen,
+    setIsOpen,
+    containerRef,
+    setContainerRef,
+    dropdownRef,
+    setDropdownRef,
+    selectedValues,
+    placeHolder,
+    dataId,
+    disabled,
+    type = 'secondary'
+  } = props
+
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const openDropdown = () => setIsOpen(true)
+
+  const { bottom, left, top, right } = useGetElemPositions(buttonRef.current)
+  const { width: containerWidth } = useGetElemSizes(containerRef)
+
+  const { hasBottomSpace } = useGetHasBottomSpace({
+    element: dropdownRef,
+    input: buttonRef.current
+  })
+
+  const hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: buttonRef.current
+  })
+
+  const selectedItemsLabels = useMemo(() => {
+    if (!selectedValues) return ''
+    if (selectedValues?.length === 0) return ''
+    if (selectedValues?.length === 1) return `${selectedValues[0].label}`
+
+    return ` ${selectedValues[0].label} +${selectedValues.length - 1}`
+  }, [selectedValues])
+
+  useChangePositionsOnScroll(buttonRef?.current, dropdownRef, hasBottomSpace)
+
+  return (
+    <div className={classNames(`select select--${size}`, className)} ref={setContainerRef}>
+      <Button
+        size={size}
+        type={type}
+        dataId={dataId}
+        isOpen={isOpen}
+        buttonText={placeHolder || ''}
+        selectedItemsLabels={selectedItemsLabels}
+        onClick={disabled ? noop : openDropdown}
+        refHandler={buttonRef}
+        className="select_button"
+      />
+
+      {isOpen && (
+        <div
+          className="select__options"
+          style={{
+            left:
+              align === 'left' ? offsets?.left || left : right - (dropdownWidth || containerWidth),
+            right:
+              align === 'right'
+                ? offsets?.right || left
+                : right - (dropdownWidth || containerWidth),
+            width: dropdownWidth || containerWidth,
+            ...(hasBottomSpace || !hasTopSpace
+              ? { top: offsets?.top || bottom }
+              : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })
+          }}
+          ref={setDropdownRef}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/Select/SharedComponents/ContentTop.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Text } from '../../Text'
+import { Input } from '../../Input'
+import { TMenuItem } from '../../Menu/types'
+import { TSelectTranslations } from '../types'
+import { Actions } from './Actions'
+import IconDismissFilled from '../../SVGIcons/IconDismissFilled'
+import IconSearchFilled from '../../SVGIcons/IconSearchFilled'
+import IconSelectAllOff from '../../SVGIcons/IconSelectAllOff'
+
+type TProps = {
+  searchValue?: string
+  helperText?: string
+  selectAll?: TCallBackFn
+  setSearchValue?: (value: string) => void
+  clearAll?: TCallBackFn
+  isSelectAllDisabled?: boolean
+  isAnySelected?: boolean
+  translations?: TSelectTranslations
+  isSearchAvailable?: boolean
+  hasLimitation?: boolean
+  menuOptions?: TMenuItem[]
+  dataIdPrefix?: string
+}
+
+export const ContentTop = React.memo<TProps>((props: TProps): JSX.Element => {
+  const {
+    clearAll,
+    selectAll,
+    helperText,
+    searchValue,
+    translations,
+    isAnySelected,
+    setSearchValue,
+    isSearchAvailable = false,
+    hasLimitation = false,
+    isSelectAllDisabled = false,
+    menuOptions = [],
+    dataIdPrefix
+  } = props
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const { searchInputPlaceHolder, innerLabel, clearAllLabel, selectAllLabel } = translations || {}
+
+  const selectActions = useMemo(() => {
+    let options: TMenuItem[] = menuOptions
+
+    if (selectAll && selectAllLabel && !hasLimitation) {
+      options = [
+        {
+          label: selectAllLabel,
+          value: 1,
+          handler: selectAll,
+          disabled: isSelectAllDisabled,
+          iconProps: { Component: IconSelectAllOff },
+          dataId: dataIdPrefix ? `${dataIdPrefix}-select-all` : ''
+        }
+      ]
+    }
+    if (clearAll && clearAllLabel) {
+      options = [
+        ...options,
+        {
+          label: clearAllLabel,
+          value: 2,
+          handler: clearAll,
+          disabled: !isAnySelected,
+          iconProps: { Component: IconDismissFilled },
+          dataId: dataIdPrefix ? `${dataIdPrefix}-clear-all` : ''
+        }
+      ]
+    }
+    return options
+  }, [
+    menuOptions,
+    selectAllLabel,
+    selectAll,
+    clearAll,
+    clearAllLabel,
+    isSelectAllDisabled,
+    isAnySelected,
+    dataIdPrefix
+  ])
+  const onSearch = (e: TChangeEventType) => {
+    setSearchValue && setSearchValue(e.target.value)
+  }
+
+  const removeFilter = () => setSearchValue && setSearchValue('')
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [inputRef])
+
+  return (
+    <div className="content-top">
+      {helperText ? (
+        <Text size="xsmall" type="secondary" className="content-top__label">
+          {helperText}
+        </Text>
+      ) : null}
+      {isSearchAvailable && (
+        <Input
+          ref={inputRef}
+          className="content-top__search"
+          size="small"
+          placeholder={searchInputPlaceHolder}
+          handleChange={onSearch}
+          currentValue={searchValue}
+          rightIconProps={{
+            Component: searchValue ? IconDismissFilled : IconSearchFilled,
+            size: searchValue ? 'xsmall' : 'small',
+            onClick: removeFilter
+          }}
+        />
+      )}
+
+      <Actions selectActions={selectActions} innerLabel={innerLabel} />
+    </div>
+  )
+})
+
+ContentTop.displayName = 'ContentTop'

package/src/components/Select/SharedComponents/Footer.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Button } from '../../Button'
+import { TSelectFooterPropTypes } from '../types'
+import { Checkbox } from '../../Checkbox'
+
+export const Footer = (props: TSelectFooterPropTypes): JSX.Element => {
+  const { buttonProps, onApply, onCancel, hasChange = true, checkboxInfo } = props
+  const [isSelected, setIsSelected] = React.useState(checkboxInfo?.isChecked || false)
+
+  return (
+    <div className="select__footer">
+      <div>
+        {checkboxInfo ? (
+          <Checkbox label={checkboxInfo.label} selectedValue={isSelected} onClick={setIsSelected} />
+        ) : null}
+      </div>
+      <div className={'select__footer__right flexbox'}>
+        <Button
+          {...(buttonProps.cancel || {})}
+          type="tertiary"
+          size="medium"
+          className="mr-12"
+          onClick={onCancel}
+        />
+        <Button
+          disabled={!hasChange && isSelected === !!checkboxInfo?.isChecked}
+          {...buttonProps.confirm}
+          type="primary"
+          size="medium"
+          onClick={() => onApply(isSelected)}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.tsx

@@ -0,0 +1,137 @@
+import React, { ReactElement, useCallback, useMemo, useRef } from 'react'
+import classNames from 'classnames'
+import { Input } from '../../../Input'
+import {
+  useGetElemSizes,
+  useGetElemPositions,
+  useGetHasBottomSpace,
+  useGetHasTopSpace
+} from '../../../../hooks'
+import { getStringWidth, noop, setTranslationValue } from '../../../../utils/helpers'
+
+import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll'
+import { IconCaretDownFilled } from '../../../SVGIcons/IconCaretDownFilled'
+import { IconCaretUpFilled } from '../../../SVGIcons/IconCaretUpFilled'
+import { TSelectWrapperProps } from '../../types'
+import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts'
+
+export const InputSelectWrapper = (props: TSelectWrapperProps): ReactElement | null => {
+  const {
+    children,
+    options,
+    label,
+    placeHolder,
+    isRequiredField,
+    labelAddons,
+    disabled,
+    className = '',
+    dropdownWidth,
+    align = 'left',
+    size,
+    dropdownRef,
+    setDropdownRef,
+    containerRef,
+    setIsOpen,
+    isOpen,
+    selectedValues,
+    setContainerRef,
+    overflowText,
+    hasError
+  } = props
+
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const { width } = useGetElemSizes(containerRef)
+
+  const checkIsValueOverflowed = useCallback(
+    (value: string) => {
+      const elemWidth = getStringWidth(value, 14)
+      return elemWidth > width - 80 // padding and width of (+number)
+    },
+    [width]
+  )
+
+  const toggleDropdown = (e?: TClickEventType) => {
+    const clickedElement = e?.target as HTMLDivElement
+    const className = clickedElement?.getAttribute('class')
+    if (
+      e &&
+      className &&
+      (className.indexOf('icon-') !== -1 || className.indexOf('svg-icon') !== -1)
+    ) {
+      setIsOpen(!isOpen)
+      e.preventDefault()
+    } else {
+      setIsOpen(true)
+    }
+  }
+
+  const selectedItemsLabels = useMemo(() => {
+    if (!selectedValues || !selectedValues.length) {
+      return ''
+    }
+    const onlyLabels = selectedValues.map((selected) => selected.label)
+    const joinedLabel = onlyLabels.join(', ')
+
+    return checkIsValueOverflowed(joinedLabel)
+      ? setTranslationValue(overflowText || '', selectedValues.length)
+      : joinedLabel
+  }, [options, selectedValues, checkIsValueOverflowed])
+
+  const { bottom, left, top, right } = useGetElemPositions(inputRef.current)
+  const { width: containerWidth } = useGetElemSizes(containerRef)
+
+  const { hasBottomSpace } = useGetHasBottomSpace({
+    element: dropdownRef,
+    input: inputRef.current
+  })
+
+  const hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: inputRef.current
+  })
+
+  useChangePositionsOnScroll(inputRef?.current, dropdownRef, hasBottomSpace)
+
+  return (
+    <div className={classNames('select select--multi', className)} ref={setContainerRef}>
+      <div onClick={disabled ? noop : toggleDropdown}>
+        <Input
+          readonly
+          label={label}
+          ref={inputRef}
+          hasError={hasError}
+          className="select__input"
+          placeholder={placeHolder}
+          required={isRequiredField}
+          currentValue={selectedItemsLabels}
+          rightIconProps={{
+            Component: isOpen ? IconCaretUpFilled : IconCaretDownFilled,
+            size: 'xsmall'
+          }}
+          labelAddons={labelAddons}
+          disabled={disabled}
+          size={size === 'large' ? 'large' : 'small'}
+        />
+      </div>
+
+      <>
+        {isOpen && (
+          <div
+            className="select__options"
+            ref={setDropdownRef}
+            style={{
+              left: align === 'left' ? left : right - (dropdownWidth || containerWidth),
+              width: dropdownWidth || containerWidth,
+              ...(hasBottomSpace || !hasTopSpace
+                ? { top: bottom }
+                : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })
+            }}
+          >
+            {children}
+          </div>
+        )}
+      </>
+    </div>
+  )
+}

package/src/components/Select/SharedComponents/Loading.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Text } from '../../Text'
+
+type TLoadingProps = {
+  loadingText?: string
+}
+
+export const Loading = (props: TLoadingProps): JSX.Element => {
+  const { loadingText = 'Results loading ...' } = props
+  return (
+    <div style={{ padding: 20 }}>
+      <Text>{loadingText}</Text>
+    </div>
+  )
+}

package/src/components/Select/SharedComponents/index.ts

@@ -0,0 +1,6 @@
+export * from './Footer'
+export * from './Actions'
+export * from './ContentTop'
+export * from './Loading'
+export * from './InputSelectWrapper/InputSelectWrapper'
+export * from './ButtonSelectWrapper/ButtonSelectWrapper'

package/src/components/Select/constants.ts

@@ -0,0 +1,10 @@
+export const TRANSLATIONS_DEFAULT_VALUES = {
+  emptyListMainMessage: "Sorry, we couldn't find any results",
+  overflowText: '%s selected'
+}
+
+export const SELECTED_VISIBLE_MIN_COUNT = 15
+
+export const DROPDOWN_MAX_HEIGHT = 260
+
+export const DROPDOWN_MAX_HEIGHT_PART = 106

package/src/components/Select/index.ts

@@ -0,0 +1,6 @@
+export * from './Select/Select'
+export * from './MultiSelect/MultiSelect'
+// export * from './FilterSelect/FilterSelect'
+export * from './NestedSelect/NestedSelect'
+export * from './ButtonSelect/ButtonSelect'
+export * from './ProfileDropdown'