@astral/ui 4.2.2 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/components/DataGrid/Body/Body.js +6 -7
  2. package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js +24 -16
  3. package/components/DataGrid/Row/Row.d.ts +4 -0
  4. package/components/DataGrid/Row/Row.js +27 -2
  5. package/components/DataGrid/Row/RowContext/RowProvider/RowProvider.js +12 -11
  6. package/components/DataGrid/useLogic/useLogic.js +9 -4
  7. package/icons/LogoFillMd/CryptoProFillMd.d.ts +4 -0
  8. package/icons/LogoFillMd/CryptoProFillMd.js +4 -0
  9. package/icons/LogoFillMd/GoogleMonochromeFillMd.d.ts +4 -0
  10. package/icons/LogoFillMd/GoogleMonochromeFillMd.js +4 -0
  11. package/icons/LogoFillMd/JacartaFillMd.d.ts +4 -0
  12. package/icons/LogoFillMd/JacartaFillMd.js +4 -0
  13. package/icons/LogoFillMd/OkMonochromeFillMd.d.ts +4 -0
  14. package/icons/LogoFillMd/OkMonochromeFillMd.js +4 -0
  15. package/icons/LogoFillMd/RutokenFillMd.d.ts +4 -0
  16. package/icons/LogoFillMd/RutokenFillMd.js +4 -0
  17. package/icons/LogoFillMd/TelegramIconMonochromeFillMd.d.ts +4 -0
  18. package/icons/LogoFillMd/TelegramIconMonochromeFillMd.js +4 -0
  19. package/icons/LogoFillMd/TelegramMonochromeFillMd.d.ts +4 -0
  20. package/icons/LogoFillMd/TelegramMonochromeFillMd.js +4 -0
  21. package/icons/LogoFillMd/VkMonochromeFillMd.d.ts +4 -0
  22. package/icons/LogoFillMd/VkMonochromeFillMd.js +4 -0
  23. package/icons/LogoFillMd/YoutubeMonochromeFillMd.d.ts +4 -0
  24. package/icons/LogoFillMd/YoutubeMonochromeFillMd.js +4 -0
  25. package/icons/LogoFillMd/index.d.ts +9 -0
  26. package/icons/LogoFillMd/index.js +9 -0
  27. package/node/components/DataGrid/Body/Body.js +5 -6
  28. package/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js +23 -15
  29. package/node/components/DataGrid/Row/Row.d.ts +4 -0
  30. package/node/components/DataGrid/Row/Row.js +26 -2
  31. package/node/components/DataGrid/Row/RowContext/RowProvider/RowProvider.js +11 -10
  32. package/node/components/DataGrid/useLogic/useLogic.js +9 -4
  33. package/node/icons/LogoFillMd/CryptoProFillMd.d.ts +4 -0
  34. package/node/icons/LogoFillMd/CryptoProFillMd.js +6 -0
  35. package/node/icons/LogoFillMd/GoogleMonochromeFillMd.d.ts +4 -0
  36. package/node/icons/LogoFillMd/GoogleMonochromeFillMd.js +6 -0
  37. package/node/icons/LogoFillMd/JacartaFillMd.d.ts +4 -0
  38. package/node/icons/LogoFillMd/JacartaFillMd.js +6 -0
  39. package/node/icons/LogoFillMd/OkMonochromeFillMd.d.ts +4 -0
  40. package/node/icons/LogoFillMd/OkMonochromeFillMd.js +6 -0
  41. package/node/icons/LogoFillMd/RutokenFillMd.d.ts +4 -0
  42. package/node/icons/LogoFillMd/RutokenFillMd.js +6 -0
  43. package/node/icons/LogoFillMd/TelegramIconMonochromeFillMd.d.ts +4 -0
  44. package/node/icons/LogoFillMd/TelegramIconMonochromeFillMd.js +6 -0
  45. package/node/icons/LogoFillMd/TelegramMonochromeFillMd.d.ts +4 -0
  46. package/node/icons/LogoFillMd/TelegramMonochromeFillMd.js +6 -0
  47. package/node/icons/LogoFillMd/VkMonochromeFillMd.d.ts +4 -0
  48. package/node/icons/LogoFillMd/VkMonochromeFillMd.js +6 -0
  49. package/node/icons/LogoFillMd/YoutubeMonochromeFillMd.d.ts +4 -0
  50. package/node/icons/LogoFillMd/YoutubeMonochromeFillMd.js +6 -0
  51. package/node/icons/LogoFillMd/index.d.ts +9 -0
  52. package/node/icons/LogoFillMd/index.js +19 -1
  53. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useContext, useMemo } from 'react';
2
+ import { useContext } from 'react';
3
3
  import { ConfigContext } from '../../ConfigProvider';
4
4
  import { ContentState } from '../../ContentState';
5
5
  import { classNames } from '../../utils';
