@infomaximum/ui-kit 0.15.9 → 0.16.0

package/dist/components/Table/features/tableRowSelection/contexts/tableRowSelectionContext/useTableRowSelectionContext/useTableRowSelectionContext.d.ts

@@ -0,0 +1 @@
+export declare const useTableRowSelectionContext: () => import('../TableRowSelectionContext.types').TableRowSelectionContextValue;

package/dist/components/Table/features/tableRowSelection/contexts/tableRowSelectionContext/useTableRowSelectionContext/useTableRowSelectionContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { TableRowSelectionContext } from "../TableRowSelectionContext.js";
+const useTableRowSelectionContext = () => {
+  return useContext(TableRowSelectionContext);
+};
+export {
+  useTableRowSelectionContext
+};

package/dist/components/Table/features/tableRowSelection/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useTableRowSelection } from './useTableRowSelection/useTableRowSelection';
+export { useTransformColumns } from './useTransformColumns/useTransformColumns';
+export type { RowSelectionItemProps } from './useTableRowSelection/useTableRowSelection.types';
+export type { UseTransformColumnsOptions } from './useTransformColumns/useTransformColumns.types';

package/dist/components/Table/features/tableRowSelection/hooks/useMultipleSelect/useMultipleSelect.d.ts

@@ -0,0 +1,2 @@
+import { PrevSelectedIndex, UseMultipleSelectOptions } from './useMultipleSelect.types';
+export declare const useMultipleSelect: <T, K>(options: UseMultipleSelectOptions<T, K>) => readonly [(currentSelectedIndex: number, data: T[], selectedKeys: Set<K>) => K[], import('react').Dispatch<import('react').SetStateAction<PrevSelectedIndex>>];

package/dist/components/Table/features/tableRowSelection/hooks/useMultipleSelect/useMultipleSelect.js

@@ -0,0 +1,32 @@
+import { useState, useCallback } from "react";
+const useMultipleSelect = (options) => {
+  const {
+    getKey
+  } = options;
+  const [prevSelectedIndex, setPrevSelectedIndex] = useState(null);
+  const multipleSelect = useCallback((currentSelectedIndex, data, selectedKeys) => {
+    const configPrevSelectedIndex = prevSelectedIndex ?? currentSelectedIndex;
+    const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
+    const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
+    const rangeKeys = data.slice(startIndex, endIndex + 1).map(getKey);
+    const shouldSelected = rangeKeys.some((rangeKey) => !selectedKeys.has(rangeKey));
+    const changedKeys = [];
+    rangeKeys.forEach((item) => {
+      if (shouldSelected) {
+        if (!selectedKeys.has(item)) {
+          changedKeys.push(item);
+        }
+        selectedKeys.add(item);
+      } else {
+        selectedKeys.delete(item);
+        changedKeys.push(item);
+      }
+    });
+    setPrevSelectedIndex(shouldSelected ? endIndex : null);
+    return changedKeys;
+  }, [prevSelectedIndex]);
+  return [multipleSelect, setPrevSelectedIndex];
+};
+export {
+  useMultipleSelect
+};

package/dist/components/Table/features/tableRowSelection/hooks/useMultipleSelect/useMultipleSelect.types.d.ts

@@ -0,0 +1,4 @@
+export interface UseMultipleSelectOptions<T, K> {
+    getKey: (item: T, index: number, array: T[]) => K;
+}
+export type PrevSelectedIndex = null | number;

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.d.ts

@@ -0,0 +1,19 @@
+import { UseTableRowSelectionOptions } from './useTableRowSelection.types';
+import { DefaultRecord, Key } from 'components/Table/Table.types';
+import { RowSelectMethod } from '../../types';
+/** TODO: Посмотреть как покажет себя этот хук во время внедрения PT-16172. Возможно, переписать */
+export declare const useTableRowSelection: <Record extends DefaultRecord<Record>>(options: UseTableRowSelectionOptions<Record>) => {
+    checkedCurrentAll: boolean;
+    checkedCurrentSome: boolean;
+    flattedData: Record[];
+    checkboxPropsMap: Map<import('react').Key, Partial<Omit<import('../../../../../Checkbox').CheckboxProps, "defaultChecked" | "checked">>>;
+    derivedSelectedKeySet: Set<import('react').Key>;
+    derivedSelectedKeys: import('react').Key[];
+    derivedHalfSelectedKeySet: Set<import('react').Key>;
+    recordKeys: import('react').Key[];
+    keySet: Set<import('react').Key>;
+    triggerSingleSelection: (key: Key, selected: boolean, keys: Key[], event: Event) => void;
+    setSelectedKeys: (keys: Key[], method: RowSelectMethod) => void;
+    multipleSelect: (currentSelectedIndex: number, data: import('react').Key[], selectedKeys: Set<import('react').Key>) => import('react').Key[];
+    updatePrevSelectedIndex: import('react').Dispatch<import('react').SetStateAction<import('../useMultipleSelect/useMultipleSelect.types').PrevSelectedIndex>>;
+};

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.js

