@companix/uikit 0.0.2 → 0.0.3

package/src/Select/Select.scss

@@ -1,80 +0,0 @@
-@use '../mixins.scss';
-
-.select {
-  cursor: pointer;
-  max-width: 100%;
-
-  &-layout {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: inherit;
-  }
-
-  &-placeholder {
-    user-select: none;
-
-    @include mixins.use-styles(form, placeholder);
-  }
-
-  &-content {
-    position: relative;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    align-self: stretch;
-    overflow: hidden;
-
-    &:first-child {
-      padding-left: var(--form_space, 0);
-    }
-
-    &-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &-element {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  &-close-button {
-    pointer-events: auto;
-    cursor: pointer;
-    padding: 0px var(--form_space, 0);
-    height: 100%;
-    outline: none;
-    color: var(--select_clean_color);
-
-    &:hover {
-      color: var(--select_clean_hover_color);
-    }
-  }
-
-  &-expand {
-    margin-right: var(--form_space, 0);
-
-    &:first-child {
-      margin-left: var(--form_space, 0);
-    }
-  }
-}
-
-// expand icon
-
-.expand-icon {
-  color: var(--select_expand_color);
-  transition: transform 0.2s;
-}
-
-.form {
-  &[data-state='open'] {
-    .expand-icon {
-      transform: rotate(180deg);
-    }
-  }
-}

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>
-  )
-}

package/src/SelectTags/SelectTags.scss

@@ -1,66 +0,0 @@
-@use '../mixins.scss';
-
-.select-tags {
-  display: flex;
-  flex-direction: column;
-
-  .form-input {
-    padding-left: var(--form_space, 0);
-  }
-
-  &-empty {
-    @include mixins.use-styles(tag, empty);
-  }
-
-  &-container {
-    display: flex;
-    align-items: center;
-    cursor: text;
-
-    .expand-icon {
-      margin: 0px var(--form_space, 0);
-    }
-  }
-}
-
-.tag {
-  display: flex;
-  align-items: center;
-  cursor: default;
-  user-select: none;
-
-  @include mixins.use-styles(tag);
-
-  &-name {
-    @include mixins.use-styles(tag, name);
-  }
-
-  &-close-button {
-    cursor: pointer;
-    @include mixins.use-styles(tag, close);
-
-    &:hover {
-      @include mixins.use-styles(tag, close, hover);
-    }
-  }
-
-  &-close-icon {
-    @include mixins.use-size(tag, close, size);
-  }
-
-  &-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    align-self: stretch;
-    flex-wrap: wrap;
-    min-width: 0;
-    position: relative;
-
-    @include mixins.use-styles(tag, container);
-
-    &:not([data-readonly]) {
-      padding-bottom: 0;
-    }
-  }
-}

package/src/SelectTags/index.tsx

