@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/CustomSelect/Readme.md

@@ -1,248 +0,0 @@
-Делает из [SelectMimicry](#!/SelectMimicry) селект с выпадающим списком. Используется внутри [Select](#!/Select).
-
-```jsx { "props": { "layout": false, "iframe": false } }
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-    this.users = getRandomUsers(10).map((user) => ({
-      label: user.name,
-      value: user.id,
-      avatar: user.photo_100,
-      description: user.screen_name,
-    }));
-    this.cities = [
-      {
-        label: "Санкт-Петербург",
-        description: "Россия",
-        value: 0,
-      },
-      {
-        label: "Москва",
-        description: "Россия",
-        value: 1,
-      },
-      {
-        label: "Новосибирск",
-        description: "Россия",
-        disabled: true,
-        value: 2,
-      },
-      {
-        label: "Нью-Йорк",
-        description: "США",
-        value: 3,
-      },
-      {
-        label: "Чикаго",
-        description: "США",
-        value: 4,
-      },
-    ];
-
-    this.state = {
-      query: "",
-      remoteQuery: "",
-      newUsers: [],
-      fetching: false,
-      fetchingSearch: false,
-      remoteUsers: [],
-      remoteUsersSearch: [],
-    };
-  }
-
-  get customSearchOptions() {
-    const options = [...this.state.newUsers, ...this.users];
-    if (this.state.query.length > 0) {
-      options.unshift({
-        label: `Добавить пользователя ${this.state.query}`,
-        value: 0,
-      });
-    }
-    return options;
-  }
-
-  render() {
-    return (
-      <View activePanel="profile" id="profile">
-        <Panel id="profile">
-          <PanelHeader>CustomSelect</PanelHeader>
-          <Group separator="hide">
-            <FormItem top="Администратор" bottom="Базовый пример использования">
-              <CustomSelect placeholder="Не выбран" options={this.users} />
-            </FormItem>
-            <FormItem
-              top="Администратор"
-              bottom="Кастомный дизайн элементов списка"
-            >
-              <CustomSelect
-                placeholder="Не выбран"
-                options={this.users}
-                renderOption={({ option, ...restProps }) => (
-                  <CustomSelectOption
-                    {...restProps}
-                    before={<Avatar size={24} src={option.avatar} />}
-                    description={option.description}
-                  />
-                )}
-              />
-            </FormItem>
-            <Header>Поиск</Header>
-            <FormItem top="Администратор" bottom="Поиск по списку">
-              <CustomSelect
-                placeholder="Введите имя пользователя"
-                searchable
-                options={this.users}
-              />
-            </FormItem>
-            <FormItem top="Город" bottom="Кастомный алгоритм поиска">
-              <CustomSelect
-                placeholder="Введите название города или страны"
-                searchable
-                filterFn={(value, option) =>
-                  option.label.toLowerCase().includes(value.toLowerCase()) ||
-                  option.description.toLowerCase().includes(value.toLowerCase())
-                }
-                renderOption={({ option, ...restProps }) => (
-                  <CustomSelectOption
-                    {...restProps}
-                    description={option.description}
-                  />
-                )}
-                options={this.cities}
-              />
-            </FormItem>
-            <FormItem
-              top="Администратор"
-              bottom="Кастомное поведение при поиске"
-            >
-              <CustomSelect
-                placeholder="Введите имя пользователя"
-                searchable
-                onInputChange={(e) => {
-                  this.setState({ query: e.target.value });
-                }}
-                options={this.customSearchOptions}
-                renderOption={({ option, ...restProps }) => (
-                  <CustomSelectOption {...restProps}>
-                    {option.value === 0 ? (
-                      <span style={{ color: "var(--accent)" }}>
-                        {option.label}
-                      </span>
-                    ) : (
-                      option.label
-                    )}
-                  </CustomSelectOption>
-                )}
-                onChange={(e) => {
-                  if (e.target.value === "0") {
-                    const query = this.state.query;
-                    this.setState(
-                      {
-                        newUsers: [
-                          ...this.state.newUsers,
-                          { label: query, value: query },
-                        ],
-                        query: "",
-                      },
-                      () => {
-                        this.setState({ value: query });
-                      }
-                    );
-                  } else {
-                    this.setState({
-                      query: "",
-                      value: e.target.value,
-                    });
-                  }
-                }}
-                value={this.state.value}
-              />
-            </FormItem>
-            <Header>Асинхронная загрузка списка</Header>
-            <FormItem top="Администратор">
-              <CustomSelect
-                placeholder="Не выбран"
-                onOpen={() => {
-                  if (this.state.remoteUsers.length === 0) {
-                    this.setState({ fetching: true });
-                    setTimeout(() => {
-                      this.setState({
-                        fetching: false,
-                        remoteUsers: getRandomUsers(10).map((user) => ({
-                          label: user.name,
-                          value: user.id,
-                          avatar: user.photo_100,
-                        })),
-                      });
-                    }, 1500);
-                  }
-                }}
-                fetching={this.state.fetching}
-                options={this.state.remoteUsers}
-              />
-            </FormItem>
-            <FormItem top="Администратор" bottom="Асинхронный поиск">
-              <CustomSelect
-                placeholder="Введите имя пользователя"
-                searchable
-                onInputChange={(e) => {
-                  const remoteQuery = e.target.value;
-                  clearTimeout(this.timeout);
-                  if (remoteQuery.length < 3) {
-                    this.setState({
-                      remoteQuery,
-                      fetchingSearch: false,
-                      remoteUsersSearch: [],
-                    });
-                  } else {
-                    this.setState({ remoteQuery, fetchingSearch: true });
-                    this.timeout = setTimeout(() => {
-                      this.setState({
-                        fetchingSearch: false,
-                        remoteUsersSearch: getRandomUsers(10).map((user) => ({
-                          label: user.name,
-                          value: user.id,
-                          avatar: user.photo_100,
-                        })),
-                      });
-                    }, 1500);
-                  }
-                }}
-                onClose={() => {
-                  clearTimeout(this.timeout);
-                  this.setState({ fetchingSearch: false, remoteQuery: "" });
-                }}
-                filterFn={false}
-                options={this.state.remoteUsersSearch}
-                fetching={this.state.fetchingSearch}
-                renderDropdown={
-                  !this.state.fetchingSearch &&
-                  (({ defaultDropdownContent }) => {
-                    if (this.state.remoteQuery.length < 3) {
-                      return (
-                        <Text
-                          style={{
-                            padding: 12,
-                            color: "var(--text_secondary)",
-                          }}
-                          weight="regular"
-                        >
-                          Нужно ввести хотя бы три символа
-                        </Text>
-                      );
-                    } else {
-                      return defaultDropdownContent;
-                    }
-                  })
-                }
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -1,26 +0,0 @@
-.CustomSelectDropdown__options {
-  width: 100%;
-  overflow: hidden;
-  background-color: var(--modal_card_background);
-  box-sizing: border-box;
-  border: solid 1px var(--field_border);
-  border-top: 0;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
-  border-radius: 0 0 8px 8px;
-}
-
-.CustomSelectDropdown__options--popupDirectionTop {
-  bottom: 100%;
-  border-radius: 8px 8px 0 0;
-  border-top: unset;
-  border-bottom: 0;
-  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
-}
-
-.CustomSelectDropdown__CustomScrollView {
-  max-height: 160px;
-}
-
-.CustomSelectDropdown__fetching {
-  padding: 12px 0;
-}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-import CustomScrollView from "../CustomScrollView/CustomScrollView";
-import { classNames } from "../../lib/classNames";
-import { Popper, Placement } from "../Popper/Popper";
-import Spinner from "../Spinner/Spinner";
-import { HasRef } from "../../types";
-import "./CustomSelectDropdown.css";
-
-export interface CustomSelectDropdownProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasRef<HTMLDivElement> {
-  targetRef: React.RefObject<HTMLElement>;
-  placement?: Placement;
-  scrollBoxRef: React.Ref<HTMLDivElement>;
-  fetching?: boolean;
-  onPlacementChange?: (placement?: Placement) => void;
-}
-
-const calcIsTop = (placement?: Placement) => placement?.includes("top");
-
-export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
-  children,
-  targetRef,
-  scrollBoxRef,
-  placement,
-  fetching,
-  onPlacementChange: parentOnPlacementChange,
-  ...restProps
-}) => {
-  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
-
-  const onPlacementChange = React.useCallback(
-    ({ placement }: { placement?: Placement }) => {
-      setIsTop(calcIsTop(placement));
-      parentOnPlacementChange?.(placement);
-    },
-    [parentOnPlacementChange, setIsTop]
-  );
-
-  return (
-    <Popper
-      targetRef={targetRef}
-      offsetDistance={0}
-      sameWidth
-      onPlacementChange={onPlacementChange}
-      placement={placement}
-      vkuiClass={classNames("CustomSelectDropdown__options", {
-        "CustomSelectDropdown__options--popupDirectionTop": isTop,
-      })}
-      {...restProps}
-    >
-      <CustomScrollView
-        boxRef={scrollBoxRef}
-        vkuiClass="CustomSelectDropdown__CustomScrollView"
-      >
-        {fetching ? (
-          <div vkuiClass="CustomSelectDropdown__fetching">
-            <Spinner size="small" />
-          </div>
-        ) : (
-          children
-        )}
-      </CustomScrollView>
-    </Popper>
-  );
-};

package/src/components/CustomSelectOption/CustomSelectOption.css

@@ -1,62 +0,0 @@
-.CustomSelectOption {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  box-sizing: border-box;
-  padding: 8px 12px;
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-}
-
-.CustomSelectOption--sizeY-regular {
-  min-height: 44px;
-}
-
-.CustomSelectOption--disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.CustomSelectOption--hover {
-  background-color: var(--button_muted_background);
-}
-
-.CustomSelectOption__before {
-  flex-shrink: 0;
-  margin-right: 7px;
-}
-
-.CustomSelectOption__main {
-  flex-grow: 1;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.CustomSelectOption__children {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.CustomSelectOption__after {
-  margin-left: 8px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.CustomSelectOption__description {
-  color: var(--text_secondary);
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.CustomSelectOption__selectedIcon {
-  color: var(--accent);
-}
-
-.CustomSelectOption__selectedIcon:not(:first-child) {
-  margin-left: 8px;
-}

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-import { Icon16Done } from "@vkontakte/icons";
-import { classNames } from "../../lib/classNames";
-import { hasReactNode } from "../../lib/utils";
-import Text from "../Typography/Text/Text";
-import Caption from "../Typography/Caption/Caption";
-import { HasRootRef } from "../../types";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { warnOnce } from "../../lib/warnOnce";
-import "./CustomSelectOption.css";
-
-export interface CustomSelectOptionProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {
-  option?: any;
-  selected?: boolean;
-  focused?: boolean;
-  hovered?: boolean;
-  before?: React.ReactNode;
-  after?: React.ReactNode;
-  description?: React.ReactNode;
-  disabled?: boolean;
-}
-
-const warn = warnOnce("CustomSelectOption");
-
-const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
-  children,
-  hovered,
-  selected,
-  before,
-  after,
-  option,
-  description,
-  disabled,
-  ...restProps
-}: CustomSelectOptionProps) => {
-  const title = typeof children === "string" ? children : undefined;
-  const { sizeY } = useAdaptivity();
-
-  if (!!option && process.env.NODE_ENV === "development") {
-    warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
-  }
-
-  return (
-    <Text
-      {...restProps}
-      Component="div"
-      weight="regular"
-      role="option"
-      title={title}
-      aria-disabled={disabled}
-      aria-selected={selected}
-      vkuiClass={classNames(
-        "CustomSelectOption",
-        `CustomSelectOption--sizeY-${sizeY}`,
-        {
-          "CustomSelectOption--hover": hovered && !disabled,
-          "CustomSelectOption--selected": selected,
-          "CustomSelectOption--disabled": disabled,
-        }
-      )}
-    >
-      {hasReactNode(before) && (
-        <div vkuiClass="CustomSelectOption__before">{before}</div>
-      )}
-      <div vkuiClass="CustomSelectOption__main">
-        <div vkuiClass="CustomSelectOption__children">{children}</div>
-        {hasReactNode(description) && (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="CustomSelectOption__description"
-          >
-            {description}
-          </Caption>
-        )}
-      </div>
-      <div vkuiClass="CustomSelectOption__after">
-        {hasReactNode(after) && (
-          <div className="CustomSelectOption__afterIn">{after}</div>
-        )}
-        {selected && (
-          <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />
-        )}
-      </div>
-    </Text>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default CustomSelectOption;

package/src/components/CustomSelectOption/Readme.md

@@ -1,33 +0,0 @@
-Унивирсальный компонент для отрисовки option в кастомных селектах.
-Используется внутри [CustomSelect](#!/CustomSelect), [ChipsSelect](#!/ChipsSelect).
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ margin: 50, width: 320, background: "var(--background_page)" }}>
-  <CustomSelectOption style={{ background: "var(--background_content)" }}>
-    Дмитрий Безуглый
-  </CustomSelectOption>
-  <Header>description</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    description="Россия, Санкт-Петербург"
-  >
-    Вадим Дорохов
-  </CustomSelectOption>
-  <Header>before</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    before={<Avatar size={20} />}
-  >
-    Иван Барышев
-  </CustomSelectOption>
-  <Header>selected</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    selected
-  >
-    Владимир Клепов
-  </CustomSelectOption>
-  <Header>hovered</Header>
-  <CustomSelectOption hovered>Игорь Федоров</CustomSelectOption>
-</div>
-```

package/src/components/DatePicker/DatePicker.css

@@ -1,30 +0,0 @@
-.DatePicker {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.DatePicker__container {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-}
-
-.DatePicker__day {
-  min-width: 72px;
-}
-
-.DatePicker__month {
-  min-width: 0;
-  display: flex;
-  flex: 1 0 0;
-  padding: 0 8px;
-}
-
-.DatePicker__year {
-  min-width: 92px;
-}
-
-.DatePicker__monthSelect {
-  width: 100%;
-}