profinansy-ui-lib 3.3.61 → 3.3.62

package/dist/components/uikit/Table/components/TBody/TBody.styled.js

@@ -0,0 +1,173 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TDItem = exports.ExpandTR = exports.TR = exports.TD = exports.TBody = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../utils");
+const common_1 = require("../../../../../constants/common");
+exports.TBody = styled_components_1.default.tbody `
+  &:before {
+    position: relative;
+    z-index: 3;
+    content: '';
+    display: table;
+    width: 100%;
+    height: 12px;
+  }
+`;
+const getBorderForFirstColumn = (mode, theme) => {
+    if (mode === 'light') {
+        return {
+            right: '-6px',
+            width: '6px',
+            backgroundImage: 'linear-gradient(90deg, #e0e3eb54, #fff0)'
+        };
+    }
+    return {
+        right: 0,
+        borderRight: `1px solid ${theme.stroke.primary}`
+    };
+};
+const getBorderForLastColumn = (mode, theme) => {
+    if (mode === 'light') {
+        return {
+            left: '-3px',
+            width: '3px',
+            backgroundImage: 'linear-gradient(90deg, #fff0, #e0e3eb54)'
+        };
+    }
+    return {
+        left: 0,
+        borderRight: `1px solid ${theme.stroke.primary}`
+    };
+};
+exports.TD = styled_components_1.default.td `
+  padding: 0 12px;
+  background: transparent;
+  border-bottom: 1px dashed ${(props) => props.theme.stroke.tertiary};
+  ${(props) => props.maxWidth &&
+    (0, styled_components_1.css) `
+      max-width: ${props.maxWidth};
+    `}
+  ${(props) => props.width &&
+    (0, styled_components_1.css) `
+      max-width: ${props.width};
+    `}
+  ${(props) => props.stickyFirstColumn &&
+    (0, styled_components_1.css) `
+      &:first-of-type {
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        background: ${(props) => props.theme.background.content};
+        ${(props) => props.isScrolled &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              top: 0;
+              z-index: -1;
+              ${getBorderForFirstColumn(props.mode, props.theme)};
+            }
+          `};
+        @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+          max-width: 140px;
+        }
+      }
+    `}
+  ${(props) => props.stickyLastColumn &&
+    (0, styled_components_1.css) `
+      &:last-of-type {
+        position: sticky;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        background: ${(props) => props.theme.background.content};
+        ${(props) => !props.isScrolledEnd &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              top: 0;
+              z-index: -1;
+              ${getBorderForLastColumn(props.mode, props.theme)};
+            }
+          `}
+      }
+    `}
+`;
+exports.TR = styled_components_1.default.tr `
+  ${(props) => props.isActive &&
+    (0, styled_components_1.css) `
+      ${exports.TD} {
+        background: ${(props) => props.theme.interactiveControls.accent};
+        &:first-of-type {
+          border-radius: 8px 0 0 8px;
+        }
+        &:last-of-type {
+          border-radius: 0 8px 8px 0;
+        }
+      }
+    `}
+  ${(props) => props.isClick &&
+    (0, styled_components_1.css) `
+      cursor: pointer;
+    `}
+  ${(props) => props.withoutBorder &&
+    (0, styled_components_1.css) `
+      & > td {
+        border-bottom: none !important;
+      }
+    `}
+  &:hover {
+    ${exports.TD} {
+      background: ${(props) => props.theme.interactiveControls.accent};
+      &:first-of-type {
+        border-radius: 8px 0 0 8px;
+      }
+      &:last-of-type {
+        border-radius: 0 8px 8px 0;
+      }
+    }
+  }
+`;
+exports.ExpandTR = styled_components_1.default.tr `
+  & > td {
+    border-bottom: 1px dashed ${(props) => props.theme.stroke.tertiary};
+  }
+`;
+exports.TDItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  ${({ alignment }) => (0, utils_1.getAlignment)(alignment)}
+`;
+//# sourceMappingURL=TBody.styled.js.map

package/dist/components/uikit/Table/components/TBody/TBody.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TBody.styled.js","sourceRoot":"","sources":["../../../../../../src/components/uikit/Table/components/TBody/TBody.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/uikit/Table/components/TCellText/TCellText.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TCellText = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Typography_1 = require("../../../Typography");
+const HiddenText_1 = require("../../../HiddenText");
+const TCellText = ({ children, hiddenText, style, className, valueNumber, nowrap }) => {
+    const props = {};
+    if (nowrap)
+        props.whiteSpace = 'nowrap';
+    if (hiddenText) {
+        return (react_1.default.createElement(HiddenText_1.HiddenText, Object.assign({}, hiddenText),
+            react_1.default.createElement(Typography_1.Typography, Object.assign({ variant: "caption-Medium", tag: "span", colorName: "primary", valueNumber: valueNumber, className: (0, classnames_1.default)(className, 'TCellText') }, props, style), children)));
+    }
+    return (react_1.default.createElement(Typography_1.Typography, Object.assign({ variant: "caption-Medium", tag: "span", colorName: "primary", valueNumber: valueNumber, className: (0, classnames_1.default)(className, 'TCellText') }, props, style), children));
+};
+exports.TCellText = TCellText;
+//# sourceMappingURL=TCellText.js.map

package/dist/components/uikit/Table/components/TCellText/TCellText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TCellText.js","sourceRoot":"","sources":["../../../../../../src/components/uikit/Table/components/TCellText/TCellText.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAuD;AACvD,4DAAmC;AACnC,oDAAgD;AAEhD,oDAAgD;AAgBhD,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,SAAS,EACT,WAAW,EACX,MAAM,EACC,EAAE,EAAE;IACX,MAAM,KAAK,GAAG,EAAmB,CAAA;IAEjC,IAAI,MAAM;QAAE,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;IAEvC,IAAI,UAAU,EAAE;QACd,OAAO,CACL,8BAAC,uBAAU,oBAAK,UAAU;YACxB,8BAAC,uBAAU,kBACT,OAAO,EAAC,gBAAgB,EACxB,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,SAAS,EACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,WAAW,CAAC,IACzC,KAAK,EACL,KAAK,GAER,QAAQ,CACE,CACF,CACd,CAAA;KACF;IAED,OAAO,CACL,8BAAC,uBAAU,kBACT,OAAO,EAAC,gBAAgB,EACxB,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,SAAS,EACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,WAAW,CAAC,IACzC,KAAK,EACL,KAAK,GAER,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAEQ,8BAAS"}

package/dist/components/uikit/Table/components/THead/THead.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THead = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./THead.styled"));
+const Typography_1 = require("../../../Typography");
+const Popup_1 = require("../../../Popup");
+const ThemeProvider_1 = require("../../../../../theme/ThemeProvider");
+const THead = ({ columns, hints, stickyFirstColumn = false, stickyLastColumn = false, stickyHeader = false, isScrolled, isScrolledEnd, activeSortField, sortRotated, handleSort }) => {
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    const getText = (text) => {
+        return text.split('\n').map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            item,
+            react_1.default.createElement("br", null))));
+    };
+    return (react_1.default.createElement(Styled.THead, { stickyHeader: stickyHeader },
+        react_1.default.createElement("tr", null, columns.map((column, index) => (react_1.default.createElement(Styled.TH, { mode: mode, isSort: column.sort, key: index, stickyFirstColumn: stickyFirstColumn, stickyLastColumn: stickyLastColumn, isScrolled: isScrolled, isScrolledEnd: isScrolledEnd, onClick: () => column.sort ? handleSort(String(column.key)) : null },
+            react_1.default.createElement(Styled.THItem, { alignment: column.alignment },
+                activeSortField === column.key && (react_1.default.createElement(Styled.Sort, { sortRotated: sortRotated })),
+                react_1.default.createElement(Typography_1.Typography, { variant: "caption-Bold", tag: "span", whiteSpace: "nowrap", colorName: "primary" }, getText(column.title)),
+                !!column.hint && hints ? (react_1.default.createElement(Popup_1.Popup, { content: hints[column.hint] || [] })) : null)))))));
+};
+exports.THead = THead;
+//# sourceMappingURL=THead.js.map

package/dist/components/uikit/Table/components/THead/THead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"THead.js","sourceRoot":"","sources":["../../../../../../src/components/uikit/Table/components/THead/THead.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,uDAAwC;AAExC,oDAAgD;AAChD,0CAAsC;AACtC,sEAA4D;AAE5D,MAAM,KAAK,GAAG,CAAC,EACb,OAAO,EACP,KAAK,EACL,iBAAiB,GAAG,KAAK,EACzB,gBAAgB,GAAG,KAAK,EACxB,YAAY,GAAG,KAAK,EACpB,UAAU,EACV,aAAa,EACb,eAAe,EACf,WAAW,EACX,UAAU,EACJ,EAAE,EAAE;IACV,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE;QAC/B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;YACvB,IAAI;YACL,yCAAM,CACS,CAClB,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,8BAAC,MAAM,CAAC,KAAK,IAAC,YAAY,EAAE,YAAY;QACtC,0CACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,8BAAC,MAAM,CAAC,EAAE,IACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,IAAI,EACnB,GAAG,EAAE,KAAK,EACV,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,GAAG,EAAE,CACZ,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAGrD,8BAAC,MAAM,CAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS;gBACvC,eAAe,KAAK,MAAM,CAAC,GAAG,IAAI,CACjC,8BAAC,MAAM,CAAC,IAAI,IAAC,WAAW,EAAE,WAAW,GAAI,CAC1C;gBACD,8BAAC,uBAAU,IACT,OAAO,EAAC,cAAc,EACtB,GAAG,EAAC,MAAM,EACV,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,SAAS,IAElB,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CACX;gBACZ,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,CACxB,8BAAC,aAAK,IAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CAC7C,CAAC,CAAC,CAAC,IAAI,CACM,CACN,CACb,CAAC,CACC,CACQ,CAChB,CAAA;AACH,CAAC,CAAA;AAEQ,sBAAK"}

package/dist/components/uikit/Table/components/THead/THead.styled.js

@@ -0,0 +1,143 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THItem = exports.TH = exports.Sort = exports.THead = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const SortArrow_svg_1 = __importDefault(require("../../../../../icons/SortArrow.svg"));
+const utils_1 = require("../../utils");
+exports.THead = styled_components_1.default.thead `
+  position: ${(props) => (props.stickyHeader ? 'sticky' : 'relative')};
+  top: 0;
+  z-index: 2;
+`;
+exports.Sort = (0, styled_components_1.default)(SortArrow_svg_1.default) `
+  & path {
+    fill: ${(props) => props.theme.icons.primary};
+  }
+
+  transform: ${(props) => props.sortRotated ? 'rotate(0deg)' : 'rotate(180deg)'};
+`;
+const getBorderForFirstColumn = (mode, theme) => {
+    if (mode === 'light') {
+        return {
+            right: '-6px',
+            width: '6px',
+            backgroundImage: 'linear-gradient(90deg, #90bff954, #bbd9fb00)'
+        };
+    }
+    return {
+        right: 0,
+        borderRight: `1px solid ${theme.stroke.primary}`
+    };
+};
+const getBorderForLastColumn = (mode, theme) => {
+    if (mode === 'light') {
+        return {
+            left: '-3px',
+            width: '3px',
+            backgroundImage: 'linear-gradient(90deg, #bbd9fb00, #90bff954)'
+        };
+    }
+    return {
+        left: 0,
+        borderRight: `1px solid ${theme.stroke.primary}`
+    };
+};
+exports.TH = styled_components_1.default.th `
+  background: ${(props) => props.theme.background.secondaryAlpha};
+  padding: 0 12px;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  position: relative;
+  ${(props) => props.isSort &&
+    (0, styled_components_1.css) `
+      position: relative;
+      cursor: pointer;
+      &:hover {
+        background: ${(props) => props.theme.background.accentSecondaryTint};
+      }
+    `};
+  ${(props) => props.stickyFirstColumn &&
+    (0, styled_components_1.css) `
+      &:first-of-type {
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        ${(props) => props.isScrolled &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              top: 0;
+              z-index: -1;
+              ${getBorderForFirstColumn(props.mode, props.theme)}
+            }
+          `}
+      }
+    `};
+  ${(props) => props.stickyLastColumn &&
+    (0, styled_components_1.css) `
+      &:last-of-type {
+        position: sticky;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        ${(props) => !props.isScrolledEnd &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              top: 0;
+              z-index: -1;
+              ${getBorderForLastColumn(props.mode, props.theme)}
+            }
+          `}
+      }
+    `};
+  &:first-of-type {
+    border-radius: 8px 0 0 8px;
+  }
+  &:last-of-type {
+    border-radius: 0 8px 8px 0;
+  }
+`;
+exports.THItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  ${({ alignment }) => (0, utils_1.getAlignment)(alignment)}
+`;
+//# sourceMappingURL=THead.styled.js.map