@@ -13,12 +13,11 @@ export const Body = (props) => {
13
13
  const { imagesMap } = useContext(ConfigContext);
14
14
  const { isNoData, contentStateProps } = useLogic(props);
15
15
  const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
16
- const renderedRows = useMemo(() => {
17
- return rows.map(({ children, options, ...row }) => {
18
- const rowId = row[keyId];
19
- return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, ...rowProps }) }, rowId));
20
- });
21
- }, [rows, keyId, selectedRows, rowProps]);
16
+ const renderedRows = rows.map(({ children, options, ...row }) => {
17
+ const rowId = row[keyId];
18
+ const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
19
+ return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
20
+ });
22
21
  return (_jsx(Wrapper, { className: classNames(dataGridClassnames.body, {
23
22
  [dataGridClassnames.bodyEmpty]: isNoData,
24
23
  }), "$minDisplayRows": minDisplayRows, children: _jsx(ContentState, { ...contentStateProps, errorState: {
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState } from 'react';
2
+ import { useCallback, useMemo, useState } from 'react';
3
3
  import { DataGridContext } from '../DataGridContext';
4
4
  const ROW_FLAGS_BY_DEFAULT = {
5
5
  isOpenedItems: true,
@@ -7,27 +7,27 @@ const ROW_FLAGS_BY_DEFAULT = {
7
7
  };
8
8
  export const DataGridContextProvider = ({ isLoading, children, }) => {
9
9
  const [openedItems, setOpenedItems] = useState({});
10
- const checkIsOpened = (key) => {
10
+ const checkIsOpened = useCallback((key) => {
11
11
  if (openedItems[key]) {
12
12
  return true;
13
13
  }
14
14
  return false;
15
- };
16
- const checkIsMoreOpened = (key) => {
15
+ }, [openedItems]);
16
+ const checkIsMoreOpened = useCallback((key) => {
17
17
  if (openedItems[key]) {
18
18
  return openedItems[key].iOpenedMoreItems;
19
19
  }
20
20
  return false;
21
- };
22
- const toggleOpenItems = (key) => setOpenedItems((currentOpenedItems) => {
21
+ }, [openedItems]);
22
+ const toggleOpenItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
23
23
  if (checkIsOpened(key)) {
24
24
  const newOpenedItems = { ...currentOpenedItems };
25
25
  delete newOpenedItems[key];
26
26
  return newOpenedItems;
27
27
  }
28
28
  return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
29
- });
30
- const toggleOpenMoreItems = (key) => setOpenedItems((currentOpenedItems) => {
29
+ }), [openedItems]);
30
+ const toggleOpenMoreItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
31
31
  if (checkIsMoreOpened(key)) {
32
32
  const newOpenedItems = { ...currentOpenedItems };
33
33
  newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
@@ -37,12 +37,20 @@ export const DataGridContextProvider = ({ isLoading, children, }) => {
37
37
  ...currentOpenedItems,
38
38
  [key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
39
39
  };
40
- });
41
- return (_jsx(DataGridContext.Provider, { value: {
42
- checkIsOpened,
43
- checkIsMoreOpened,
44
- toggleOpenItems,
45
- toggleOpenMoreItems,
46
- isLoading,
47
- }, children: children }));
40
+ }), [openedItems]);
41
+ const contextValue = useMemo(() => ({
42
+ checkIsOpened,
43
+ checkIsMoreOpened,
44
+ toggleOpenItems,
45
+ toggleOpenMoreItems,
46
+ isLoading,
47
+ }), [
48
+ checkIsOpened,
49
+ checkIsMoreOpened,
50
+ toggleOpenItems,
51
+ toggleOpenMoreItems,
52
+ isLoading,
53
+ openedItems,
54
+ ]);
55
+ return (_jsx(DataGridContext.Provider, { value: contextValue, children: children }));
48
56
  };
@@ -66,6 +66,10 @@ export type RowProps<TData extends Record<string, CellValue>> = {
66
66
  * Если true, то будет отображаться чекбокс для выбора элемента
67
67
  */
68
68
  isSelectable?: boolean;
69
+ /**
70
+ * Флаг выбора текущей строки
71
+ */
72
+ isSelected?: boolean;
69
73
  /**
70
74
  * Массив выбранных строк
71
75
  */
@@ -1,14 +1,15 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback } from 'react';
2
+ import { memo, useCallback } from 'react';
3
3
  import { Checkbox } from '../../Checkbox';
4
4
  import { useHidePersonalData } from '../../personalDataSecurity';
5
5
  import { Tooltip } from '../../Tooltip';
6
+ import { checkIsDeepEqual } from '../../utils/external';
6
7
  import { DISABLE_ROW_ATTR } from './constants';
7
8
  import { NestedChildren } from './NestedChildren';
8
9
  import { CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, Wrapper, } from './styles';
9
10
  import { useLogic } from './useLogic';
10
11
  import { checkIsDisabled } from './utils';
11
- export const Row = (props) => {
12
+ const RowComponent = (props) => {
12
13
  const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = useLogic(props);
13
14
  const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick,
14
15
  // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
@@ -53,3 +54,27 @@ export const Row = (props) => {
53
54
  // @ts-ignore
54
55
  renderRow: renderRow })] }));
55
56
  };
57
+ const arePropsEqual = (prevProps, nextProps) => {
58
+ const deepEqualityProps = new Set(['row']);
59
+ // Список пропсов, которые нужно игнорировать при сравнении
60
+ const skipProps = new Set([
61
+ 'selectedRows',
62
+ 'onSelectRow',
63
+ 'columns',
64
+ ]);
65
+ const keys = Object.keys(prevProps);
66
+ return keys.every((key) => {
67
+ const typedKey = key;
68
+ // Не сравниваем свойства, которые нужно пропустить
69
+ if (skipProps.has(typedKey)) {
70
+ return true;
71
+ }
72
+ const prevValue = prevProps[typedKey];
73
+ const nextValue = nextProps[typedKey];
74
+ if (deepEqualityProps.has(typedKey)) {
75
+ return checkIsDeepEqual(prevValue, nextValue);
76
+ }
77
+ return prevValue === nextValue;
78
+ });
79
+ };
80
+ export const Row = memo(RowComponent, arePropsEqual);
@@ -1,21 +1,22 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState } from 'react';
2
+ import { useCallback, useMemo, useState } from 'react';
3
3
  import { RowContext } from '../RowContext';
4
4
  export const RowContextProvider = ({ children }) => {
5
5
  const [isDisabled, setDisabled] = useState(false);
6
6
  const [disabledReason, setDisabledReason] = useState();
7
- const addDisabledRow = (reason) => {
7
+ const addDisabledRow = useCallback((reason) => {
8
8
  setDisabled(true);
9
9
  setDisabledReason(reason);
10
- };
11
- const removeDisabledRow = () => {
10
+ }, []);
11
+ const removeDisabledRow = useCallback(() => {
12
12
  setDisabled(false);
13
13
  setDisabledReason(undefined);
14
- };
15
- return (_jsx(RowContext.Provider, { value: {
16
- isDisabled,
17
- disabledReason,
18
- addDisabledRow,
19
- removeDisabledRow,
20
- }, children: children }));
14
+ }, []);
15
+ const contextValue = useMemo(() => ({
16
+ isDisabled,
17
+ disabledReason,
18
+ addDisabledRow,
19
+ removeDisabledRow,
20
+ }), [isDisabled, disabledReason, addDisabledRow, removeDisabledRow]);
21
+ return (_jsx(RowContext.Provider, { value: contextValue, children: children }));
21
22
  };
@@ -7,6 +7,11 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
7
7
  const isFirstRender = useFirstMountState();
8
8
  const isSelectable = Boolean(onSelectRow);
9
9
  const isDataGridDisabled = isLoading || isDisabled;
10
+ // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
11
+ const selectedRowsRef = useRef(selectedRows);
12
+ useEffect(() => {
13
+ selectedRowsRef.current = selectedRows;
14
+ }, [selectedRows]);
10
15
  const treeRenderConfig = Object.is(variant, Variant.Subrows)
11
16
  ? { ...subrows, isInitialExpanded: true }
12
17
  : tree;
@@ -40,15 +45,15 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
40
45
  const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
41
46
  onSelectRow(filteredRows);
42
47
  };
