@ytsaurus/components 0.1.0

package/build/esm/components/ColumnCell/ColumnCell.js

@@ -0,0 +1,194 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import cn from 'bem-cn-lite';
+import { Button, Flex, Icon as UIKitIcon } from '@gravity-ui/uikit';
+import { Eye } from '@gravity-ui/icons';
+import unipika from '../../utils/unipika';
+import { ClipboardButton } from '../ClipboardButton';
+import { YqlValue } from '../YqlValue';
+import { Yson } from '../../internal/Yson';
+import { Label } from '../Label';
+import { Tooltip } from '../Tooltip';
+import { useUnipikaSettings, useYtComponentsConfig } from '../../context';
+import i18n from './i18n';
+import "./ColumnCell.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('yt-column-cell');
+function unquote(v) {
+  var match = /^"(.*)"$/.exec(v);
+  return match ? match[1] : v;
+}
+export function ColumnCell(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    yqlTypes = _ref.yqlTypes,
+    ysonSettings = _ref.ysonSettings,
+    allowRawStrings = _ref.allowRawStrings,
+    className = _ref.className,
+    rowIndex = _ref.rowIndex,
+    columnName = _ref.columnName,
+    onShowPreview = _ref.onShowPreview,
+    useYqlTypes = _ref.useYqlTypes;
+  var _useYtComponentsConfi = useYtComponentsConfig(),
+    logError = _useYtComponentsConfi.logError;
+  var contextUnipika = useUnipikaSettings();
+  var effectiveYsonSettings = ysonSettings || contextUnipika;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    return setHovered(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setHovered(false);
+  };
+  var formatType = yqlTypes && value ? yqlTypes[Number(value[1])] : undefined;
+  var escapedValue = formatType && value ? YqlValue.getFormattedValue(value[0], formatType, _objectSpread(_objectSpread({}, effectiveYsonSettings), {}, {
+    asHTML: false
+  })) : unipika.prettyprint(value, _objectSpread(_objectSpread({}, effectiveYsonSettings), {}, {
+    asHTML: false
+  }));
+  var formattedValue = formatType && value ? /*#__PURE__*/_jsx(YqlValue, {
+    value: value[0],
+    type: formatType,
+    settings: ysonSettings
+  }) : /*#__PURE__*/_jsx(Yson, {
+    value: value,
+    settings: ysonSettings
+  });
+  var _React$useMemo = React.useMemo(function () {
+      var isIncompleteTagged = false;
+      var isIncompleteValue = false;
+      var tag;
+      if (value && formatType) {
+        var flags = {
+          incomplete: false
+        };
+        var _unipika$converters$y = unipika.converters.yql([value[0], formatType], effectiveYsonSettings, flags),
+          $tag = _unipika$converters$y.$tag;
+        isIncompleteValue = flags.incomplete;
+        isIncompleteTagged = flags.incomplete && $tag;
+        tag = $tag;
+      } else if (value) {
+        isIncompleteValue = Boolean(value.$incomplete);
+      }
+      return {
+        tag: tag,
+        isIncompleteTagged: isIncompleteTagged,
+        isIncompleteValue: isIncompleteValue
+      };
+    }, [value, formatType, effectiveYsonSettings]),
+    tag = _React$useMemo.tag,
+    isIncompleteTagged = _React$useMemo.isIncompleteTagged,
+    isIncompleteValue = _React$useMemo.isIncompleteValue;
+  var valueType = useYqlTypes ? formatType : value === null || value === void 0 ? void 0 : value.$type;
+  var rawValue = useYqlTypes ? value === null || value === void 0 ? void 0 : value[0] : value === null || value === void 0 ? void 0 : value.$value;
+  var allowRawCopy = typeof rawValue === 'string' && isStringType(valueType, logError);
+  var useRawString = allowRawCopy && allowRawStrings;
+  var shiftCopyValue;
+  if (allowRawCopy) {
+    shiftCopyValue = useRawString ? unquote(escapedValue) : rawValue;
+  }
+  var copyTooltip = i18n('hold-shift-raw');
+  if (useRawString) {
+    copyTooltip = i18n('hold-shift-escaped');
+  }
+  var visibleValue = !useRawString ? formattedValue : /*#__PURE__*/_jsx("div", {
+    className: 'unipika-wrapper',
+    children: /*#__PURE__*/_jsx("pre", {
+      className: 'unipika',
+      children: /*#__PURE__*/_jsx("span", {
+        className: 'string',
+        children: rawValue
+      })
+    })
+  });
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isPreviewInProgress = _React$useState2[0],
+    setPreviewInProgress = _React$useState2[1];
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(null, className) /*dataTableBlock('value')*/,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [isIncompleteTagged ? /*#__PURE__*/_jsx(Label, {
+      theme: "warning",
+      text: i18n('incomplete-type', {
+        tag: tag
+      })
+    }) : visibleValue, (hovered || isIncompleteTagged) && /*#__PURE__*/_jsx("div", {
+      className: block('control-button-wrapper'),
+      children: /*#__PURE__*/_jsxs(Flex, {
+        alignItems: "center",
+        children: [value && !isIncompleteValue && /*#__PURE__*/_jsx(Tooltip, {
+          content: !allowRawCopy ? undefined : /*#__PURE__*/_jsx("span", {
+            className: block('copy-value-tooltip'),
+            children: copyTooltip
+          }),
+          children: /*#__PURE__*/_jsx(ClipboardButton, {
+            view: "flat-secondary",
+            size: "m",
+            text: useRawString ? rawValue : unquote(escapedValue),
+            shiftText: shiftCopyValue
+          })
+        }), isIncompleteValue && /*#__PURE__*/_jsx(Button, {
+          view: "flat-secondary",
+          size: "m",
+          qa: "truncated-preview-button",
+          onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            return _regeneratorRuntime().wrap(function (_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  setPreviewInProgress(true);
+                  _context.prev = 1;
+                  if (isPreviewInProgress) {
+                    _context.next = 2;
+                    break;
+                  }
+                  _context.next = 2;
+                  return onShowPreview(columnName, rowIndex, tag);
+                case 2:
+                  _context.prev = 2;
+                  setPreviewInProgress(false);
+                  return _context.finish(2);
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[1,, 2, 3]]);
+          })),
+          loading: isPreviewInProgress,
+          children: /*#__PURE__*/_jsx(UIKitIcon, {
+            data: Eye,
+            size: "12"
+          })
+        })]
+      })
+    })]
+  });
+}
+function isStringType(type, logError) {
+  if (!type) {
+    return false;
+  }
+  if (typeof type === 'string') {
+    return type === 'string';
+  }
+  try {
+    if (type[0] !== 'DataType') {
+      return false;
+    }
+    var lower = type[1].toLowerCase();
+    return lower === 'string' || lower === 'json' || lower === 'utf8';
+  } catch (error) {
+    logError === null || logError === void 0 || logError({
+      message: "ColumnCell: unexpected type: '".concat(JSON.stringify(type), "'")
+    }, error);
+    return false;
+  }
+}
+// #sourceMappingURL=ColumnCell.js.map

