@true-engineering/true-react-common-ui-kit 2.4.0 → 2.6.0

package/dist/components/DatePicker/DatePicker.styles.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStyles } from '../../types';
 import type { IDatePickerProps } from './DatePicker';
-interface IStyleProps {
+export interface IDatePickerStyleProps {
     topPosition: NonNullable<IDatePickerProps['topPosition']>;
     leftPosition: NonNullable<IDatePickerProps['leftPosition']>;
 }
@@ -13,8 +13,8 @@ export declare const styles: {
     datepicker: {};
     popper: {
         zIndex: number;
-        marginTop: ({ topPosition }: IStyleProps) => number;
-        marginLeft: ({ leftPosition }: IStyleProps) => number;
+        marginTop: ({ topPosition }: IDatePickerStyleProps) => number;
+        marginLeft: ({ leftPosition }: IDatePickerStyleProps) => number;
         '&[data-placement^="bottom"]': {
             paddingTop: number;
         };
@@ -30,5 +30,4 @@ export declare const styles: {
     };
     tweakDateInput: {};
 };
-export declare type DatePickerStyles = ComponentStyles<typeof styles, IStyleProps>;
-export {};
+export declare type DatePickerStyles = ComponentStyles<typeof styles, IDatePickerStyleProps>;

package/dist/components/FiltersPane/index.d.ts

@@ -1,3 +1,4 @@
 export * from './FiltersPane';
 export * from './types';
 export * from './components';
+export type { FiltersPaneStyles } from './FiltersPane.styles';

package/dist/components/Input/Input.d.ts

@@ -1,11 +1,11 @@
-import { FormEvent, FocusEvent, KeyboardEvent, ClipboardEvent } from 'react';
+import { FormEvent, FocusEvent, KeyboardEvent, ClipboardEvent, ReactNode } from 'react';
 import { ICommonProps, IIcon } from '../../types';
 import { IReactInputMaskProps } from './types';
 import { InputStyles } from './Input.styles';
 export interface IInputProps extends ICommonProps, IReactInputMaskProps {
     tweakStyles?: InputStyles;
     value?: string;
-    label?: string;
+    label?: ReactNode;
     placeholder?: string;
     /**
      * @default `text`
@@ -48,6 +48,7 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
     maxLength?: number;
     testId?: string;
     tabIndex?: number;
+    shouldAlwaysShowPlaceholder?: boolean;
     onChange(value: string, event: FormEvent<HTMLInputElement>): void;
     onFocus?(event: FocusEvent<HTMLInputElement>): void;
     onBlur?(event: FocusEvent<HTMLInputElement>): void;

package/dist/true-react-common-ui-kit.js

@@ -7081,7 +7081,7 @@ var __generator$5 = globalThis && globalThis.__generator || function(thisArg, bo
   }
 };
 var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, beforeMaskedStateChange = param.beforeMaskedStateChange;
+  var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = param.beforeMaskedStateChange;
   var _useTheme = useTheme("Input", styles$x, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var _useState = _sliced_to_array$l(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
   var inputRef = useRef(null);
@@ -7125,8 +7125,8 @@ var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
   var hasControls = hasClearIcon || iconType !== void 0 || isLoading;
   var hasValue = value !== void 0 && value !== "";
   var hasUnits = units !== void 0 && units !== "";
-  var hasLabel = isStringNotEmpty$1(label);
-  var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly) && isStringNotEmpty$1(placeholder);
+  var hasLabel = isReactNodeNotEmpty(label);
+  var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly || shouldAlwaysShowPlaceholder) && isStringNotEmpty$1(placeholder);
   var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
   var _obj;
   var props = _object_spread$A({

package/dist/true-react-common-ui-kit.umd.cjs

@@ -7071,7 +7071,7 @@
     }
   };
   var Input = /* @__PURE__ */ React.forwardRef(function(param, ref) {
-    var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, beforeMaskedStateChange = param.beforeMaskedStateChange;
+    var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = param.beforeMaskedStateChange;
     var _useTheme = useTheme("Input", styles$x, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var _useState = _sliced_to_array$l(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
     var inputRef = React.useRef(null);
@@ -7115,8 +7115,8 @@
     var hasControls = hasClearIcon || iconType !== void 0 || isLoading;
     var hasValue = value !== void 0 && value !== "";
     var hasUnits = units !== void 0 && units !== "";
-    var hasLabel = trueReactPlatformHelpers.isStringNotEmpty(label);
-    var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
+    var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
+    var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
     var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
     var _obj;
     var props = _object_spread$A({

package/package.json

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

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,7 +1,7 @@
 import { ComponentStyles } from '../../types';
 import type { IDatePickerProps } from './DatePicker';
 
-interface IStyleProps {
+export interface IDatePickerStyleProps {
   topPosition: NonNullable<IDatePickerProps['topPosition']>;
   leftPosition: NonNullable<IDatePickerProps['leftPosition']>;
 }
@@ -18,8 +18,8 @@ export const styles = {
 
   popper: {
     zIndex: 10,
-    marginTop: ({ topPosition }: IStyleProps): number => topPosition,
-    marginLeft: ({ leftPosition }: IStyleProps): number => leftPosition,
+    marginTop: ({ topPosition }: IDatePickerStyleProps): number => topPosition,
+    marginLeft: ({ leftPosition }: IDatePickerStyleProps): number => leftPosition,
 
     '&[data-placement^="bottom"]': {
       paddingTop: 6,
@@ -41,4 +41,4 @@ export const styles = {
   tweakDateInput: {},
 };
 
-export type DatePickerStyles = ComponentStyles<typeof styles, IStyleProps>;
+export type DatePickerStyles = ComponentStyles<typeof styles, IDatePickerStyleProps>;

package/src/components/FiltersPane/index.ts

@@ -2,3 +2,4 @@ export * from './FiltersPane';
 export * from './types';
 // TODO : подумать над тем чтобы вынести это все наружу
 export * from './components';
+export type { FiltersPaneStyles } from './FiltersPane.styles';

package/src/components/Input/Input.tsx

@@ -9,6 +9,7 @@ import {
   KeyboardEvent,
   ClipboardEvent,
   InputHTMLAttributes,
+  ReactNode,
 } from 'react';
 import InputMask from 'react-input-mask';
 import clsx from 'clsx';
@@ -30,7 +31,7 @@ import { InputStyles, styles } from './Input.styles';
 export interface IInputProps extends ICommonProps, IReactInputMaskProps {
   tweakStyles?: InputStyles;
   value?: string;
-  label?: string;
+  label?: ReactNode;
   placeholder?: string;
   /**
    * @default `text`
@@ -82,7 +83,7 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
   maxLength?: number;
   testId?: string;
   tabIndex?: number;
-
+  shouldAlwaysShowPlaceholder?: boolean;
   onChange(value: string, event: FormEvent<HTMLInputElement>): void;
   onFocus?(event: FocusEvent<HTMLInputElement>): void;
   onBlur?(event: FocusEvent<HTMLInputElement>): void;
@@ -133,6 +134,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       mask,
       maskPlaceholder,
       alwaysShowMask,
+      shouldAlwaysShowPlaceholder,
       beforeMaskedStateChange,
     },
     ref,
@@ -169,9 +171,10 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const hasControls = hasClearIcon || iconType !== undefined || isLoading;
     const hasValue = value !== undefined && value !== '';
     const hasUnits = units !== undefined && units !== '';
-    const hasLabel = isStringNotEmpty(label);
+    const hasLabel = isReactNodeNotEmpty(label);
     const hasPlaceholder =
-      (!hasLabel || (hasFocus && !isReadonly)) && isStringNotEmpty(placeholder);
+      (!hasLabel || (hasFocus && !isReadonly) || shouldAlwaysShowPlaceholder) &&
+      isStringNotEmpty(placeholder);
     const shouldShowUnits = (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
 
     const props: InputHTMLAttributes<HTMLInputElement> = {