@commercetools-uikit/data-table-manager 13.0.3 → 13.0.4

package/dist/declarations/src/column-settings-manager/column-settings-manager.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent, type Dispatch } from 'react';
+import { type DropResult } from 'react-beautiful-dnd';
+declare type TColumnData = {
+    key: string;
+    label: ReactNode;
+};
+declare type TColumnSettingsManagerProps = {
+    availableColumns: TColumnData[];
+    selectedColumns: TColumnData[];
+    onUpdateColumns: (updatedColums: TColumnData[]) => void;
+    areHiddenColumnsSearchable?: boolean;
+    searchHiddenColumns?: (searchTerm: string) => Promise<unknown>;
+    searchHiddenColumnsPlaceholder?: string;
+    onClose: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    managerTheme?: 'light' | 'dark';
+};
+export declare const handleColumnsUpdate: (dragResult: DropResult, onUpdateColumns: TColumnSettingsManagerProps['onUpdateColumns'], selectedColumns: TColumnSettingsManagerProps['selectedColumns'], availableColumns: TColumnSettingsManagerProps['availableColumns'], setIsDragging: Dispatch<boolean>) => void;
+export declare const ColumnSettingsManager: {
+    (props: TColumnSettingsManagerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TColumnSettingsManagerProps, "availableColumns">;
+};
+export default ColumnSettingsManager;

package/dist/declarations/src/column-settings-manager/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const HIDDEN_COLUMNS_PANEL = "hidden-columns-panel";
+export declare const SELECTED_COLUMNS_PANEL = "selected-columns-panel";

package/dist/declarations/src/column-settings-manager/index.d.ts

@@ -0,0 +1 @@
+export { default } from './column-settings-manager';

package/dist/declarations/src/column-settings-manager/messages.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    title: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    visibleColumns: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    hiddenColumns: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    noSelectedColumnsToShow: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    noHiddenColumnsToShow: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    closeButtonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const UPDATE_ACTIONS: {
+    COLUMNS_UPDATE: string;
+    IS_TABLE_CONDENSED_UPDATE: string;
+    IS_TABLE_WRAPPING_TEXT_UPDATE: string;
+};
+export declare const COLUMN_MANAGER = "columnManager";
+export declare const DISPLAY_SETTINGS = "displaySettings";

package/dist/declarations/src/data-table-manager.d.ts

@@ -0,0 +1,32 @@
+import { type ReactElement, type ReactNode, type MouseEventHandler } from 'react';
+import { type TDataTableSettingsProps } from './data-table-settings';
+interface TRow {
+    id: string;
+}
+declare type TColumProps = {
+    key: string;
+    label: ReactNode;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    onClick?: (event: MouseEventHandler) => void;
+    renderItem?: <T extends TRow>(row: T, isRowCollapsed: boolean) => ReactNode;
+    headerIcon?: ReactNode;
+    isTruncated?: boolean;
+    isSortable?: boolean;
+    disableResizing?: boolean;
+    shouldIgnoreRowClick?: boolean;
+};
+declare type TDataTableManagerProps = {
+    columns: TColumProps[];
+    children: ReactElement;
+    displaySettings?: TDataTableSettingsProps['displaySettings'];
+    columnManager?: TDataTableSettingsProps['columnManager'];
+    onSettingsChange?: (settingName: string, settingValue: boolean | string[]) => void;
+    topBar?: ReactNode;
+    managerTheme?: 'light' | 'dark';
+};
+declare const DataTableManager: {
+    (props: TDataTableManagerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DataTableManager;

package/dist/declarations/src/data-table-settings/data-table-settings.d.ts

@@ -0,0 +1,46 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type MessageDescriptor } from 'react-intl';
+declare type TColumnData = {
+    key: string;
+    label: ReactNode;
+};
+declare type MappedColumns = Record<string, TColumnData>;
+export declare type TDisplaySettingsProps = {
+    disableDisplaySettings?: boolean;
+    isCondensed?: boolean;
+    isWrappingText?: boolean;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+};
+export declare type TColumnManagerProps = {
+    areHiddenColumnsSearchable?: boolean;
+    disableColumnManager?: boolean;
+    visibleColumnKeys: string[];
+    hideableColumns?: TColumnData[];
+    searchHiddenColumns?: (searchTerm: string) => Promise<unknown>;
+    searchHiddenColumnsPlaceholder?: string;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+};
+export declare type TDataTableSettingsProps = {
+    topBar?: ReactNode;
+    onSettingsChange?: (settingName: string, settingValue: boolean | string[]) => void;
+    displaySettings?: TDisplaySettingsProps;
+    columnManager?: TColumnManagerProps;
+    managerTheme?: 'light' | 'dark';
+};
+export declare const getDropdownOptions: ({ areColumnSettingsEnabled, areDisplaySettingsEnabled, formatMessage, }: {
+    areColumnSettingsEnabled: boolean;
+    areDisplaySettingsEnabled: boolean;
+    formatMessage: (message: MessageDescriptor) => string;
+}) => {
+    value: string;
+    label: string;
+}[];
+export declare const getMappedColumns: (columns?: TColumnData[]) => MappedColumns;
+export declare const getSelectedColumns: (mappedColumns: MappedColumns, visibleColumnsKeys?: string[]) => TColumnData[];
+declare const DataTableSettings: {
+    (props: TDataTableSettingsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DataTableSettings;

package/dist/declarations/src/data-table-settings/index.d.ts

@@ -0,0 +1 @@
+export { default, type TDataTableSettingsProps } from './data-table-settings';

package/dist/declarations/src/data-table-settings/messages.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    placeholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    displaySettingsOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    columnManagerOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/display-settings-manager/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const WRAPPED_TEXT_VISIBLE = "wrapped-text-visible";
+export declare const SHOW_HIDE_ON_DEMAND = "show-hide-on-demand";
+export declare const DENSITY_DEFAULT = "density-default";
+export declare const DENSITY_COMPACT = "density-compact";

package/dist/declarations/src/display-settings-manager/display-settings-manager.d.ts

@@ -0,0 +1,17 @@
+import type { ChangeEventHandler, MouseEvent, KeyboardEvent, ReactElement } from 'react';
+export declare type TDensityManagerProps = {
+    isCondensed?: boolean;
+    isWrappingText?: boolean;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    onDensityDisplayChange: ChangeEventHandler<HTMLInputElement>;
+    onTextWrappingChange: ChangeEventHandler<HTMLInputElement>;
+    onClose: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    managerTheme?: 'light' | 'dark';
+};
+declare const DensityManager: {
+    (props: TDensityManagerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TDensityManagerProps, "isCondensed" | "isWrappingText">;
+};
+export default DensityManager;

package/dist/declarations/src/display-settings-manager/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './display-settings-manager';
+export * from './constants';

package/dist/declarations/src/display-settings-manager/messages.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    title: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    textWrappingSubtitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    densityDisplaySubtitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    textWrappingAllWrapVisibleOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    textWrappingShowHideOnDemandOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    densityDisplayDefaultOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    densityDisplayCompactOption: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    closeButtonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/draggable-tag/draggable-tag.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+declare type TColumnData = {
+    key: string;
+    label: ReactNode;
+};
+declare type TDraggableTagProps = {
+    column: TColumnData;
+    index: number;
+    isDisabled?: boolean;
+    onRemove?: (index: number) => void;
+};
+declare const DraggableTag: {
+    (props: TDraggableTagProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DraggableTag;

package/dist/declarations/src/draggable-tag/draggable-tag.styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const DraggingContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default DraggingContainer;

package/dist/declarations/src/draggable-tag/index.d.ts

@@ -0,0 +1 @@
+export { default } from './draggable-tag';

package/dist/declarations/src/droppable-panel/droppable-panel.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+declare type TColumnData = {
+    key: string;
+    label: ReactNode;
+};
+declare type TDroppablePanelProps = {
+    droppableId: string;
+    noColumnsText: ReactNode;
+    columns: TColumnData[];
+    isSearchable?: boolean;
+    isDisabled?: boolean;
+    onRemove?: (columns: TColumnData[]) => void;
+};
+declare const DroppablePanel: {
+    (props: TDroppablePanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DroppablePanel;

package/dist/declarations/src/droppable-panel/index.d.ts

@@ -0,0 +1 @@
+export { default } from './droppable-panel';

package/dist/declarations/src/droppable-panel/messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    loadMoreAttributesHint: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/droppable-panel/tag-container-editable.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const TagContainerEditable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default TagContainerEditable;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './data-table-manager';
+export { UPDATE_ACTIONS } from './constants';
+export { default as version } from './version';
+export { useRowSelection, useSorting } from '@commercetools-uikit/hooks';

package/dist/declarations/src/settings-container/index.d.ts

@@ -0,0 +1 @@
+export { default } from './settings-container';

package/dist/declarations/src/settings-container/settings-container.d.ts

@@ -0,0 +1,21 @@
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import { type MessageDescriptor } from 'react-intl';
+declare type TSettingsContainerProps = {
+    title: MessageDescriptor & {
+        values?: Record<string, React.ReactNode>;
+    };
+    closeButtonLabel: MessageDescriptor & {
+        values?: Record<string, React.ReactNode>;
+    };
+    onClose: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    children: ReactNode;
+    containerTheme?: 'light' | 'dark';
+};
+declare const SettingsContainer: {
+    (props: TSettingsContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TSettingsContainerProps, "containerTheme">;
+};
+export default SettingsContainer;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/data-table-manager",
   "description": "This component enhances the DataTable component and additionally provides a UI and state management to handle configuration of the table such as column manager.",
-  "version": "13.0.3",
+  "version": "13.0.4",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,38 +21,39 @@
   "dependencies": {
     "@babel/runtime": "7.17.2",
     "@babel/runtime-corejs3": "7.17.2",
-    "@commercetools-uikit/accessible-button": "13.0.2",
+    "@commercetools-uikit/accessible-button": "13.0.4",
     "@commercetools-uikit/accessible-hidden": "13.0.0",
-    "@commercetools-uikit/async-select-input": "13.0.2",
+    "@commercetools-uikit/async-select-input": "13.0.4",
     "@commercetools-uikit/card": "13.0.2",
     "@commercetools-uikit/collapsible-motion": "13.0.2",
     "@commercetools-uikit/design-system": "13.0.0",
-    "@commercetools-uikit/field-label": "13.0.2",
+    "@commercetools-uikit/field-label": "13.0.4",
     "@commercetools-uikit/grid": "12.2.9",
     "@commercetools-uikit/hooks": "13.0.2",
     "@commercetools-uikit/icons": "13.0.2",
-    "@commercetools-uikit/primary-button": "13.0.2",
-    "@commercetools-uikit/radio-input": "13.0.2",
-    "@commercetools-uikit/secondary-button": "13.0.2",
-    "@commercetools-uikit/secondary-icon-button": "13.0.2",
-    "@commercetools-uikit/select-input": "13.0.3",
+    "@commercetools-uikit/primary-button": "13.0.4",
+    "@commercetools-uikit/radio-input": "13.0.4",
+    "@commercetools-uikit/secondary-button": "13.0.4",
+    "@commercetools-uikit/secondary-icon-button": "13.0.4",
+    "@commercetools-uikit/select-input": "13.0.4",
     "@commercetools-uikit/spacings": "13.0.2",
-    "@commercetools-uikit/tag": "13.0.2",
-    "@commercetools-uikit/text": "13.0.2",
+    "@commercetools-uikit/tag": "13.0.4",
+    "@commercetools-uikit/text": "13.0.4",
     "@commercetools-uikit/utils": "13.0.2",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "debounce-promise": "^3.1.2",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-beautiful-dnd": "13.1.0",
-    "react-required-if": "1.0.3"
+    "react-beautiful-dnd": "13.1.0"
   },
   "devDependencies": {
+    "@types/debounce-promise": "^3.1.4",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "formik": "^2.2.9",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "5.24.6"
+    "react-intl": "^5.24.6"
   },
   "peerDependencies": {
     "react": "17.x",