@alfalab/core-components-table 2.5.10 → 2.6.0

package/moderncssm/components/texpandable-row/index.module.css

@@ -0,0 +1,21 @@
+/* */
+
+.row {
+    cursor: pointer;
+}
+
+.selected.expanded {
+    background-color: inherit;
+}
+
+.expanded:hover {
+        background-color: inherit;
+    }
+
+.expandable td {
+        margin: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        border: none;
+        height: auto;
+    }

package/moderncssm/components/thead/Component.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import React from 'react';
+import { HTMLAttributes } from "react";
+type THeadProps = HTMLAttributes<HTMLTableSectionElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для tr
+     */
+    rowClassName?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const THead: React.FC<THeadProps>;
+export { THeadProps, THead };

package/moderncssm/components/thead/Component.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const THead = ({ className, rowClassName, children, dataTestId, ...restProps }) => (React.createElement("thead", { className: cn(styles.component, className), "data-test-id": dataTestId, ...restProps },
+    React.createElement("tr", { className: cn(styles.row, rowClassName) }, children)));
+
+export { THead };

package/moderncssm/components/thead/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/thead/index.js

@@ -0,0 +1 @@
+export { THead } from './Component.js';

package/moderncssm/components/thead/index.module.css

@@ -0,0 +1,32 @@
+/* */
+
+.component {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box
+}
+
+.component th:not(:last-child):not(:empty):after {
+        transition: opacity 0.2s;
+        position: absolute;
+        content: '';
+        display: block;
+
+        width: 1px;
+        right: 0;
+        top: var(--gap-8);
+        bottom: var(--gap-8);
+        background-color: var(--color-light-neutral-400);
+    }
+
+.component th:after {
+        opacity: 0;
+    }
+
+.component:hover th:after {
+        opacity: 1;
+    }
+
+.row {
+    height: 72px;
+}

package/moderncssm/components/thead-cell/Component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { ThHTMLAttributes } from "react";
+import { TextAlignProperty } from "../../typings";
+type THeadCellProps = ThHTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Ширина колонки
+     */
+    width?: string | number;
+    /**
+     * Скрытие колонки
+     */
+    hidden?: boolean;
+    /**
+     * Выравнивание текста в колонке
+     */
+    textAlign?: TextAlignProperty;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const THeadCell: ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }: THeadCellProps) => React.JSX.Element | null;
+export { THeadCellProps, THeadCell };

package/moderncssm/components/thead-cell/Component.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { TableContext } from '../table-context/index.js';
+import styles from './index.module.css';
+
+const THeadCell = ({ children, className, dataTestId, style, width, textAlign, hidden, ...restProps }) => {
+    const { compactHorizontal, stickyHeader } = useContext(TableContext);
+    if (hidden)
+        return null;
+    return (React.createElement("th", { className: cn(styles.component, className, compactHorizontal && styles.compactHorizontal, {
+            [styles.stickyHeader]: stickyHeader,
+        }), style: { ...style, width, textAlign }, "data-test-id": dataTestId, ...restProps }, children));
+};
+
+export { THeadCell };

package/moderncssm/components/thead-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/thead-cell/index.js

@@ -0,0 +1 @@
+export { THeadCell } from './Component.js';

package/moderncssm/components/thead-cell/index.module.css

@@ -0,0 +1,51 @@
+/* */
+
+.component {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+
+    line-height: 20px;
+    text-align: left;
+    color: var(--color-light-text-primary);
+    padding: var(--gap-32) var(--gap-12) var(--gap-4);
+    border-bottom: 1px solid var(--color-light-neutral-400);
+    background: var(--color-light-base-bg-primary);
+    vertical-align: top;
+    box-sizing: border-box
+}
+
+.component:first-child {
+        padding-left: var(--gap-16);
+    }
+
+.component:last-child {
+        padding-right: var(--gap-16);
+    }
+
+.component:not(.stickyHeader) {
+        position: relative;
+    }
+
+.sortable {
+    cursor: pointer;
+}
+
+.sorted {
+    color: var(--color-light-text-primary);
+}
+
+.stickyHeader {
+    top: 0;
+    position: sticky;
+    box-shadow: inset 0 -1px 0 0 rgba(11, 31, 53, 0.16);
+    border: none;
+    z-index: 1;
+}
+
+.compactHorizontal {
+    padding-left: 6px;
+    padding-right: 6px;
+}

