@vkontakte/vkui 7.3.8 → 7.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.3.8",
+  "version": "7.4.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -74,8 +74,8 @@
     "lint:generated-files": "yarn run -T concurrently 'yarn:lint:generated-files:*'",
     "lint:generated-files:css-custom-medias": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --jsx react-jsx --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
     "lint:generated-files:css-modules": "yarn run generate:css-modules",
-    "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
-    "storybook:build": "yarn run -T cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build",
+    "storybook": "bash -c 'source .env && yarn run -T storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
+    "storybook:build": "yarn run -T storybook build",
     "generate": "yarn run -T concurrently 'yarn:generate:*'",
     "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs",
     "generate:css-modules": "yarn run -T hcm 'src/**/*.css'"
@@ -93,12 +93,9 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.6.12",
-    "@storybook/react-webpack5": "8.6.12",
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.6.12",
     "ts-node": "*"
   },
   "size-limit": [

package/src/components/ActionSheet/ActionSheet.tsx

@@ -30,7 +30,10 @@ export interface ActionSheetProps
       SharedDropdownProps,
       'toggleRef' | 'popupOffsetDistance' | 'placement' | 'allowClickPropagation'
     >,
-    Omit<UseFocusTrapProps, 'onClose' | 'mount' | 'disabled' | 'captureEscapeKeyboardEvent'>,
+    Omit<
+      UseFocusTrapProps,
+      'onClose' | 'mount' | 'disabled' | 'captureEscapeKeyboardEvent' | 'mutationObserverOptions'
+    >,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
   /**
    * Заголовок всплыващего окна.

package/src/components/AppRoot/AppRoot.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { Meta, Title, ArgTypes, Description } from '@storybook/addon-docs/blocks';
 import { AppRoot } from './AppRoot';
 
 <Meta title="Service/AppRoot" />

package/src/components/AppRoot/ScrollContext.tsx

@@ -155,8 +155,8 @@ const _getScroll = ({
     ? [-parseFloat(elementStyles.left || '0'), -parseFloat(elementStyles.top || '0')]
     : [xOffset, yOffset];
   return {
-    x: scrollLeft,
-    y: customCalcY(scrollTop),
+    x: scrollLeft || 0,
+    y: customCalcY(scrollTop) || 0,
   };
 };
 

package/src/components/Banner/Banner.tsx

@@ -5,14 +5,14 @@ import { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { IconButton } from '../IconButton/IconButton';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Banner.module.css';
 
-export interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {
+export interface BannerProps extends Omit<TappableOmitProps, 'title' | 'size'> {
   /**
    * Тип баннера.
    */

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasAlign } from '../../types';
 import { Spinner } from '../Spinner/Spinner';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import '../Tappable/Tappable.module.css';
 import '../Spinner/Spinner.module.css';
 import styles from './Button.module.css';
@@ -83,7 +83,7 @@ export interface VKUIButtonProps extends HasAlign {
   rounded?: boolean;
 }
 
-export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}
+export interface ButtonProps extends Omit<TappableOmitProps, 'size'>, VKUIButtonProps {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Button

package/src/components/Calendar/Calendar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, isSameDate } from '@vkontakte/vkjs';
 import { isSameDay, isSameMonth, startOfMonth } from 'date-fns';
 import { useCalendar } from '../../hooks/useCalendar';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