package/dist/components/uikit/Table/components/THead/THead.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"THead.styled.js","sourceRoot":"","sources":["../../../../../../src/components/uikit/Table/components/THead/THead.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA+C;AAC/C,uFAAyD;AAEzD,uCAA0C;AAG7B,QAAA,KAAK,GAAG,2BAAM,CAAC,KAAK,CAA2B;cAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;;;CAGpE,CAAA;AAEY,QAAA,IAAI,GAAG,IAAA,2BAAM,EAAC,uBAAQ,CAAC,CAGlC;;YAEU,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;;;eAGjC,CAAC,KAAK,EAAE,EAAE,CACrB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB;CACxD,CAAA;AAED,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO;YACL,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,KAAK;YACZ,eAAe,EAAE,8CAA8C;SAChE,CAAA;KACF;IACD,OAAO;QACL,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;KACjD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;IAC7D,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK;YACZ,eAAe,EAAE,8CAA8C;SAChE,CAAA;KACF;IACD,OAAO;QACL,IAAI,EAAE,CAAC;QACP,WAAW,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;KACjD,CAAA;AACH,CAAC,CAAA;AAEY,QAAA,EAAE,GAAG,2BAAM,CAAC,EAAE,CAOzB;gBACc,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc;;;;;;IAM5D,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,MAAM;IACZ,IAAA,uBAAG,EAAA;;;;sBAIe,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB;;KAEtE;IACD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,iBAAiB;IACvB,IAAA,uBAAG,EAAA;;;;;;UAMG,CAAC,KAA2D,EAAE,EAAE,CAChE,KAAK,CAAC,UAAU;QAChB,IAAA,uBAAG,EAAA;;;;;;;;;gBASG,uBAAuB,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;;WAErD;;KAEN;IACD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,gBAAgB;IACtB,IAAA,uBAAG,EAAA;;;;;;UAMG,CAAC,KAA8D,EAAE,EAAE,CACnE,CAAC,KAAK,CAAC,aAAa;QACpB,IAAA,uBAAG,EAAA;;;;;;;;;gBASG,sBAAsB,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;;WAEpD;;KAEN;;;;;;;CAOJ,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAA0C;;;;IAItE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,SAAS,CAAC;CAC7C,CAAA"}