43
- const handleSelectRow = useCallback((row) => (event) => {
48
+ const handleSelectRow = (row) => (event) => {
44
49
  if (!onSelectRow) {
45
50
  return;
46
51
  }
47
52
  if (event.target.checked) {
48
- return onSelectRow([...selectedRows, row]);
53
+ return onSelectRow([...selectedRowsRef.current, row]);
49
54
  }
50
- onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
51
- }, [selectedRows, onSelectRow, keyId]);
55
+ onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
56
+ };
52
57
  return {
53
58
  isDataGridDisabled,
54
59
  treeRenderConfig,
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const CryptoProFillMd: FunctionComponent<SvgIconProps>;
4
+ export default CryptoProFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const CryptoProFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.63864 22 5.66653 20.3402 3.85352 17.7969L5.16211 17.0488C6.71036 19.1422 9.19639 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C9.19667 3.5 6.7104 4.85715 5.16211 6.9502L3.85352 6.20215C5.66658 3.65922 8.63892 2 12 2Z", fill: "#1366B2" }), _jsx("path", { d: "M9.89709 12.0173L0.886873 17.4551C0.886873 17.4551 5.01299e-05 15.9122 5.0303e-05 12.0173C5.04762e-05 8.12232 0.886873 6.5794 0.886873 6.5794L9.89709 12.0173Z", fill: "#E50909" })] }));
4
+ export default CryptoProFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const GoogleMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default GoogleMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const GoogleMonochromeFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "m6.432 14.086-.696 2.6-2.544.053A9.96 9.96 0 0 1 2 12a9.95 9.95 0 0 1 1.118-4.599l2.266.415.992 2.252A6 6 0 0 0 6.056 12c0 .734.132 1.437.376 2.086" }), _jsx("path", { d: "M21.825 10.132Q22 11.042 22 12q-.002 1.076-.219 2.088a10 10 0 0 1-3.52 5.71h-.001l-2.853-.146-.404-2.52a5.96 5.96 0 0 0 2.564-3.044H12.22v-3.956h9.605" }), _jsx("path", { d: "M18.26 19.798A9.96 9.96 0 0 1 12 22a10 10 0 0 1-8.808-5.26l3.24-2.654a5.946 5.946 0 0 0 8.57 3.045z" }), _jsx("path", { d: "m18.383 4.302-3.24 2.652a5.948 5.948 0 0 0-8.767 3.114L3.12 7.401h-.001A10 10 0 0 1 12 2c2.426 0 4.651.864 6.383 2.302" })] }));
4
+ export default GoogleMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const JacartaFillMd: FunctionComponent<SvgIconProps>;
4
+ export default JacartaFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const JacartaFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "M16.9963 8.00009H21.9529C22.5292 8.00009 22.9963 8.46727 22.9963 9.04357V14.9566C22.9963 15.5329 22.5292 16.0001 21.9529 16.0001H16.9963V8.00009Z", fill: "#ADADAD" }), _jsx("rect", { x: "19.4995", y: "9.50009", width: "1.5", height: "1.5", rx: "0.521739", fill: "#494949" }), _jsx("rect", { x: "19.4995", y: "13.0001", width: "1.5", height: "1.5", rx: "0.521739", fill: "#494949" }), _jsx("rect", { x: "5.99951", y: "6.50009", width: "11", height: "11", rx: "1.04348", fill: "#636562" }), _jsx("path", { d: "M8.00342 17.5H6.50342C3.46585 17.5 1.00342 15.0376 1.00342 12C1.00347 8.96248 3.46588 6.5 6.50342 6.5H8.00342V17.5ZM5.99951 8.25C4.34269 8.25 2.99956 9.59319 2.99951 11.25L2.99951 12.75C2.99951 14.4069 4.34266 15.75 5.99951 15.75L5.99951 8.25Z", fill: "#FD7F18" })] }));
4
+ export default JacartaFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const OkMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default OkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const OkMonochromeFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5m3.6 11.225c-.288-.425-.893-.553-1.351-.285a4.53 4.53 0 0 1-4.499 0c-.458-.268-1.062-.14-1.35.285-.287.424-.15.983.307 1.25.604.352 1.26.601 1.94.745L8.78 16.45a.86.86 0 0 0 .001 1.283c.192.177.442.266.692.266s.502-.089.693-.266l1.835-1.7 1.836 1.7a1.034 1.034 0 0 0 1.384 0 .86.86 0 0 0 0-1.283l-1.868-1.731a6.6 6.6 0 0 0 1.941-.744c.457-.268.595-.828.307-1.251M11.99 6C10.15 6 8.65 7.39 8.65 9.097s1.5 3.095 3.342 3.095c1.844 0 3.342-1.388 3.342-3.095S13.834 6 11.991 6m0 1.814c.763 0 1.384.576 1.384 1.283 0 .706-.62 1.282-1.384 1.282-.762 0-1.383-.576-1.383-1.282s.621-1.282 1.383-1.283" }) }));
4
+ export default OkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const RutokenFillMd: FunctionComponent<SvgIconProps>;
4
+ export default RutokenFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const RutokenFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "M17.0039 7.85686H21.9778C22.5401 7.85686 22.996 8.31274 22.996 8.8751V14.9845C22.996 15.5469 22.5401 16.0027 21.9778 16.0027H17.0039V7.85686Z", fill: "#ADADAD" }), _jsx("rect", { x: "19.3", y: "9.2146", width: "1.69706", height: "1.69706", rx: "0.509117", fill: "#494949" }), _jsx("rect", { x: "19.3", y: "12.9478", width: "1.69706", height: "1.69706", rx: "0.509117", fill: "#494949" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.00391 11.9997C1.00391 7.35242 9.14978 6.5 11.1862 6.5L15.5 6.50036C16.1567 6.51556 17.001 7.24005 17.001 7.94896V16.0508C17 16.7597 16.3 17.4997 15.5 17.4997L11.1862 17.4994C9.21557 17.4994 1.52384 16.7011 1.02893 12.4383C1.01241 12.296 1.00391 12.1498 1.00391 11.9997ZM4.56194 10.6252L4.55149 10.6253C4.4372 10.6275 2.36327 10.6866 2.36327 11.9999C2.36327 13.3126 4.43523 13.3726 4.55132 13.375L4.56203 13.375H5.41797C5.98033 13.375 6.43621 12.9134 6.43621 12.3438V11.6564C6.43621 11.0869 5.98033 10.6252 5.41797 10.6252H4.56194Z", fill: "#D1D4DD" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.5 6.50036L11.1879 6.50064C9.15141 6.50064 1.00554 7.19779 1.00554 12.0003C1.00554 12.1503 1.01348 12.2962 1.02893 12.4383C1.52384 16.7011 9.21557 17.4994 11.1862 17.4994L15.5 17.4997C16.3 17.4997 17 16.7597 17.001 16.0508V7.94896C17.001 7.24005 16.1567 6.51556 15.5 6.50036ZM4.56194 10.6252L4.55149 10.6253C4.4372 10.6275 2.36327 10.6866 2.36327 11.9999C2.36327 13.3126 4.43523 13.3726 4.55132 13.375L4.56203 13.375H5.41797C5.98033 13.375 6.43621 12.9134 6.43621 12.3438V11.6564C6.43621 11.0869 5.98033 10.6252 5.41797 10.6252H4.56194Z", fill: "#D50C0C" }), _jsx("g", { filter: "url(#filter0_i_6008_21979)", children: _jsx("path", { d: "M7.5 10.4399C7.5 10.1587 7.72794 9.93076 8.00912 9.93076H14.9909C15.2721 9.93076 15.5 10.1587 15.5 10.4399V13.4216C15.5 13.7028 15.2721 13.9308 14.9909 13.9308H8.00912C7.72794 13.9308 7.5 13.7028 7.5 13.4216V10.4399Z", fill: "#CC0E0E" }) }), _jsx("defs", { children: _jsxs("filter", { id: "filter0_i_6008_21979", x: "7.5", y: "9.93076", width: "8", height: "4", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", {}), _jsx("feGaussianBlur", { stdDeviation: "0.5" }), _jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }), _jsx("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_6008_21979" })] }) })] }));
4
+ export default RutokenFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const TelegramIconMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default TelegramIconMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const TelegramIconMonochromeFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M 20.390625 3.410156 C 21.296875 3.019531 22.265625 3.808594 22.109375 4.808594 L 19.773438 19.609375 C 19.632812 20.507812 18.65625 20.976562 17.898438 20.507812 L 11.132812 16.347656 C 10.425781 15.914062 10.3125 14.910156 10.898438 14.316406 L 16.9375 8.203125 C 17.15625 7.984375 16.878906 7.632812 16.625 7.804688 L 8.234375 13.492188 C 7.613281 13.914062 6.839844 14.027344 6.128906 13.808594 L 2.410156 12.644531 C 1.734375 12.433594 1.6875 11.46875 2.335938 11.1875 Z M 20.390625 3.410156 " }) }));
4
+ export default TelegramIconMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const TelegramMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default TelegramMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const TelegramMonochromeFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5m5.24 6.156c.093-.604-.481-1.08-1.018-.844L5.523 11.509c-.385.169-.356.752.043.88l2.206.702c.422.134.878.064 1.246-.19l4.973-3.436c.15-.104.314.11.186.242l-3.581 3.691c-.347.359-.278.965.14 1.227l4.008 2.515c.45.281 1.028-.002 1.112-.545z" }) }));
4
+ export default TelegramMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const VkMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default VkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const VkMonochromeFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M12.438 1.5c4.75 0 7.131 0 8.601 1.47C22.5 4.44 22.5 6.82 22.5 11.545v.893c0 4.742 0 7.122-1.46 8.592-1.47 1.47-3.842 1.47-8.602 1.47h-.876c-4.742 0-7.122 0-8.592-1.47S1.5 17.18 1.5 12.455v-.893c0-4.742 0-7.122 1.46-8.592C4.43 1.5 6.804 1.5 11.564 1.5zM5.25 8.25c.11 5.153 2.74 8.25 7.352 8.25h.262v-2.948c.814.1 1.58.433 2.2.958a4.07 4.07 0 0 1 1.291 1.99h2.395a6.5 6.5 0 0 0-1.28-2.433 6.6 6.6 0 0 0-2.186-1.705 6.4 6.4 0 0 0 1.918-1.754c.51-.707.864-1.51 1.042-2.358h-2.176c-.472 1.635-1.872 3.121-3.204 3.262V8.25h-2.176v5.715c-1.349-.33-3.052-1.933-3.127-5.715z" }) }));
4
+ export default VkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const YoutubeMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default YoutubeMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { SvgIcon } from '../../components/SvgIcon';
3
+ const YoutubeMonochromeFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M12 4s7.096 0 8.872.478a2.86 2.86 0 0 1 2.008 2.02c.475 1.783.475 5.502.475 5.502s0 3.719-.475 5.502a2.86 2.86 0 0 1-2.008 2.02C19.096 20 12 20 12 20c-.031 0-7.1-.001-8.872-.477a2.86 2.86 0 0 1-2.008-2.021C.645 15.719.646 12 .646 12s0-3.719.474-5.502a2.85 2.85 0 0 1 2.008-2.02C4.9 4 11.968 4 12 4M9.546 15.568 15.818 12 9.546 8.432z" }) }));
4
+ export default YoutubeMonochromeFillMd;
@@ -1,6 +1,15 @@
1
1
  export { default as FacebookFillMd } from './FacebookFillMd';
2
2
  export { default as GoogleFillMd } from './GoogleFillMd';
3
+ export { default as GoogleMonochromeFillMd } from './GoogleMonochromeFillMd';
3
4
  export { default as TelegramFillMd } from './TelegramFillMd';
5
+ export { default as TelegramMonochromeFillMd } from './TelegramMonochromeFillMd';
6
+ export { default as TelegramIconMonochromeFillMd } from './TelegramIconMonochromeFillMd';
4
7
  export { default as VkFillMd } from './VkFillMd';
8
+ export { default as VkMonochromeFillMd } from './VkMonochromeFillMd';
5
9
  export { default as YoutubeFillMd } from './YoutubeFillMd';
10
+ export { default as YoutubeMonochromeFillMd } from './YoutubeMonochromeFillMd';
6
11
  export { default as OkFillMd } from './OkFillMd';
12
+ export { default as OkMonochromeFillMd } from './OkMonochromeFillMd';
13
+ export { default as CryptoProFillMd } from './CryptoProFillMd';
14
+ export { default as RutokenFillMd } from './RutokenFillMd';
15
+ export { default as JacartaFillMd } from './JacartaFillMd';
@@ -1,6 +1,15 @@
1
1
  export { default as FacebookFillMd } from './FacebookFillMd';
2
2
  export { default as GoogleFillMd } from './GoogleFillMd';
3
+ export { default as GoogleMonochromeFillMd } from './GoogleMonochromeFillMd';
3
4
  export { default as TelegramFillMd } from './TelegramFillMd';
5
+ export { default as TelegramMonochromeFillMd } from './TelegramMonochromeFillMd';
6
+ export { default as TelegramIconMonochromeFillMd } from './TelegramIconMonochromeFillMd';
4
7
  export { default as VkFillMd } from './VkFillMd';
8
+ export { default as VkMonochromeFillMd } from './VkMonochromeFillMd';
5
9
  export { default as YoutubeFillMd } from './YoutubeFillMd';
10
+ export { default as YoutubeMonochromeFillMd } from './YoutubeMonochromeFillMd';
6
11
  export { default as OkFillMd } from './OkFillMd';
12
+ export { default as OkMonochromeFillMd } from './OkMonochromeFillMd';
13
+ export { default as CryptoProFillMd } from './CryptoProFillMd';
14
+ export { default as RutokenFillMd } from './RutokenFillMd';
15
+ export { default as JacartaFillMd } from './JacartaFillMd';
@@ -16,12 +16,11 @@ const Body = (props) => {
16
16
  const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
17
17
  const { isNoData, contentStateProps } = (0, useLogic_1.useLogic)(props);
18
18
  const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
19
- const renderedRows = (0, react_1.useMemo)(() => {
20
- return rows.map(({ children, options, ...row }) => {
21
- const rowId = row[keyId];
22
- return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, ...rowProps }) }, rowId));
23
- });
24
- }, [rows, keyId, selectedRows, rowProps]);
19
+ const renderedRows = rows.map(({ children, options, ...row }) => {
20
+ const rowId = row[keyId];
21
+ const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
22
+ return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
23
+ });
25
24
  return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(constants_1.dataGridClassnames.body, {
26
25
  [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
27
26
  }), "$minDisplayRows": minDisplayRows, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
@@ -10,27 +10,27 @@ const ROW_FLAGS_BY_DEFAULT = {
10
10
  };
11
11
  const DataGridContextProvider = ({ isLoading, children, }) => {
12
12
  const [openedItems, setOpenedItems] = (0, react_1.useState)({});
13
- const checkIsOpened = (key) => {
13
+ const checkIsOpened = (0, react_1.useCallback)((key) => {
14
14
  if (openedItems[key]) {
15
15
  return true;
16
16
  }
17
17
  return false;
18
- };
19
- const checkIsMoreOpened = (key) => {
18
+ }, [openedItems]);
19
+ const checkIsMoreOpened = (0, react_1.useCallback)((key) => {
20
20
  if (openedItems[key]) {
21
21
  return openedItems[key].iOpenedMoreItems;
22
22
  }
23
23
  return false;
24
- };
25
- const toggleOpenItems = (key) => setOpenedItems((currentOpenedItems) => {
24
+ }, [openedItems]);
25
+ const toggleOpenItems = (0, react_1.useCallback)((key) => setOpenedItems((currentOpenedItems) => {
26
26
  if (checkIsOpened(key)) {
27
27
  const newOpenedItems = { ...currentOpenedItems };
28
28
  delete newOpenedItems[key];
29
29
  return newOpenedItems;
30
30
  }
31
31
  return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
32
- });
33
- const toggleOpenMoreItems = (key) => setOpenedItems((currentOpenedItems) => {
32
+ }), [openedItems]);
33
+ const toggleOpenMoreItems = (0, react_1.useCallback)((key) => setOpenedItems((currentOpenedItems) => {
34
34
  if (checkIsMoreOpened(key)) {
35
35
  const newOpenedItems = { ...currentOpenedItems };
36
36
  newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
@@ -40,13 +40,21 @@ const DataGridContextProvider = ({ isLoading, children, }) => {
40
40
  ...currentOpenedItems,
41
41
  [key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
42
42
  };
43
- });
44
- return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: {
45
- checkIsOpened,
46
- checkIsMoreOpened,
47
- toggleOpenItems,
48
- toggleOpenMoreItems,
49
- isLoading,
50
- }, children: children }));
43
+ }), [openedItems]);
44
+ const contextValue = (0, react_1.useMemo)(() => ({
45
+ checkIsOpened,
46
+ checkIsMoreOpened,
47
+ toggleOpenItems,
48
+ toggleOpenMoreItems,
49
+ isLoading,
50
+ }), [
51
+ checkIsOpened,
52
+ checkIsMoreOpened,
53
+ toggleOpenItems,
54
+ toggleOpenMoreItems,
55
+ isLoading,
56
+ openedItems,
57
+ ]);
58
+ return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: children }));
51
59
  };