@@ -0,0 +1,126 @@
+import { useMemo, useCallback } from "react";
+import { useEvent } from "../../../../../../hooks/useEvent/useEvent.js";
+import { compact } from "lodash-es";
+import { useMultipleSelect } from "../useMultipleSelect/useMultipleSelect.js";
+import { flattenData } from "./useTableRowSelection.utils.js";
+import { useControlledState } from "../../../../../../hooks/useControlledState/useControlledState.js";
+import { getRowKey } from "../../../../utils/getRowKey/getRowKey.js";
+import { useEmitter } from "../../../typedEventBus/hooks.js";
+import { useFirstMountLayoutEffect } from "../../../../../../hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.js";
+const useTableRowSelection = (options) => {
+  const {
+    rowSelection,
+    dataSource,
+    sortedData
+  } = options;
+  const {
+    getCheckboxProps,
+    onChange: onChangeProp,
+    onSelect,
+    defaultSelectedRowKeys,
+    selectedRowKeys,
+    type = "checkbox"
+  } = rowSelection || {};
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useControlledState(selectedRowKeys || defaultSelectedRowKeys || [], selectedRowKeys);
+  const [multipleSelect, updatePrevSelectedIndex] = useMultipleSelect({
+    getKey: (item) => item
+  });
+  const {
+    getRecordByKey
+  } = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    function dig(records) {
+      records.forEach((record) => {
+        const rowKey = getRowKey(record);
+        map.set(rowKey, record);
+        if (record && typeof record === "object" && "children" in record) {
+          dig(record["children"] || []);
+        }
+      });
+    }
+    dig(dataSource);
+    const getRecordByKey2 = (key) => {
+      return map.get(key);
+    };
+    return {
+      getRecordByKey: getRecordByKey2
+    };
+  }, [dataSource]);
+  const flattedData = useMemo(() => flattenData(sortedData), [sortedData]);
+  const checkboxPropsMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    flattedData.forEach((record) => {
+      const key = getRowKey(record);
+      const checkboxProps = (getCheckboxProps ? getCheckboxProps(record) : null) || {};
+      map.set(key, checkboxProps);
+    });
+    return map;
+  }, [flattedData, getCheckboxProps]);
+  const [derivedSelectedKeys, derivedHalfSelectedKeys] = useMemo(() => {
+    return [mergedSelectedKeys, []];
+  }, [mergedSelectedKeys]);
+  const derivedSelectedKeySet = useMemo(() => {
+    const keys = type === "radio" ? derivedSelectedKeys.slice(0, 1) : derivedSelectedKeys;
+    return new Set(keys);
+  }, [derivedSelectedKeys, type]);
+  const derivedHalfSelectedKeySet = useMemo(() => type === "radio" ? /* @__PURE__ */ new Set() : new Set(derivedHalfSelectedKeys), [derivedHalfSelectedKeys, type]);
+  const keySet = useMemo(() => new Set(derivedSelectedKeySet), [derivedSelectedKeySet]);
+  const recordKeys = useMemo(() => flattedData.map(getRowKey).filter((key) => {
+    var _a;
+    return !((_a = checkboxPropsMap.get(key)) == null ? void 0 : _a.disabled);
+  }), [checkboxPropsMap, flattedData]);
+  const checkedCurrentAll = recordKeys.every((key) => keySet.has(key));
+  const checkedCurrentSome = recordKeys.some((key) => keySet.has(key));
+  const setSelectedKeys = useCallback((keys, method) => {
+    const availableKeys = [];
+    const records = [];
+    keys.forEach((key) => {
+      const record = getRecordByKey(key);
+      if (record !== void 0) {
+        availableKeys.push(key);
+        records.push(record);
+      }
+    });
+    setMergedSelectedKeys(availableKeys);
+    onChangeProp == null ? void 0 : onChangeProp(availableKeys, records, {
+      type: method
+    });
+  }, [getRecordByKey, onChangeProp, setMergedSelectedKeys]);
+  const triggerSingleSelection = useCallback((key, selected, keys, event) => {
+    if (onSelect) {
+      const rows = compact(keys.map((k) => getRecordByKey(k)));
+      const record = getRecordByKey(key);
+      if (record) {
+        onSelect(record, selected, rows, event);
+      }
+    }
+    setSelectedKeys(keys, "single");
+  }, [onSelect, getRecordByKey, setSelectedKeys]);
+  const emitRowSelect = useEvent(useEmitter("row:select"));
+  useFirstMountLayoutEffect((firstMount) => {
+    if (firstMount) {
+      return;
+    }
+    emitRowSelect({
+      selectedKeySet: derivedSelectedKeySet
+    });
+  }, [emitRowSelect, derivedSelectedKeySet]);
+  return {
+    checkedCurrentAll,
+    checkedCurrentSome,
+    flattedData,
+    checkboxPropsMap,
+    derivedSelectedKeySet,
+    derivedSelectedKeys,
+    derivedHalfSelectedKeySet,
+    recordKeys,
+    keySet,
+    triggerSingleSelection,
+    setSelectedKeys,
+    multipleSelect,
+    updatePrevSelectedIndex
+  };
+};
+export {
+  useTableRowSelection
+};

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.types.d.ts