package/moderncssm/components/trow/Component.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import React from 'react';
+import { HTMLAttributes } from "react";
+import { TCell, TCellProps } from "../tcell/index";
+type TCellElement = React.ReactElement<TCellProps, typeof TCell>;
+type TRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Компоненты ячеек
+     */
+    children: TCellElement | TCellElement[];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Стиль выбранной строки
+     */
+    selected?: boolean;
+    /**
+     * Убирает нижнюю границу
+     */
+    withoutBorder?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const TRow: ({ children, className, selected, withoutBorder, dataTestId, ...restProps }: TRowProps) => React.JSX.Element;
+export { TRowProps, TRow };

package/moderncssm/components/trow/Component.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const TRow = ({ children, className, selected, withoutBorder, dataTestId, ...restProps }) => (React.createElement("tr", { className: cn(styles.component, className, {
+        [styles.clickable]: typeof restProps.onClick !== 'undefined',
+        [styles.selected]: selected,
+        [styles.withoutBorder]: withoutBorder,
+    }), "data-test-id": dataTestId, ...restProps }, React.Children.map(children, (child, index) => React.cloneElement(child, { index }))));
+
+export { TRow };

package/moderncssm/components/trow/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/trow/index.js

@@ -0,0 +1 @@
+export { TRow } from './Component.js';

package/moderncssm/components/trow/index.module.css

@@ -0,0 +1,33 @@
+/* */
+
+.component {
+    padding-top: 1px;
+    width: 100%;
+    transition: background-color 0.2s;
+    box-sizing: border-box;
+    background: var(--color-light-base-bg-primary)
+}
+
+.component:first-child td {
+        border-top: 0;
+    }
+
+.withoutBorder td {
+        border: none;
+    }
+
+.clickable {
+    cursor: pointer
+}
+
+.clickable:hover {
+        background-color: var(--color-light-base-bg-secondary);
+    }
+
+.selected {
+    background-color: #f2f8ff /* нет цвета в палитре */
+}
+
+.selected:hover {
+        background-color: var(--color-static-graphic-solitude);
+    }

package/moderncssm/components/tsortable-head-cell/Component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { THeadCellProps } from "../thead-cell/index";
+type TSortableHeadCellProps = THeadCellProps & {
+    isSortedDesc?: boolean;
+    defaultIsSortedDesc?: boolean;
+    onSort?: () => void;
+};
+declare const TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: TSortableHeadCellProps) => React.JSX.Element;
+export { TSortableHeadCellProps, TSortableHeadCell };

package/moderncssm/components/tsortable-head-cell/Component.js

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { THeadCell } from '../thead-cell/Component.js';
+import { SortIconAsc } from './sort-icon-asc.js';
+import { SortIconDesc } from './sort-icon-desc.js';
+import { SortIconUnset } from './sort-icon-unset.js';
+import styles from './index.module.css';
+
+const TSortableHeadCell = ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }) => {
+    const SortIcon = useMemo(() => {
+        let value = isSortedDesc;
+        if (value === undefined)
+            value = defaultIsSortedDesc;
+        if (typeof value === 'boolean')
+            return value ? SortIconDesc : SortIconAsc;
+        return SortIconUnset;
+    }, [defaultIsSortedDesc, isSortedDesc]);
+    return (React.createElement(THeadCell, { className: className, textAlign: textAlign, ...restProps },
+        React.createElement("div", { className: cn(styles.content, { [styles.reverse]: textAlign === 'right' }) },
+            children,
+            React.createElement(SortIcon, { onClick: onSort, className: cn(styles.icon, {
+                    [styles.sorted]: isSortedDesc !== undefined,
+                }) }))));
+};
+
+export { TSortableHeadCell };

package/moderncssm/components/tsortable-head-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/tsortable-head-cell/index.js

@@ -0,0 +1 @@
+export { TSortableHeadCell } from './Component.js';

package/moderncssm/components/tsortable-head-cell/index.module.css

