@companix/uikit 0.0.2 → 0.0.4

package/src/Scrollable/ImitateScroll.tsx

@@ -1,141 +0,0 @@
-import cn from 'classnames'
-
-import { useRef, useLayoutEffect, useMemo, useCallback, useEffect } from 'react'
-import { getContainers, pc, px } from '@companix/utils-browser'
-
-interface Props {
-  children: React.ReactNode
-  thumbClassName: string
-  thumbColor?: string
-  trackWidth?: number
-  thumbMargin?: number
-  scrollableClassName?: string
-}
-
-// Отслеживание изменений scrollHeight:
-// https://stackoverflow.com/questions/44428370/detect-scrollheight-change-with-mutationobserver
-
-const ImitateScroll = ({
-  children,
-  thumbClassName,
-  scrollableClassName,
-  thumbMargin = 0,
-  trackWidth = 20
-}: Props) => {
-  const scrollThumbRef = useRef<HTMLDivElement>(null)
-  const scrollableRef = useRef<HTMLDivElement>(null)
-
-  const data = useMemo(() => {
-    return { positons: { top: 0, y: 0 }, scrollRatio: 0 }
-  }, [])
-
-  const listeners = useMemo(() => {
-    return {
-      start() {
-        document.addEventListener('mousemove', handleMouseMove)
-        document.addEventListener('mouseup', handleMouseUp)
-      },
-      clear() {
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    const observer = new ResizeObserver(setThumbHeight)
-
-    if (scrollableRef.current) {
-      getContainers(scrollableRef.current, (element) => {
-        observer.observe(element)
-      })
-    }
-
-    return () => {
-      if (scrollableRef.current) {
-        getContainers(scrollableRef.current, (element) => {
-          observer.unobserve(element)
-        })
-      }
-    }
-  }, [])
-
-  useLayoutEffect(() => {
-    setThumbHeight()
-  }, [])
-
-  const setThumbHeight = useCallback(() => {
-    const { current: container } = scrollableRef
-    const { current: thumb } = scrollThumbRef
-
-    if (thumb && container) {
-      const scrollRatio = container.clientHeight / container.scrollHeight
-
-      thumb.style.height = pc(scrollRatio * 100)
-      thumb.style.display = scrollRatio === 1 ? 'none' : 'block'
-
-      data.scrollRatio = scrollRatio
-    }
-  }, [])
-
-  const handleMouseMove = useCallback(({ clientY }: MouseEvent) => {
-    const { current: container } = scrollableRef
-
-    if (container) {
-      const dy = clientY - data.positons.y
-      container.scrollTop = data.positons.top + dy / data.scrollRatio
-    }
-  }, [])
-
-  const handleMouseUp = useCallback(() => {
-    listeners.clear()
-  }, [])
-
-  const handleMouseDown = useCallback(({ clientY }: React.MouseEvent) => {
-    const { current: container } = scrollableRef
-
-    if (container) {
-      data.positons = {
-        top: container.scrollTop,
-        y: clientY
-      }
-    }
-
-    listeners.start()
-  }, [])
-
-  const handleScroll = () => {
-    requestAnimationFrame(() => {
-      const { current: container } = scrollableRef
-      const { current: thumb } = scrollThumbRef
-
-      if (thumb && container) {
-        thumb.style.top = pc((container.scrollTop * 100) / container.scrollHeight)
-      }
-    })
-  }
-
-  return (
-    <div className="relative h-full overflow-hidden">
-      <div
-        className={cn('hidden-scroll h-full overflow-y-scroll', scrollableClassName)}
-        onScroll={handleScroll}
-        ref={scrollableRef}
-      >
-        {children}
-      </div>
-      <div
-        className="absolute right-0 top-0 box-border h-full"
-        style={{ width: px(trackWidth), padding: px(thumbMargin) }}
-      >
-        <div
-          onMouseDown={handleMouseDown}
-          className={`${thumbClassName} relative w-full rounded-full`}
-          ref={scrollThumbRef}
-        />
-      </div>
-    </div>
-  )
-}
-
-export { ImitateScroll }

package/src/Scrollable/index.tsx

@@ -1,141 +0,0 @@
-import './Scrollable.scss'
-
-import classNames from 'classnames'
-import { forwardRef } from 'react'
-import { px, varToStyle } from '@companix/utils-browser'
-
-interface OuterImplementation {
-  implementation: 'outer'
-  shadowPadding?: number
-  scrollbarWidth: number
-  noneCorrect?: boolean
-}
-
-interface EdgeImplementation {
-  implementation: 'edge'
-  scrollbarWidth: number
-  padding: number
-}
-
-interface InnerImplementation {
-  implementation: 'inner'
-  padding: number
-}
-
-interface ScrollableProps {
-  heightAuto?: boolean
-  scrollX?: boolean
-  scrollY?: boolean
-  interactionKind?: 'static' | 'hover'
-  thumbPos?: 'center' | 'border'
-  thumbPadding?: number
-  thumbColor?: string
-  onWheel?: React.WheelEventHandler<HTMLDivElement>
-  onScroll?: React.UIEventHandler<HTMLDivElement>
-  maxHeight?: number
-  children: React.ReactNode
-  style?: React.CSSProperties
-  className?: string
-}
-
-type Implementation = InnerImplementation | OuterImplementation | EdgeImplementation
-
-const Scrollable = forwardRef<HTMLDivElement, ScrollableProps & Implementation>((props, ref) => {
-  let {
-    interactionKind = 'static',
-    thumbPos = 'center',
-    thumbPadding = 4,
-    heightAuto,
-    scrollX,
-    className,
-    scrollY,
-    onWheel,
-    maxHeight,
-    onScroll,
-    thumbColor,
-    children
-  } = props
-
-  const style: React.CSSProperties = (() => {
-    if (props.implementation === 'edge') {
-      thumbPadding = 0
-
-      const { padding, scrollbarWidth } = props
-
-      return {
-        ...varToStyle({ '--scrollbar-width': px(scrollbarWidth) }),
-        padding: `0px ${padding - scrollbarWidth}px 0px ${padding}px`
-      }
-    }
-
-    if (props.implementation === 'outer') {
-      const { shadowPadding = 0, noneCorrect, scrollbarWidth } = props
-
-      if ((window as any).IS_MOBILE) {
-        return {
-          padding: shadowPadding,
-          margin: -shadowPadding
-        }
-      }
-
-      return {
-        ...varToStyle({ '--scrollbar-width': px(scrollbarWidth) }),
-        padding: shadowPadding,
-        margin: -shadowPadding,
-        marginRight: noneCorrect ? undefined : `calc(-${scrollbarWidth}px - ${shadowPadding}px)`,
-        marginBottom: 0
-      }
-    }
-
-    if (props.implementation === 'inner') {
-      const { padding } = props
-
-      if ((window as any).IS_MOBILE) {
-        return {
-          [scrollY ? 'paddingLeft' : 'paddingTop']: padding,
-          [scrollY ? 'paddingRight' : 'paddingBottom']: padding
-        }
-      }
-
-      return {
-        [scrollY ? 'paddingLeft' : 'paddingTop']: padding,
-        ...varToStyle({ '--scrollbar-width': px(padding) })
-      }
-    }
-
-    return {}
-  })()
-
-  return (
-    <div
-      ref={ref}
-      onWheel={onWheel}
-      onScroll={onScroll}
-      onMouseDown={(e) => {
-        e.preventDefault()
-      }}
-      style={{
-        ...style,
-        ...props.style,
-        ...{ maxHeight: maxHeight ? px(maxHeight) : undefined },
-        ...varToStyle({ '--thumb-padding': px(thumbPadding) }),
-        ...varToStyle({ '--thumb-color': thumbColor ?? '#c1c2c8bd' })
-      }}
-      className={classNames(
-        !(window as any).IS_MOBILE && 'scrollable',
-        className,
-        heightAuto ? '' : 'h-full',
-        {
-          'overflow-y-scroll': scrollY,
-          'overflow-x-scroll': scrollX,
-          'scrollable-hover-interaction': interactionKind === 'hover',
-          'scrollable-border-position': thumbPos === 'border'
-        }
-      )}
-    >
-      {children}
-    </div>
-  )
-})
-
-export { Scrollable }

package/src/Select/SelectInput.tsx

@@ -1,131 +0,0 @@
-import cn from 'classnames'
-
-import { attr } from '@companix/utils-browser'
-import { forwardRef, useCallback, useRef } from 'react'
-import { Icon } from '../Icon'
-import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-
-export interface SelectFormProps extends React.HTMLAttributes<HTMLDivElement> {
-  required?: boolean
-  disabled?: boolean
-  className?: string
-  leftElement?: React.ReactNode
-  placeholder?: string
-  value?: string | number
-  size?: 'sm' | 'md' | 'lg'
-  fill?: boolean
-  clearButton?: boolean
-  clearButtonIcon?: boolean
-  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void
-}
-
-export const SelectInput = forwardRef<HTMLDivElement, SelectFormProps>(
-  (
-    {
-      required,
-      size,
-      fill,
-      leftElement,
-      className,
-      value,
-      clearButton,
-      placeholder,
-      clearButtonIcon,
-      disabled,
-      onClear,
-      ...containerProps
-    },
-    ref
-  ) => {
-    const selectInputRef = useRef<HTMLInputElement>(null)
-
-    // https://vkui.io/components/custom-select/
-    const passClickAndFocusToInputOnClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!selectInputRef.current || !document) {
-          return
-        }
-
-        const clickTargetIsNotAnInput = e.target !== selectInputRef.current
-        if (clickTargetIsNotAnInput) {
-          selectInputRef.current.click()
-
-          const inputIsNotFocused = document.activeElement !== selectInputRef.current
-          if (inputIsNotFocused) {
-            selectInputRef.current.focus()
-          }
-        }
-      },
-      [selectInputRef]
-    )
-
-    const preventInputBlurWhenClickInsideFocusedSelectArea = (e: React.MouseEvent<HTMLDivElement>) => {
-      // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
-      // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
-      // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
-      const isInputFocused = document && document.activeElement === selectInputRef.current
-      if (isInputFocused) {
-        e.preventDefault()
-      }
-    }
-
-    const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
-      if (disabled) return
-      passClickAndFocusToInputOnClick(event)
-    }
-
-    const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-      preventInputBlurWhenClickInsideFocusedSelectArea(event)
-    }
-
-    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
-      selectInputRef.current && selectInputRef.current.focus()
-      onClear?.(event)
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn('form select', className)}
-        data-size={size ?? 'md'}
-        data-fill={attr(fill)}
-        data-required={attr(required)}
-        data-disabled={attr(disabled)}
-        onMouseDown={onMouseDown}
-        {...containerProps}
-        onClick={onClick}
-      >
-        <div className="select-layout form-input">
-          {leftElement && <div className="select-element">{leftElement}</div>}
-          <div className="select-content">
-            <div className="select-content-text" aria-disabled={disabled}>
-              {!value && <span className="select-placeholder">{placeholder}</span>}
-              {value}
-            </div>
-          </div>
-          <div className="select-element">
-            {clearButton && value && (
-              <button className="select-close-button" onClick={handleClear}>
-                {clearButtonIcon ?? <Icon className="select-close-icon" icon={faClose} size="xxxs" />}
-              </button>
-            )}
-            <Icon className="expand-icon select-expand" icon={faChevronDown} size="xxxs" />
-          </div>
-        </div>
-        <VisuallyHidden asChild>
-          <input
-            ref={selectInputRef}
-            autoComplete="off"
-            autoCapitalize="none"
-            autoCorrect="off"
-            spellCheck="false"
-            aria-autocomplete="none"
-            onClick={containerProps.onClick}
-            readOnly
-          />
-        </VisuallyHidden>
-      </div>
-    )
-  }
-)