@@ -0,0 +1,8 @@
+import { CheckboxProps } from 'components/Checkbox';
+import { RadioProps } from 'components/Radio';
+import { useTableSort } from 'components/Table/features/tableSort';
+import { DefaultRecord, TableProps } from 'components/Table/Table.types';
+export interface UseTableRowSelectionOptions<Record extends DefaultRecord> extends Pick<TableProps<Record>, "rowSelection" | "dataSource"> {
+    sortedData: ReturnType<typeof useTableSort<Record>>["sortedData"];
+}
+export type RowSelectionItemProps<P extends CheckboxProps | RadioProps = CheckboxProps> = Partial<Omit<P, "checked" | "defaultChecked">>;

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.utils.d.ts

@@ -0,0 +1,2 @@
+import { DefaultRecord } from 'components/Table/Table.types';
+export declare const flattenData: <Record extends DefaultRecord<Record>>(data: readonly Record[], list?: Record[]) => Record[];

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.utils.js

@@ -0,0 +1,13 @@
+const flattenData = (data, list = []) => {
+  data.forEach((record) => {
+    list.push(record);
+    const children = record.children;
+    if (children) {
+      flattenData(children, list);
+    }
+  });
+  return list;
+};
+export {
+  flattenData
+};

package/dist/components/Table/features/tableRowSelection/hooks/useTransformColumns/useTransformColumns.d.ts

@@ -0,0 +1,6 @@
+import { UseTransformColumnsOptions } from './useTransformColumns.types';
+import { DefaultRecord } from 'components/Table/Table.types';
+import { ColumnsTransformer } from 'components/Table/interfaces/tableColumns.types';
+export declare const useTransformColumns: <Record extends DefaultRecord>(options: UseTransformColumnsOptions<Record>) => {
+    transformColumns: ColumnsTransformer<Record>;
+};

package/dist/components/Table/features/tableRowSelection/hooks/useTransformColumns/useTransformColumns.js

@@ -0,0 +1,59 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, Fragment } from "react";
+import { addDefinedValueKeys } from "./useTransformColumns.utils.js";
+import { RadioCellContentWrapper } from "../../components/RadioCellContentWrapper/RadioCellContentWrapper.js";
+import { CheckboxCellContentWrapper } from "../../components/CheckboxCellContentWrapper/CheckboxCellContentWrapper.js";
+import { HeaderCheckboxCellContentWrapper } from "../../components/HeaderCheckboxCellContentWrapper/HeaderCheckboxCellContentWrapper.js";
+import { isUndefined } from "lodash-es";
+import { defaultRowSelectionColumnWidth } from "../../../tableSort/utils/const.js";
+import { selectionColumnKey } from "../../utils/const.js";
+const useTransformColumns = (options) => {
+  const {
+    rowSelection
+  } = options;
+  const transformColumns = useCallback(
+    (columns) => {
+      if (!rowSelection) {
+        return columns;
+      }
+      const {
+        columnTitle,
+        columnWidth = defaultRowSelectionColumnWidth,
+        hideSelectAll,
+        onCell,
+        getTitleCheckboxProps,
+        renderCell,
+        type = "checkbox"
+      } = rowSelection;
+      const Title = type === "checkbox" && !hideSelectAll ? HeaderCheckboxCellContentWrapper : Fragment;
+      const title = (() => {
+        if (isUndefined(columnTitle) || typeof columnTitle === "function") {
+          if (Title === Fragment) {
+            return;
+          }
+          return /* @__PURE__ */ jsx(Title, { columnTitle, getTitleCheckboxProps });
+        }
+        return columnTitle;
+      })();
+      const selectionColumn = {
+        key: selectionColumnKey,
+        title,
+        render: (_, record) => type === "checkbox" ? /* @__PURE__ */ jsx(CheckboxCellContentWrapper, { renderCell, record }) : /* @__PURE__ */ jsx(RadioCellContentWrapper, { renderCell, record })
+      };
+      addDefinedValueKeys(selectionColumn, {
+        onCell,
+        width: columnWidth
+      });
+      columns.unshift(selectionColumn);
+      return columns;
+    },
+    // TODO: проверить стабильность ссылки во время внедрения (часто зависит от selectedKeys) PT-16172
+    [rowSelection]
+  );
+  return {
+    transformColumns
+  };
+};
+export {
+  useTransformColumns
+};