@@ -1,192 +0,0 @@
-import { useFroozeClosing } from '../__hooks/use-frooze-closing'
-import type { Option } from '../types'
-import { OptionItem, OptionsList, Popover } from '..'
-import { useMemo, useRef, useState } from 'react'
-import { Icon } from '../Icon'
-import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
-import { attr, contains, getActiveElementByAnotherElement } from '@companix/utils-browser'
-
-export interface SelectTagsProps<T> {
-  options: Option<T>[]
-  onChange: (event: T[]) => void
-  placeholder?: string
-  value: T[]
-  children?: React.ReactNode
-  disabled?: boolean
-  readOnly?: boolean
-  closeAfterSelect?: boolean
-  emptyText?: string
-  size?: 'sm' | 'md' | 'lg'
-  fill?: boolean
-}
-
-export const SelectTags = <T extends string | number>(props: SelectTagsProps<T>) => {
-  const {
-    options: optionsProp,
-    closeAfterSelect,
-    placeholder,
-    onChange,
-    emptyText = 'Ничего не найдено',
-    readOnly,
-    size = 'md',
-    value: values,
-    disabled
-  } = props
-
-  const [inputValue, setInputValue] = useState('')
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listboxRef = useRef<HTMLDivElement>(null)
-  const { popoverRef, froozePopoverPosition, handleAnimationEnd } = useFroozeClosing()
-
-  const store = useMemo(() => {
-    const store = {} as { [value in T]: Option<T> }
-
-    optionsProp.forEach((option) => {
-      store[option.value] = option
-    })
-
-    return store
-  }, [optionsProp])
-
-  const add = (value: T) => {
-    if (values.includes(value)) {
-      return [...values]
-    }
-
-    return [...values, value]
-  }
-
-  const remove = (value: T) => {
-    return values.filter((item) => value !== item)
-  }
-
-  const handleSelect = (value: T[], close: () => void) => {
-    if (closeAfterSelect) {
-      froozePopoverPosition()
-      onChange(value)
-      close()
-    } else {
-      onChange(value)
-    }
-  }
-
-  const options = useMemo(() => {
-    if (!inputValue.trim()) {
-      return optionsProp
-    }
-
-    return optionsProp.filter(({ title }) => {
-      const normalizedTitle = title.toLowerCase()
-      const normalizedQuery = inputValue.trim().toLowerCase()
-
-      return normalizedTitle.indexOf(normalizedQuery) >= 0
-    })
-  }, [inputValue, optionsProp])
-
-  const handleRootClick = (event: React.MouseEvent) => {
-    if (disabled) return
-
-    // Предотвращаем закрытие Popover при клике на форму
-    if (popoverRef.current && popoverRef.current.getAttribute('data-state') === 'open') {
-      event.preventDefault()
-    }
-
-    const activeElement = getActiveElementByAnotherElement(event.currentTarget)
-
-    if (event.defaultPrevented || contains(event.currentTarget, activeElement)) {
-      return
-    }
-
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }
-
-  const handleRootMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Когда клик в сам инпут, не нужно делать preventDefault, так как не будет работать выделение текста
-    if (e.target === inputRef.current) {
-      return
-    }
-    // Делаем preventDefault
-    e.preventDefault()
-  }
-
-  const handleRemove = (e: React.MouseEvent, value: T) => {
-    e.stopPropagation()
-    onChange(remove(value))
-  }
-
-  // const
-
-  return (
-    <Popover
-      minimal
-      ref={popoverRef}
-      sideOffset={0}
-      matchTarget="width"
-      onAnimationEnd={handleAnimationEnd}
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      onCloseAutoFocus={(e) => e.preventDefault()}
-      content={({ close }) => (
-        <OptionsList maxHeight={300}>
-          {options.length === 0 && <div className="select-tags-empty">{emptyText}</div>}
-          {options.map(({ value, title, icon }, i) => (
-            <OptionItem
-              key={`option-item-${value}-${i}`}
-              active={values.includes(value)}
-              onClick={() => handleSelect(add(value), close)}
-              title={title}
-              icon={icon}
-            />
-          ))}
-        </OptionsList>
-      )}
-    >
-      <div
-        className="form"
-        onClick={handleRootClick}
-        onMouseDown={handleRootMouseDown}
-        data-size={size}
-      >
-        <div className="select-tags-container">
-          <div className="select-tags">
-            {values.length > 0 && (
-              <div
-                className="tag-container"
-                ref={listboxRef}
-                role="listbox"
-                data-readonly={attr(readOnly)}
-              >
-                {values.map((value, i) => (
-                  <div key={`tag-option-${value}-${i}`} className="tag">
-                    <span className="tag-name">{store[value].title}</span>
-                    <button className="tag-close-button" onClick={(e) => handleRemove(e, value)}>
-                      <Icon className="tag-close-icon" icon={faClose} size="xxxs" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-            {(!readOnly || values.length === 0) && (
-              <input
-                ref={inputRef}
-                type="text"
-                autoCapitalize="none"
-                autoComplete="off"
-                autoCorrect="off"
-                className="form-input"
-                spellCheck={false}
-                value={inputValue}
-                disabled={disabled}
-                readOnly={readOnly}
-                placeholder={placeholder}
-                onChange={({ target }) => setInputValue(target.value)}
-              />
-            )}
-          </div>
-          <Icon className="expand-icon" icon={faChevronDown} size="xxxs" />
-        </div>
-      </div>
-    </Popover>
-  )
-}

package/src/Spinner/Spinner.scss

@@ -1,14 +0,0 @@
-@keyframes spinner-border {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner-border {
-  display: inline-block;
-  border-style: solid;
-  border-color: currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: 0.75s linear infinite spinner-border;
-}

package/src/Spinner/index.tsx

@@ -1,19 +0,0 @@
-import './Spinner.scss'
-import cn from 'classnames'
-
-interface Props {
-  size?: number
-  width?: number
-  color?: string
-  className?: string
-}
-
-export const Spinner = ({ size = 40, className, width = 4, color = 'inherit' }: Props) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px`, color, borderWidth: `${width}px` }}
-      className={cn('spinner-border', className)}
-      role="status"
-    />
-  )
-}

package/src/Stepper/StepperInput.scss

@@ -1,35 +0,0 @@
-.number-input-container {
-  display: flex;
-  gap: 4px;
-}
-
-.number-stepper {
-  display: flex;
-  flex-direction: column;
-  height: 30px;
-  min-height: 30px;
-  line-height: 30px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 47%);
-  border-radius: 4px;
-
-  &-splitter {
-    height: 1px;
-    background-color: var(--border-color);
-  }
-
-  &-slot {
-    border-radius: 0px;
-    height: 13.5px;
-
-    &[data-slot='decrement'] {
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-
-    &[data-slot='increment'] {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-  }
-}