package/build/esm/components/ColumnCell/ColumnCell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","cn","Button","Flex","Icon","UIKitIcon","Eye","unipika","ClipboardButton","YqlValue","Yson","Label","Tooltip","useUnipikaSettings","useYtComponentsConfig","i18n","jsx","_jsx","jsxs","_jsxs","block","unquote","v","match","exec","ColumnCell","_ref","_ref$value","value","yqlTypes","ysonSettings","allowRawStrings","className","rowIndex","columnName","onShowPreview","useYqlTypes","_useYtComponentsConfi","logError","contextUnipika","effectiveYsonSettings","_useState","_useState2","_slicedToArray","hovered","setHovered","handleMouseEnter","handleMouseLeave","formatType","Number","undefined","escapedValue","getFormattedValue","_objectSpread","asHTML","prettyprint","formattedValue","type","settings","_React$useMemo","useMemo","isIncompleteTagged","isIncompleteValue","tag","flags","incomplete","_unipika$converters$y","converters","yql","$tag","Boolean","$incomplete","valueType","$type","rawValue","$value","allowRawCopy","isStringType","useRawString","shiftCopyValue","copyTooltip","visibleValue","children","_React$useState","_React$useState2","isPreviewInProgress","setPreviewInProgress","onMouseEnter","onMouseLeave","theme","text","alignItems","content","view","size","shiftText","qa","onClick","_asyncToGenerator","_regeneratorRuntime","mark","_callee","wrap","_context","prev","next","finish","stop","loading","data","lower","toLowerCase","error","message","concat","JSON","stringify"],"sources":["ColumnCell.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport cn from 'bem-cn-lite';\n\nimport {Button, Flex, Icon as UIKitIcon} from '@gravity-ui/uikit';\nimport {Eye} from '@gravity-ui/icons';\n\nimport unipika from '../../utils/unipika';\nimport {ClipboardButton} from '../ClipboardButton';\nimport {YqlValue} from '../YqlValue';\nimport {Yson} from '../../internal/Yson';\nimport {Label} from '../Label';\nimport {type TypeArray} from '../SchemaDataType/dataTypes';\nimport {Tooltip} from '../Tooltip';\nimport {UnipikaSettings} from '../../internal/Yson/StructuredYson/StructuredYsonTypes';\nimport {type LogErrorFn, useUnipikaSettings, useYtComponentsConfig} from '../../context';\n\nimport i18n from './i18n';\n\nimport './ColumnCell.scss';\n\nconst block = cn('yt-column-cell');\n\nfunction unquote(v: string) {\n    const match = /^\"(.*)\"$/.exec(v);\n    return match ? match[1] : v;\n}\n\ntype CellValueType =\n    | null\n    | (CellValueData & {\n          $incomplete?: boolean;\n          [k: number]: {inc?: boolean};\n      });\n\ntype CellValueData = {$type: string; $value: string} | {$type?: undefined; $value: unknown};\n\ntype ColumnCellProps = {\n    className?: string;\n\n    value?: CellValueType | null;\n    yqlTypes: Array<TypeArray> | null;\n    ysonSettings?: UnipikaSettings;\n    allowRawStrings?: boolean | null;\n    rowIndex: number;\n    columnName: string;\n    onShowPreview: (columnName: string, rowIndex: number, tag?: string) => void | Promise<void>;\n    useYqlTypes?: boolean;\n};\n\nexport function ColumnCell({\n    value = null,\n    yqlTypes,\n    ysonSettings,\n    allowRawStrings,\n    className,\n    rowIndex,\n    columnName,\n    onShowPreview,\n    useYqlTypes,\n}: ColumnCellProps) {\n    const {logError} = useYtComponentsConfig();\n    const contextUnipika = useUnipikaSettings();\n    const effectiveYsonSettings = ysonSettings || contextUnipika;\n    const [hovered, setHovered] = useState(false);\n    const handleMouseEnter = () => setHovered(true);\n    const handleMouseLeave = () => setHovered(false);\n\n    const formatType = yqlTypes && value ? yqlTypes[Number(value[1])] : undefined;\n\n    const escapedValue =\n        formatType && value\n            ? YqlValue.getFormattedValue(value[0], formatType, {\n                  ...effectiveYsonSettings,\n                  asHTML: false,\n              })\n            : unipika.prettyprint(value, {...effectiveYsonSettings, asHTML: false});\n    const formattedValue =\n        formatType && value ? (\n            <YqlValue value={value[0]} type={formatType} settings={ysonSettings} />\n        ) : (\n            <Yson value={value} settings={ysonSettings} />\n        );\n\n    const {tag, isIncompleteTagged, isIncompleteValue} = React.useMemo(() => {\n        let isIncompleteTagged = false;\n        let isIncompleteValue = false;\n        let tag: string | undefined;\n\n        if (value && formatType) {\n            const flags: {incomplete: boolean} = {incomplete: false};\n\n            const {$tag} = unipika.converters.yql(\n                [value[0], formatType],\n                effectiveYsonSettings,\n                flags,\n            );\n\n            isIncompleteValue = flags.incomplete;\n            isIncompleteTagged = flags.incomplete && $tag;\n            tag = $tag;\n        } else if (value) {\n            isIncompleteValue = Boolean(value.$incomplete);\n        }\n\n        return {tag, isIncompleteTagged, isIncompleteValue};\n    }, [value, formatType, effectiveYsonSettings]);\n\n    const valueType = useYqlTypes ? formatType : value?.$type;\n    const rawValue = useYqlTypes ? value?.[0] : value?.$value;\n\n    const allowRawCopy = typeof rawValue === 'string' && isStringType(valueType, logError);\n    const useRawString = allowRawCopy && allowRawStrings;\n    let shiftCopyValue;\n    if (allowRawCopy) {\n        shiftCopyValue = useRawString ? unquote(escapedValue) : rawValue;\n    }\n    let copyTooltip = i18n('hold-shift-raw');\n    if (useRawString) {\n        copyTooltip = i18n('hold-shift-escaped');\n    }\n\n    const visibleValue = !useRawString ? (\n        formattedValue\n    ) : (\n        <div className={'unipika-wrapper'}>\n            <pre className={'unipika'}>\n                <span className={'string'}>{rawValue}</span>\n            </pre>\n        </div>\n    );\n\n    const [isPreviewInProgress, setPreviewInProgress] = React.useState(false);\n\n    return (\n        <div\n            className={block(null, className) /*dataTableBlock('value')*/}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {isIncompleteTagged ? (\n                <Label theme=\"warning\" text={i18n('incomplete-type', {tag})} />\n            ) : (\n                visibleValue\n            )}\n            {(hovered || isIncompleteTagged) && (\n                <div className={block('control-button-wrapper')}>\n                    <Flex alignItems=\"center\">\n                        {value && !isIncompleteValue && (\n                            <Tooltip\n                                content={\n                                    !allowRawCopy ? undefined : (\n                                        <span className={block('copy-value-tooltip')}>\n                                            {copyTooltip}\n                                        </span>\n                                    )\n                                }\n                            >\n                                <ClipboardButton\n                                    view=\"flat-secondary\"\n                                    size=\"m\"\n                                    text={useRawString ? rawValue : unquote(escapedValue)}\n                                    shiftText={shiftCopyValue}\n                                />\n                            </Tooltip>\n                        )}\n                        {isIncompleteValue && (\n                            <Button\n                                view=\"flat-secondary\"\n                                size=\"m\"\n                                qa=\"truncated-preview-button\"\n                                onClick={async () => {\n                                    setPreviewInProgress(true);\n                                    try {\n                                        if (!isPreviewInProgress) {\n                                            await onShowPreview(columnName, rowIndex, tag);\n                                        }\n                                    } finally {\n                                        setPreviewInProgress(false);\n                                    }\n                                }}\n                                loading={isPreviewInProgress}\n                            >\n                                <UIKitIcon data={Eye} size=\"12\" />\n                            </Button>\n                        )}\n                    </Flex>\n                </div>\n            )}\n        </div>\n    );\n}\n\nfunction isStringType(type?: string | TypeArray, logError?: LogErrorFn) {\n    if (!type) {\n        return false;\n    }\n    if (typeof type === 'string') {\n        return type === 'string';\n    }\n\n    try {\n        if (type[0] !== 'DataType') {\n            return false;\n        }\n        const lower = type[1].toLowerCase();\n        return lower === 'string' || lower === 'json' || lower === 'utf8';\n    } catch (error: any) {\n        logError?.({message: `ColumnCell: unexpected type: '${JSON.stringify(type)}'`}, error);\n        return false;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/ColumnCell/ColumnCell.scss

@@ -0,0 +1,22 @@
+.yt-column-cell {
+    position: relative;
+    padding: var(--data-table-cell-vertical-padding) var(--data-table-cell-horizontal-padding);
+    padding-right: calc(var(--data-table-cell-horizontal-padding) + 20px);
+
+    &__control-button-wrapper {
+        opacity: 0.3;
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+
+        &:hover {
+            opacity: 0.5;
+        }
+    }
+
+    &__copy-value-tooltip {
+        white-space: nowrap;
+    }
+}

package/build/esm/components/ColumnCell/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "hold-shift-escaped": "Hold SHIFT-key to copy escaped value",
+    "hold-shift-raw": "Hold SHIFT-key to copy raw value",
+    "incomplete-type": "Incomplete '{{tag}}' type"
+}

