@true-engineering/true-react-common-ui-kit 4.0.0-alpha13 → 4.0.0-alpha15

package/package.json

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

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -44,7 +44,7 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     position: 'absolute',
     pointerEvents: 'none',
     left: 'var(--control-padding)',
-    top: '50%',
+    top: 'calc(var(--control-height) / 2)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,

package/src/components/ControlWrapper/types.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IControlWrapperSizes {}
 
 export type IControlWrapperSize = keyof IControlWrapperSizes;

package/src/components/Input/InputBase.tsx

@@ -15,6 +15,7 @@ import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
 import clsx from 'clsx';
 import {
   addDataTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -127,7 +128,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
 
     const hasFocus = isFocused || isActive;
-    const hasValue = isNotEmpty(value) && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasUnits = isReactNodeNotEmpty(units);
     const hasPlaceholder =
       (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
@@ -231,7 +232,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         isDisabled={isDisabled}
         isFocused={hasFocus}
         isInvalid={isInvalid}
-        hasValue={hasValue || hasPlaceholder}
+        hasValue={hasValue}
         isFullWidth={!isAutoSized}
         tweakStyles={tweakControlWrapperStyles}
         onClear={isClearable && hasValue ? handleInputClear : undefined}

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -9,7 +9,11 @@ export default {
 
 const Template: ComponentStory<typeof NumberInput> = (args) => {
   const [value, setValue] = useState<number>();
-  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+  return (
+    <div style={{ width: 300 }}>
+      <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
 };
 
 export const Default = Template.bind({});

package/src/components/SearchInput/SearchInput.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IInputProps, Input } from '../Input';
@@ -12,7 +11,7 @@ export type ISearchInputProps = Omit<
   ICommonProps<ISearchInputStyles>;
 
 export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
-  ({ isClearable = true, placeholder, value, testId, tweakStyles, data, ...props }, ref) => {
+  ({ isClearable = true, tweakStyles, ...props }, ref) => {
     const tweakInputStyles = useTweakStyles({
       innerStyles: inputStyles,
       tweakStyles,
@@ -23,11 +22,8 @@ export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
     return (
       <Input
         ref={ref}
-        value={value}
-        placeholder={placeholder}
         icon="search"
         isClearable={isClearable}
-        testId={getTestId(testId, 'input')}
         tweakStyles={tweakInputStyles}
         {...props}
       />

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

@@ -69,12 +69,6 @@ export const useStyles = createThemedStyles('TextArea', {
   withLabel: {},
 });
 
-export const controlWrapperStyles: IControlWrapperStyles = {
-  label: {
-    top: 16,
-  },
-};
-
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,
   {

package/src/components/TextArea/TextArea.tsx

@@ -19,7 +19,7 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
-import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
@@ -93,7 +93,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     });
 
     const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
       tweakStyles,
       className: 'tweakControlWrapper',
       currentComponentName: 'TextArea',
@@ -159,6 +158,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
               onFocus={handleFocus}
               onBlur={handleBlur}
               onChange={handleChange}
+              autoFocus={shouldFocusOnMount}
               {...addDataAttributes(data, testId)}
               {...textAreaProps}
             />

package/src/components/TextButton/TextButton.styles.ts

@@ -7,6 +7,7 @@ export const useStyles = createThemedStyles('TextButton', {
     alignItems: 'center',
     height: 24,
     padding: 0,
+    position: 'relative',
     background: 'transparent',
     border: 'none',
     borderRadius: 0,