@alfalab/core-components-table 2.5.11 → 2.6.1

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: var(--gap-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: var(--gap-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.11",
+    "version": "2.6.1",
     "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.5",
-        "@alfalab/core-components-pagination": "^2.3.5",
-        "@alfalab/core-components-select": "^17.10.1",
+        "@alfalab/core-components-button": "^11.7.0",
+        "@alfalab/core-components-pagination": "^2.4.1",
+        "@alfalab/core-components-select": "^17.12.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

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

@@ -1,8 +1,8 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     position: sticky;
-    left: 0;
+    left: var(--gap-0);
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -19,11 +19,11 @@
 .tag.tag {
     flex-shrink: 0;
     margin-right: var(--gap-8);
-    padding: 0 var(--gap-8);
+    padding: var(--gap-0) var(--gap-8);
     min-width: 32px;
 
     &:last-child {
-        margin-right: 0;
+        margin-right: var(--gap-0);
     }
 
     &.tagActive {
@@ -36,7 +36,7 @@
 }
 
 .menu {
-    margin: var(--gap-4) 0;
+    margin: var(--gap-4) var(--gap-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,14 +1,14 @@
-@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-16) var(--gap-16);
+    padding: var(--gap-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);
+    border-radius: var(--border-radius-8);
     overflow: auto;
 }
 
@@ -17,7 +17,7 @@
 }
 
 .hasPagination {
-    padding-bottom: 0;
+    padding-bottom: var(--gap-0);
 }
 
 .table {
@@ -29,7 +29,7 @@
     & td:first-child,
     & th:first-child {
         & label > *[class^='box'] {
-            margin-top: 0;
+            margin-top: var(--gap-0);
         }
     }
 }

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,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     @mixin paragraph_primary_small;

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;
@@ -16,9 +16,9 @@
 
 .expandable {
     & td {
-        margin: 0;
-        padding-top: 0;
-        padding-bottom: 0;
+        margin: var(--gap-0);
+        padding-top: var(--gap-0);
+        padding-bottom: var(--gap-0);
         border: none;
         height: auto;
     }

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;
@@ -12,7 +12,7 @@
         display: block;
 
         width: 1px;
-        right: 0;
+        right: var(--gap-0);
         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;
@@ -34,7 +34,7 @@
 }
 
 .stickyHeader {
-    top: 0;
+    top: var(--gap-0);
     position: sticky;
     box-shadow: inset 0 -1px 0 0 rgba(11, 31, 53, 0.16);
     border: none;

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/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .content {
     display: flex;
@@ -27,7 +27,7 @@
     flex-direction: row-reverse;
 
     & .icon {
-        margin-left: 0;
+        margin-left: var(--gap-0);
         margin-right: var(--gap-8);
     }
 }