From 248eb4d8385dd1ee560ce4bb3df27f2985c1be23 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Fri, 14 May 2021 15:23:06 +0300
Subject: [PATCH] fix(core-blocks): CB-991 pass div props through containers

---
 .../src/Containers/ColoredContainer.tsx       | 11 ++++----
 .../core-blocks/src/Containers/Container.tsx  | 11 ++++----
 .../core-blocks/src/Containers/Group.tsx      | 17 +++++++------
 .../core-blocks/src/Containers/GroupItem.tsx  | 14 +++--------
 .../core-blocks/src/Containers/GroupTitle.tsx | 14 +++--------
 .../src/Containers/IContainerProps.ts         |  2 +-
 .../Containers/filterContainerFakeProps.ts    | 25 +++++++++++++++++++
 .../src/Containers/filterLayoutFakeProps.ts   | 23 +++++++++++++++++
 8 files changed, 77 insertions(+), 40 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/Containers/filterContainerFakeProps.ts
 create mode 100644 webapp/packages/core-blocks/src/Containers/filterLayoutFakeProps.ts

diff --git a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
index 4dac1c0024..aa1770abd6 100644
--- a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
+++ b/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} />;
 });
diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx
index 729edee681..246412a3b5 100644
--- a/webapp/packages/core-blocks/src/Containers/Container.tsx
+++ b/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} />;
 });
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
index a366b44f70..1d0b2084bf 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.tsx
+++ b/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} />;
 });
diff --git a/webapp/packages/core-blocks/src/Containers/GroupItem.tsx b/webapp/packages/core-blocks/src/Containers/GroupItem.tsx
index 7fda0f808b..ac9d627b2e 100644
--- a/webapp/packages/core-blocks/src/Containers/GroupItem.tsx
+++ b/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} />;
 };
diff --git a/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx b/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx
index 15d5df45f4..aa75a006f2 100644
--- a/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx
+++ b/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} />;
 };
diff --git a/webapp/packages/core-blocks/src/Containers/IContainerProps.ts b/webapp/packages/core-blocks/src/Containers/IContainerProps.ts
index 7245a36ea7..4a10253242 100644
--- a/webapp/packages/core-blocks/src/Containers/IContainerProps.ts
+++ b/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;
diff --git a/webapp/packages/core-blocks/src/Containers/filterContainerFakeProps.ts b/webapp/packages/core-blocks/src/Containers/filterContainerFakeProps.ts
new file mode 100644
index 0000000000..8f378cb977
--- /dev/null
+++ b/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>;
+}
diff --git a/webapp/packages/core-blocks/src/Containers/filterLayoutFakeProps.ts b/webapp/packages/core-blocks/src/Containers/filterLayoutFakeProps.ts
new file mode 100644
index 0000000000..c403edb89a
--- /dev/null
+++ b/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;
+}