package/dist/components/Table/features/tableRowSelection/hooks/useTransformColumns/useTransformColumns.types.d.ts

@@ -0,0 +1,3 @@
+import { DefaultRecord, TableProps } from 'components/Table/Table.types';
+export interface UseTransformColumnsOptions<Record extends DefaultRecord> extends Pick<TableProps<Record>, "rowSelection"> {
+}

package/dist/components/Table/features/tableRowSelection/hooks/useTransformColumns/useTransformColumns.utils.d.ts

@@ -0,0 +1 @@
+export declare const addDefinedValueKeys: <T, K extends keyof T>(target: T, keys: { [P in K]: T[P]; }) => void;

package/dist/components/Table/features/tableRowSelection/hooks/useTransformColumns/useTransformColumns.utils.js

@@ -0,0 +1,12 @@
+import { isUndefined } from "lodash-es";
+const addDefinedValueKeys = (target, keys) => {
+  for (const key in keys) {
+    if (isUndefined(keys[key])) {
+      continue;
+    }
+    target[key] = keys[key];
+  }
+};
+export {
+  addDefinedValueKeys
+};

package/dist/components/Table/features/tableRowSelection/index.d.ts

@@ -0,0 +1,5 @@
+export { useTableRowSelectionContext, TableRowSelectionContext, type TableRowSelectionContextValue, } from './contexts';
+export { useTableRowSelection, useTransformColumns, type RowSelectionItemProps, type UseTransformColumnsOptions, } from './hooks';
+export type { TableRowSelection } from './types';
+export { selectionItemContainerStyle, getBorderedSelectionItemContainerStyle } from './styles';
+export { selectionColumnKey } from './utils';

package/dist/components/Table/features/tableRowSelection/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const selectionItemContainerStyle: {
+    readonly position: "absolute";
+    readonly inset: 0;
+    readonly bottom: -1;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+};
+export declare const getBorderedSelectionItemContainerStyle: (includeTop?: boolean) => {
+    left: number;
+    right: number;
+} | {
+    top: number;
+    left: number;
+    right: number;
+};

package/dist/components/Table/features/tableRowSelection/styles.js