@@ -0,0 +1,41 @@
+/* */
+
+.content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.icon {
+    cursor: pointer;
+    margin-left: var(--gap-8);
+
+    /**
+     * иконка сортировки должна быть выровнена по верхнему краю,
+     * т.к. текст может быть в две строки
+     */
+    margin-top: 1px;
+    color: var(--color-light-neutral-700);
+    transition: color 0.2s ease;
+    flex-shrink: 0
+}
+
+.icon:hover {
+        color: var(--color-light-neutral-translucent-1300);
+    }
+
+.reverse {
+    flex-direction: row-reverse
+}
+
+.reverse .icon {
+        margin-left: 0;
+        margin-right: var(--gap-8);
+    }
+
+.sorted {
+    color: var(--color-light-status-info)
+}
+
+.sorted:hover {
+        color: var(--color-light-status-info);
+    }

package/moderncssm/components/tsortable-head-cell/sort-icon-asc.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SVGProps } from "react";
+declare const SortIconAsc: React.FC<SVGProps<SVGSVGElement>>;
+export { SortIconAsc };

package/moderncssm/components/tsortable-head-cell/sort-icon-asc.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const SortIconAsc = (props) => (React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img', ...props },
+    React.createElement("path", { d: 'M3.00004 10C3.00004 10 11.4477 10 12 10C12 9.33333 12.0001 8.16667 12.0001 7.5H3.0001C3.00006 8 3.0001 9.5 3.00004 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H9C9 5.33333 9 4.16667 9 3.5C9 3.5 3.55238 3.5 3.0001 3.5ZM3.00009 14C3.21041 14 15 14 15 14C15 13.5 15 12 15 11.5C15 11.5 3.55238 11.5 3.00009 11.5C3 12 3 13.5 3.00009 14Z' })));
+
+export { SortIconAsc };

package/moderncssm/components/tsortable-head-cell/sort-icon-desc.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SVGProps } from "react";
+declare const SortIconDesc: React.FC<SVGProps<SVGSVGElement>>;
+export { SortIconDesc };

package/moderncssm/components/tsortable-head-cell/sort-icon-desc.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const SortIconDesc = (props) => (React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img', ...props },
+    React.createElement("path", { d: 'M3.00004 10C3.00004 10 11.4477 10 12 10C12 9.33333 12.0001 8.16667 12.0001 7.5H3.0001C3.00006 8 3.0001 9.5 3.00004 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H15C15 5.33333 15 4.16667 15 3.5C15 3.5 3.55238 3.5 3.0001 3.5ZM3.00009 14C3.21041 14 9 14 9 14C9 13.5 9 12 9 11.5C9 11.5 3.55238 11.5 3.00009 11.5C3 12 3 13.5 3.00009 14Z' })));
+
+export { SortIconDesc };

package/moderncssm/components/tsortable-head-cell/sort-icon-unset.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SVGProps } from "react";
+declare const SortIconUnset: React.FC<SVGProps<SVGSVGElement>>;
+export { SortIconUnset };

package/moderncssm/components/tsortable-head-cell/sort-icon-unset.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const SortIconUnset = (props) => (React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', focusable: 'false', role: 'img', ...props },
+    React.createElement("path", { d: 'M3 10C3 10 10.4477 10 11 10C11 9.33333 11.0001 8.16667 11.0001 7.5H3.00006C3.00002 8 3.00006 9.5 3 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H15C15 5.33333 15 4.16667 15 3.5C15 3.5 3.55238 3.5 3.0001 3.5ZM3 14C3.21032 14 14 14 14 14C14 13.5 14 12 14 11.5C14 11.5 3.55228 11.5 3 11.5C2.99991 12 2.99991 13.5 3 14Z' })));
+
+export { SortIconUnset };

package/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { Table } from './component.js';

package/moderncssm/typings.d.ts

@@ -0,0 +1,2 @@
+type TextAlignProperty = 'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start';
+export { TextAlignProperty };

package/moderncssm/typings.js

@@ -0,0 +1 @@
+

package/moderncssm/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare function isChildInstanceOf<P>(child: React.ReactElement, Component: React.ComponentType<P>): boolean;
+export { isChildInstanceOf };

