fix(core-blocks): CB-991 pass div props through containers

webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx

@@ -8,12 +8,11 @@
 
 import { forwardRef } from 'react';
 
+import { filterContainerFakeProps } from './filterContainerFakeProps';
 import type { IContainerProps } from './IContainerProps';
 
-export const ColoredContainer = forwardRef<HTMLDivElement, IContainerProps>(function ColoredContainer({ children, className }, ref) {
-  return (
-    <div ref={ref} className={className}>
-      {children}
-    </div>
-  );
+export const ColoredContainer = forwardRef<HTMLDivElement, IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function ColoredContainer(props, ref) {
+  const divProps = filterContainerFakeProps(props);
+
+  return <div ref={ref} {...divProps} />;
 });

webapp/packages/core-blocks/src/Containers/Container.tsx

@@ -8,12 +8,11 @@
 
 import { forwardRef } from 'react';
 
+import { filterContainerFakeProps } from './filterContainerFakeProps';
 import type { IContainerProps } from './IContainerProps';
 
-export const Container = forwardRef<HTMLDivElement, IContainerProps>(function Container({ children, className }, ref) {
-  return (
-    <div ref={ref} className={className}>
-      {children}
-    </div>
-  );
+export const Container = forwardRef<HTMLDivElement, IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(props, ref) {
+  const divProps = filterContainerFakeProps(props);
+
+  return <div ref={ref} {...divProps} />;
 });

webapp/packages/core-blocks/src/Containers/Group.tsx

@@ -8,19 +8,22 @@
 
 import { forwardRef } from 'react';
 
+import { filterContainerFakeProps } from './filterContainerFakeProps';
 import type { IContainerProps } from './IContainerProps';
 
 interface Props extends IContainerProps {
-  className?: string;
   form?: boolean;
   center?: boolean;
   box?: boolean;
 }
 
-export const Group = forwardRef<HTMLDivElement, Props>(function Group({ children, className }, ref) {
-  return (
-    <div ref={ref} className={className}>
-      {children}
-    </div>
-  );
+export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group({
+  form,
+  center,
+  box,
+  ...rest
+}, ref) {
+  const divProps = filterContainerFakeProps(rest);
+
+  return <div ref={ref} {...divProps} />;
 });

webapp/packages/core-blocks/src/Containers/GroupItem.tsx

@@ -6,16 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { filterLayoutFakeProps } from './filterLayoutFakeProps';
 import type { ILayoutSizeProps } from './ILayoutSizeProps';
 
-interface Props extends ILayoutSizeProps {
-  className?: string;
-}
-
-export const GroupItem: React.FC<Props> = function GroupItem({ children, className }) {
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  );
+export const GroupItem: React.FC<ILayoutSizeProps & React.HTMLAttributes<HTMLDivElement>> = function GroupItem(props) {
+  const divProps = filterLayoutFakeProps(props);
+  return <div {...divProps} />;
 };

webapp/packages/core-blocks/src/Containers/GroupTitle.tsx

@@ -6,16 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { filterLayoutFakeProps } from './filterLayoutFakeProps';
 import type { ILayoutSizeProps } from './ILayoutSizeProps';
 
-interface Props extends ILayoutSizeProps {
-  className?: string;
-}
-
-export const GroupTitle: React.FC<Props> = function GroupTitle({ children, className }) {
-  return (
-    <h2 className={className}>
-      {children}
-    </h2>
-  );
+export const GroupTitle: React.FC<ILayoutSizeProps & React.HTMLAttributes<HTMLHeadingElement>> = function GroupTitle(props) {
+  const divProps = filterLayoutFakeProps(props);
+  return <h2 {...divProps} />;
 };

webapp/packages/core-blocks/src/Containers/IContainerProps.ts

@@ -8,7 +8,7 @@
 
 import type { ILayoutSizeProps } from './ILayoutSizeProps';
 
-export interface IContainerProps extends ILayoutSizeProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IContainerProps extends ILayoutSizeProps {
   baseline?: boolean;
   center?: boolean;
   vertical?: boolean;

webapp/packages/core-blocks/src/Containers/filterContainerFakeProps.ts

@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { filterLayoutFakeProps } from './filterLayoutFakeProps';
+import type { IContainerProps } from './IContainerProps';
+
+export function filterContainerFakeProps<T extends IContainerProps>(props: T): Omit<T, keyof IContainerProps> {
+  const {
+    baseline,
+    center,
+    vertical,
+    wrap,
+    overflow,
+    parent,
+    gap,
+    ...rest
+  } = filterLayoutFakeProps(props);
+
+  return rest as Omit<T, keyof IContainerProps>;
+}

webapp/packages/core-blocks/src/Containers/filterLayoutFakeProps.ts

@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ILayoutSizeProps } from './ILayoutSizeProps';
+
+export function filterLayoutFakeProps<T extends ILayoutSizeProps>(props: T): Omit<T, keyof ILayoutSizeProps> {
+  const {
+    keepSize,
+    tiny,
+    small,
+    medium,
+    large,
+    fill,
+    ...rest
+  } = props;
+
+  return rest;
+}