@true-engineering/true-react-common-ui-kit 3.49.0 → 3.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.49.0",
+  "version": "3.50.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Input/Input.styles.ts

@@ -1,7 +1,6 @@
 import { dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
-const PADDING_X = 12;
 export const AUTOSIZE_MAX_WIDTH = 480;
 
 export const useStyles = createThemedStyles('Input', {
@@ -12,6 +11,9 @@ export const useStyles = createThemedStyles('Input', {
   },
 
   inputWrapper: {
+    '--input-padding-x': '12px',
+    '--input-with-icons-padding-right': '4px',
+
     display: 'flex',
     width: '100%',
     height: dimensions.CONTROL_HEIGHT,
@@ -22,10 +24,15 @@ export const useStyles = createThemedStyles('Input', {
     position: 'relative',
   },
 
+  inputWithLabelWrapper: {
+    position: 'relative',
+    width: '100%',
+  },
+
   inputContent: {
     fontSize: 16,
     fontFamily: 'inherit',
-    padding: [0, PADDING_X],
+    padding: [0, 'var(--input-padding-x)'],
   },
 
   input: {
@@ -112,8 +119,11 @@ export const useStyles = createThemedStyles('Input', {
     display: 'none',
 
     '&$floating': {
+      '--scale-factor': '0.75',
+
       display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
+      transform: 'scale(var(--scale-factor)) translateY(-120%)',
+      maxWidth: 'calc(var(--label-max-width) / var(--scale-factor))',
     },
   },
 
@@ -131,14 +141,19 @@ export const useStyles = createThemedStyles('Input', {
   },
 
   label: {
+    '--label-max-width': 'calc(100% - var(--input-padding-x))',
+
     position: 'absolute',
     pointerEvents: 'none',
-    left: PADDING_X,
+    left: 'var(--input-padding-x)',
     top: '50%',
+    boxSizing: 'border-box',
+    maxWidth: 'var(--label-max-width)',
+    paddingRight: 'var(--input-padding-x)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
+    transitionProperty: ['max-width', 'transform', 'color'],
     fontSize: 16,
   },
 
@@ -147,18 +162,37 @@ export const useStyles = createThemedStyles('Input', {
   },
 
   requiredLabel: {
+    '--input-padding-right': 'var(--input-padding-x)',
+    '--required-label-size': '6px',
+    '--required-label-right': 'calc(var(--input-padding-right) - var(--required-label-size) - 2px)',
+
+    '&:is($labelWithIcons)': {
+      '--input-padding-right': 'var(--input-with-icons-padding-right)',
+    },
+
     '&:after': {
       content: '""',
       position: 'absolute',
-      right: -8,
+      right: 'var(--required-label-right)',
       top: 4,
       transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
+      width: 'var(--required-label-size)',
+      height: 'var(--required-label-size)',
       borderRadius: '50%',
     },
   },
 
+  labelWithIcons: {
+    extend: 'withIcons',
+  },
+
+  labelText: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
   activeIcon: {
     cursor: 'pointer',
   },
@@ -263,7 +297,7 @@ export const useStyles = createThemedStyles('Input', {
   },
 
   withIcons: {
-    paddingRight: 4,
+    paddingRight: 'var(--input-with-icons-padding-right)',
   },
 
   withControls: {},

package/src/components/Input/Input.tsx

@@ -210,35 +210,38 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
           data-value={isAutoSizeable ? value : undefined}
           {...addDataAttributes(data)}
         >
-          {mask === undefined ? (
-            <input ref={ref ?? inputRef} {...props} />
-          ) : (
-            <InputMask
-              // Баг в типизации react-input-mask
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore: No overload matches this call
-              ref={ref ?? inputRef}
-              mask={mask}
-              maskPlaceholder={maskPlaceholder}
-              alwaysShowMask={alwaysShowMask}
-              beforeMaskedStateChange={beforeMaskedStateChange}
-              {...props}
-            />
-          )}
-          {hasLabel && (
-            <span
-              className={clsx(classes.label, {
-                [classes.invalidLabel]: isInvalid,
-                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-                [classes.activeLabel]: isLabelActive,
-                [classes.floating]: hasFloatingLabel,
-                // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-                [classes.floatingWithoutPadding]: hasFloatingLabel && border === 'bottom',
-              })}
-            >
-              {label}
-            </span>
-          )}
+          <div className={classes.inputWithLabelWrapper}>
+            {mask === undefined ? (
+              <input ref={ref ?? inputRef} {...props} />
+            ) : (
+              <InputMask
+                // Баг в типизации react-input-mask
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore: No overload matches this call
+                ref={ref ?? inputRef}
+                mask={mask}
+                maskPlaceholder={maskPlaceholder}
+                alwaysShowMask={alwaysShowMask}
+                beforeMaskedStateChange={beforeMaskedStateChange}
+                {...props}
+              />
+            )}
+            {hasLabel && (
+              <span
+                className={clsx(classes.label, {
+                  [classes.invalidLabel]: isInvalid,
+                  [classes.requiredLabel]: hasRequiredLabel && !isRequired,
+                  [classes.activeLabel]: isLabelActive,
+                  [classes.floating]: hasFloatingLabel,
+                  // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
+                  [classes.floatingWithoutPadding]: hasFloatingLabel && border === 'bottom',
+                  [classes.labelWithIcons]: hasControls,
+                })}
+              >
+                <span className={classes.labelText}>{label}</span>
+              </span>
+            )}
+          </div>
 
           {shouldShowUnits && (
             <div

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

@@ -2,8 +2,6 @@ import { rgba } from '../../helpers';
 import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
-const LEFT_PADDING = 44;
-
 export const useStyles = createThemedStyles('SearchInput', {
   root: {
     position: 'relative',
@@ -31,7 +29,7 @@ export const inputStyles: IInputStyles = {
     borderColor: 'transparent',
     backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
     borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
+    paddingLeft: 44,
     transitionProperty: 'background-color, border-color',
   },
 
@@ -46,7 +44,7 @@ export const inputStyles: IInputStyles = {
   },
 
   label: {
-    left: LEFT_PADDING,
+    left: 0,
     fontSize: 14,
   },
 };

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

@@ -12,6 +12,8 @@ export const useStyles = createThemedStyles('Select', {
   },
 
   inputWrapper: {
+    '--select-arrow-size': '20px',
+
     width: '100%',
     cursor: 'text',
     position: 'relative',
@@ -39,8 +41,8 @@ export const useStyles = createThemedStyles('Select', {
     position: 'absolute',
     right: 12,
     top: 14,
-    width: 20,
-    height: 20,
+    width: 'var(--select-arrow-size)',
+    height: 'var(--select-arrow-size)',
     cursor: 'pointer',
     zIndex: 1,
     transition: animations.defaultTransition,
@@ -83,6 +85,20 @@ const baseInputStyles: IInputStyles = {
   controls: {
     paddingRight: 32,
   },
+
+  label: {
+    '--select-label-max-width': 'calc(100% - var(--input-padding-x) - var(--select-arrow-size))',
+
+    '&:not($labelWithIcons)': {
+      '--label-max-width': 'var(--select-label-max-width)',
+    },
+  },
+
+  requiredLabel: {
+    '&:not($labelWithIcons)': {
+      '--label-max-width': 'calc(var(--select-label-max-width) - var(--required-label-size))',
+    },
+  },
 };
 
 const readonlyInputBaseStyles: IInputStyles = {

package/src/components/Select/Select.tsx

@@ -20,7 +20,6 @@ import { debounce } from 'ts-debounce';
 import {
   createFilter,
   getTestId,
-  isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -254,12 +253,11 @@ export function Select<Value>(
   );
 
   const getDropdownOffset = () => {
-    if (isEmpty(input.current) || inputProps.errorPosition === 'top') {
+    if (inputProps.errorPosition === 'top') {
       return 0;
     }
 
-    // Высота элемента inputWrapper у компонента Input
-    return input.current.parentElement?.offsetHeight ?? 0;
+    return inputWrapper.current?.offsetHeight ?? 0;
   };
 
   const closeList = useCallback(() => {
@@ -528,7 +526,7 @@ export function Select<Value>(
   const popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
-    referenceElement: input.current?.parentElement ?? inputWrapper.current,
+    referenceElement: input.current?.parentElement?.parentElement ?? inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
     dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],

package/src/components/TextArea/TextArea.styles.ts

@@ -1,7 +1,5 @@
 import { ITweakStyles, animations, createThemedStyles, helpers } from '../../theme';
 
-const PADDING_X = 12;
-
 export const useStyles = createThemedStyles('TextArea', {
   root: {
     width: '100%',
@@ -11,6 +9,8 @@ export const useStyles = createThemedStyles('TextArea', {
   },
 
   wrapper: {
+    '--textarea-padding-x': '12px',
+
     display: 'flex',
     position: 'relative',
     width: '100%',
@@ -31,7 +31,7 @@ export const useStyles = createThemedStyles('TextArea', {
     outlineStyle: 'none',
     fontFamily: 'inherit',
     fontSize: 16,
-    padding: [14, PADDING_X, 8],
+    padding: [14, 'var(--textarea-padding-x)', 8],
     scrollPadding: '14px 0 8px',
     transition: animations.defaultTransition,
     transitionProperty: 'background-color',
@@ -89,8 +89,11 @@ export const useStyles = createThemedStyles('TextArea', {
     display: 'none',
 
     '&$floating': {
+      '--scale-factor': '0.75',
+
       display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
+      transform: 'scale(var(--scale-factor)) translateY(-120%)',
+      maxWidth: 'calc(var(--label-max-width) / var(--scale-factor))',
     },
   },
 
@@ -111,14 +114,17 @@ export const useStyles = createThemedStyles('TextArea', {
   disabled: {},
 
   label: {
+    '--label-max-width': 'calc(100% - 2 * var(--textarea-padding-x))',
+
     position: 'absolute',
     pointerEvents: 'none',
-    left: PADDING_X,
-    top: PADDING_X * 2,
+    left: 'var(--textarea-padding-x)',
+    top: 24,
+    maxWidth: 'var(--label-max-width)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
+    transitionProperty: ['max-width', 'transform', 'color'],
     fontSize: 16,
   },
 
@@ -136,19 +142,31 @@ export const useStyles = createThemedStyles('TextArea', {
   },
 
   requiredLabel: {
+    '--required-label-size': '6px',
+    '--required-label-right': '8px',
+
+    maxWidth: 'calc(100% - 2 * var(--textarea-padding-x) - var(--required-label-right))',
+
     '&:after': {
       content: '""',
       position: 'absolute',
-      right: -8,
+      right: 'calc(-1 * var(--required-label-right))',
       top: 4,
       transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
+      width: 'var(--required-label-size)',
+      height: 'var(--required-label-size)',
       borderRadius: '50%',
       backgroundColor: 'red',
     },
   },
 
+  labelText: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
   symbolsCount: {
     display: 'block',
     textAlign: 'right',

package/src/components/TextArea/TextArea.tsx

@@ -154,7 +154,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
                 [classes.floating]: hasFloatingLabel,
               })}
             >
-              {label}
+              <span className={classes.labelText}>{label}</span>
             </span>
           )}