Move shadow style from TableCell and InlineCell to FieldInputs (#2078)

* Move shadow style from TableCell and InlineCell to FieldInputs

* Move overlay to inputs

* Complete work

front/src/modules/ui/data/data-table/components/DataTableHeader.tsx

@@ -19,7 +19,7 @@ import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
 import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
-const COLUMN_MIN_WIDTH = 75;
+const COLUMN_MIN_WIDTH = 104;
 
 const StyledColumnHeaderCell = styled.th<{
   columnWidth: number;

front/src/modules/ui/data/data-table/constants/countries.json

@@ -1,52 +0,0 @@
-{
-  "ch": "Switzerland",
-  "de": "Germany",
-  "ca": "Canada",
-  "us": "US",
-  "se": "Sweden",
-  "jp": "Japan",
-  "au": "Australia",
-  "gb": "UK",
-  "fr": "France",
-  "dk": "Denmark",
-  "nz": "New Zealand",
-  "nl": "Netherlands",
-  "no": "Norway",
-  "it": "Italy",
-  "fi": "Finland",
-  "es": "Spain",
-  "cn": "China",
-  "be": "Belgium",
-  "sg": "Singapore",
-  "kr": "South Korea",
-  "ae": "UAE",
-  "at": "Austria",
-  "ie": "Ireland",
-  "lu": "Luxembourg",
-  "gr": "Greece",
-  "pt": "Portugal",
-  "br": "Brazil",
-  "th": "Thailand",
-  "qa": "Qatar",
-  "tr": "Turkey",
-  "in": "India",
-  "pl": "Poland",
-  "mx": "Mexico",
-  "sa": "Saudi Arabia",
-  "eg": "Egypt",
-  "ru": "Russia",
-  "il": "Israel",
-  "ar": "Argentina",
-  "my": "Malaysia",
-  "cr": "Costa Rica",
-  "id": "Indonesia",
-  "za": "South Africa",
-  "ma": "Morocco",
-  "cz": "Czechia",
-  "hr": "Croatia",
-  "ph": "Philippines",
-  "vn": "Vietnam",
-  "hu": "Hungary",
-  "cl": "Chile",
-  "pe": "Peru"
-}

front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx

@@ -54,8 +54,6 @@ export const TableCellContainer = ({
   editModeContent,
   nonEditModeContent,
   editHotkeyScope,
-  transparent = false,
-  maxContentWidth,
   buttonIcon,
 }: TableCellContainerProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
@@ -114,8 +112,6 @@ export const TableCellContainer = ({
       >
         {isCurrentTableCellInEditMode ? (
           <TableCellEditMode
-            maxContentWidth={maxContentWidth}
-            transparent={transparent}
             editModeHorizontalAlign={editModeHorizontalAlign}
             editModeVerticalPosition={editModeVerticalPosition}
           >

front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx

@@ -1,27 +1,12 @@
 import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
-import { overlayBackground } from '@/ui/theme/constants/effects';
-
 const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
   align-items: center;
-  border: ${({ transparent, theme }) =>
-    transparent ? 'none' : `1px solid ${theme.border.color.light}`};
-  border-radius: ${({ transparent, theme }) =>
-    transparent ? 'none' : theme.border.radius.sm};
   display: flex;
-  left: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
   margin: -1px;
-  max-width: ${({ maxContentWidth }) =>
-    maxContentWidth ? `${maxContentWidth}px` : 'none'};
-  min-height: 100%;
-  min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
-  position: absolute;
-  right: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-  ${({ transparent }) => (transparent ? '' : overlayBackground)};
+  min-width: 200px;
+  width: calc(100% + 2px);
   z-index: 1;
 `;
 
@@ -38,12 +23,8 @@ export const TableCellEditMode = ({
   editModeHorizontalAlign,
   editModeVerticalPosition,
   children,
-  transparent = false,
-  maxContentWidth,
 }: TableCellEditModeProps) => (
   <StyledEditableCellEditModeContainer
-    maxContentWidth={maxContentWidth}
-    transparent={transparent}
     data-testid="editable-cell-edit-mode-container"
     editModeHorizontalAlign={editModeHorizontalAlign}
     editModeVerticalPosition={editModeVerticalPosition}