package/dist/components/uikit/Table/hooks/useDragging.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragging = void 0;
+const react_1 = require("react");
+const useDragging = (tableContainerRef, isDraggable) => {
+    const [isStartDragging, setIsStartDragging] = (0, react_1.useState)(false);
+    const startX = (0, react_1.useRef)(0);
+    const scrollLeft = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const handleMouseDown = (e) => {
+            setIsStartDragging(true);
+            if (tableContainerRef.current) {
+                startX.current = e.pageX - tableContainerRef.current.offsetLeft;
+                scrollLeft.current = tableContainerRef.current.scrollLeft;
+            }
+        };
+        const handleMouseMove = (e) => {
+            if (!isStartDragging)
+                return;
+            e.preventDefault();
+            if (tableContainerRef.current) {
+                const x = e.pageX - tableContainerRef.current.offsetLeft;
+                const walk = (x - startX.current) * 2;
+                tableContainerRef.current.scrollLeft = scrollLeft.current - walk;
+            }
+        };
+        const handleMouseUp = () => {
+            setIsStartDragging(false);
+        };
+        const container = tableContainerRef.current;
+        if (isDraggable) {
+            container === null || container === void 0 ? void 0 : container.addEventListener('mousedown', handleMouseDown);
+            container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mousedown', handleMouseDown);
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isStartDragging, isDraggable]);
+};
+exports.useDragging = useDragging;
+//# sourceMappingURL=useDragging.js.map

