`./Select.tsx`
```tsx
import React, { useState, useEffect, useRef } from "react";
import type { MouseEventHandler } from "react";

import { ReactComponent as ArrowDown } from "./assets/arrow-down.svg";
import Styles from "./Select.module.css";

type Option = {
  title: string;
  value: string;
};
type OptionProps = {
  option: Option;
  onClick: (value: Option["value"]) => void;
};
const OptionEl = (props: OptionProps) => {
  const {
    option: { value, title },
    onClick
  } = props;
  const optionRef = useRef<HTMLLIElement>(null);

  const handleClick = (
    clickedValue: Option["value"]
  ): MouseEventHandler<HTMLLIElement> => () => {
    onClick(clickedValue);
  };

  useEffect(() => {
    const option = optionRef.current;
    if (!option) return;
    const handleEnterKeyDown = (event: KeyboardEvent) => {
      if (document.activeElement === option && event.key === "Enter") {
        onClick(value);
      }
    };

    option.addEventListener("keydown", handleEnterKeyDown);
    return () => {
      option.removeEventListener("keydown", handleEnterKeyDown);
    };
  }, [value, onClick]);

  return (
    <li
      className={Styles.option}
      value={value}
      onClick={handleClick(value)}
      tabIndex={0}
      data-testid={`select-option-${value}`}
      ref={optionRef}
    >
      {title}
    </li>
  );
};

type SelectProps = {
  selected: Option | null;
  options: Option[];
  placeholder?: string;
  mode?: "rows" | "cells";
  status?: "default" | "invalid";
  onChange?: (selected: Option["value"]) => void;
  onClose?: () => void;
};

const Select = (props: SelectProps) => {
  const {
    mode = "rows",
    options,
    placeholder,
    status = "default",
    selected,
    onChange,
    onClose
  } = props;
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const placeholderRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      const { target } = event;
      if (target instanceof Node && !rootRef.current?.contains(target)) {
        isOpen && onClose?.();
        setIsOpen(false);
      }
    };

    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, [onClose]);

  useEffect(() => {
    const placeholderEl = placeholderRef.current;
    if (!placeholderEl) return;

    const handleEnterKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Enter") {
        setIsOpen((prev) => !prev);
      }
    };
    placeholderEl.addEventListener("keydown", handleEnterKeyDown);

    return () => {
      placeholderEl.removeEventListener("keydown", handleEnterKeyDown);
    };
  }, []);

  const handleOptionClick = (value: Option["value"]) => {
    setIsOpen(false);
    onChange?.(value);
  };
  const handlePlaceHolderClick: MouseEventHandler<HTMLDivElement> = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <div
      className={Styles.selectWrapper}
      ref={rootRef}
      data-is-active={isOpen}
      data-mode={mode}
      data-testid="selectWrapper"
    >
      <div className={Styles.arrow}>
        <ArrowDown />
      </div>
      <div
        className={Styles.placeholder}
        data-status={status}
        data-selected={!!selected?.value}
        onClick={handlePlaceHolderClick}
        role="button"
        tabIndex={0}
        ref={placeholderRef}
      >
        {selected?.title || placeholder}
      </div>
      {isOpen && (
        <ul className={Styles.select} data-testid="selectDropdown">
          {options.map((option) => (
            <OptionEl
              key={option.value}
              option={option}
              onClick={handleOptionClick}
            />
          ))}
        </ul>
      )}
    </div>
  );
};
```

`./Select.module.scss`
```scss
.selectWrapper {
  position: relative;
  border-radius: 12px;
}

.arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transition: transform 0.2s ease-in-out, margin-top 0.2s ease-in-out;
  margin-top: -12px;
}

.placeholder {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 30px;
  padding: 5px;
  cursor: pointer;
  border: 1px;
  font-family: "SF Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  width: 100%;
  border-radius: 2px;
}

.placeholder[data-status="default"] {
  border: 1px solid rgba(0, 0, 0, 0.6);
}

.placeholder[data-status="invalid"] {
  border: 1px solid rgba(255, 0, 0, 1);
}

.placeholder[data-selected="true"] {
  color: rgb(0, 0, 0);
}

.selectWrapper[data-is-active="true"] .arrow {
  transform: rotate(180deg);
  margin-top: -6px;
}

.selectWrapper[data-is-active="true"] .placeholder {
  border: 1px solid #0022f5;
}

.selectWrapper:not([data-is-active="true"])
  .placeholder:not([data-status="invalid"]):hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.select {
  display: grid;
  position: absolute;
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 10;
  background-color: rgba(255, 255, 255, 1);
}

.option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 30px;
  padding: 5px;
  border: 1px;
  cursor: pointer;
  font-family: "SF Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgb(0, 0, 0);
}

.option[aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.05);
}
.option:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.selectWrapper[data-mode="cells"] .select {
  grid-template-columns: repeat(3, 1fr);
}

.selectWrapper[data-mode="cells"] .option {
  justify-content: center;
}
```

