@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/CustomSelect/Readme.md

@@ -0,0 +1,248 @@
+Делает из [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

@@ -0,0 +1,38 @@
+.CustomSelectDropdown__options {
+  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--same-width {
+  width: 100%;
+}
+
+:not(.CustomSelectDropdown__options--same-width) .CustomScrollView__box {
+  padding-right: 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__options--not-adjacent {
+  border-radius: 8px;
+  border: solid 1px var(--field_border);
+}
+
+.CustomSelectDropdown__CustomScrollView {
+  max-height: 160px;
+}
+
+.CustomSelectDropdown__fetching {
+  padding: 12px 0;
+}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -0,0 +1,75 @@
+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;
+  offsetDistance?: number;
+  sameWidth?: boolean;
+  forcePortal?: 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,
+  offsetDistance = 0,
+  sameWidth = true,
+  forcePortal = true,
+  ...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={offsetDistance}
+      sameWidth={sameWidth}
+      onPlacementChange={onPlacementChange}
+      placement={placement}
+      vkuiClass={classNames("CustomSelectDropdown__options", {
+        "CustomSelectDropdown__options--popupDirectionTop": isTop,
+        "CustomSelectDropdown__options--not-adjacent": offsetDistance > 0,
+        "CustomSelectDropdown__options--same-width": sameWidth,
+      })}
+      forcePortal={forcePortal}
+      {...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

@@ -0,0 +1,63 @@
+.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;
+  color: var(--text_primary);
+}
+
+.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

@@ -0,0 +1,88 @@
+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 vkuiClass="CustomSelectOption__description">
+            {description}
+          </Caption>
+        )}
+      </div>
+      <div vkuiClass="CustomSelectOption__after">
+        {hasReactNode(after) && (
+          <div vkuiClass="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

@@ -0,0 +1,33 @@
+Универсальный компонент для отрисовки 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/DateInput/DateInput.css

@@ -0,0 +1,20 @@
+.DateInput__input {
+  flex-grow: 1;
+  margin-left: 10px;
+  margin-right: 14px;
+  font-size: 16px;
+  z-index: 2;
+  cursor: text;
+  white-space: nowrap;
+  user-select: text;
+  font-variant-numeric: tabular-nums;
+}
+
+.DateInput__input-time-divider {
+  letter-spacing: 6px;
+}
+
+.DateInput--sizeY-compact .DateInput__input {
+  font-size: 15px;
+  margin-right: 22px;
+}