52
60
  exports.DataGridContextProvider = DataGridContextProvider;
@@ -66,6 +66,10 @@ export type RowProps<TData extends Record<string, CellValue>> = {
66
66
  * Если true, то будет отображаться чекбокс для выбора элемента
67
67
  */
68
68
  isSelectable?: boolean;
69
+ /**
70
+ * Флаг выбора текущей строки
71
+ */
72
+ isSelected?: boolean;
69
73
  /**
70
74
  * Массив выбранных строк
71
75
  */
@@ -6,12 +6,13 @@ const react_1 = require("react");
6
6
  const Checkbox_1 = require("../../Checkbox");
7
7
  const personalDataSecurity_1 = require("../../personalDataSecurity");
8
8
  const Tooltip_1 = require("../../Tooltip");
9
+ const external_1 = require("../../utils/external");
9
10
  const constants_1 = require("./constants");
10
11
  const NestedChildren_1 = require("./NestedChildren");
11
12
  const styles_1 = require("./styles");
12
13
  const useLogic_1 = require("./useLogic");
13
14
  const utils_1 = require("./utils");
14
- const Row = (props) => {
15
+ const RowComponent = (props) => {
15
16
  const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = (0, useLogic_1.useLogic)(props);
16
17
  const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick,
17
18
  // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
@@ -56,4 +57,27 @@ const Row = (props) => {
56
57
  // @ts-ignore
57
58
  renderRow: renderRow })] }));