package/src/Select/index.tsx

@@ -1,134 +0,0 @@
-import { useEffect, useMemo } from 'react'
-import { OptionsList } from '../OptionItem/OptionsList'
-import { OptionItem } from '../OptionItem/OptionItem'
-import { Popover } from '../Popover'
-import { useFroozeClosing } from '../__hooks/use-frooze-closing'
-import { FormProps } from '../Form'
-import type { Option } from '../types'
-import { SelectInput } from './SelectInput'
-import { useScrollListController } from '../__hooks/use-scrollbox'
-
-interface SelectProps<T> extends Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
-  options: Option<T>[]
-  onChange: (event: T | null) => void
-  placeholder?: string
-  clearButton?: boolean
-  clearButtonIcon?: boolean
-  value: T | null
-  children?: React.ReactNode
-  minimalOptions?: boolean
-  matchTarget?: 'width' | 'min-width'
-}
-
-export const Select = <T,>(props: SelectProps<T>) => {
-  const {
-    options,
-    onChange,
-    minimalOptions,
-    clearButton,
-    clearButtonIcon,
-    matchTarget = 'width',
-    value,
-    children,
-    disabled,
-    ...inputProps
-  } = props
-
-  const currentOption = useMemo(() => {
-    const index = options.findIndex((o) => o.value === value)
-
-    return {
-      index,
-      option: options[index] as Option<T> | undefined
-    }
-  }, [options, value])
-
-  const active = currentOption.option?.value ?? null
-
-  const { popoverRef, froozePopoverPosition, handleAnimationEnd } = useFroozeClosing()
-  const { scrollToElement, optionsWrapperRef, scrollBoxRef } = useScrollListController()
-
-  const handleChange = (value: T, close: () => void) => {
-    froozePopoverPosition()
-    onChange(value)
-    close()
-  }
-
-  const handleClear = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onChange(null)
-  }
-
-  const onOpened = () => {
-    if (currentOption.index !== -1) {
-      scrollToElement(currentOption.index, true)
-    }
-  }
-
-  return (
-    <Popover
-      minimal
-      ref={popoverRef}
-      sideOffset={0}
-      matchTarget={matchTarget}
-      onAnimationEnd={handleAnimationEnd}
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      onCloseAutoFocus={(e) => e.preventDefault()}
-      disabled={disabled}
-      content={({ close }) => (
-        <SelectPopover<T>
-          options={options}
-          active={active}
-          scrollboxRef={scrollBoxRef}
-          optionsWrapperRef={optionsWrapperRef}
-          minimalOptions={minimalOptions}
-          onOpened={onOpened}
-          onSelect={(value) => handleChange(value, close)}
-        />
-      )}
-    >
-      {children ?? (
-        <SelectInput
-          {...inputProps}
-          disabled={disabled}
-          value={currentOption.option?.title ?? ''}
-          onClear={handleClear}
-          clearButton={clearButton}
-          clearButtonIcon={clearButtonIcon}
-        />
-      )}
-    </Popover>
-  )
-}
-
-interface SelectPopoverProps<T> {
-  scrollboxRef?: React.Ref<HTMLDivElement>
-  optionsWrapperRef?: React.RefObject<HTMLDivElement>
-  options: Option<T>[]
-  minimalOptions?: boolean
-  active?: T | null
-  onSelect?: (value: T) => void
-  onOpened?: () => void
-}
-
-const SelectPopover = <T,>(props: SelectPopoverProps<T>) => {
-  const { active, onOpened, scrollboxRef, optionsWrapperRef, options, onSelect, minimalOptions } = props
-
-  useEffect(() => {
-    onOpened?.()
-  }, [])
-
-  return (
-    <OptionsList scrollboxRef={scrollboxRef} optionsWrapperRef={optionsWrapperRef} maxHeight={300}>
-      {options.map((option, i) => (
-        <OptionItem
-          key={`option-item-${option.value}-${i}`}
-          active={active === option.value}
-          onClick={() => onSelect?.(option.value)}
-          minimal={minimalOptions}
-          {...option}
-        />
-      ))}
-    </OptionsList>
-  )
-}