@@ -220,8 +220,6 @@ export const Calendar = ({
     setNextMonth,
     focusedDay,
     setFocusedDay,
-    focusableDay,
-    setFocusableDay,
     isDayFocused,
     isDayDisabled,
     isMonthDisabled,
@@ -237,6 +235,8 @@ export const Calendar = ({
     minDateTime,
     maxDateTime,
   });
+  // соотвествует дню, на котором можно сфокусироваться с помощью Tab
+  const [focusableDay, setFocusableDay] = React.useState<Date>();
 
   useIsomorphicLayoutEffect(() => {
     if (timeZonedValue) {
@@ -291,10 +291,8 @@ export const Calendar = ({
         actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });
       }
       updateValue(actualDate);
-      setFocusedDay(actualDate);
-      setFocusableDay(actualDate);
     },
-    [timeZonedValue, updateValue, maxDateTime, minDateTime, setFocusedDay, setFocusableDay],
+    [timeZonedValue, updateValue, maxDateTime, minDateTime],
   );
 
   const onDayFocus = React.useCallback(
@@ -304,8 +302,11 @@ export const Calendar = ({
       }
 
       setFocusedDay(date);
+      if (!focusableDay || !isSameDate(date, focusableDay)) {
+        setFocusableDay(date);
+      }
     },
-    [focusedDay, setFocusedDay],
+    [focusableDay, focusedDay, setFocusedDay],
   );
 
   // activeDay это день в календаре соответствующий значению в инпуте

package/src/components/CalendarRange/CalendarRange.tsx

@@ -7,16 +7,13 @@ import {
   isAfter,
   isBefore,
   isSameDay,
-  isSameMonth,
   isWithinInterval,
   startOfDay,
   subMonths,
 } from 'date-fns';
 import { useCalendar } from '../../hooks/useCalendar';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
-import { Keys, pressedKey } from '../../lib/accessibility';
-import { isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';
-import { isHTMLElement } from '../../lib/dom';
+import { isFirstDay, isLastDay } from '../../lib/calendar';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import {
   CalendarDays,
@@ -29,9 +26,11 @@ import {
   type CalendarHeaderTestsProps,
 } from '../CalendarHeader/CalendarHeader';
 import { RootComponent } from '../RootComponent/RootComponent';
+import type { DateRangeType } from './types';
+import { useCalendarKeyboardNavigation, useIsDayFocusable } from './utils';
 import styles from './CalendarRange.module.css';
 
-export type DateRangeType = [Date | null, Date | null];
+export type { DateRangeType };
 
 export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
   /**
@@ -81,6 +80,12 @@ export interface CalendarRangeProps
   disablePickers?: boolean;
   /**
    * `aria-label` для изменения дня.
+   *
+   * @deprecated Since 7.4.0.
+   *
+   * Будет удалeно в **VKUI v8**. Использовалось для задания aria-label для контейнера дней в календаре.
+   * Теперь этот контейнер является таблицей (с помощью role="grid") и
+   * в aria-label рендерится текущий открытый в календаре месяц и год.
    */
   changeDayLabel?: string;
   /**
@@ -113,7 +118,7 @@ const getIsDaySelected = (day: Date, value?: DateRangeType | null) => {
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
 export const CalendarRange = ({
-  value: valueProp,
+  'value': valueProp,
   defaultValue,
   onChange,
   disablePast,
@@ -125,7 +130,7 @@ export const CalendarRange = ({
   nextMonthLabel = 'Следующий месяц',
   changeMonthLabel = 'Изменить месяц',
   changeYearLabel = 'Изменить год',
-  changeDayLabel = 'Изменить день',
+  'aria-label': ariaLabel = 'Календарь',
   prevMonthIcon,
   nextMonthIcon,
   listenDayChangesForUpdate,
@@ -156,7 +161,6 @@ export const CalendarRange = ({
     setFocusedDay,
     isDayFocused,
     isDayDisabled,
-    resetSelectedDay,
     isMonthDisabled,
     isYearDisabled,
   } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
@@ -164,33 +168,19 @@ export const CalendarRange = ({
   const [hintedDate, setHintedDate] = React.useState<DateRangeType>();
   const secondViewDate = addMonths(viewDate, 1);
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
-      const key = pressedKey(event);
-
-      if (key && NAVIGATION_KEYS.includes(key)) {
-        event.preventDefault();
-
-        const newFocusedDay = navigateDate(focusedDay ?? value?.[1], key);
-
-        if (
-          newFocusedDay &&
-          !isSameMonth(newFocusedDay, viewDate) &&
-          !isSameMonth(newFocusedDay, addMonths(viewDate, 1))
-        ) {
-          setViewDate(newFocusedDay);
-        }
-        setFocusedDay(newFocusedDay);
-        return;
-      }
-
-      if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
-        event.preventDefault();
-        event.target.click?.();
-      }
-    },
-    [focusedDay, setFocusedDay, setViewDate, value, viewDate],
-  );
+  const {
+    focusableDayOnFirstCalendar,
+    focusableDayOnSecondCalendar,
+    handleFirstCalendarKeyDown,
+    handleSecondCalendarKeyDown,
+    handleDayFocus,
+  } = useCalendarKeyboardNavigation({
+    focusedDay,
+    setFocusedDay,
+    value,
+    viewDates: [viewDate, secondViewDate],
+    setViewDate,
+  });
 
   const getNewValue = React.useCallback(
     (date: Date): DateRangeType => {
@@ -270,8 +260,41 @@ export const CalendarRange = ({
     [setViewDate],
   );
 
+  const isDayFocusableInFirstCalendar = useIsDayFocusable({
+    value,
+    focusableDayOnFirstCalendar,
+    focusableDayOnSecondCalendar,
+    viewDate,
+    isDayActive,
+  });
+
+  const isDayFocusableInSecondCalendar = useIsDayFocusable({
+    value,
+    focusableDayOnFirstCalendar,
+    focusableDayOnSecondCalendar,
+    viewDate: secondViewDate,
+    isDayActive,
+  });
+
+  const onDayFocus = React.useCallback(
+    (date: Date) => {
+      if (focusedDay && isSameDay(focusedDay, date)) {
+        return;
+      }
+
+      setFocusedDay(date);
+      handleDayFocus(date);
+    },
+    [focusedDay, handleDayFocus, setFocusedDay],
+  );
+
   return (
-    <RootComponent {...props} baseClassName={styles.host} getRootRef={getRootRef}>
+    <RootComponent
+      aria-label={ariaLabel}
+      {...props}
+      baseClassName={styles.host}
+      getRootRef={getRootRef}
+    >
       <div className={styles.inner}>
         <CalendarHeader
           viewDate={viewDate}
@@ -293,8 +316,10 @@ export const CalendarRange = ({
           viewDate={viewDate}
           value={value}
           weekStartsOn={weekStartsOn}
-          onKeyDown={handleKeyDown}
+          onKeyDown={handleFirstCalendarKeyDown}
+          onDayFocus={onDayFocus}
           isDayFocused={isDayFocused}
+          isDayFocusable={isDayFocusableInFirstCalendar}
           onDayChange={onDayChange}
           isDaySelected={isDaySelected}
           isDayActive={isDayActive}
@@ -308,7 +333,6 @@ export const CalendarRange = ({
           isDayDisabled={isDayDisabled}
           listenDayChangesForUpdate={listenDayChangesForUpdate}
           renderDayContent={renderDayContent}
-          aria-label={changeDayLabel}
           dayTestId={dayTestId}
         />
       </div>
@@ -333,9 +357,10 @@ export const CalendarRange = ({
           viewDate={secondViewDate}
           value={value}
           weekStartsOn={weekStartsOn}
-          aria-label={changeDayLabel}
-          onKeyDown={handleKeyDown}
+          onKeyDown={handleSecondCalendarKeyDown}
+          onDayFocus={onDayFocus}
           isDayFocused={isDayFocused}
+          isDayFocusable={isDayFocusableInSecondCalendar}
           onDayChange={onDayChange}
           isDaySelected={isDaySelected}
           isDayActive={isDayActive}
@@ -349,8 +374,6 @@ export const CalendarRange = ({
           isDayDisabled={isDayDisabled}
           listenDayChangesForUpdate={listenDayChangesForUpdate}
           renderDayContent={renderDayContent}
-          tabIndex={0}
-          onBlur={resetSelectedDay}
           dayTestId={dayTestId}
         />
       </div>

package/src/components/CalendarRange/types.ts

@@ -0,0 +1 @@
+export type DateRangeType = [Date | null, Date | null];

package/src/components/CalendarRange/utils.ts

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { isSameDate } from '@vkontakte/vkjs';
+import { isAfter, isBefore, isSameDay, isSameMonth, startOfMonth } from 'date-fns';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';
+import { isHTMLElement } from '../../lib/dom';
+import type { DateRangeType } from './types';
+
+export function useCalendarKeyboardNavigation({
+  focusedDay,
+  value,
+  setFocusedDay,
+  viewDates: [firstCalendarViewDate, secondCalendarViewDate],
+  setViewDate,
+}: {
+  focusedDay: Date | undefined;
+  setViewDate: (date: Date) => void;
+  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  viewDates: [Date, Date];
+  value: DateRangeType | null | undefined;
+}) {
+  // соотвествует дню, на котором можно сфокусироваться с помощью Tab
+  const [focusableDayOnFirstCalendar, setFocusableDayOnFirstCalendar] = React.useState<Date>();
+  const [focusableDayOnSecondCalendar, setFocusableDayOnSecondCalendar] = React.useState<Date>();
+
+  const handleCalendarKeyDown = React.useCallback(
+    (event: React.KeyboardEvent, isFirst: boolean) => {
+      const key = pressedKey(event);
+      if (!key) {
+        return;
+      }
+
+      if (NAVIGATION_KEYS.includes(key)) {
+        event.preventDefault();
+
+        const newFocusedDay = navigateDate(focusedDay ?? value?.[0], key);
+
+        if (
+          newFocusedDay &&
+          !isSameMonth(newFocusedDay, firstCalendarViewDate) &&
+          !isSameMonth(newFocusedDay, secondCalendarViewDate)
+        ) {
+          setViewDate(newFocusedDay);
+        }
+
+        if (isFirst) {
+          if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {
+            setFocusableDayOnFirstCalendar(newFocusedDay);
+          } else if (isAfter(newFocusedDay, firstCalendarViewDate)) {
+            setFocusableDayOnSecondCalendar(newFocusedDay);
+          }
+        } else {
+          if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {
+            setFocusableDayOnSecondCalendar(newFocusedDay);
+          } else if (isBefore(newFocusedDay, secondCalendarViewDate)) {
+            setFocusableDayOnFirstCalendar(newFocusedDay);
+          }
+        }
+
+        setFocusedDay(newFocusedDay);
+
+        return;
+      }
+
+      if (key === Keys.TAB) {
+        setFocusedDay(undefined);
+        if (isFirst) {
+          setFocusableDayOnFirstCalendar(focusedDay);
+        } else {
+          setFocusableDayOnSecondCalendar(focusedDay);
+        }
+
+        return;
+      }
+
+      if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
+        event.preventDefault();
+        event.target.click?.();
+      }
+    },
+    [focusedDay, value, firstCalendarViewDate, secondCalendarViewDate, setFocusedDay, setViewDate],
+  );
+
+  const handleFirstCalendarKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      handleCalendarKeyDown(event, true);
+    },
+    [handleCalendarKeyDown],
+  );
+
+  const handleSecondCalendarKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      handleCalendarKeyDown(event, false);
+    },
+    [handleCalendarKeyDown],
+  );
+
+  const handleDayFocus = React.useCallback(
+    (value: Date) => {
+      if (
+        isSameMonth(firstCalendarViewDate, value) &&
+        (!focusableDayOnFirstCalendar || !isSameDate(focusableDayOnFirstCalendar, value))
+      ) {
+        setFocusableDayOnFirstCalendar(value);
+      }
+      if (
+        isSameMonth(secondCalendarViewDate, value) &&
+        (!focusableDayOnSecondCalendar || !isSameDate(focusableDayOnSecondCalendar, value))
+      ) {
+        setFocusableDayOnSecondCalendar(value);
+      }
+    },
+    [
+      firstCalendarViewDate,
+      focusableDayOnFirstCalendar,
+      focusableDayOnSecondCalendar,
+      secondCalendarViewDate,
+    ],
+  );
+
+  return {
+    focusableDayOnFirstCalendar,
+    focusableDayOnSecondCalendar,
+    handleFirstCalendarKeyDown,
+    handleSecondCalendarKeyDown,
+    handleDayFocus,
+  };
+}
+
+/**
+ * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который
+ * можно попасть с помощью Tab.
+ * Единственный день в таблице календаря у которого есть tabIndex="0"
+ * Чтобы на него можно было попасть из заголовка календаря.
+ */
+export function useIsDayFocusable({
+  value,
+  focusableDayOnFirstCalendar,
+  focusableDayOnSecondCalendar,
+  viewDate,
+  isDayActive,
+}: {
+  value: DateRangeType | null | undefined;
+  focusableDayOnFirstCalendar: Date | undefined;
+  focusableDayOnSecondCalendar: Date | undefined;
+  viewDate: Date;
+  isDayActive: (date: Date) => boolean;
+}) {
+  const isValueVisibleOnCalendar = Boolean(
+    value &&
+      ((value[0] && isSameMonth(value[0], viewDate)) ||
+        (value[1] && isSameMonth(value[1], viewDate))),
+  );
+
+  const isCalendarHasFocusableDay = Boolean(
+    (focusableDayOnFirstCalendar && isSameMonth(focusableDayOnFirstCalendar, viewDate)) ||
+      (focusableDayOnSecondCalendar && isSameMonth(focusableDayOnSecondCalendar, viewDate)),
+  );
+
+  const isDayFocusable = React.useCallback(
+    (day: Date) => {
+      // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
+      if (isCalendarHasFocusableDay) {
+        return Boolean(
+          (focusableDayOnFirstCalendar && isSameDay(focusableDayOnFirstCalendar, day)) ||
+            (focusableDayOnSecondCalendar && isSameDay(focusableDayOnSecondCalendar, day)),
+        );
+      }
+
+      // при открытии календаря focusableDay не определён,
+      // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
+      if (isValueVisibleOnCalendar) {
+        return isDayActive(day);
+      }
+
+      // при переключении месяца любая навигация с помощью Tab начинается
+      // с первого дня месяца.
+      return isSameDay(startOfMonth(viewDate), day);
+    },
+    [
+      isCalendarHasFocusableDay,
+      isValueVisibleOnCalendar,
+      viewDate,
+      isDayActive,
+      focusableDayOnFirstCalendar,
+      focusableDayOnSecondCalendar,
+    ],
+  );
+  return isDayFocusable;
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import { hasReactNode } from '@vkontakte/vkjs';
 import type { HasRootRef } from '../../types';
 import { SelectionControl } from '../SelectionControl/SelectionControl';
 import { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';
-import type { TappableProps } from '../Tappable/Tappable';
+import type { TappableOmitProps } from '../Tappable/Tappable';
 import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';
 import { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';
 
@@ -11,7 +11,7 @@ export interface CheckboxProps
   extends Omit<CheckboxInputProps, 'getRootRef'>,
     HasRootRef<HTMLLabelElement>,
     Pick<
-      TappableProps,
+      TappableOmitProps,
       'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'
     > {
   /**

package/src/components/ChipsInput/useChipsInput.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { escapeRegExp } from '@vkontakte/vkjs';
 import { useCustomEnsuredControl, useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';
 import { simulateReactInput, type SimulateReactInputTargetState } from '../../lib/react';
@@ -36,6 +37,25 @@ export const transformValue = <O extends ChipOption>(
     value: getOptionValue(option),
   }));
 
+function getRegExpFromArray(separators: string[]) {
+  const validSeparators = separators.filter((s) => s.length > 0);
+  if (validSeparators.length === 0) {
+    return null;
+  }
+  const escaped = validSeparators.map((s) => escapeRegExp(s));
+  return new RegExp(`(?:${escaped.join('|')})`);
+}
+
+function getRegexFromDelimiter(delimiter: string | RegExp | string[]): RegExp | null {
+  if (delimiter instanceof RegExp) {
+    return delimiter;
+  }
+  if (typeof delimiter === 'string') {
+    return new RegExp(escapeRegExp(delimiter));
+  }
+  return getRegExpFromArray(delimiter);
+}
+
 interface ToggleOption<O extends ChipOption> {
   (optionsForAdd: Array<O | string>, isNewValue: true): void;
   (optionsForRemove: Array<O | ChipOptionValue>, isNewValue: false): void;
@@ -178,13 +198,14 @@ export const useChipsInput = <O extends ChipOption>({
   const onInputChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, canCreate = true) => {
       const newInputValue = e.target.value;
-      if (!delimiter || !newInputValue.includes(delimiter) || !canCreate) {
+      const delimiterRegex = delimiter ? getRegexFromDelimiter(delimiter) : null;
+      if (!delimiterRegex || !delimiterRegex.test(newInputValue) || !canCreate) {
         setInputChange(e);
         return;
       }
       const values = newInputValue
         .trim()
-        .split(delimiter)
+        .split(delimiterRegex)
         .map((v) => v.trim())
         .filter(Boolean);
 

package/src/components/ChipsInputBase/types.ts

@@ -128,6 +128,10 @@ export interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {
   onInputChange?: OnInputChange;
   /**
    * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.
+   * Принимает:
+   * - `string` - простая строка
+   * - `RegExp` - регулярное выражение
+   * - `string[]` - массив строк, по которым нужно разелять ввод.
    *
    * Работает в двух сценариях:
    * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.
@@ -138,7 +142,7 @@ export interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {
    *    Например, при `delimiter=","` вставка "опция1,опция2,опция3" создаст
    *    три отдельные опции: "опция1", "опция2" и "опция3".
    */
-  delimiter?: string;
+  delimiter?: string | RegExp | string[];
 }
 
 /**

package/src/components/Clickable/Clickable.tsx

@@ -9,7 +9,12 @@ import styles from './Clickable.module.css';
 export interface ClickableProps<T = HTMLElement>
   extends RootComponentProps<T>,
     FocusVisibleModeProps,
-    StateProps {}
+    StateProps {
+  /**
+   * Компонент который будет при передаче `onClick`. По умолчанию `"div"`.
+   */
+  DefaultComponent?: React.ElementType;
+}
 
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
@@ -27,8 +32,10 @@ const NonClickable = <T,>({
   activated,
   activeEffectDelay,
   focusVisibleMode,
+  DefaultComponent,
+  Component,
   ...restProps
-}: ClickableProps<T>) => <RootComponent {...restProps} />;
+}: ClickableProps<T>) => <RootComponent Component={Component || DefaultComponent} {...restProps} />;
 
 /**
  * Проверяем, является ли компонент кликабельным.
@@ -56,11 +63,12 @@ export function checkClickable<T>(props: ClickableProps<T>): boolean {
  */
 function component<T>({
   Component,
+  DefaultComponent = 'div',
   onClick,
   onClickCapture,
   href,
   disabled,
-}: RootComponentProps<T>): RootComponentProps<T> {
+}: ClickableProps<T>): RootComponentProps<T> {
   if (Component !== undefined) {
     return { Component, disabled };
   } else if (href !== undefined) {
@@ -83,7 +91,7 @@ function component<T>({
     };
   } else if (onClick !== undefined || onClickCapture !== undefined) {
     return {
-      Component: 'div',
+      Component: DefaultComponent,
       role: 'button',
       ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),
     };