@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Search/Search.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { withPlatform } from "../../hoc/withPlatform";
+import { getClassName } from "../../helpers/getClassName";
+import {
+  Icon16SearchOutline,
+  Icon16Clear,
+  Icon24Cancel,
+} from "@vkontakte/icons";
+import { IOS, VKCOM, ANDROID } from "../../lib/platform";
+import { HasPlatform, HasRef } from "../../types";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { VKUITouchEvent } from "../../lib/touch";
+import { noop } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Title from "../Typography/Title/Title";
+import Headline from "../Typography/Headline/Headline";
+import Separator from "../Separator/Separator";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import "./Search.css";
+
+export type InputRef = (element: HTMLInputElement) => void;
+
+interface SearchPlaceholderTypographyProps
+  extends HasPlatform,
+    React.HTMLAttributes<HTMLElement> {}
+
+const SearchPlaceholderTypography: React.FC<
+  SearchPlaceholderTypographyProps
+> = ({ platform, children, ...restProps }) => {
+  switch (platform) {
+    case IOS:
+      return (
+        <Title {...restProps} level="3" weight="3">
+          {children}
+        </Title>
+      );
+    case VKCOM:
+      return (
+        <Text {...restProps} weight="regular">
+          {children}
+        </Text>
+      );
+    case ANDROID:
+    default:
+      return (
+        <Headline {...restProps} weight="regular">
+          {children}
+        </Headline>
+      );
+  }
+};
+
+export interface SearchProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasPlatform {
+  /**
+   * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
+   */
+  after?: React.ReactNode;
+  before?: React.ReactNode;
+  icon?: React.ReactNode;
+  onIconClick?: (e: VKUITouchEvent) => void;
+  defaultValue?: string;
+}
+
+const Search: React.FC<SearchProps> = ({
+  before,
+  className,
+  defaultValue,
+  placeholder,
+  after,
+  getRef,
+  platform,
+  icon,
+  onIconClick = noop,
+  style,
+  ...inputProps
+}) => {
+  const inputRef = useExternRef(getRef);
+  const [isFocused, setFocused] = React.useState(false);
+  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });
+
+  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    inputProps.onFocus && inputProps.onFocus(e);
+  };
+
+  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    setFocused(false);
+    inputProps.onBlur && inputProps.onBlur(e);
+  };
+
+  const onCancel = React.useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value"
+    )?.set;
+    nativeInputValueSetter?.call(inputRef.current, "");
+
+    const ev2 = new Event("input", { bubbles: true });
+    inputRef.current?.dispatchEvent(ev2);
+  }, [inputRef]);
+
+  const onIconClickStart = React.useCallback(
+    (e: TouchEvent) => onIconClick(e.originalEvent),
+    [onIconClick]
+  );
+
+  const onIconCancelClickStart = React.useCallback(
+    (e: TouchEvent) => {
+      e.originalEvent.preventDefault();
+      inputRef.current?.focus();
+      onCancel();
+    },
+    [inputRef, onCancel]
+  );
+
+  return (
+    <div
+      vkuiClass={classNames(getClassName("Search", platform), {
+        "Search--focused": isFocused,
+        "Search--has-value": !!value,
+        "Search--has-after": !!after,
+        "Search--has-icon": !!icon,
+      })}
+      className={className}
+      style={style}
+    >
+      <div vkuiClass="Search__in">
+        <div vkuiClass="Search__width" />
+        <label vkuiClass="Search__control">
+          <input
+            type="search"
+            {...inputProps}
+            ref={inputRef}
+            vkuiClass="Search__input"
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onChange={onChange}
+            value={value}
+          />
+          {platform === IOS && after && (
+            <div vkuiClass="Search__after-width">{after}</div>
+          )}
+          <div vkuiClass="Search__placeholder">
+            <div vkuiClass="Search__placeholder-in">
+              {before}
+              <SearchPlaceholderTypography
+                vkuiClass="Search__placeholder-text"
+                platform={platform}
+              >
+                {placeholder}
+              </SearchPlaceholderTypography>
+            </div>
+            {isFocused && platform === IOS && after && (
+              <div vkuiClass="Search__after-width">{after}</div>
+            )}
+          </div>
+        </label>
+        <div vkuiClass="Search__after" onClick={onCancel}>
+          <div vkuiClass="Search__icons">
+            {icon && (
+              <Touch onStart={onIconClickStart} vkuiClass="Search__icon">
+                {icon}
+              </Touch>
+            )}
+            {!!value && (
+              <Touch onStart={onIconCancelClickStart} vkuiClass="Search__icon">
+                {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}
+              </Touch>
+            )}
+          </div>
+          {platform === IOS && after && (
+            <div vkuiClass="Search__after-in">{after}</div>
+          )}
+        </div>
+      </div>
+      {platform === VKCOM && <Separator vkuiClass="Search__separator" wide />}
+    </div>
+  );
+};
+
+Search.defaultProps = {
+  autoComplete: "off",
+  defaultValue: "",
+  placeholder: "Поиск",
+  after: "Отмена",
+  before: <Icon16SearchOutline />,
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withPlatform(Search);

package/src/components/SegmentedControl/Readme.md

@@ -0,0 +1,94 @@
+Горизонтальный контрол, который позволяет выбрать одну опцию-сегмент из представленного списка.
+
+Для чего может быть нужен:
+
+- для навигации — как аналог `<Tabs/>`;
+- в формах — как аналог `<RadioGroup/>`.
+
+Сегменты, как кнопки, могут содержать текст и/или иконки.
+
+Сегментов не должно быть много: чем они больше — тем проще между ними переключаться. [Apple ограничивает количество сегментов на iPhone пятью](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/).
+
+```jsx
+const [reportType, changeReportType] = React.useState("idea");
+const [selectedSex, changeSelectedSex] = React.useState();
+
+<View activePanel="progress">
+  <Panel id="progress">
+    <PanelHeader>SegmentedControl</PanelHeader>
+    <Group header={<Header subtitle="Режим просмотра">Навигация</Header>}>
+      <Div>
+        <SegmentedControl
+          options={[
+            {
+              label: <Icon24List aria-hidden="true" />,
+              value: "list",
+              "aria-label": "Список",
+            },
+            {
+              label: <Icon16GridOfFour aria-hidden="true" />,
+              value: "grid",
+              "aria-label": "Плитки",
+            },
+          ]}
+        />
+      </Div>
+    </Group>
+    <Group header={<Header>Форма</Header>}>
+      <FormItem
+        top="Тип репорта"
+        bottom={`Controlled; name="report-type", size="m"`}
+      >
+        <SegmentedControl
+          size="m"
+          name="report-type"
+          value={reportType}
+          onChange={(value) => changeReportType(value)}
+          options={[
+            {
+              label: "Баг",
+              value: "bug",
+            },
+            {
+              label: "Идея",
+              value: "idea",
+            },
+            {
+              label: "Другое",
+              value: "other",
+            },
+          ]}
+        />
+      </FormItem>
+      <FormItem
+        top={
+          <React.Fragment>
+            Пол{selectedSex && <span>: {selectedSex}</span>}
+          </React.Fragment>
+        }
+        bottom={`Uncontrolled; name="sex", defaultValue="none", size="l"`}
+      >
+        <SegmentedControl
+          name="sex"
+          defaultValue="none"
+          onChange={(value) => changeSelectedSex(value)}
+          options={[
+            {
+              label: "Женский",
+              value: "female",
+            },
+            {
+              label: "Мужской",
+              value: "male",
+            },
+            {
+              label: "Любой",
+              value: "none",
+            },
+          ]}
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>;
+```

package/src/components/SegmentedControl/SegmentedControl.css

@@ -0,0 +1,42 @@
+.SegmentedControl {
+  height: 36px;
+  padding: 2px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_secondary);
+  box-sizing: border-box;
+}
+
+.SegmentedControl--l {
+  height: 44px;
+}
+
+.SegmentedControl__in {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: all 100ms ease-out;
+  border-radius: inherit;
+}
+
+.SegmentedControl__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--vkui--color_background_modal);
+  transition: transform 150ms;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
+    0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+}
+
+.SegmentedControl__option {
+  position: relative;
+  flex: 1;
+  display: block;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { generateRandomId, noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
+import { HasRootRef } from "../../types";
+import "./SegmentedControl.css";
+
+export type SegmentedControlValue = string | number | undefined;
+
+export interface SegmentedControlOptionInterface
+  extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
+  label: React.ReactChild;
+  value: SegmentedControlValue;
+}
+
+export interface SegmentedControlProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    HasRootRef<HTMLDivElement> {
+  options: SegmentedControlOptionInterface[];
+  size?: "m" | "l";
+  name?: string;
+  onChange?: (value: SegmentedControlValue) => void;
+  value?: SegmentedControlValue;
+  defaultValue?: SegmentedControlValue;
+}
+
+const warn = warnOnce("SegmentedControl");
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  size = "l",
+  name,
+  options,
+  getRootRef,
+  onChange = noop,
+  value,
+  defaultValue,
+  children,
+  ...restProps
+}) => {
+  let initialValue = defaultValue ?? value;
+
+  if (!initialValue) {
+    initialValue = options[0]?.value;
+  }
+
+  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);
+  const [activeValue, updateActiveValue] =
+    React.useState<SegmentedControlValue>(initialValue);
+
+  const nameRef = React.useRef<string>(name ?? generateRandomId());
+
+  useIsomorphicLayoutEffect(() => {
+    const _activeOptionIdx = options.findIndex(
+      (option) => option.value === activeValue
+    );
+
+    if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
+      warn("defaultValue: такого значения нет среди опций!");
+    }
+
+    updateActiveOptionIdx(_activeOptionIdx);
+  }, [activeValue, options]);
+
+  const translateX = `translateX(${100 * activeOptionIdx}%)`;
+
+  const handleOnChange = (value: SegmentedControlValue) => {
+    updateActiveValue(value);
+    onChange(value);
+  };
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames("SegmentedControl", `SegmentedControl--${size}`)}
+      ref={getRootRef}
+    >
+      <div role="radiogroup" vkuiClass="SegmentedControl__in">
+        {activeOptionIdx > -1 && (
+          <div
+            aria-hidden="true"
+            vkuiClass="SegmentedControl__slider"
+            style={{
+              width: `${100 / options.length}%`,
+              transform: translateX,
+              WebkitTransform: translateX,
+            }}
+          />
+        )}
+        {options.map(({ label, ...optionProps }) => (
+          <SegmentedControlOption
+            key={`${optionProps.value}`}
+            {...optionProps}
+            vkuiClass="SegmentedControl__option"
+            name={nameRef.current}
+            checked={activeValue === optionProps.value}
+            onChange={() => handleOnChange(optionProps.value)}
+          >
+            {label}
+          </SegmentedControlOption>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css

@@ -0,0 +1,30 @@
+.SegmentedControlOption {
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--vkui--color_text_primary);
+  transition: color 100ms ease-out;
+  user-select: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: none;
+}
+
+.SegmentedControlOption .Icon {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.SegmentedControlOption:hover {
+  opacity: 0.5;
+}
+
+.SegmentedControlOption__content {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+}

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useFocusVisible } from "../../../hooks/useFocusVisible";
+import { callMultiple } from "../../../lib/callMultiple";
+import { classNames } from "../../../lib/classNames";
+import { FocusVisible } from "../../FocusVisible/FocusVisible";
+import Text from "../../Typography/Text/Text";
+import {
+  VisuallyHiddenInput,
+  VisuallyHiddenInputProps,
+} from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import "./SegmentedControlOption.css";
+
+export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
+  className,
+  style,
+  children,
+  ...restProps
+}) => {
+  const { focusVisible, onBlur, onFocus } = useFocusVisible();
+
+  return (
+    <label
+      className={className}
+      style={style}
+      vkuiClass={classNames("SegmentedControlOption", {
+        "SegmentedControlOption--checked": restProps.checked,
+        "SegmentedControlOption--focus-visible": focusVisible,
+      })}
+    >
+      <VisuallyHiddenInput
+        {...restProps}
+        type="radio"
+        onBlur={callMultiple(onBlur, restProps.onBlur)}
+        onFocus={callMultiple(onFocus, restProps.onFocus)}
+      />
+      <Text vkuiClass="SegmentedControlOption__content" weight="medium">
+        {children}
+      </Text>
+      <FocusVisible mode="inside" />
+    </label>
+  );
+};

