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

package/src/components/{ControlGroup/ControlGroup.styles.ts → WithMessages/WithMessages.styles.ts}

@@ -1,10 +1,11 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
 
-export const useStyles = createThemedStyles('ControlGroup', {
-  root: {
+export const useStyles = createThemedStyles('WithMessages', {
+  withMessages: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
+    position: 'relative',
   },
 
   error: {
@@ -43,4 +44,4 @@ export const useStyles = createThemedStyles('ControlGroup', {
   children: {},
 });
 
-export type IControlGroupStyles = ITweakStyles<typeof useStyles>;
+export type IWithMessagesStyles = ITweakStyles<typeof useStyles>;

package/src/components/{ControlGroup/ControlGroup.tsx → WithMessages/WithMessages.tsx}

@@ -1,18 +1,22 @@
 import { forwardRef, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
-import { IControlGroupStyles, useStyles } from './ControlGroup.styles';
+import { IWithMessagesStyles, useStyles } from './WithMessages.styles';
 
-export interface IControlGroupProps extends ICommonProps<IControlGroupStyles> {
+export interface IWithMessagesProps extends ICommonProps<IWithMessagesStyles> {
   children: ReactNode;
   infoMessage?: ReactNode;
   errorMessage?: ReactNode;
-  direction?: 'horizontal' | 'vertical';
+  controlsDirection?: 'horizontal' | 'vertical';
 }
 
-export const ControlGroup = forwardRef<HTMLDivElement, IControlGroupProps>(
-  ({ children, infoMessage, errorMessage, direction, tweakStyles, testId, data }, ref) => {
+export const WithMessages = forwardRef<HTMLDivElement, IWithMessagesProps>(
+  ({ children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data }, ref) => {
     const classes = useStyles({ theme: tweakStyles });
 
     const shouldShowError = isReactNodeNotEmpty(errorMessage);
@@ -21,15 +25,15 @@ export const ControlGroup = forwardRef<HTMLDivElement, IControlGroupProps>(
     return (
       <div
         ref={ref}
-        className={classes.root}
+        className={classes.withMessages}
         data-invalid={shouldShowError ? true : undefined}
         {...addDataAttributes(data, testId)}
       >
         {isReactNodeNotEmpty(children) && (
           <div
             className={clsx(classes.children, {
-              [classes.horizontal]: direction === 'horizontal',
-              [classes.vertical]: direction === 'vertical',
+              [classes.horizontal]: controlsDirection === 'horizontal',
+              [classes.vertical]: controlsDirection === 'vertical',
             })}
           >
             {children}

package/src/components/WithMessages/index.ts

@@ -0,0 +1,2 @@
+export * from './WithMessages';
+export type { IWithMessagesStyles } from './WithMessages.styles';

package/src/components/index.ts

@@ -44,5 +44,5 @@ export * from './Tooltip';
 export * from './NewMoreMenu';
 export * from './WithPopup';
 export * from './WithTooltip';
-export * from './ControlGroup';
+export * from './WithMessages';
 export * from './ControlWrapper';

package/src/theme/types.ts

@@ -8,7 +8,7 @@ import type {
   ICloseButtonStyles,
   ICommonIcon,
   IComplexIcon,
-  IControlGroupStyles,
+  IWithMessagesStyles,
   IControlWrapperStyles,
   ICssBaselineStyles,
   IDateInputStyles,
@@ -138,7 +138,7 @@ export interface IComponentStyles {
   Toaster: IToasterStyles;
   WithPopup: IWithPopupStyles;
   NewMoreMenu: INewMoreMenuStyles;
-  ControlGroup: IControlGroupStyles;
+  WithMessages: IWithMessagesStyles;
   ControlWrapper: IControlWrapperStyles;
   WithTooltip: IWithTooltipStyles;
 }

package/dist/components/ControlGroup/ControlGroup.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../types';
-import { IControlGroupStyles } from './ControlGroup.styles';
-export interface IControlGroupProps extends ICommonProps<IControlGroupStyles> {
-    children: ReactNode;
-    infoMessage?: ReactNode;
-    errorMessage?: ReactNode;
-    direction?: 'horizontal' | 'vertical';
-}
-export declare const ControlGroup: import("react").ForwardRefExoticComponent<IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +0,0 @@
-import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown>;
-export type IControlGroupStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +0,0 @@
-export * from './ControlGroup';
-export type { IControlGroupStyles } from './ControlGroup.styles';

package/src/components/ControlGroup/index.ts

@@ -1,2 +0,0 @@
-export * from './ControlGroup';
-export type { IControlGroupStyles } from './ControlGroup.styles';