https://react.dev/learn/rendering-lists#why-does-react-need-keys

Demo: https://codesandbox.io/p/sandbox/robzarel-custom-select-c7w69f

Custom Select #reactComponent (v1: css modules)

*Пример того о чем пойдет речь:*

<CardsExample
itemsJson='[
  {"id":0,"title":"Card 1"},
  {"id":1,"title":"Card 2"},
  {"id":2,"title":"Card 3"}
]'
/>

## CSS

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент.

```css
.wrapper {
  display: flex;
  gap: 8px;
  flex-direction: row;
  flex-wrap: nowrap;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  /* NOTE: [1/2] Если нужны первая и последняя по центру */
  padding-left: 10%;
  padding-right: 10%;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

.cardWrapper {
  scroll-snap-align: center;

  /* NOTE: [2/2] Если нужен хвост и перед, но [1/2] выключено */
  min-width: 100%;
  width: 100%;
}

.card {
  height: 100%;
  padding: 8px 8px 8px 8px;
  border-radius: 8px;
  font-size: small;
  border: 1px solid #959eaa;
}
```

## React-компонент с перелистыванием карточек

### `SubjobsExperimentalCards.tsx`
```tsx
import { CSSProperties, memo } from 'react'
import classes from './SubjobsExperimentalCards.module.scss'

const genericMemo: <T>(component: T) => T = memo

type TProps<T> = {
  wrapperStyles?: CSSProperties;
  items: T[];
  cardRenderer: (ps: { itemData: T }) => React.ReactNode;
  getItemKey: (itemData: T) => string;
}

function _SubjobsExperimentalCards<TItem>({
  wrapperStyles,
  items,
  cardRenderer,
  getItemKey,
}: TProps<TItem>) {
  return (
    <>
      {
        items.length > 0 && (
          <div
            style={wrapperStyles}
            className={classes.wrapper}
          >
            {
              items.map((item) => {
                return (
                  <div
                    className={classes.cardWrapper}
                    key={getItemKey(item)}

                  >
                    {cardRenderer({ itemData: item })}
                  </div>
                )
              })
            }
          </div>
        )
      }
    </>
  )
}

export const SubjobsExperimentalCards = genericMemo(_SubjobsExperimentalCards)
```

### Usage
```tsx
<SubjobsExperimentalCards
  items={[
    { id: 1 }
  ]}
  cardRenderer={({ itemData }) => (
    return (
      <div>{itemData.id}</div>
    )
  )}
  getItemKey={(item) => String(item.id)}
/>
```

See also
- https://habr.com/ru/articles/498456/
- https://doka.guide/css/scroll-snap-type/

#cssOnly #reactComponent Компонент с перелистыванием карточек | scroll-snap-type

https://www.npmjs.com/package/json-edit-react

#reactComponent JSON editor reps (open source)

# 2025
- https://codesandbox.io/p/sandbox/react-custom-datepicker-38pmkt?file=%2Fsrc%2Fstyles.css

# 2021
- https://blog.logrocket.com/react-datepicker-217b4aa840da/

#reactComponent | Custom #datepicker #handMade

# [react-modal-sheet](https://www.npmjs.com/package/react-modal-sheet)
```bash
yarn add react-modal-sheet framer-motion
```

React animated bottomsheet | #reactComponent #menu

json objs comparison #reactComponent tst

- 2025 https://habr.com/ru/articles/874826/comments/#comment_27866000
- https://www.npmjs.com/package/keen-slider, [Examples](https://keen-slider.io/examples)
- https://www.npmjs.com/package/embla-carousel, [Examples](https://www.embla-carousel.com/examples/static/)
- **https://github.com/vadymshymko/react-simply-carousel with SSR support**

#reactComponent | Carousel swiper

https://www.npmjs.com/package/react-modal-global

#reactComponent | react-modal-global

https://www.npmjs.com/package/react-final-form

#reactComponent Form

https://github.com/soywod/react-pin-field

PIN field (numeric) #reactComponent

https://github.com/mariofornaroli/y-react-upload-file/blob/main/src/FileItem/FileItem.jsx

reactComponent