58
59
  };
59
- exports.Row = Row;
60
+ const arePropsEqual = (prevProps, nextProps) => {
61
+ const deepEqualityProps = new Set(['row']);
62
+ // Список пропсов, которые нужно игнорировать при сравнении
63
+ const skipProps = new Set([
64
+ 'selectedRows',
65
+ 'onSelectRow',
66
+ 'columns',
67
+ ]);
68
+ const keys = Object.keys(prevProps);
69
+ return keys.every((key) => {
70
+ const typedKey = key;
71
+ // Не сравниваем свойства, которые нужно пропустить
72
+ if (skipProps.has(typedKey)) {
73
+ return true;
74
+ }
75
+ const prevValue = prevProps[typedKey];
76
+ const nextValue = nextProps[typedKey];
77
+ if (deepEqualityProps.has(typedKey)) {
78
+ return (0, external_1.checkIsDeepEqual)(prevValue, nextValue);
79
+ }
80
+ return prevValue === nextValue;
81
+ });
82
+ };
83
+ exports.Row = (0, react_1.memo)(RowComponent, arePropsEqual);
@@ -7,19 +7,20 @@ const RowContext_1 = require("../RowContext");
7
7
  const RowContextProvider = ({ children }) => {
8
8
  const [isDisabled, setDisabled] = (0, react_1.useState)(false);
9
9
  const [disabledReason, setDisabledReason] = (0, react_1.useState)();
10
- const addDisabledRow = (reason) => {
10
+ const addDisabledRow = (0, react_1.useCallback)((reason) => {
11
11
  setDisabled(true);
12
12
  setDisabledReason(reason);
13
- };
14
- const removeDisabledRow = () => {
13
+ }, []);
14
+ const removeDisabledRow = (0, react_1.useCallback)(() => {
15
15
  setDisabled(false);
16
16
  setDisabledReason(undefined);
17
- };
18
- return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: {
19
- isDisabled,
20
- disabledReason,
21
- addDisabledRow,
22
- removeDisabledRow,
23
- }, children: children }));
17
+ }, []);
18
+ const contextValue = (0, react_1.useMemo)(() => ({
19
+ isDisabled,
20
+ disabledReason,
21
+ addDisabledRow,
22
+ removeDisabledRow,
23
+ }), [isDisabled, disabledReason, addDisabledRow, removeDisabledRow]);
24
+ return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: contextValue, children: children }));
24
25
  };