package/dist/components/uikit/Table/hooks/useDragging.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragging.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useDragging.ts"],"names":[],"mappings":";;;AAAA,iCAAqE;AAE9D,MAAM,WAAW,GAAG,CACzB,iBAAgD,EAChD,WAAoB,EACpB,EAAE;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC7D,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAA;IACxB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAA;IAE5B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;gBAC/D,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;aAC1D;QACH,CAAC,CAAA;QAED,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,CAAC,eAAe;gBAAE,OAAM;YAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;gBACxD,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;gBACrC,iBAAiB,CAAC,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;aACjE;QACH,CAAC,CAAA;QAED,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,kBAAkB,CAAC,KAAK,CAAC,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAA;QAC3C,IAAI,WAAW,EAAE;YACf,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YACzD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YACzD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;SAClD;QAED,OAAO,GAAG,EAAE;YACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YAC5D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YAC5D,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAA;AACpC,CAAC,CAAA;AA5CY,QAAA,WAAW,eA4CvB"}

package/dist/components/uikit/Table/hooks/useHorizontalScroll.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHorizontalScroll = void 0;
+const react_1 = require("react");
+const useHorizontalScroll = (tableContainerRef, stickyFirstColumn, stickyLastColumn) => {
+    const [isScrolled, setIsScrolled] = (0, react_1.useState)(false);
+    const [isScrolledEnd, setIsScrolledEnd] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (tableContainerRef.current) {
+                const { scrollLeft, scrollWidth, clientWidth } = tableContainerRef.current;
+                setIsScrolled(scrollLeft > 0);
+                setIsScrolledEnd(scrollLeft + clientWidth >= scrollWidth);
+            }
+        };
+        const container = tableContainerRef.current;
+        if (stickyFirstColumn || stickyLastColumn) {
+            handleScroll();
+            container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
+        };
+    }, [stickyFirstColumn, stickyLastColumn]);
+    return { tableContainerRef, isScrolled, isScrolledEnd };
+};
+exports.useHorizontalScroll = useHorizontalScroll;
+//# sourceMappingURL=useHorizontalScroll.js.map