package/build/esm/components/ColumnCell/i18n/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: ((key: "hold-shift-escaped" | "hold-shift-raw" | "incomplete-type", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "yt:column-cell": Record<"hold-shift-escaped" | "hold-shift-raw" | "incomplete-type", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/esm/components/ColumnCell/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnCell/i18n/index.ts"],"names":[],"mappings":";;;;;AAKA,wBAAyD"}

package/build/esm/components/ColumnCell/i18n/index.js

@@ -0,0 +1,8 @@
+import { addI18Keysets } from '../../../i18n';
+import en from './en.json';
+import ru from './ru.json';
+export default addI18Keysets('yt:column-cell', {
+  en: en,
+  ru: ru
+});
+// #sourceMappingURL=index.js.map

package/build/esm/components/ColumnCell/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addI18Keysets","en","ru"],"sources":["index.ts"],"sourcesContent":["import {addI18Keysets} from '../../../i18n';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport default addI18Keysets('yt:column-cell', {en, ru});\n"],"mappings":"AAAA,SAAQA,aAAa,QAAO,eAAe;AAE3C,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,eAAeF,aAAa,CAAC,gBAAgB,EAAE;EAACC,EAAE,EAAFA,EAAE;EAAEC,EAAE,EAAFA;AAAE,CAAC,CAAC","ignoreList":[]}

package/build/esm/components/ColumnCell/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+    "hold-shift-escaped": "Удерживайте SHIFT для копирования экранированного значения",
+    "hold-shift-raw": "Удерживайте SHIFT для копирования исходного значения",
+    "incomplete-type": "Неполный тип '{{tag}}'"
+}

package/build/esm/components/ColumnCell/index.d.ts

@@ -0,0 +1,2 @@
+export { ColumnCell } from './ColumnCell';
+//# sourceMappingURL=index.d.ts.map

package/build/esm/components/ColumnCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnCell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC"}

package/build/esm/components/ColumnCell/index.js

@@ -0,0 +1,2 @@
+export { ColumnCell } from './ColumnCell';
+// #sourceMappingURL=index.js.map

package/build/esm/components/ColumnCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ColumnCell"],"sources":["index.ts"],"sourcesContent":["export {ColumnCell} from './ColumnCell';\n"],"mappings":"AAAA,SAAQA,UAAU,QAAO,cAAc","ignoreList":[]}

package/build/esm/components/DataTableYT/DataTableYT.css

@@ -0,0 +1,74 @@
+.yt-data-table__content {
+  display: flex;
+  align-items: center;
+  padding: 1ex;
+  width: 100%;
+  height: 100%;
+  min-height: 30px;
+}
+.yt-data-table__content_align_center {
+  justify-content: space-around;
+}
+.yt-data-table__content_align_right {
+  justify-content: flex-end;
+}
+@keyframes shimmer {
+  0% {
+    opacity: 0.9;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.9;
+  }
+}
+.yt-data-table__no-data-placeholder {
+  background-color: var(--dark-divider);
+  animation: shimmer 2s ease-in-out infinite;
+  border-radius: 3px;
+  height: 10px;
+  width: 50%;
+}
+.yt-data-table .data-table_theme_yt .data-table__td,
+.yt-data-table .data-table_theme_yt .data-table__th,
+.yt-data-table .data-table_theme_yt-borderless .data-table__td,
+.yt-data-table .data-table_theme_yt-borderless .data-table__th {
+  padding-top: 12px;
+  padding-bottom: 9px;
+}
+.yt-data-table .data-table_theme_yt .data-table__row,
+.yt-data-table .data-table_theme_yt .data-table__head-row,
+.yt-data-table .data-table_theme_yt-borderless .data-table__row,
+.yt-data-table .data-table_theme_yt-borderless .data-table__head-row {
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.yt-data-table .data-table_theme_yt .data-table__th,
+.yt-data-table .data-table_theme_yt-borderless .data-table__th {
+  background-color: var(--main-background);
+}
+.yt-data-table .data-table_theme_yt-borderless .data-table__row:hover {
+  background-color: var(--hover-background);
+}
+.yt-data-table .data-table_theme_yt-borderless .data-table__row {
+  border-bottom: none;
+}
+.yt-data-table .data-table_theme_yt-borderless .data-table__head-row {
+  border-bottom: 1px solid var(--dark-divider);
+}
+.yt-data-table .data-table__box_sticky-head_moving .data-table__th {
+  padding-bottom: 0;
+  padding-bottom: initial;
+  padding-top: 0;
+  padding-top: initial;
+}
+.yt-data-table_right-gap .data-table__th:last-child::before {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: 0;
+  margin-right: -10px;
+}
+/*# sourceMappingURL=DataTableYT.css.map */

package/build/esm/components/DataTableYT/DataTableYT.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DataTableYT.scss"],"names":[],"mappings":"AACI;EACI,aAAA;EACA,mBAAA;EACA,YAAA;EAEA,WAAA;EACA,YAAA;EACA,gBAAA;AADR;AAGQ;EACI,6BAAA;AADZ;AAIQ;EACI,yBAAA;AAFZ;AAMI;EACI;IACI,YAAA;EAJV;EAMM;IACI,YAAA;EAJV;EAMM;IACI,YAAA;EAJV;AACF;AAOI;EACI,qCAAA;EACA,0CAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;AALR;AAUQ;;;;EAEI,iBAAA;EACA,mBAAA;AANZ;AASQ;;;;EAEI,oDAAA;AALZ;AAQQ;;EACI,wCAAA;AALZ;AAUQ;EACI,yCAAA;AARZ;AAWQ;EACI,mBAAA;AATZ;AAYQ;EACI,4CAAA;AAVZ;AAcI;EAEI,iBAAA;EAAA,uBAAA;EACA,cAAA;EAAA,oBAAA;AAbR;AAkBQ;EACI,WAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,mBAAA;AAhBZ","file":"DataTableYT.css","sourcesContent":[".yt-data-table {\n    &__content {\n        display: flex;\n        align-items: center;\n        padding: 1ex;\n\n        width: 100%;\n        height: 100%;\n        min-height: 30px;\n\n        &_align_center {\n            justify-content: space-around;\n        }\n\n        &_align_right {\n            justify-content: flex-end;\n        }\n    }\n\n    @keyframes shimmer {\n        0% {\n            opacity: 0.9;\n        }\n        50% {\n            opacity: 0.5;\n        }\n        100% {\n            opacity: 0.9;\n        }\n    }\n\n    &__no-data-placeholder {\n        background-color: var(--dark-divider);\n        animation: shimmer 2s ease-in-out infinite;\n        border-radius: 3px;\n        height: 10px;\n        width: 50%;\n    }\n\n    .data-table_theme_yt,\n    .data-table_theme_yt-borderless {\n        .data-table__td,\n        .data-table__th {\n            padding-top: 12px;\n            padding-bottom: 9px;\n        }\n\n        .data-table__row,\n        .data-table__head-row {\n            border-bottom: 1px solid var(--g-color-line-generic);\n        }\n\n        .data-table__th {\n            background-color: var(--main-background);\n        }\n    }\n\n    .data-table_theme_yt-borderless {\n        .data-table__row:hover {\n            background-color: var(--hover-background);\n        }\n\n        .data-table__row {\n            border-bottom: none;\n        }\n\n        .data-table__head-row {\n            border-bottom: 1px solid var(--dark-divider);\n        }\n    }\n\n    .data-table__box_sticky-head_moving .data-table__th {\n        // to collapse thead-element of\n        padding-bottom: unset;\n        padding-top: unset;\n    }\n\n    &_right-gap {\n        // the block is required to make right-gap for tables wider than the screen width\n        .data-table__th:last-child::before {\n            content: '';\n            display: block;\n            width: 10px;\n            height: 10px;\n            position: absolute;\n            right: 0;\n            margin-right: -10px;\n        }\n    }\n}\n"],"sourceRoot":""}

package/build/esm/components/DataTableYT/DataTableYT.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Column, DataTableProps } from '@gravity-ui/react-data-table';
+export type { Column };
+import './DataTableYT.scss';
+export type DataTableYtProps<T> = {
+    loaded?: boolean;
+    loading?: boolean;
+    className?: string;
+    disableRightGap?: boolean;
+    noItemsText?: string;
+} & Omit<DataTableProps<T>, 'theme'> & ThemeProps<T>;
+type ThemeProps<T> = WithThemeYT | Pick<DataTableProps<T>, 'theme'>;
+interface WithThemeYT {
+    useThemeYT: true;
+}
+export declare class DataTableYT<T> extends React.Component<DataTableYtProps<T>> {
+    private dataTable;
+    isEmpty(): boolean | undefined;
+    renderEmptyRow: () => import("react/jsx-runtime").JSX.Element[] | null;
+    renderNoContent(): import("react/jsx-runtime").JSX.Element | null;
+    renderLoadingSkeleton(): import("react/jsx-runtime").JSX.Element[];
+    renderEmptyCell: (column: Column<T>) => import("react/jsx-runtime").JSX.Element;
+    onError: (e: any) => never;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=DataTableYT.d.ts.map

package/build/esm/components/DataTableYT/DataTableYT.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableYT.d.ts","sourceRoot":"","sources":["../../../../src/components/DataTableYT/DataTableYT.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAkB,EAAC,MAAM,EAAE,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAC/E,YAAY,EAAC,MAAM,EAAC,CAAC;AAKrB,OAAO,oBAAoB,CAAC;AAI5B,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAChC,UAAU,CAAC,CAAC,CAAC,CAAC;AAElB,KAAK,UAAU,CAAC,CAAC,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;AAEpE,UAAU,WAAW;IACjB,UAAU,EAAE,IAAI,CAAC;CACpB;AAED,qBAAa,WAAW,CAAC,CAAC,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACpE,OAAO,CAAC,SAAS,CAAmC;IAEpD,OAAO;IAKP,cAAc,yDAMZ;IAEF,eAAe;IAYf,qBAAqB;IASrB,eAAe,GAAI,QAAQ,MAAM,CAAC,CAAC,CAAC,6CASlC;IAEF,OAAO,GAAI,GAAG,GAAG,WAEf;IAEF,MAAM;CAqBT"}

package/build/esm/components/DataTableYT/DataTableYT.js

@@ -0,0 +1,127 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _callSuper from "@babel/runtime/helpers/callSuper";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className", "disableRightGap"];
+import React from 'react';
+import cn from 'bem-cn-lite';
+import map_ from 'lodash/map';
+import range_ from 'lodash/range';
+import DataTable from '@gravity-ui/react-data-table';
+import { NoContent } from '../NoContent';
+import i18n from './i18n';
+import "./DataTableYT.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('yt-data-table');
+export var DataTableYT = /*#__PURE__*/function (_React$Component) {
+  function DataTableYT() {
+    var _this;
+    _classCallCheck(this, DataTableYT);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, DataTableYT, [].concat(args));
+    _this.dataTable = /*#__PURE__*/React.createRef();
+    _this.renderEmptyRow = function () {
+      var _this$props = _this.props,
+        loaded = _this$props.loaded,
+        loading = _this$props.loading;
+      if (loading && !loaded) {
+        return _this.renderLoadingSkeleton();
+      }
+      return null;
+    };
+    _this.renderEmptyCell = function (column) {
+      var name = column.name,
+        align = column.align;
+      return /*#__PURE__*/_jsx("td", {
+        className: block('td', {
+          empty: true
+        }, 'data-table__td'),
+        children: /*#__PURE__*/_jsx("div", {
+          className: block('content', {
+            empty: true,
+            align: align
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            className: block('no-data-placeholder')
+          })
+        })
+      }, name);
+    };
+    _this.onError = function (e) {
+      throw e;
+    };
+    return _this;
+  }
+  _inherits(DataTableYT, _React$Component);
+  return _createClass(DataTableYT, [{
+    key: "isEmpty",
+    value: function isEmpty() {
+      var _this$props2 = this.props,
+        loaded = _this$props2.loaded,
+        data = _this$props2.data;
+      return loaded && data.length === 0;
+    }
+  }, {
+    key: "renderNoContent",
+    value: function renderNoContent() {
+      var _this$props3 = this.props,
+        loaded = _this$props3.loaded,
+        data = _this$props3.data,
+        noItemsText = _this$props3.noItemsText;
+      if (loaded && data.length === 0) {
+        return /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(NoContent, {
+            padding: "regular",
+            warning: noItemsText !== null && noItemsText !== void 0 ? noItemsText : i18n('no-items')
+          })
+        });
+      }
+      return null;
+    }
+  }, {
+    key: "renderLoadingSkeleton",
+    value: function renderLoadingSkeleton() {
+      var _this2 = this;
+      var columns = this.props.columns;
+      return map_(range_(4), function (index) {
+        return /*#__PURE__*/_jsx("tr", {
+          className: block('tr', {
+            empty: true
+          }, 'data-table__row'),
+          children: map_(columns, _this2.renderEmptyCell)
+        }, index);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        className = _this$props4.className,
+        disableRightGap = _this$props4.disableRightGap,
+        rest = _objectWithoutProperties(_this$props4, _excluded);
+      var _ref = rest,
+        useThemeYT = _ref.useThemeYT;
+      var _ref2 = rest,
+        theme = _ref2.theme;
+      var tableTheme = useThemeYT ? 'yt' : theme;
+      return /*#__PURE__*/_jsxs("div", {
+        className: block({
+          'right-gap': !disableRightGap
+        }, className),
+        children: [/*#__PURE__*/_jsx(DataTable, _objectSpread(_objectSpread({
+          ref: this.dataTable,
+          emptyDataMessage: ""
+        }, rest), {}, {
+          theme: tableTheme,
+          renderEmptyRow: this.renderEmptyRow,
+          onError: this.onError
+        })), this.renderNoContent()]
+      });
+    }
+  }]);
+}(React.Component);
+// #sourceMappingURL=DataTableYT.js.map

package/build/esm/components/DataTableYT/DataTableYT.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","map_","range_","DataTable","NoContent","i18n","jsx","_jsx","jsxs","_jsxs","block","DataTableYT","_React$Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","dataTable","createRef","renderEmptyRow","_this$props","props","loaded","loading","renderLoadingSkeleton","renderEmptyCell","column","name","align","className","empty","children","onError","e","_inherits","_createClass","key","value","isEmpty","_this$props2","data","renderNoContent","_this$props3","noItemsText","padding","warning","_this2","columns","index","render","_this$props4","disableRightGap","rest","_objectWithoutProperties","_excluded","_ref","useThemeYT","_ref2","theme","tableTheme","_objectSpread","ref","emptyDataMessage","Component"],"sources":["DataTableYT.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'bem-cn-lite';\n\nimport map_ from 'lodash/map';\nimport range_ from 'lodash/range';\n\nimport DataTable, {Column, DataTableProps} from '@gravity-ui/react-data-table';\nexport type {Column};\nimport {NoContent} from '../NoContent';\n\nimport i18n from './i18n';\n\nimport './DataTableYT.scss';\n\nconst block = cn('yt-data-table');\n\nexport type DataTableYtProps<T> = {\n    loaded?: boolean;\n    loading?: boolean;\n    className?: string;\n    disableRightGap?: boolean;\n    noItemsText?: string;\n} & Omit<DataTableProps<T>, 'theme'> &\n    ThemeProps<T>;\n\ntype ThemeProps<T> = WithThemeYT | Pick<DataTableProps<T>, 'theme'>;\n\ninterface WithThemeYT {\n    useThemeYT: true;\n}\n\nexport class DataTableYT<T> extends React.Component<DataTableYtProps<T>> {\n    private dataTable = React.createRef<DataTable<T>>();\n\n    isEmpty() {\n        const {loaded, data} = this.props;\n        return loaded && data.length === 0;\n    }\n\n    renderEmptyRow = () => {\n        const {loaded, loading} = this.props;\n        if (loading && !loaded) {\n            return this.renderLoadingSkeleton();\n        }\n        return null;\n    };\n\n    renderNoContent() {\n        const {loaded, data, noItemsText} = this.props;\n        if (loaded && data.length === 0) {\n            return (\n                <div>\n                    <NoContent padding=\"regular\" warning={noItemsText ?? i18n('no-items')} />\n                </div>\n            );\n        }\n        return null;\n    }\n\n    renderLoadingSkeleton() {\n        const {columns} = this.props;\n        return map_(range_(4), (index) => (\n            <tr key={index} className={block('tr', {empty: true}, 'data-table__row')}>\n                {map_(columns, this.renderEmptyCell)}\n            </tr>\n        ));\n    }\n\n    renderEmptyCell = (column: Column<T>) => {\n        const {name, align} = column;\n        return (\n            <td key={name} className={block('td', {empty: true}, 'data-table__td')}>\n                <div className={block('content', {empty: true, align})}>\n                    <div className={block('no-data-placeholder')} />\n                </div>\n            </td>\n        );\n    };\n\n    onError = (e: any) => {\n        throw e;\n    };\n\n    render() {\n        const {className, disableRightGap, ...rest} = this.props;\n\n        const {useThemeYT} = rest as WithThemeYT;\n        const {theme} = rest as DataTableProps<T>;\n\n        const tableTheme = useThemeYT ? 'yt' : theme;\n        return (\n            <div className={block({'right-gap': !disableRightGap}, className)}>\n                <DataTable\n                    ref={this.dataTable}\n                    emptyDataMessage=\"\"\n                    {...rest}\n                    theme={tableTheme}\n                    renderEmptyRow={this.renderEmptyRow}\n                    onError={this.onError}\n                />\n                {this.renderNoContent()}\n            </div>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/DataTableYT/DataTableYT.scss

@@ -0,0 +1,90 @@
+.yt-data-table {
+    &__content {
+        display: flex;
+        align-items: center;
+        padding: 1ex;
+
+        width: 100%;
+        height: 100%;
+        min-height: 30px;
+
+        &_align_center {
+            justify-content: space-around;
+        }
+
+        &_align_right {
+            justify-content: flex-end;
+        }
+    }
+
+    @keyframes shimmer {
+        0% {
+            opacity: 0.9;
+        }
+        50% {
+            opacity: 0.5;
+        }
+        100% {
+            opacity: 0.9;
+        }
+    }
+
+    &__no-data-placeholder {
+        background-color: var(--dark-divider);
+        animation: shimmer 2s ease-in-out infinite;
+        border-radius: 3px;
+        height: 10px;
+        width: 50%;
+    }
+
+    .data-table_theme_yt,
+    .data-table_theme_yt-borderless {
+        .data-table__td,
+        .data-table__th {
+            padding-top: 12px;
+            padding-bottom: 9px;
+        }
+
+        .data-table__row,
+        .data-table__head-row {
+            border-bottom: 1px solid var(--g-color-line-generic);
+        }
+
+        .data-table__th {
+            background-color: var(--main-background);
+        }
+    }
+
+    .data-table_theme_yt-borderless {
+        .data-table__row:hover {
+            background-color: var(--hover-background);
+        }
+
+        .data-table__row {
+            border-bottom: none;
+        }
+
+        .data-table__head-row {
+            border-bottom: 1px solid var(--dark-divider);
+        }
+    }
+
+    .data-table__box_sticky-head_moving .data-table__th {
+        // to collapse thead-element of
+        padding-bottom: unset;
+        padding-top: unset;
+    }
+
+    &_right-gap {
+        // the block is required to make right-gap for tables wider than the screen width
+        .data-table__th:last-child::before {
+            content: '';
+            display: block;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            right: 0;
+            margin-right: -10px;
+        }
+    }
+}