25
26
  exports.RowContextProvider = RowContextProvider;
@@ -10,6 +10,11 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
10
10
  const isFirstRender = (0, hooks_1.useFirstMountState)();
11
11
  const isSelectable = Boolean(onSelectRow);
12
12
  const isDataGridDisabled = isLoading || isDisabled;
13
+ // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
14
+ const selectedRowsRef = (0, react_1.useRef)(selectedRows);
15
+ (0, react_1.useEffect)(() => {
16
+ selectedRowsRef.current = selectedRows;
17
+ }, [selectedRows]);
13
18
  const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
14
19
  ? { ...subrows, isInitialExpanded: true }
15
20
  : tree;
@@ -43,15 +48,15 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
43
48
  const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
44
49
  onSelectRow(filteredRows);
45
50
  };
46
- const handleSelectRow = (0, react_1.useCallback)((row) => (event) => {
51
+ const handleSelectRow = (row) => (event) => {
47
52
  if (!onSelectRow) {
48
53
  return;
49
54
  }
50
55
  if (event.target.checked) {
51
- return onSelectRow([...selectedRows, row]);
56
+ return onSelectRow([...selectedRowsRef.current, row]);
52
57
  }
53
- onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
54
- }, [selectedRows, onSelectRow, keyId]);
58
+ onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
59
+ };
55
60
  return {
56
61
  isDataGridDisabled,
57
62
  treeRenderConfig,
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const CryptoProFillMd: FunctionComponent<SvgIconProps>;
4
+ export default CryptoProFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const CryptoProFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.63864 22 5.66653 20.3402 3.85352 17.7969L5.16211 17.0488C6.71036 19.1422 9.19639 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C9.19667 3.5 6.7104 4.85715 5.16211 6.9502L3.85352 6.20215C5.66658 3.65922 8.63892 2 12 2Z", fill: "#1366B2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.89709 12.0173L0.886873 17.4551C0.886873 17.4551 5.01299e-05 15.9122 5.0303e-05 12.0173C5.04762e-05 8.12232 0.886873 6.5794 0.886873 6.5794L9.89709 12.0173Z", fill: "#E50909" })] }));
6
+ exports.default = CryptoProFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const GoogleMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default GoogleMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const GoogleMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "m6.432 14.086-.696 2.6-2.544.053A9.96 9.96 0 0 1 2 12a9.95 9.95 0 0 1 1.118-4.599l2.266.415.992 2.252A6 6 0 0 0 6.056 12c0 .734.132 1.437.376 2.086" }), (0, jsx_runtime_1.jsx)("path", { d: "M21.825 10.132Q22 11.042 22 12q-.002 1.076-.219 2.088a10 10 0 0 1-3.52 5.71h-.001l-2.853-.146-.404-2.52a5.96 5.96 0 0 0 2.564-3.044H12.22v-3.956h9.605" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.26 19.798A9.96 9.96 0 0 1 12 22a10 10 0 0 1-8.808-5.26l3.24-2.654a5.946 5.946 0 0 0 8.57 3.045z" }), (0, jsx_runtime_1.jsx)("path", { d: "m18.383 4.302-3.24 2.652a5.948 5.948 0 0 0-8.767 3.114L3.12 7.401h-.001A10 10 0 0 1 12 2c2.426 0 4.651.864 6.383 2.302" })] }));
6
+ exports.default = GoogleMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const JacartaFillMd: FunctionComponent<SvgIconProps>;
4
+ export default JacartaFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const JacartaFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M16.9963 8.00009H21.9529C22.5292 8.00009 22.9963 8.46727 22.9963 9.04357V14.9566C22.9963 15.5329 22.5292 16.0001 21.9529 16.0001H16.9963V8.00009Z", fill: "#ADADAD" }), (0, jsx_runtime_1.jsx)("rect", { x: "19.4995", y: "9.50009", width: "1.5", height: "1.5", rx: "0.521739", fill: "#494949" }), (0, jsx_runtime_1.jsx)("rect", { x: "19.4995", y: "13.0001", width: "1.5", height: "1.5", rx: "0.521739", fill: "#494949" }), (0, jsx_runtime_1.jsx)("rect", { x: "5.99951", y: "6.50009", width: "11", height: "11", rx: "1.04348", fill: "#636562" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.00342 17.5H6.50342C3.46585 17.5 1.00342 15.0376 1.00342 12C1.00347 8.96248 3.46588 6.5 6.50342 6.5H8.00342V17.5ZM5.99951 8.25C4.34269 8.25 2.99956 9.59319 2.99951 11.25L2.99951 12.75C2.99951 14.4069 4.34266 15.75 5.99951 15.75L5.99951 8.25Z", fill: "#FD7F18" })] }));
6
+ exports.default = JacartaFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const OkMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default OkMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const OkMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5m3.6 11.225c-.288-.425-.893-.553-1.351-.285a4.53 4.53 0 0 1-4.499 0c-.458-.268-1.062-.14-1.35.285-.287.424-.15.983.307 1.25.604.352 1.26.601 1.94.745L8.78 16.45a.86.86 0 0 0 .001 1.283c.192.177.442.266.692.266s.502-.089.693-.266l1.835-1.7 1.836 1.7a1.034 1.034 0 0 0 1.384 0 .86.86 0 0 0 0-1.283l-1.868-1.731a6.6 6.6 0 0 0 1.941-.744c.457-.268.595-.828.307-1.251M11.99 6C10.15 6 8.65 7.39 8.65 9.097s1.5 3.095 3.342 3.095c1.844 0 3.342-1.388 3.342-3.095S13.834 6 11.991 6m0 1.814c.763 0 1.384.576 1.384 1.283 0 .706-.62 1.282-1.384 1.282-.762 0-1.383-.576-1.383-1.282s.621-1.282 1.383-1.283" }) }));
6
+ exports.default = OkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const RutokenFillMd: FunctionComponent<SvgIconProps>;
4
+ export default RutokenFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const RutokenFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M17.0039 7.85686H21.9778C22.5401 7.85686 22.996 8.31274 22.996 8.8751V14.9845C22.996 15.5469 22.5401 16.0027 21.9778 16.0027H17.0039V7.85686Z", fill: "#ADADAD" }), (0, jsx_runtime_1.jsx)("rect", { x: "19.3", y: "9.2146", width: "1.69706", height: "1.69706", rx: "0.509117", fill: "#494949" }), (0, jsx_runtime_1.jsx)("rect", { x: "19.3", y: "12.9478", width: "1.69706", height: "1.69706", rx: "0.509117", fill: "#494949" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.00391 11.9997C1.00391 7.35242 9.14978 6.5 11.1862 6.5L15.5 6.50036C16.1567 6.51556 17.001 7.24005 17.001 7.94896V16.0508C17 16.7597 16.3 17.4997 15.5 17.4997L11.1862 17.4994C9.21557 17.4994 1.52384 16.7011 1.02893 12.4383C1.01241 12.296 1.00391 12.1498 1.00391 11.9997ZM4.56194 10.6252L4.55149 10.6253C4.4372 10.6275 2.36327 10.6866 2.36327 11.9999C2.36327 13.3126 4.43523 13.3726 4.55132 13.375L4.56203 13.375H5.41797C5.98033 13.375 6.43621 12.9134 6.43621 12.3438V11.6564C6.43621 11.0869 5.98033 10.6252 5.41797 10.6252H4.56194Z", fill: "#D1D4DD" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.5 6.50036L11.1879 6.50064C9.15141 6.50064 1.00554 7.19779 1.00554 12.0003C1.00554 12.1503 1.01348 12.2962 1.02893 12.4383C1.52384 16.7011 9.21557 17.4994 11.1862 17.4994L15.5 17.4997C16.3 17.4997 17 16.7597 17.001 16.0508V7.94896C17.001 7.24005 16.1567 6.51556 15.5 6.50036ZM4.56194 10.6252L4.55149 10.6253C4.4372 10.6275 2.36327 10.6866 2.36327 11.9999C2.36327 13.3126 4.43523 13.3726 4.55132 13.375L4.56203 13.375H5.41797C5.98033 13.375 6.43621 12.9134 6.43621 12.3438V11.6564C6.43621 11.0869 5.98033 10.6252 5.41797 10.6252H4.56194Z", fill: "#D50C0C" }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter0_i_6008_21979)", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.5 10.4399C7.5 10.1587 7.72794 9.93076 8.00912 9.93076H14.9909C15.2721 9.93076 15.5 10.1587 15.5 10.4399V13.4216C15.5 13.7028 15.2721 13.9308 14.9909 13.9308H8.00912C7.72794 13.9308 7.5 13.7028 7.5 13.4216V10.4399Z", fill: "#CC0E0E" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: "filter0_i_6008_21979", x: "7.5", y: "9.93076", width: "8", height: "4", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), (0, jsx_runtime_1.jsx)("feOffset", {}), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "0.5" }), (0, jsx_runtime_1.jsx)("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_6008_21979" })] }) })] }));
6
+ exports.default = RutokenFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const TelegramIconMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default TelegramIconMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const TelegramIconMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M 20.390625 3.410156 C 21.296875 3.019531 22.265625 3.808594 22.109375 4.808594 L 19.773438 19.609375 C 19.632812 20.507812 18.65625 20.976562 17.898438 20.507812 L 11.132812 16.347656 C 10.425781 15.914062 10.3125 14.910156 10.898438 14.316406 L 16.9375 8.203125 C 17.15625 7.984375 16.878906 7.632812 16.625 7.804688 L 8.234375 13.492188 C 7.613281 13.914062 6.839844 14.027344 6.128906 13.808594 L 2.410156 12.644531 C 1.734375 12.433594 1.6875 11.46875 2.335938 11.1875 Z M 20.390625 3.410156 " }) }));
6
+ exports.default = TelegramIconMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const TelegramMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default TelegramMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const TelegramMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5m5.24 6.156c.093-.604-.481-1.08-1.018-.844L5.523 11.509c-.385.169-.356.752.043.88l2.206.702c.422.134.878.064 1.246-.19l4.973-3.436c.15-.104.314.11.186.242l-3.581 3.691c-.347.359-.278.965.14 1.227l4.008 2.515c.45.281 1.028-.002 1.112-.545z" }) }));
6
+ exports.default = TelegramMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const VkMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default VkMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const VkMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M12.438 1.5c4.75 0 7.131 0 8.601 1.47C22.5 4.44 22.5 6.82 22.5 11.545v.893c0 4.742 0 7.122-1.46 8.592-1.47 1.47-3.842 1.47-8.602 1.47h-.876c-4.742 0-7.122 0-8.592-1.47S1.5 17.18 1.5 12.455v-.893c0-4.742 0-7.122 1.46-8.592C4.43 1.5 6.804 1.5 11.564 1.5zM5.25 8.25c.11 5.153 2.74 8.25 7.352 8.25h.262v-2.948c.814.1 1.58.433 2.2.958a4.07 4.07 0 0 1 1.291 1.99h2.395a6.5 6.5 0 0 0-1.28-2.433 6.6 6.6 0 0 0-2.186-1.705 6.4 6.4 0 0 0 1.918-1.754c.51-.707.864-1.51 1.042-2.358h-2.176c-.472 1.635-1.872 3.121-3.204 3.262V8.25h-2.176v5.715c-1.349-.33-3.052-1.933-3.127-5.715z" }) }));
6
+ exports.default = VkMonochromeFillMd;
@@ -0,0 +1,4 @@
1
+ import type { FunctionComponent } from 'react';
2
+ import { type SvgIconProps } from '../../components/SvgIcon';
3
+ declare const YoutubeMonochromeFillMd: FunctionComponent<SvgIconProps>;
4
+ export default YoutubeMonochromeFillMd;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const SvgIcon_1 = require("../../components/SvgIcon");
5
+ const YoutubeMonochromeFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M12 4s7.096 0 8.872.478a2.86 2.86 0 0 1 2.008 2.02c.475 1.783.475 5.502.475 5.502s0 3.719-.475 5.502a2.86 2.86 0 0 1-2.008 2.02C19.096 20 12 20 12 20c-.031 0-7.1-.001-8.872-.477a2.86 2.86 0 0 1-2.008-2.021C.645 15.719.646 12 .646 12s0-3.719.474-5.502a2.85 2.85 0 0 1 2.008-2.02C4.9 4 11.968 4 12 4M9.546 15.568 15.818 12 9.546 8.432z" }) }));
6
+ exports.default = YoutubeMonochromeFillMd;
@@ -1,6 +1,15 @@
1
1
  export { default as FacebookFillMd } from './FacebookFillMd';
2
2
  export { default as GoogleFillMd } from './GoogleFillMd';
3
+ export { default as GoogleMonochromeFillMd } from './GoogleMonochromeFillMd';
3
4
  export { default as TelegramFillMd } from './TelegramFillMd';
5
+ export { default as TelegramMonochromeFillMd } from './TelegramMonochromeFillMd';
6
+ export { default as TelegramIconMonochromeFillMd } from './TelegramIconMonochromeFillMd';
4
7
  export { default as VkFillMd } from './VkFillMd';
8
+ export { default as VkMonochromeFillMd } from './VkMonochromeFillMd';
5
9
  export { default as YoutubeFillMd } from './YoutubeFillMd';
10
+ export { default as YoutubeMonochromeFillMd } from './YoutubeMonochromeFillMd';
6
11
  export { default as OkFillMd } from './OkFillMd';
12
+ export { default as OkMonochromeFillMd } from './OkMonochromeFillMd';
13
+ export { default as CryptoProFillMd } from './CryptoProFillMd';
14
+ export { default as RutokenFillMd } from './RutokenFillMd';
15
+ export { default as JacartaFillMd } from './JacartaFillMd';
@@ -3,16 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.OkFillMd = exports.YoutubeFillMd = exports.VkFillMd = exports.TelegramFillMd = exports.GoogleFillMd = exports.FacebookFillMd = void 0;
6
+ exports.JacartaFillMd = exports.RutokenFillMd = exports.CryptoProFillMd = exports.OkMonochromeFillMd = exports.OkFillMd = exports.YoutubeMonochromeFillMd = exports.YoutubeFillMd = exports.VkMonochromeFillMd = exports.VkFillMd = exports.TelegramIconMonochromeFillMd = exports.TelegramMonochromeFillMd = exports.TelegramFillMd = exports.GoogleMonochromeFillMd = exports.GoogleFillMd = exports.FacebookFillMd = void 0;
7
7
  var FacebookFillMd_1 = require("./FacebookFillMd");
8
8
  Object.defineProperty(exports, "FacebookFillMd", { enumerable: true, get: function () { return __importDefault(FacebookFillMd_1).default; } });
9
9
  var GoogleFillMd_1 = require("./GoogleFillMd");
10
10
  Object.defineProperty(exports, "GoogleFillMd", { enumerable: true, get: function () { return __importDefault(GoogleFillMd_1).default; } });
11
+ var GoogleMonochromeFillMd_1 = require("./GoogleMonochromeFillMd");
12
+ Object.defineProperty(exports, "GoogleMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(GoogleMonochromeFillMd_1).default; } });
11
13
  var TelegramFillMd_1 = require("./TelegramFillMd");
12
14
  Object.defineProperty(exports, "TelegramFillMd", { enumerable: true, get: function () { return __importDefault(TelegramFillMd_1).default; } });
15
+ var TelegramMonochromeFillMd_1 = require("./TelegramMonochromeFillMd");
16
+ Object.defineProperty(exports, "TelegramMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(TelegramMonochromeFillMd_1).default; } });
17
+ var TelegramIconMonochromeFillMd_1 = require("./TelegramIconMonochromeFillMd");
18
+ Object.defineProperty(exports, "TelegramIconMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(TelegramIconMonochromeFillMd_1).default; } });
13
19
  var VkFillMd_1 = require("./VkFillMd");
14
20
  Object.defineProperty(exports, "VkFillMd", { enumerable: true, get: function () { return __importDefault(VkFillMd_1).default; } });
21
+ var VkMonochromeFillMd_1 = require("./VkMonochromeFillMd");
22
+ Object.defineProperty(exports, "VkMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(VkMonochromeFillMd_1).default; } });
15
23
  var YoutubeFillMd_1 = require("./YoutubeFillMd");
16
24
  Object.defineProperty(exports, "YoutubeFillMd", { enumerable: true, get: function () { return __importDefault(YoutubeFillMd_1).default; } });
25
+ var YoutubeMonochromeFillMd_1 = require("./YoutubeMonochromeFillMd");
26
+ Object.defineProperty(exports, "YoutubeMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(YoutubeMonochromeFillMd_1).default; } });
17
27
  var OkFillMd_1 = require("./OkFillMd");
18
28
  Object.defineProperty(exports, "OkFillMd", { enumerable: true, get: function () { return __importDefault(OkFillMd_1).default; } });
29
+ var OkMonochromeFillMd_1 = require("./OkMonochromeFillMd");
30
+ Object.defineProperty(exports, "OkMonochromeFillMd", { enumerable: true, get: function () { return __importDefault(OkMonochromeFillMd_1).default; } });
31
+ var CryptoProFillMd_1 = require("./CryptoProFillMd");
32
+ Object.defineProperty(exports, "CryptoProFillMd", { enumerable: true, get: function () { return __importDefault(CryptoProFillMd_1).default; } });
33
+ var RutokenFillMd_1 = require("./RutokenFillMd");
34
+ Object.defineProperty(exports, "RutokenFillMd", { enumerable: true, get: function () { return __importDefault(RutokenFillMd_1).default; } });
35
+ var JacartaFillMd_1 = require("./JacartaFillMd");
36
+ Object.defineProperty(exports, "JacartaFillMd", { enumerable: true, get: function () { return __importDefault(JacartaFillMd_1).default; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.2.2",
3
+ "version": "4.3.0",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {