feat(TextFieldCell): add component

package.json

@@ -13,8 +13,8 @@
     }
   ],
   "peerDependencies": {
-    "@consta/icons": "^1.1.1",
-    "@consta/uikit": "^5.26.0",
+    "@consta/icons": "^1.6.0",
+    "@consta/uikit": "^5.30.0",
     "@reatom/core": "3.10.1",
     "@reatom/npm-react": "3.10.6"
   },

src/components/Collapse/Collapse.css

@@ -1,22 +1,25 @@
 .ct--Collapse {
   &-Content {
     display: grid;
-    grid-template-rows: 0fr;
+    grid-template-rows: 0;
     grid-template-columns: 100%;
-
     transition: grid-template-rows 0.2s ease-in-out;
+
     &_expanded {
       grid-template-rows: 1fr;
     }
   }
+
   &-ChildrenWrapper {
     overflow: hidden;
   }
+
   &-Title {
     display: flex;
     align-items: center;
     height: var(--control-height-s);
   }
+
   &-Toolbar.ct--Toolbar {
     background: var(--color-bg-secondary);
   }

src/components/Collapse/CollapseFullscreen/CollapseFullscreen.css

@@ -1,8 +1,8 @@
 .ct--CollapseFullscreen {
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   background-color: var(--color-bg-default);
 
@@ -13,9 +13,11 @@
   &-ToolbarWrapper {
     height: var(--collapse-toolbar-height);
   }
+
   &-ChildrenWrapper {
     height: calc(100% - var(--collapse-toolbar-height));
   }
+
   &-Toolbar.ct--Toolbar {
     background: var(--color-bg-secondary);
   }

src/components/Collapse/__stand__/examples/CollapseExampleFullscreenContainer/CollapseExampleFullscreenContainer.css

@@ -6,14 +6,16 @@
 
   &-Item {
     height: 360px;
+
     .ct--Collapse-Content {
-      height: calc(
-        100% -
+      height:
+        calc(
+          100% -
           calc(
             var(--control-height-s) + var(--control-border-width) +
-              var(--space-xs) * 2
+            var(--space-xs) * 2
           )
-      );
+        );
     }
   }
 

src/components/DataCell/DataCell.css

@@ -1,12 +1,15 @@
 /* --table-data-cell-level - задается в компоненте */
 .ct--DataCell {
-  padding-right: var(--space-s);
-  padding-left: calc(
+  --table-data-cell-padding-right: var(--space-s);
+  --table-data-cell-padding-left: calc(
     var(--space-s) + (var(--table-data-cell-slot-width) + var(--space-2xs)) *
       var(--table-data-cell-level, 0) +
       var(--table-data-cell-additional-space, calc(0 * 1px))
   );
 
+  padding-right: var(--table-data-cell-padding-right);
+  padding-left: var(--table-data-cell-padding-left);
+
   &_alignmentIndent {
     --table-data-cell-additional-space: calc(
       var(--table-data-cell-gap) - var(--space-2xs)
@@ -55,10 +58,24 @@
 
   &-ContentSlot {
     min-height: var(--table-data-cell-slot-height);
+
     &_truncate {
       overflow: hidden;
     }
   }
+
+  &-Text {
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    &_lineClamp {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: var(--table-data-cell-line-clamp);
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 
 .MixFlex.ct--DataCell {

src/components/DataCell/DataCell.tsx

@@ -21,6 +21,7 @@ export type DataCellProps = {
   size?: 'm' | 's';
   indicator?: 'alert' | 'warning';
   truncate?: boolean;
+  lineClamp?: number;
 } & JSX.IntrinsicElements['div'];
 
 const renderContentSlot = (
@@ -47,16 +48,20 @@ const renderChildren = (
   view: DataCellProps['view'],
   size: 'm' | 's',
   truncate: boolean,
+  lineClamp?: number,
 ) => {
   if (isString(children) || isNumber(children)) {
     return renderContentSlot(
       <Text
-        className={cnMixSpace({
-          pV: cellVerticalSpaceMap[size],
-        })}
+        className={cnDataCell('Text', { lineClamp: !!lineClamp }, [
+          cnMixSpace({
+            mV: cellVerticalSpaceMap[size],
+          }),
+        ])}
         view={view}
         size={size}
         truncate={truncate}
+        lineHeight="m"
       >
         {children}
       </Text>,
@@ -79,6 +84,7 @@ export const DataCell = forwardRef<HTMLDivElement, DataCellProps>(
       indicator,
       style,
       truncate = false,
+      lineClamp,
       ...otherProps
     } = props;
     const level = levelProp < 0 ? 0 : levelProp;
@@ -98,8 +104,10 @@ export const DataCell = forwardRef<HTMLDivElement, DataCellProps>(
     const childrenSlots = children
       ? [
           ...(Array.isArray(children)
-            ? children.map((item) => renderChildren(item, view, size, truncate))
-            : [renderChildren(children, view, size, truncate)]),
+            ? children.map((item) =>
+                renderChildren(item, view, size, truncate, lineClamp),
+              )
+            : [renderChildren(children, view, size, truncate, lineClamp)]),
         ]
       : [];
 
@@ -122,6 +130,7 @@ export const DataCell = forwardRef<HTMLDivElement, DataCellProps>(
           ['--table-data-cell-indicator-color' as string]: indicator
             ? `var(--color-bg-${indicator})`
             : undefined,
+          ['--table-data-cell-line-clamp' as string]: lineClamp || undefined,
         }}
         ref={ref}
       >

src/components/DataCell/__stand__/DataCell.dev.stand.mdx

@@ -37,6 +37,7 @@ import { DataCell } from '@consta/table/DataCell';
 | [`view?`](#вид)                  | `'primary'` | `'alert'` | `'success'` | `'warning'` | -            | Слот для контролов                         |
 | [`level?`](#уровень-вложенности) | `number`                                                           | `0`          | Уровень вложенности                        |
 | `truncate?`                      | `boolean`                                                          | -            | Заменяет переполненный текст на многоточие |
+| `lineClamp?`                     | `number`                                                           | -            | Обрезка текста по строкам                  |
 | `className?`                     | `string`                                                           | -            | Дополнительный CSS-класс                   |
 | `ref?`                           | `React.Ref<HTMLDivElement>`                                        | -            | Ссылка на корневой DOM-элемент             |
 

src/components/DataCell/__stand__/DataCell.variants.tsx

@@ -23,6 +23,7 @@ const Variants = () => {
 
   const text = useText('text', 'Значение ячейки');
   const size = useSelect('size', ['m', 's'], 'm');
+  const lineClamp = useNumber('lineClamp', 0);
   const view = useSelect(
     'view',
     ['primary', 'alert', 'success', 'warning'],
@@ -82,6 +83,7 @@ const Variants = () => {
         icon={widthIcon ? IconPhone : undefined}
         control={controlMap[control || 'without control']}
         indicator={indicator}
+        lineClamp={lineClamp}
       >
         {children}
       </DataCell>

src/components/Table/TableCell/TableCell.css

@@ -1,4 +1,5 @@
 .ct--TableCell {
+  --table-cell-edit-mode-border-color: var(--color-control-bg-border-focus);
   --table-cell-border-top: 0;
   --table-cell-border-bottom: 0;
   --table-cell-border-left: 0;
@@ -48,4 +49,17 @@
   &_up {
     z-index: 1;
   }
+
+  &:has([data-cell-edit-mode='true']) {
+    box-shadow: 1px 1px 0 0 var(--table-cell-edit-mode-border-color) inset,
+      -1px -1px 0 0 var(--table-cell-edit-mode-border-color) inset;
+  }
+
+  &:has([data-cell-status='alert']) {
+    --table-cell-edit-mode-border-color: var(--color-bg-alert);
+  }
+
+  &:has([data-cell-status='warning']) {
+    --table-cell-edit-mode-border-color: var(--color-bg-warning);
+  }
 }

src/components/Table/TableData/TableData.css

@@ -1,6 +1,6 @@
 .ct--TableData {
-  display: contents;
   --table-data-cell-bg: var(--color-bg-default);
+  display: contents;
 
   &-Cell {
     grid-column: span var(--table-cell-col-span, 1);
@@ -16,41 +16,45 @@
     display: contents;
 
     &_zebraStriped {
-      --table-data-cell-bg: color-mix(
-        in srgb,
-        rgb(from var(--color-bg-stripe) r g b / 1) 5%,
-        var(--color-bg-default)
-      );
+      --table-data-cell-bg:
+        color-mix(
+          in srgb,
+          rgb(from var(--color-bg-stripe) r g b / 1) 5%,
+          var(--color-bg-default)
+        );
     }
 
     &:has(> * > [data-row-active='true']) {
-      --table-data-cell-bg: color-mix(
-        in srgb,
-        rgb(from var(--color-control-bg-primary) r g b / 1) 15%,
-        var(--color-bg-default)
-      );
+      --table-data-cell-bg:
+        color-mix(
+          in srgb,
+          rgb(from var(--color-control-bg-primary) r g b / 1) 15%,
+          var(--color-bg-default)
+        );
     }
 
     &:has(> * > [data-row-hover='true']),
     .ct--TableData_rowHoverEffect &:hover {
-      --table-data-cell-bg: color-mix(
-        in srgb,
-        rgb(from var(--color-control-typo-ghost-hover) r g b / 1) 9%,
-        var(--color-bg-default)
-      );
+      --table-data-cell-bg:
+        color-mix(
+          in srgb,
+          rgb(from var(--color-control-typo-ghost-hover) r g b / 1) 9%,
+          var(--color-bg-default)
+        );
     }
 
     &:has(> * > [data-row-hover='true'][data-row-active='true']),
     .ct--TableData_rowHoverEffect &:hover:has(> * > [data-row-active='true']) {
-      --table-data-cell-bg: color-mix(
-        in srgb,
-        rgb(from var(--color-control-typo-ghost-hover) r g b / 1) 3%,
+      --table-data-cell-bg:
         color-mix(
           in srgb,
-          rgb(from var(--color-control-bg-primary) r g b / 1) 15%,
-          var(--color-bg-default)
-        )
-      );
+          rgb(from var(--color-control-typo-ghost-hover) r g b / 1) 3%,
+          color-mix(
+            in srgb,
+            rgb(from var(--color-control-bg-primary) r g b / 1) 15%,
+            var(--color-bg-default)
+          )
+        );
     }
   }
 }

src/components/Table/TableResizers/TableResizers.css

@@ -11,17 +11,19 @@
     --inner-line-width: 1px;
     --fast-transition: 0.15s ease-out;
     --resizer-width: 4px;
-    --resizer-top: calc(
-      (var(--table-header-height) - var(--table-resizer-top-offset)) * -1
-    );
+    --resizer-top:
+      calc(
+        (var(--table-header-height) - var(--table-resizer-top-offset)) * -1
+      );
     position: absolute;
     top: var(--resizer-top);
     right: 0;
     width: var(--resizer-width);
-    height: calc(
-      var(--table-body-height) - var(--table-resizer-top-offset) -
+    height:
+      calc(
+        var(--table-body-height) - var(--table-resizer-top-offset) -
         var(--table-body-horizontal-scroll-height) - 2px
-    );
+      );
     background-color: var(--color-bg-ghost);
     opacity: 0;
     cursor: col-resize;
@@ -45,10 +47,11 @@
       opacity: 1;
     }
   }
+
   &-VirtualScrollHelper {
     position: absolute;
     top: calc(var(--table-header-height) * -1);
-    pointer-events: none;
     width: 100%;
+    pointer-events: none;
   }
 }