package/moderncssm/utils.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function isChildInstanceOf(child, Component) {
+    // мы не можем полагаться на child.type === Component, см. https://github.com/gaearon/react-hot-loader/issues/304
+    return child.type === React.createElement(Component).type;
+}
+
+export { isChildInstanceOf };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-table",
-    "version": "2.5.10",
+    "version": "2.6.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,12 +15,12 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.5.4",
-        "@alfalab/core-components-pagination": "^2.3.4",
-        "@alfalab/core-components-select": "^17.10.0",
+        "@alfalab/core-components-button": "^11.6.0",
+        "@alfalab/core-components-pagination": "^2.4.0",
+        "@alfalab/core-components-select": "^17.11.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/pagination/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     position: sticky;
@@ -7,7 +7,7 @@
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
-    padding: var(--gap-xl) var(--gap-m) var(--gap-2xl);
+    padding: var(--gap-24) var(--gap-16) var(--gap-32);
     border-top: 1px solid var(--color-light-neutral-400);
     box-sizing: border-box;
 }
@@ -18,8 +18,8 @@
 
 .tag.tag {
     flex-shrink: 0;
-    margin-right: var(--gap-xs);
-    padding: 0 var(--gap-xs);
+    margin-right: var(--gap-8);
+    padding: 0 var(--gap-8);
     min-width: 32px;
 
     &:last-child {
@@ -36,7 +36,7 @@
 }
 
 .menu {
-    margin: var(--gap-2xs) 0;
+    margin: var(--gap-4) 0;
 }
 
 .option {

package/src/components/pagination/select-field/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .field {
     & svg {

package/src/components/table/index.module.css

@@ -1,11 +1,11 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     box-sizing: border-box;
 }
 
 .wrapper {
-    padding: 0 var(--gap-m) var(--gap-m);
+    padding: 0 var(--gap-16) var(--gap-16);
     background: var(--color-light-base-bg-primary);
     box-shadow: var(--shadow-xs-hard);
     border-radius: var(--border-radius-m);

package/src/components/tbody/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     width: 100%;

package/src/components/tcell/index.module.css

@@ -1,21 +1,21 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     @mixin paragraph_primary_small;
 
     color: var(--color-light-text-primary);
-    padding: var(--gap-xl) var(--gap-s);
+    padding: var(--gap-24) var(--gap-12);
     height: 72px;
     border-top: 1px solid var(--color-light-neutral-400);
     vertical-align: top;
     box-sizing: border-box;
 
     &:first-child {
-        padding-left: var(--gap-m);
+        padding-left: var(--gap-16);
     }
 
     &:last-child {
-        padding-right: var(--gap-m);
+        padding-right: var(--gap-16);
     }
 }
 
@@ -25,8 +25,8 @@
 }
 
 .compact {
-    padding-top: var(--gap-xs);
-    padding-bottom: var(--gap-xs);
+    padding-top: var(--gap-8);
+    padding-bottom: var(--gap-8);
 
     max-width: 0;
     overflow: hidden;

package/src/components/texpandable-row/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .row {
     cursor: pointer;

package/src/components/thead/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     position: relative;
@@ -13,8 +13,8 @@
 
         width: 1px;
         right: 0;
-        top: var(--gap-xs);
-        bottom: var(--gap-xs);
+        top: var(--gap-8);
+        bottom: var(--gap-8);
         background-color: var(--color-light-neutral-400);
     }
 

package/src/components/thead-cell/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     @mixin paragraph_caps;
@@ -6,18 +6,18 @@
     line-height: 20px;
     text-align: left;
     color: var(--color-light-text-primary);
-    padding: var(--gap-2xl) var(--gap-s) var(--gap-2xs);
+    padding: var(--gap-32) var(--gap-12) var(--gap-4);
     border-bottom: 1px solid var(--color-light-neutral-400);
     background: var(--color-light-base-bg-primary);
     vertical-align: top;
     box-sizing: border-box;
 
     &:first-child {
-        padding-left: var(--gap-m);
+        padding-left: var(--gap-16);
     }
 
     &:last-child {
-        padding-right: var(--gap-m);
+        padding-right: var(--gap-16);
     }
 
     &:not(.stickyHeader) {

package/src/components/trow/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     padding-top: 1px;

package/src/components/tsortable-head-cell/Component.tsx

@@ -35,7 +35,7 @@ export const TSortableHeadCell = ({
     }, [defaultIsSortedDesc, isSortedDesc]);
 
     return (
-        <THeadCell className={className} {...restProps}>
+        <THeadCell className={className} textAlign={textAlign} {...restProps}>
             <div className={cn(styles.content, { [styles.reverse]: textAlign === 'right' })}>
                 {children}
                 <SortIcon