@@ -0,0 +1,25 @@
+const selectionItemContainerStyle = {
+  position: "absolute",
+  inset: 0,
+  bottom: -1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const getBorderedSelectionItemContainerStyle = (includeTop = false) => {
+  const baseStyle = {
+    left: -1,
+    right: -1
+  };
+  if (includeTop) {
+    return {
+      ...baseStyle,
+      top: -1
+    };
+  }
+  return baseStyle;
+};
+export {
+  getBorderedSelectionItemContainerStyle,
+  selectionItemContainerStyle
+};

package/dist/components/Table/features/tableRowSelection/types.d.ts

@@ -0,0 +1,24 @@
+import { CheckboxProps } from 'components/Checkbox';
+import { GetComponentProps } from 'components/Table/interfaces/tableComponents.types';
+import { DefaultRecord, Key } from 'components/Table/Table.types';
+import { AriaAttributes, ComponentType, ReactNode } from 'react';
+type RowSelectionType = "checkbox" | "radio";
+export type RowSelectMethod = "all" | "none" | "invert" | "single" | "multiple";
+type SelectionSelectFn<T = DefaultRecord> = (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
+export interface TableRowSelection<T = DefaultRecord> {
+    type?: RowSelectionType;
+    defaultSelectedRowKeys?: Key[];
+    selectedRowKeys?: Key[];
+    onChange?: (selectedRowKeys: Key[], selectedRows: T[], info: {
+        type: RowSelectMethod;
+    }) => void;
+    getTitleCheckboxProps?: () => Partial<Omit<CheckboxProps, "checked" | "defaultChecked">> & AriaAttributes;
+    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, "checked" | "defaultChecked">>;
+    onSelect?: SelectionSelectFn<T>;
+    hideSelectAll?: boolean;
+    columnWidth?: string | number;
+    columnTitle?: ReactNode | ComponentType;
+    renderCell?: ComponentType;
+    onCell?: GetComponentProps<T>;
+}
+export {};

package/dist/components/Table/features/tableRowSelection/utils/const.d.ts

@@ -0,0 +1 @@
+export declare const selectionColumnKey = "__SELECTION_COLUMN";

package/dist/components/Table/features/tableRowSelection/utils/const.js

@@ -0,0 +1,4 @@
+const selectionColumnKey = "__SELECTION_COLUMN";
+export {
+  selectionColumnKey
+};

package/dist/components/Table/features/tableRowSelection/utils/index.d.ts

@@ -0,0 +1 @@
+export { selectionColumnKey } from './const';

package/dist/components/Table/features/tableSort/components/HeaderCellWithSort/HeaderCellWithSort.d.ts

@@ -0,0 +1,3 @@
+import { HeaderCellWithSortProps } from './HeaderCellWithSort.types';
+import { DefaultRecord } from 'components/Table/Table.types';
+export declare const HeaderCellWithSort: <Record extends DefaultRecord>(props: HeaderCellWithSortProps<Record>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/features/tableSort/components/HeaderCellWithSort/HeaderCellWithSort.js

@@ -0,0 +1,75 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useCellFixedInfo } from "../../../../hooks/useCellFixedInfo/useCellFixedInfo.js";
+import { getFixedCellStyle } from "../../../../hooks/useCellFixedInfo/useCellFixedInfo.styles.js";
+import { headerCellWithSortStyle } from "./HeaderCellWithSort.styles.js";
+import { Cell } from "../../../../components/Cell/Cell.js";
+import { getHeaderCellScope } from "../../../../components/Header/components/HeaderCell/HeaderCell.utils.js";
+import { headerCellStyle, borderedHeaderCellStyle } from "../../../../components/Header/components/HeaderCell/HeaderCell.styles.js";
+import { useTableContext } from "../../../../contexts/tableContext/useTableContext/useTableContext.js";
+import { useHeaderCellSort } from "../../hooks/useHeaderCellSort/useHeaderCellSort.js";
+const HeaderCellWithSortComponent = (props) => {
+  var _a;
+  const {
+    cell
+  } = props;
+  const {
+    children,
+    colSpan: cellColSpan,
+    rowSpan: cellRowSpan,
+    colStart,
+    colEnd,
+    column
+  } = cell;
+  const {
+    getComponent,
+    bordered,
+    tableTokens
+  } = useTableContext();
+  const HeaderCellComponent = getComponent(["header", "cell"], "th");
+  const {
+    colSpan,
+    rowSpan,
+    onClick: headerCellOnClick,
+    onKeyDown: headerCellOnKeyDown,
+    css: headerCellCss,
+    ...restAdditionalHeaderCellProps
+  } = ((_a = column.onHeaderCell) == null ? void 0 : _a.call(column, column)) || {};
+  const {
+    onClick,
+    onKeyDown
+  } = useHeaderCellSort({
+    column,
+    onClick: headerCellOnClick,
+    onKeyDown: headerCellOnKeyDown
+  });
+  const {
+    isFixStart,
+    isFixEnd,
+    fixStart,
+    fixEnd,
+    zIndexReverse,
+    fixedStartShadow,
+    fixedEndShadow,
+    showFixStartShadow,
+    showFixEndShadow
+  } = useCellFixedInfo({
+    colStart,
+    colEnd
+  });
+  return /* @__PURE__ */ jsx(Cell, { component: HeaderCellComponent, align: column.align, ellipsis: column.ellipsis, bordered, tableTokens, css: [headerCellStyle(tableTokens), headerCellWithSortStyle(tableTokens), bordered ? borderedHeaderCellStyle(tableTokens, bordered) : void 0, ...getFixedCellStyle({
+    columnKey: column.key,
+    isFixStart,
+    isFixEnd,
+    fixStart,
+    fixEnd,
+    zIndexReverse,
+    fixedStartShadow,
+    fixedEndShadow,
+    showFixStartShadow,
+    showFixEndShadow
+  }), headerCellCss, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFibGUvZmVhdHVyZXMvdGFibGVTb3J0L2NvbXBvbmVudHMvSGVhZGVyQ2VsbFdpdGhTb3J0L0hlYWRlckNlbGxXaXRoU29ydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkRNIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFibGUvZmVhdHVyZXMvdGFibGVTb3J0L2NvbXBvbmVudHMvSGVhZGVyQ2VsbFdpdGhTb3J0L0hlYWRlckNlbGxXaXRoU29ydC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEhlYWRlckNlbGxXaXRoU29ydFByb3BzIH0gZnJvbSBcIi4vSGVhZGVyQ2VsbFdpdGhTb3J0LnR5cGVzXCI7XG5pbXBvcnQgdHlwZSB7IERlZmF1bHRSZWNvcmQgfSBmcm9tIFwiY29tcG9uZW50cy9UYWJsZS9UYWJsZS50eXBlc1wiO1xuaW1wb3J0IHsgdXNlVGFibGVDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvVGFibGUvY29udGV4dHNcIjtcbmltcG9ydCB7IHVzZUNlbGxGaXhlZEluZm8gfSBmcm9tIFwiY29tcG9uZW50cy9UYWJsZS9ob29rcy91c2VDZWxsRml4ZWRJbmZvL3VzZUNlbGxGaXhlZEluZm9cIjtcbmltcG9ydCB7IGdldEZpeGVkQ2VsbFN0eWxlIH0gZnJvbSBcImNvbXBvbmVudHMvVGFibGUvaG9va3MvdXNlQ2VsbEZpeGVkSW5mby91c2VDZWxsRml4ZWRJbmZvLnN0eWxlc1wiO1xuaW1wb3J0IHsgaGVhZGVyQ2VsbFdpdGhTb3J0U3R5bGUgfSBmcm9tIFwiLi9IZWFkZXJDZWxsV2l0aFNvcnQuc3R5bGVzXCI7XG5pbXBvcnQgeyBDZWxsIH0gZnJvbSBcImNvbXBvbmVudHMvVGFibGUvY29tcG9uZW50cy9DZWxsL0NlbGxcIjtcbmltcG9ydCB7IGdldEhlYWRlckNlbGxTY29wZSB9IGZyb20gXCJjb21wb25lbnRzL1RhYmxlL2NvbXBvbmVudHMvSGVhZGVyL2NvbXBvbmVudHMvSGVhZGVyQ2VsbC9IZWFkZXJDZWxsLnV0aWxzXCI7XG5pbXBvcnQge1xuICBib3JkZXJlZEhlYWRlckNlbGxTdHlsZSxcbiAgaGVhZGVyQ2VsbFN0eWxlLFxufSBmcm9tIFwiY29tcG9uZW50cy9UYWJsZS9jb21wb25lbnRzL0hlYWRlci9jb21wb25lbnRzL0hlYWRlckNlbGwvSGVhZGVyQ2VsbC5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZUhlYWRlckNlbGxTb3J0IH0gZnJvbSBcIi4uLy4uL2hvb2tzXCI7XG5cbmNvbnN0IEhlYWRlckNlbGxXaXRoU29ydENvbXBvbmVudCA9IDxSZWNvcmQgZXh0ZW5kcyBEZWZhdWx0UmVjb3JkPihcbiAgcHJvcHM6IEhlYWRlckNlbGxXaXRoU29ydFByb3BzPFJlY29yZD5cbikgPT4ge1xuICBjb25zdCB7IGNlbGwgfSA9IHByb3BzO1xuICBjb25zdCB7IGNoaWxkcmVuLCBjb2xTcGFuOiBjZWxsQ29sU3Bhbiwgcm93U3BhbjogY2VsbFJvd1NwYW4sIGNvbFN0YXJ0LCBjb2xFbmQsIGNvbHVtbiB9ID0gY2VsbDtcbiAgY29uc3QgeyBnZXRDb21wb25lbnQsIGJvcmRlcmVkLCB0YWJsZVRva2VucyB9ID0gdXNlVGFibGVDb250ZXh0KCk7XG4gIGNvbnN0IEhlYWRlckNlbGxDb21wb25lbnQgPSBnZXRDb21wb25lbnQoW1wiaGVhZGVyXCIsIFwiY2VsbFwiXSwgXCJ0aFwiKTtcblxuICBjb25zdCB7XG4gICAgY29sU3BhbixcbiAgICByb3dTcGFuLFxuICAgIG9uQ2xpY2s6IGhlYWRlckNlbGxPbkNsaWNrLFxuICAgIG9uS2V5RG93bjogaGVhZGVyQ2VsbE9uS2V5RG93bixcbiAgICBjc3M6IGhlYWRlckNlbGxDc3MsXG4gICAgLi4ucmVzdEFkZGl0aW9uYWxIZWFkZXJDZWxsUHJvcHNcbiAgfSA9IGNvbHVtbi5vbkhlYWRlckNlbGw/Lihjb2x1bW4pIHx8IHt9O1xuXG4gIGNvbnN0IHsgb25DbGljaywgb25LZXlEb3duIH0gPSB1c2VIZWFkZXJDZWxsU29ydCh7XG4gICAgY29sdW1uLFxuICAgIG9uQ2xpY2s6IGhlYWRlckNlbGxPbkNsaWNrLFxuICAgIG9uS2V5RG93bjogaGVhZGVyQ2VsbE9uS2V5RG93bixcbiAgfSk7XG5cbiAgY29uc3Qge1xuICAgIGlzRml4U3RhcnQsXG4gICAgaXNGaXhFbmQsXG4gICAgZml4U3RhcnQsXG4gICAgZml4RW5kLFxuICAgIHpJbmRleFJldmVyc2UsXG4gICAgZml4ZWRTdGFydFNoYWRvdyxcbiAgICBmaXhlZEVuZFNoYWRvdyxcbiAgICBzaG93Rml4U3RhcnRTaGFkb3csXG4gICAgc2hvd0ZpeEVuZFNoYWRvdyxcbiAgfSA9IHVzZUNlbGxGaXhlZEluZm8oe1xuICAgIGNvbFN0YXJ0LFxuICAgIGNvbEVuZCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2VsbFxuICAgICAgY29tcG9uZW50PXtIZWFkZXJDZWxsQ29tcG9uZW50fVxuICAgICAgYWxpZ249e2NvbHVtbi5hbGlnbn1cbiAgICAgIGVsbGlwc2lzPXtjb2x1bW4uZWxsaXBzaXN9XG4gICAgICBib3JkZXJlZD17Ym9yZGVyZWR9XG4gICAgICB0YWJsZVRva2Vucz17dGFibGVUb2tlbnN9XG4gICAgICBjc3M9e1tcbiAgICAgICAgaGVhZGVyQ2VsbFN0eWxlKHRhYmxlVG9rZW5zKSxcbiAgICAgICAgaGVhZGVyQ2VsbFdpdGhTb3J0U3R5bGUodGFibGVUb2tlbnMpLFxuICAgICAgICBib3JkZXJlZCA/IGJvcmRlcmVkSGVhZGVyQ2VsbFN0eWxlKHRhYmxlVG9rZW5zLCBib3JkZXJlZCkgOiB1bmRlZmluZWQsXG4gICAgICAgIC4uLmdldEZpeGVkQ2VsbFN0eWxlKHtcbiAgICAgICAgICBjb2x1bW5LZXk6IGNvbHVtbi5rZXksXG4gICAgICAgICAgaXNGaXhTdGFydCxcbiAgICAgICAgICBpc0ZpeEVuZCxcbiAgICAgICAgICBmaXhTdGFydCxcbiAgICAgICAgICBmaXhFbmQsXG4gICAgICAgICAgekluZGV4UmV2ZXJzZSxcbiAgICAgICAgICBmaXhlZFN0YXJ0U2hhZG93LFxuICAgICAgICAgIGZpeGVkRW5kU2hhZG93LFxuICAgICAgICAgIHNob3dGaXhTdGFydFNoYWRvdyxcbiAgICAgICAgICBzaG93Rml4RW5kU2hhZG93LFxuICAgICAgICB9KSxcbiAgICAgICAgaGVhZGVyQ2VsbENzcyxcbiAgICAgIF19XG4gICAgICB0YWJJbmRleD17MH1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBvbktleURvd249e29uS2V5RG93bn1cbiAgICAgIHsuLi5yZXN0QWRkaXRpb25hbEhlYWRlckNlbGxQcm9wc31cbiAgICAgIGNvbFNwYW49e2NvbFNwYW4gPz8gY2VsbENvbFNwYW59XG4gICAgICByb3dTcGFuPXtyb3dTcGFuID8/IGNlbGxSb3dTcGFufVxuICAgICAgc2NvcGU9e2dldEhlYWRlckNlbGxTY29wZShjb2x1bW4udGl0bGUsIGNlbGxDb2xTcGFuKX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9DZWxsPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckNlbGxXaXRoU29ydCA9IEhlYWRlckNlbGxXaXRoU29ydENvbXBvbmVudDtcbiJdfQ== */"], tabIndex: 0, onClick, onKeyDown, ...restAdditionalHeaderCellProps, colSpan: colSpan ?? cellColSpan, rowSpan: rowSpan ?? cellRowSpan, scope: getHeaderCellScope(column.title, cellColSpan), children });
+};
+const HeaderCellWithSort = HeaderCellWithSortComponent;
+export {
+  HeaderCellWithSort
+};

package/dist/components/Table/features/tableSort/components/HeaderCellWithSort/HeaderCellWithSort.styles.d.ts

@@ -0,0 +1,7 @@
+import { TableTokens } from 'components/Table/Table.tokens';
+export declare const headerCellWithSortStyle: (tableTokens: TableTokens) => {
+    cursor: string;
+    ":hover": {
+        backgroundColor: "#F0F0F0";
+    };
+};

package/dist/components/Table/features/tableSort/components/HeaderCellWithSort/HeaderCellWithSort.styles.js

@@ -0,0 +1,9 @@
+const headerCellWithSortStyle = (tableTokens) => ({
+  cursor: "pointer",
+  ":hover": {
+    backgroundColor: tableTokens.tableHeaderBgHover
+  }
+});
+export {
+  headerCellWithSortStyle
+};

package/dist/components/Table/features/tableSort/components/HeaderCellWithSort/HeaderCellWithSort.types.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { DefaultRecord } from 'components/Table/Table.types';
+import { HeaderCell } from 'components/Table/components/Header/Header.types';
+export interface HeaderCellWithSortProps<Record extends DefaultRecord> extends PropsWithChildren {
+    cell: HeaderCell<Record>;
+}

package/dist/components/Table/features/tableSort/components/SortButton/SortButton.d.ts

@@ -0,0 +1,2 @@
+import { SortButtonProps } from './SortButton.types';
+export declare const SortButton: <Record>(props: SortButtonProps<Record>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/features/tableSort/components/SortButton/SortButton.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { sortButtonStyle, getAscendArrowStyle, getDescendArrowStyle } from "./SortButton.styles.js";
+import { useTheme } from "../../../../../../hooks/useTheme/useTheme.js";
+import { useSortState } from "../../hooks/useSortState/useSortState.js";
+import { ArrowFilled } from "../../icons/ArrowFilled.js";
+const SortButtonComponent = (props) => {
+  const {
+    column
+  } = props;
+  const theme = useTheme();
+  const {
+    sortOrder,
+    sortDirections
+  } = useSortState({
+    column
+  });
+  const hasAscendOrder = sortDirections.includes("ascend");
+  const hasDescendOrder = sortDirections.includes("descend");
+  return /* @__PURE__ */ jsxs("span", { className: "column-sorter-inner", "aria-hidden": "true", css: sortButtonStyle(theme), children: [
+    hasAscendOrder && /* @__PURE__ */ jsx(ArrowFilled, { css: getAscendArrowStyle(sortOrder)(theme) }),
+    hasDescendOrder && /* @__PURE__ */ jsx(ArrowFilled, { css: getDescendArrowStyle(sortOrder)(theme) })
+  ] });
+};
+const SortButton = SortButtonComponent;
+export {
+  SortButton
+};

package/dist/components/Table/features/tableSort/components/SortButton/SortButton.styles.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from 'themes';
+import { SortOrder } from '../../types';
+export declare const sortButtonStyle: (theme: Theme) => {
+    readonly display: "inline-flex";
+    readonly flexDirection: "column";
+    readonly rowGap: 2;
+    readonly paddingInline: 3.5;
+    readonly paddingBlock: 4;
+    readonly color: `rgba(${number}, ${number}, ${number}, 0.3)`;
+};
+export declare const getAscendArrowStyle: (sortOrder: SortOrder) => (theme: Theme) => {
+    color: "#0CB3B3" | undefined;
+};
+export declare const getDescendArrowStyle: (sortOrder: SortOrder) => (theme: Theme) => {
+    color: "#0CB3B3" | undefined;
+    transform: string;
+};

package/dist/components/Table/features/tableSort/components/SortButton/SortButton.styles.js

@@ -0,0 +1,20 @@
+const sortButtonStyle = (theme) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  rowGap: theme.x05,
+  paddingInline: 3.5,
+  paddingBlock: theme.paddingXS,
+  color: theme.textIcon
+});
+const getAscendArrowStyle = (sortOrder) => (theme) => ({
+  color: sortOrder === "ascend" ? theme.primaryBase : void 0
+});
+const getDescendArrowStyle = (sortOrder) => (theme) => ({
+  color: sortOrder === "descend" ? theme.primaryBase : void 0,
+  transform: "rotate(180deg)"
+});
+export {
+  getAscendArrowStyle,
+  getDescendArrowStyle,
+  sortButtonStyle
+};

package/dist/components/Table/features/tableSort/components/SortButton/SortButton.types.d.ts

@@ -0,0 +1,4 @@
+import { Columns } from 'components/Table/interfaces/tableColumns.types';
+export interface SortButtonProps<Record> {
+    column: Columns<Record>[number];
+}

package/dist/components/Table/features/tableSort/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useTableSort } from './useTableSort/useTableSort';
+export type { SorterResult } from './useTableSort/useTableSort.types';
+export { useTransformColumns } from './useTransformColumns/useTransformColumns';
+export { useHeaderCellSort } from './useHeaderCellSort/useHeaderCellSort';
+export { useSortState } from './useSortState/useSortState';

package/dist/components/Table/features/tableSort/hooks/useHeaderCellSort/useHeaderCellSort.d.ts

@@ -0,0 +1,6 @@
+import { UseHeaderCellSortOptions } from './useHeaderCellSort.types';
+import { DefaultRecord } from 'components/Table/Table.types';
+export declare const useHeaderCellSort: <Record extends DefaultRecord>(options: UseHeaderCellSortOptions<Record>) => {
+    onClick: import('react').MouseEventHandler<HTMLTableCellElement>;
+    onKeyDown: import('react').KeyboardEventHandler<HTMLTableCellElement>;
+};