@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,8 +1,7 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
-const LEFT_PADDING = 44;
+const { Z_INDEX } = dimensions;
 
 export const useStyles = createThemedStyles('SearchInput', {
   root: {
@@ -16,38 +15,29 @@ export const useStyles = createThemedStyles('SearchInput', {
     left: 12,
     height: '100%',
     width: 20,
-    zIndex: 2,
     color: colors.GREY_ACTIVE,
-  },
-
-  iconClickable: {
-    cursor: 'pointer',
+    zIndex: Z_INDEX.CONTROL_FOCUS + 1,
   },
 });
 
 export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    height: 35,
-    borderColor: 'transparent',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  input: {
-    fontSize: 14,
-    paddingLeft: 0,
+  tweakControlWrapper: {
+    root: {
+      borderColor: 'transparent',
+      borderRadius: 18,
+      paddingLeft: 0,
+      transitionProperty: 'background-color, border-color',
+    },
+
+    focused: {
+      backgroundColor: colors.CLASSIC_WHITE,
+      borderColor: colors.BORDER_MAIN,
+    },
   },
 
-  label: {
-    left: LEFT_PADDING,
+  inputContent: {
     fontSize: 14,
+    paddingLeft: 44,
   },
 };
 

package/src/components/SearchInput/SearchInput.tsx

@@ -1,41 +1,25 @@
 import { FC } from 'react';
-import clsx from 'clsx';
-import {
-  addClickHandler,
-  addDataAttributes,
-  getTestId,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
 import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
 
-export interface ISearchInputProps
-  extends ICommonProps<ISearchInputStyles>,
-    Omit<
-      IInputProps,
-      | 'type'
-      | 'isInvalid'
-      | 'errorMessage'
-      | 'label'
-      | 'isActive'
-      | 'errorPosition'
-      | 'hasFloatingLabel'
-      | 'border'
-      | 'tweakStyles'
-    > {
-  // TODO: Можно будет удалить в 4й версии
-  onSearchIconClick?: () => void;
-}
+export type ISearchInputProps = Omit<
+  IInputProps,
+  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'
+> &
+  ICommonProps<ISearchInputStyles>;
 
 export const SearchInput: FC<ISearchInputProps> = ({
   isClearable = true,
   tweakStyles,
+  placeholder,
+  value,
   testId,
   data,
-  onSearchIconClick,
   ...props
 }) => {
   const classes = useStyles({ theme: tweakStyles });
@@ -48,21 +32,16 @@ export const SearchInput: FC<ISearchInputProps> = ({
   });
 
   return (
-    <div className={classes.root} {...addDataAttributes(data, testId)}>
-      <div
-        className={clsx(classes.icon, { [classes.iconClickable]: isNotEmpty(onSearchIconClick) })}
-        {...addClickHandler(onSearchIconClick)}
-      >
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.icon}>
         <Icon type="search" />
       </div>
       <Input
-        inputMode="search"
+        value={value}
+        placeholder={placeholder}
         isClearable={isClearable}
-        isActive={props.value !== '' && props.value !== undefined}
         testId={getTestId(testId, 'input')}
         tweakStyles={tweakInputStyles}
-        hasFloatingLabel={false}
-        label={props.placeholder}
         {...props}
       />
     </div>

package/src/components/Select/CustomSelect.stories.tsx

@@ -3,9 +3,9 @@ import { createUseStyles } from 'react-jss';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { type ComponentMeta, type ComponentStory } from '@storybook/react';
 import { Button, type IButtonStyles } from '../Button';
-import { Input, type IInputStyles } from '../Input';
+import { type IInputStyles, Input } from '../Input';
 import { TextButton } from '../TextButton';
-import { Select, type ISelectProps } from './Select';
+import { type ISelectProps, Select } from './Select';
 
 interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
   shouldUsePopper?: boolean;
@@ -54,8 +54,10 @@ const useCustomListFooterStyles = createUseStyles({
 });
 
 const inputTweakStyles: IInputStyles = {
-  inputWrapper: {
-    height: 24,
+  tweakControlWrapper: {
+    root: {
+      '--control-height': '24px',
+    }
   },
 
   input: {
@@ -102,7 +104,6 @@ function CustomListHeader({ onAdd }: ICustomListHeaderProps) {
         <div className={classes.inputView}>
           <Input
             value={inputValue}
-            border="bottom"
             placeholder="Option Value"
             tweakStyles={inputTweakStyles}
             shouldFocusOnMount
@@ -237,13 +238,9 @@ CustomSelect.args = {
   noMatchesLabel: 'No matches',
   isInvalid: false,
   errorMessage: '',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: false,
   isDisabled: false,
   isRequired: false,
   isClearable: false,
-
   shouldUsePopper: false,
   shouldRenderInBody: false,
   shouldHideOnScroll: false,

package/src/components/Select/MultiSelect.stories.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select, ISelectProps, IMultipleSelectProps } from './Select';
+import { IMultipleSelectProps, Select } from './Select';
 
 interface ObjectValue {
   name: string;
@@ -9,9 +9,7 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
+const groupPlacements = [undefined, 'left', 'right', 'middle'];
 
 const genLetters = (qnt = 1): string =>
   Math.random()
@@ -188,9 +186,7 @@ export default {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
+    groupPlacement: { control: 'select', options: groupPlacements },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -211,13 +207,9 @@ export const MultiSelect = Template.bind({});
 MultiSelect.args = {
   label: 'Dropdown',
   noMatchesLabel: 'No matches',
-  border: undefined,
   isInvalid: false,
   errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  iconType: 'document',
+  icon: 'document',
   defaultOptionLabel: '',
   allOptionsLabel: 'Все опции',
   isDisabled: false,

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select, ISelectProps } from './Select';
+import { ISelectProps, Select } from './Select';
 
 interface ObjectValue {
   name: string;
@@ -9,9 +9,7 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
+const groupPlacements = [undefined, 'left', 'right', 'middle'];
 
 const genLetters = (qnt = 1): string =>
   Math.random()
@@ -185,9 +183,7 @@ export default {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
+    groupPlacement: { control: 'select', options: groupPlacements },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -209,12 +205,8 @@ Default.args = {
   label: 'Dropdown',
   defaultOptionLabel: 'Default Option',
   noMatchesLabel: 'No matches',
-  border: undefined,
   isInvalid: false,
   errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isDisabled: false,
   isReadonly: false,
   isRequired: false,

package/src/components/Select/Select.styles.ts

@@ -1,9 +1,12 @@
 import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { animations, createThemedStyles, type ITweakStyles } from '../../theme';
+import { animations, createThemedStyles, dimensions, type ITweakStyles } from '../../theme';
+import { IControlGroupStyles } from '../ControlGroup';
 import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { type ISelectListStyles } from './components';
 
+const { CONTROL, Z_INDEX } = dimensions;
+
 export const useStyles = createThemedStyles('Select', {
   root: {
     width: '100%',
@@ -26,7 +29,8 @@ export const useStyles = createThemedStyles('Select', {
 
   withoutPopper: {
     position: 'absolute',
-    top: 'calc(var(--dropdown-offset, 100%) + 6px)',
+    top: '100%',
+    paddingTop: 4,
   },
 
   listWrapperInBody: {
@@ -38,17 +42,18 @@ export const useStyles = createThemedStyles('Select', {
   arrow: {
     position: 'absolute',
     right: 12,
-    top: 14,
+    top: '50%',
     width: 20,
     height: 20,
     cursor: 'pointer',
-    zIndex: 1,
+    transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
     transitionProperty: 'transform',
+    zIndex: Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   activeArrow: {
-    transform: 'rotate(180deg)',
+    transform: 'translateY(-50%) rotate(180deg)',
   },
 
   disabled: {
@@ -64,24 +69,31 @@ export const useStyles = createThemedStyles('Select', {
   },
 
   icon: {
-    width: 16,
-    height: 16,
+    width: CONTROL.ICON_INNER_SIZE,
+    height: CONTROL.ICON_INNER_SIZE,
+  },
+
+  iconWrapper: {
+    display: 'flex',
+    alignItems: 'center',
   },
 });
 
 const baseInputStyles: IInputStyles = {
-  input: {
+  inputContent: {
     paddingRight: 32,
   },
 
-  disabled: {
-    '& $input': {
-      cursor: 'default',
+  tweakControlWrapper: {
+    controls: {
+      paddingRight: 40,
     },
-  },
 
-  controls: {
-    paddingRight: 32,
+    icon: {
+      '&:last-child': {
+        paddingRight: 0,
+      },
+    },
   },
 };
 
@@ -91,21 +103,8 @@ const readonlyInputBaseStyles: IInputStyles = {
   },
 };
 
-const multiSelectInputBaseStyles: IInputStyles = {
-  inputIcon: {
-    '&:not($loading)': {
-      width: 'auto',
-    },
-  },
-};
-
 export const readonlyInputStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
-export const multiSelectInputStyles = mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
-export const readonlyMultiSelectStyles = mergeStyles(
-  baseInputStyles,
-  readonlyInputBaseStyles,
-  multiSelectInputBaseStyles,
-);
+export const readonlyMultiSelectStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
 
 export const getInputStyles = ({
   hasReadonlyInput,
@@ -120,26 +119,13 @@ export const getInputStyles = ({
   if (hasReadonlyInput && !isMultiSelect) {
     return readonlyInputStyles;
   }
-  if (!hasReadonlyInput && isMultiSelect) {
-    return multiSelectInputStyles;
-  }
   return baseInputStyles;
 };
 
-export const searchInputStyles: ISearchInputStyles = {
-  tweakInput: {
-    inputWrapper: {
-      height: 48,
-      borderRadius: 0,
-      border: 'none',
-      backgroundColor: 'transparent',
-    },
-  },
-};
-
 export type ISelectStyles = ITweakStyles<
   typeof useStyles,
   {
+    tweakControlGroup: IControlGroupStyles;
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;

package/src/components/Select/Select.tsx

@@ -1,17 +1,16 @@
 import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
   ChangeEvent,
   CSSProperties,
   FocusEvent,
-  FormEvent,
   KeyboardEvent,
   MouseEvent,
   ReactNode,
   SyntheticEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
@@ -26,10 +25,11 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { IDropdownWithPopperOptions, ICommonProps } from '../../types';
-import { renderIcon, IIcon } from '../Icon';
-import { Input, IInputProps } from '../Input';
-import { SearchInput, ISearchInputProps } from '../SearchInput';
+import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
+import { ControlGroup } from '../ControlGroup';
+import { IIcon, renderIcon } from '../Icon';
+import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
+import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
@@ -38,8 +38,8 @@ import {
   defaultIsOptionDisabled,
   getDefaultConvertToIdFunction,
 } from './helpers';
-import { IMultipleSelectValue } from './types';
-import { getInputStyles, searchInputStyles, useStyles, ISelectStyles } from './Select.styles';
+import { IChangeSelectEvent, IMultipleSelectValue } from './types';
+import { getInputStyles, ISelectStyles, useStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
@@ -66,14 +66,7 @@ export interface ISelectProps<Value>
   isMultiSelect?: false;
   searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
   isOptionDisabled?: (option: Value) => boolean;
-  onChange: (
-    value: Value | undefined,
-    event:
-      | MouseEvent<HTMLElement>
-      | KeyboardEvent
-      | ChangeEvent<HTMLElement>
-      | FormEvent<HTMLElement>,
-  ) => void; // подумать как возвращать индекс
+  onChange: (value: Value | undefined, event: IChangeSelectEvent) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
   onType?: (value: string) => Promise<void>;
   optionsFilter?: (options: Value[], query: string) => Value[];
@@ -94,14 +87,7 @@ export interface IMultipleSelectProps<Value>
   > {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
-  onChange: (
-    value: IMultipleSelectValue<Value> | undefined,
-    event:
-      | MouseEvent<HTMLElement>
-      | KeyboardEvent
-      | ChangeEvent<HTMLElement>
-      | FormEvent<HTMLElement>,
-  ) => void;
+  onChange: (value: IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => void;
   compareValuesOnChange?: (
     v1?: IMultipleSelectValue<Value>,
     v2?: IMultipleSelectValue<Value>,
@@ -133,7 +119,7 @@ export function Select<Value>(
     dropdownIcon = 'chevron-down',
     shouldScrollToList = true,
     searchInput,
-    iconType,
+    icon,
     onChange,
     onFocus,
     onBlur,
@@ -145,6 +131,8 @@ export function Select<Value>(
     convertValueToId,
     convertValueToReactNode,
     optionsFilter,
+    infoMessage,
+    errorMessage,
     ...inputProps
   } = props;
   const classes = useStyles({ theme: tweakStyles });
@@ -154,6 +142,12 @@ export function Select<Value>(
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
 
+  const tweakControlGroupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakControlGroup',
+    currentComponentName: 'Select',
+  });
+
   const tweakInputStyles = useTweakStyles({
     innerStyles: getInputStyles({ hasReadonlyInput, isMultiSelect }),
     tweakStyles,
@@ -162,7 +156,6 @@ export function Select<Value>(
   });
 
   const tweakSearchInputStyles = useTweakStyles({
-    innerStyles: searchInputStyles,
     tweakStyles,
     className: 'tweakSearchInput',
     currentComponentName: 'Select',
@@ -249,7 +242,7 @@ export function Select<Value>(
   );
 
   const getDropdownOffset = () => {
-    if (isEmpty(input.current) || inputProps.errorPosition === 'top') {
+    if (isEmpty(input.current)) {
       return 0;
     }
 
@@ -325,14 +318,7 @@ export function Select<Value>(
   };
 
   const handleChange = useCallback(
-    (
-      newValue: Value | IMultipleSelectValue<Value> | undefined,
-      event:
-        | MouseEvent<HTMLElement>
-        | KeyboardEvent
-        | ChangeEvent<HTMLElement>
-        | FormEvent<HTMLElement>,
-    ) => {
+    (newValue: Value | IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => {
       // Тут беда с типами, сорри
       if (!compareValuesOnChange(value as never, newValue as never)) {
         onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
@@ -403,7 +389,7 @@ export function Select<Value>(
     [handleOnType, debounceTime],
   );
 
-  const handleInputChange = (v: string, event: FormEvent<HTMLElement>) => {
+  const handleInputChange = (v: string, event: IChangeInputEvent) => {
     if (onType !== undefined) {
       debounceHandleOnType(v);
     }
@@ -603,56 +589,62 @@ export function Select<Value>(
   );
 
   const multiSelectCounterWithIcon =
-    shouldShowMultiSelectCounter || isNotEmpty(iconType) ? (
-      <>
+    shouldShowMultiSelectCounter || isNotEmpty(icon) ? (
+      <div className={classes.iconWrapper}>
         {shouldShowMultiSelectCounter && (
           <div className={classes.counter}>(+{value.length - 1})</div>
         )}
-        {isNotEmpty(iconType) && <div className={classes.icon}>{renderIcon(iconType)}</div>}
-      </>
+        {isNotEmpty(icon) && <div className={classes.icon}>{renderIcon(icon)}</div>}
+      </div>
     ) : undefined;
 
   return (
-    <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
-      <div
-        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
-        onClick={isDisabled || isReadonly ? undefined : handleOnClick}
-        ref={inputWrapper}
-      >
-        <Input
-          value={
-            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
-          }
-          onChange={handleInputChange}
-          isActive={isListOpen || isActive}
-          isReadonly={hasReadonlyInput}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          isDisabled={isDisabled}
-          ref={input}
-          isLoading={areOptionsLoading}
-          tweakStyles={tweakInputStyles}
-          testId={testId}
-          iconType={isMultiSelect ? multiSelectCounterWithIcon : iconType}
-          {...inputProps}
-        />
+    <ControlGroup
+      errorMessage={errorMessage}
+      infoMessage={infoMessage}
+      tweakStyles={tweakControlGroupStyles}
+    >
+      <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div
-          onMouseDown={(event: MouseEvent) => {
-            event.preventDefault();
-          }}
-          onClick={onArrowClick}
-          className={clsx(classes.arrow, isOpen && classes.activeArrow)}
+          className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
+          onClick={isDisabled || isReadonly ? undefined : handleOnClick}
+          ref={inputWrapper}
         >
-          {renderIcon(dropdownIcon)}
+          <InputBase
+            value={
+              searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
+            }
+            onChange={handleInputChange}
+            isActive={isListOpen || isActive}
+            isReadonly={hasReadonlyInput}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            isDisabled={isDisabled}
+            ref={input}
+            isLoading={areOptionsLoading}
+            tweakStyles={tweakInputStyles}
+            testId={testId}
+            icon={isMultiSelect ? multiSelectCounterWithIcon : icon}
+            {...inputProps}
+          />
+          <div
+            onMouseDown={(event: MouseEvent) => {
+              event.preventDefault();
+            }}
+            onClick={onArrowClick}
+            className={clsx(classes.arrow, isOpen && classes.activeArrow)}
+          >
+            {renderIcon(dropdownIcon)}
+          </div>
         </div>
+        {shouldUsePopper ? (
+          <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
+            <>{listEl}</>
+          </Portal>
+        ) : (
+          <>{isOpen && listEl}</>
+        )}
       </div>
-      {shouldUsePopper ? (
-        <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
-          <>{listEl}</>
-        </Portal>
-      ) : (
-        <>{isOpen && listEl}</>
-      )}
-    </div>
+    </ControlGroup>
   );
 }

package/src/components/Select/types.ts

@@ -1 +1,6 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+import { IChangeInputEvent } from '../Input';
+
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+
+export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -48,5 +48,4 @@ Default.args = {
   isUpperCase: false,
   isDisabled: false,
   isTransliterationEnabled: true,
-  hasFloatingLabel: true,
 };