package/src/components/Select/Readme.md

@@ -0,0 +1,27 @@
+Отрисовывает [CustomSelect](#!/CustomSelect), если есть мышка, либо [NativeSelect](#!/NativeSelect)
+
+```jsx
+<View activePanel="select">
+  <Panel id="select">
+    <PanelHeader>Select</PanelHeader>
+    <Group>
+      <FormItem top="Администратор">
+        <Select
+          placeholder="Не выбран"
+          options={getRandomUsers(10).map((user) => ({
+            label: user.name,
+            value: user.id,
+            avatar: user.photo_100,
+          }))}
+          renderOption={({ option, ...restProps }) => (
+            <CustomSelectOption
+              {...restProps}
+              before={<Avatar size={24} src={option.avatar} />}
+            />
+          )}
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/Select/Select.css

@@ -0,0 +1,64 @@
+.Select {
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.Select__el {
+  display: block;
+  position: absolute;
+  appearance: none;
+  border: none;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 3;
+  font-size: 16px;
+}
+
+.Select__container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 11px;
+  color: var(--text_primary);
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+}
+
+.Select__title {
+  display: block;
+}
+
+.Select:not(.Select--multiline) .Select__title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.Select--not-selected .Select__title {
+  color: var(--field_text_placeholder);
+}
+
+.Select--align-right .Select__title {
+  text-align: right;
+}
+
+.Select--align-center .Select__title {
+  text-align: center;
+}
+
+/**
+ * sizeY === 'compact'
+ */
+.Select--sizeY--compact .Select__container {
+  padding: 7px 11px;
+}
+
+.Select--sizeY--compact .Select__container--plain,
+.Select__container--plain {
+  padding: 0 6px 0 8px;
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import NativeSelect from "../NativeSelect/NativeSelect";
+import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+
+export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
+
+const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
+  hasMouse,
+  ...props
+}: SelectProps) => {
+  // Use custom select if device has connected a mouse
+  if (hasMouse) {
+    const { children, ...restProps } = props;
+
+    return <CustomSelect {...restProps} />;
+  }
+
+  const { options = [], popupDirection, renderOption, ...restProps } = props;
+
+  return (
+    <NativeSelect {...restProps}>
+      {options.map(({ label, value }) => (
+        <option value={value} key={`${value}`}>
+          {label}
+        </option>
+      ))}
+    </NativeSelect>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Select, {
+  hasMouse: true,
+});