@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Search/Search.tsx

@@ -1,196 +0,0 @@
-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

@@ -1,94 +0,0 @@
-Горизонтальный контрол, который позволяет выбрать одну опцию-сегмент из представленного списка.
-
-Для чего может быть нужен:
-
-- для навигации — как аналог `<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

@@ -1,42 +0,0 @@
-.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

@@ -1,105 +0,0 @@
-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

@@ -1,30 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,27 +0,0 @@
-Отрисовывает [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

@@ -1,59 +0,0 @@
-.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;
-}

package/src/components/Select/Select.tsx

@@ -1,39 +0,0 @@
-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,
-});