@vkontakte/vkui 7.7.0 → 7.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.7.0",
+  "version": "7.7.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -276,7 +276,11 @@ export const CalendarHeader = ({
               forceDropdownPortal={false}
               selectType="accent"
               aria-label={changeYearLabel}
-              data-testid={yearDropdownTestId}
+              data-testid={
+                typeof yearDropdownTestId === 'string'
+                  ? yearDropdownTestId
+                  : yearDropdownTestId?.(currentYear)
+              }
               onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}
             />
           </div>

package/src/components/DateInput/DateInput.module.css

@@ -9,6 +9,14 @@
   --vkui_internal--DateInput_input_margin_inline_end: 14px;
 }
 
+.hasBefore .wrapper {
+  --vkui_internal--DateInput_input_margin_inline_start: 0px;
+}
+
+.hasAfter .wrapper {
+  --vkui_internal--DateInput_input_margin_inline_end: 0px;
+}
+
 .input {
   z-index: var(--vkui_internal--z_index_form_field_element);
   display: block;
@@ -48,12 +56,12 @@
   letter-spacing: 6px !important;
 }
 
-.sizeYCompact .input {
-  margin-inline-end: 22px;
+.sizeYCompact:not(.hasAfter) .wrapper {
+  --vkui_internal--DateInput_input_margin_inline_end: 22px;
 }
 
 @media (--sizeY-compact) {
-  .sizeYNone .input {
+  .sizeYNone:not(.hasAfter) .wrapper {
     --vkui_internal--DateInput_input_margin_inline_end: 22px;
   }
 }

package/src/components/DateInput/DateInput.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./DateInput.module.css"],"names":["wrapper","input","hidden","customValue","inputTimeDivider","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,S,WAAA;AAAA,E,aAWAC,O,WAXA;AAAA,E,aAwBAC,Q,WAxBA;AAAA,E,aA4BAC,a,WA5BA;AAAA,E,aA6CAC,kB,WA7CA;AAAA,E,aAkDAC,c,WAlDA;AAAA,E,aAkDcJ,O,WAlDd;AAAA,E,aAuDEK,W,WAvDF;AAAA,E,aAuDaL,O,WAvDb;AAAA;AAAA","file":"DateInput.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./DateInput.module.css"],"names":["wrapper","hasBefore","hasAfter","input","hidden","customValue","inputTimeDivider","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,S,WAAA;AAAA,E,aAWAC,W,WAXA;AAAA,E,aAWWD,S,WAXX;AAAA,E,aAeAE,U,WAfA;AAAA,E,aAeUF,S,WAfV;AAAA,E,aAmBAG,O,WAnBA;AAAA,E,aAgCAC,Q,WAhCA;AAAA,E,aAoCAC,a,WApCA;AAAA,E,aAqDAC,kB,WArDA;AAAA,E,aA0DAC,c,WA1DA;AAAA,E,aA0DkBL,U,WA1DlB;AAAA,E,aA0D6BF,S,WA1D7B;AAAA,E,aA+DEQ,W,WA/DF;AAAA,E,aA+DiBN,U,WA/DjB;AAAA,E,aA+D4BF,S,WA/D5B;AAAA;AAAA","file":"DateInput.module.css.d.ts","sourceRoot":""}

package/src/components/DateInput/DateInput.tsx

@@ -283,6 +283,7 @@ export const DateInput = ({
   readOnly,
   'disableCalendar': disableCalendarProp = false,
   'aria-label': ariaLabel = '',
+  before,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -431,16 +432,25 @@ export const DateInput = ({
     }
   }, [handleFieldEnter, openCalendar, accessible]);
 
+  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
+  const showClearButton = value && !readOnly;
+
   return (
     <FormField
       style={style}
-      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}
+      className={classNames(
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        !!before && styles.hasBefore,
+        (showCalendarButton || showClearButton) && styles.hasAfter,
+        className,
+      )}
       getRootRef={handleRootRef}
       role="group"
       aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}
+      before={before}
       after={
         <React.Fragment>
-          {!disableCalendar && (accessible || (!accessible && !value)) ? (
+          {showCalendarButton ? (
             <IconButton
               hoverMode="opacity"
               label={showCalendarLabel}
@@ -450,7 +460,7 @@ export const DateInput = ({
               <Icon20CalendarOutline />
             </IconButton>
           ) : null}
-          {value && !readOnly ? (
+          {showClearButton ? (
             <IconButton
               hoverMode="opacity"
               label={clearFieldLabel}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -26,12 +26,11 @@ import { NumberInputLike } from '../NumberInputLike/NumberInputLike';
 import { Popper } from '../Popper/Popper';
 import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
-import styles from './DateRangeInput.module.css';
 import dateInputStyles from '../DateInput/DateInput.module.css';
 
 const sizeYClassNames = {
-  none: styles.sizeYNone,
-  compact: styles.sizeYCompact,
+  none: dateInputStyles.sizeYNone,
+  compact: dateInputStyles.sizeYCompact,
 };
 
 type DateTestsProps = {
@@ -261,6 +260,7 @@ export const DateRangeInput = ({
   accessible,
   readOnly,
   'disableCalendar': disableCalendarProp = false,
+  before,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -417,16 +417,25 @@ export const DateRangeInput = ({
     }
   }, [handleFieldEnter, openCalendar, accessible]);
 
+  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));
+  const showClearButton = value && !readOnly;
+
   return (
     <FormField
       style={style}
-      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}
+      className={classNames(
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        !!before && dateInputStyles.hasBefore,
+        (showCalendarButton || showClearButton) && dateInputStyles.hasAfter,
+        className,
+      )}
       getRootRef={handleRootRef}
       role="group"
       aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}
+      before={before}
       after={
         <>
-          {!disableCalendar && (accessible || (!accessible && !value)) ? (
+          {showCalendarButton ? (
             <IconButton
               hoverMode="opacity"
               label={showCalendarLabel}
@@ -436,7 +445,7 @@ export const DateRangeInput = ({
               <Icon20CalendarOutline />
             </IconButton>
           ) : null}
-          {value && !readOnly ? (
+          {showClearButton ? (
             <IconButton
               hoverMode="opacity"
               label={clearFieldLabel}

package/src/components/TabsItem/TabsItem.tsx

@@ -212,7 +212,7 @@ export const TabsItem = ({
         withGaps && styles.withGaps,
         layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
       )}
-      onClick={_onClick}
+      onClick={controller ? _onClick : onClick}
       id={id}
       {...restProps}
     >

package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css

@@ -1,24 +0,0 @@
-.input {
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  flex-grow: 1;
-  align-self: center;
-  margin-inline: 10px 14px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  cursor: text;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-}
-
-.sizeYCompact .input {
-  -webkit-margin-end: 22px;
-          margin-inline-end: 22px;
-}
-
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .sizeYNone .input {
-    -webkit-margin-end: 22px;
-            margin-inline-end: 22px;
-  }
-}

package/src/components/DateRangeInput/DateRangeInput.module.css

@@ -1,20 +0,0 @@
-.input {
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  flex-grow: 1;
-  align-self: center;
-  margin-inline: 10px 14px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  cursor: text;
-  user-select: text;
-}
-
-.sizeYCompact .input {
-  margin-inline-end: 22px;
-}
-
-@media (--sizeY-compact) {
-  .sizeYNone .input {
-    margin-inline-end: 22px;
-  }
-}

package/src/components/DateRangeInput/DateRangeInput.module.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["./DateRangeInput.module.css"],"names":["input","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,O,WAAA;AAAA,E,aAWAC,c,WAXA;AAAA,E,aAWcD,O,WAXd;AAAA,E,aAgBEE,W,WAhBF;AAAA,E,aAgBaF,O,WAhBb;AAAA;AAAA","file":"DateRangeInput.module.css.d.ts","sourceRoot":""}