package/dist/components/uikit/Table/hooks/useHorizontalScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalScroll.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useHorizontalScroll.ts"],"names":[],"mappings":";;;AAAA,iCAA6D;AAEtD,MAAM,mBAAmB,GAAG,CACjC,iBAAgD,EAChD,iBAA0B,EAC1B,gBAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAC5C,iBAAiB,CAAC,OAAO,CAAA;gBAC3B,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;gBAC7B,gBAAgB,CAAC,UAAU,GAAG,WAAW,IAAI,WAAW,CAAC,CAAA;aAC1D;QACH,CAAC,CAAA;QAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAA;QAE3C,IAAI,iBAAiB,IAAI,gBAAgB,EAAE;YACzC,YAAY,EAAE,CAAA;YACd,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;SACpD;QAED,OAAO,GAAG,EAAE;YACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEzC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,CAAA;AACzD,CAAC,CAAA;AA/BY,QAAA,mBAAmB,uBA+B/B"}

package/dist/components/uikit/Table/hooks/useSort.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSort = void 0;
+const react_1 = require("react");
+function useSort(data, customSort) {
+    const [sortedData, setSortedData] = (0, react_1.useState)(data);
+    const [activeSort, setActiveSort] = (0, react_1.useState)(null);
+    const isCustomSort = !!customSort;
+    const sortRotated = (isCustomSort ? customSort === null || customSort === void 0 ? void 0 : customSort.activeSortDirection : activeSort === null || activeSort === void 0 ? void 0 : activeSort.order) !==
+        'ASC';
+    const activeSortField = isCustomSort
+        ? customSort === null || customSort === void 0 ? void 0 : customSort.activeSortField
+        : activeSort === null || activeSort === void 0 ? void 0 : activeSort.field;
+    (0, react_1.useEffect)(() => {
+        const compare = (a, b) => {
+            const aField = a[activeSort.field];
+            const bField = b[activeSort.field];
+            const compareNumbers = (a, b) => {
+                return activeSort.order === 'ASC' ? a - b : b - a;
+            };
+            const compareStrings = (a, b) => {
+                return activeSort.order === 'ASC'
+                    ? a.localeCompare(b)
+                    : b.localeCompare(a);
+            };
+            if (typeof aField === 'number' && typeof bField === 'number') {
+                return compareNumbers(aField, bField);
+            }
+            else if (typeof aField === 'string' && typeof bField === 'string') {
+                return compareStrings(aField, bField);
+            }
+            else if (typeof aField === 'number') {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        };
+        const copyData = [...data];
+        if (activeSort) {
+            copyData.sort(compare);
+        }
+        setSortedData(copyData);
+    }, [data, activeSort]);
+    const handleSort = (field) => {
+        const order = (activeSort === null || activeSort === void 0 ? void 0 : activeSort.field) !== field
+            ? 'ASC'
+            : activeSort.order === 'ASC'
+                ? 'DESC'
+                : 'ASC';
+        if (isCustomSort) {
+            return customSort === null || customSort === void 0 ? void 0 : customSort.onSort(field, order);
+        }
+        setActiveSort({ field, order });
+    };
+    return { sortedData, activeSortField, sortRotated, handleSort };
+}
+exports.useSort = useSort;
+//# sourceMappingURL=useSort.js.map

package/dist/components/uikit/Table/hooks/useSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSort.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useSort.ts"],"names":[],"mappings":"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"}

package/dist/components/uikit/Table/hooks/useStickHeader.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStickHeader = void 0;
+const react_1 = require("react");
+const common_1 = require("../../../../constants/common");
+const useStickHeader = (stickyHeader, data, columns, wrapperRef, tableHeadWrapperRef, lastRowRef) => {
+    const [tableWidth, setTableWidth] = (0, react_1.useState)(0);
+    const [tableLeftPosition, setTableLeftPosition] = (0, react_1.useState)(0);
+    const [reachedTop, setReachedTop] = (0, react_1.useState)(false);
+    const onTableScroll = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!stickyHeader)
+            return;
+        (_a = tableHeadWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(wrapperRef.current.scrollLeft, 0);
+    }, [stickyHeader, tableHeadWrapperRef, wrapperRef]);
+    const onWindowResize = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!stickyHeader)
+            return;
+        setTableLeftPosition((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x);
+        setTableWidth((_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth);
+        getWidthColumns();
+    }, [stickyHeader, wrapperRef, reachedTop, data, columns]);
+    // выставляем ширину колонок такую же, как и у таблица
+    const getWidthColumns = (0, react_1.useCallback)(() => {
+        if (wrapperRef.current && stickyHeader && reachedTop) {
+            const thead = wrapperRef.current.querySelectorAll('thead');
+            if (thead.length > 1) {
+                const columns = thead[0].querySelectorAll('th');
+                const fixColumns = thead[1].querySelectorAll('th');
+                const widths = Array.from(columns).map((column) => column.offsetWidth);
+                widths.filter((width, index) => {
+                    if (fixColumns[index])
+                        fixColumns[index].style.minWidth = `${width}px`;
+                    if (fixColumns[index])
+                        fixColumns[index].style.width = `${width}px`;
+                    if (fixColumns[index])
+                        fixColumns[index].style.maxWidth = `${width}px`;
+                });
+            }
+        }
+    }, [wrapperRef, data, columns, stickyHeader, reachedTop]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (stickyHeader) {
+            setTableLeftPosition((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x);
+            setTableWidth((_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth);
+        }
+    }, [stickyHeader, wrapperRef]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = tableHeadWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(wrapperRef.current.scrollLeft, 0);
+    }, [reachedTop, tableHeadWrapperRef, wrapperRef]);
+    (0, react_1.useEffect)(() => {
+        if (!wrapperRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            onWindowResize();
+        });
+        resizeObserver.observe(wrapperRef.current);
+        return () => resizeObserver.disconnect();
+    }, [wrapperRef, onWindowResize]);
+    (0, react_1.useEffect)(() => {
+        const wrapperElem = wrapperRef.current;
+        wrapperElem === null || wrapperElem === void 0 ? void 0 : wrapperElem.addEventListener('scroll', onTableScroll);
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', onWindowResize);
+        return () => {
+            wrapperElem === null || wrapperElem === void 0 ? void 0 : wrapperElem.removeEventListener('scroll', onTableScroll);
+            window === null || window === void 0 ? void 0 : window.removeEventListener('resize', onWindowResize);
+        };
+    }, [onTableScroll, onWindowResize, tableHeadWrapperRef, wrapperRef]);
+    (0, react_1.useEffect)(() => {
+        const onPageScroll = () => {
+            if (!stickyHeader)
+                return;
+            const { y: lastRowY } = lastRowRef.current
+                ? lastRowRef.current.getBoundingClientRect()
+                : { y: 0 };
+            const { y: theadY } = wrapperRef.current
+                ? wrapperRef.current.getBoundingClientRect()
+                : { y: 0 };
+            const theadOffset = theadY - common_1.HEIGHT_HEADER + 20;
+            const lastRowOffset = lastRowY - common_1.HEIGHT_HEADER;
+            setReachedTop(theadOffset <= 0 && lastRowOffset >= 50);
+        };
+        document.addEventListener('scroll', onPageScroll);
+        return () => document.removeEventListener('scroll', onPageScroll);
+    }, [stickyHeader, lastRowRef, wrapperRef]);
+    return { reachedTop, tableWidth, tableLeftPosition };
+};
+exports.useStickHeader = useStickHeader;
+//# sourceMappingURL=useStickHeader.js.map