mod-arch-shared 1.9.1 → 1.10.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 (25) hide show
  1. package/dist/components/modals/ContentModal.d.ts +24 -0
  2. package/dist/components/modals/ContentModal.d.ts.map +1 -0
  3. package/dist/components/modals/ContentModal.js +13 -0
  4. package/dist/components/modals/ContentModal.js.map +1 -0
  5. package/dist/components/table/index.d.ts +7 -0
  6. package/dist/components/table/index.d.ts.map +1 -1
  7. package/dist/components/table/index.js +4 -0
  8. package/dist/components/table/index.js.map +1 -1
  9. package/dist/components/table/manageColumns/ManageColumnSearchInput.d.ts +9 -0
  10. package/dist/components/table/manageColumns/ManageColumnSearchInput.d.ts.map +1 -0
  11. package/dist/components/table/manageColumns/ManageColumnSearchInput.js +9 -0
  12. package/dist/components/table/manageColumns/ManageColumnSearchInput.js.map +1 -0
  13. package/dist/components/table/manageColumns/ManageColumnsModal.d.ts +23 -0
  14. package/dist/components/table/manageColumns/ManageColumnsModal.d.ts.map +1 -0
  15. package/dist/components/table/manageColumns/ManageColumnsModal.js +108 -0
  16. package/dist/components/table/manageColumns/ManageColumnsModal.js.map +1 -0
  17. package/dist/components/table/manageColumns/utils.d.ts +16 -0
  18. package/dist/components/table/manageColumns/utils.d.ts.map +1 -0
  19. package/dist/components/table/manageColumns/utils.js +34 -0
  20. package/dist/components/table/manageColumns/utils.js.map +1 -0
  21. package/dist/components/table/useManageColumns.d.ts +48 -0
  22. package/dist/components/table/useManageColumns.d.ts.map +1 -0
  23. package/dist/components/table/useManageColumns.js +99 -0
  24. package/dist/components/table/useManageColumns.js.map +1 -0
  25. package/package.json +4 -2
@@ -0,0 +1,24 @@
1
+ import * as React from 'react';
2
+ import { ButtonProps, ModalProps, ModalHeaderProps } from '@patternfly/react-core';
3
+ export type ButtonAction = {
4
+ label: string;
5
+ onClick: () => void;
6
+ variant?: ButtonProps['variant'];
7
+ dataTestId?: string;
8
+ };
9
+ export type ContentModalProps = {
10
+ onClose: () => void;
11
+ contents: React.ReactNode;
12
+ title: string | React.ReactNode;
13
+ buttonActions?: ButtonAction[];
14
+ description?: React.ReactNode;
15
+ disableFocusTrap?: boolean;
16
+ dataTestId?: string;
17
+ bodyClassName?: string;
18
+ variant?: ModalProps['variant'];
19
+ bodyLabel?: string;
20
+ titleIconVariant?: ModalHeaderProps['titleIconVariant'];
21
+ };
22
+ declare const ContentModal: React.FC<ContentModalProps>;
23
+ export default ContentModal;
24
+ //# sourceMappingURL=ContentModal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContentModal.d.ts","sourceRoot":"","sources":["../../../components/modals/ContentModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAML,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;CACzD,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoD7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { useId } from 'react';
3
+ import { Modal, ModalBody, ModalHeader, ModalFooter, Button, } from '@patternfly/react-core';
4
+ const ContentModal = ({ onClose, contents, title, buttonActions, description, disableFocusTrap, dataTestId = 'content-modal', bodyClassName, variant = 'medium', bodyLabel, titleIconVariant, }) => {
5
+ const headingId = useId();
6
+ const descriptionId = useId();
7
+ return (React.createElement(Modal, { "data-testid": dataTestId, isOpen: true, variant: variant, onClose: onClose, disableFocusTrap: disableFocusTrap, "aria-labelledby": headingId, "aria-describedby": description ? descriptionId : undefined },
8
+ React.createElement(ModalHeader, { title: title, labelId: headingId, description: description ? React.createElement("div", { id: descriptionId }, description) : undefined, titleIconVariant: titleIconVariant, "data-testid": "generic-modal-header" }),
9
+ React.createElement(ModalBody, { className: bodyClassName, "aria-label": bodyLabel }, contents),
10
+ buttonActions && (React.createElement(ModalFooter, null, buttonActions.map((action, index) => (React.createElement(Button, { key: `${action.label}-${index}`, variant: action.variant, onClick: action.onClick, "data-testid": action.dataTestId }, action.label)))))));
11
+ };
12
+ export default ContentModal;
13
+ //# sourceMappingURL=ContentModal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContentModal.js","sourceRoot":"","sources":["../../../components/modals/ContentModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EACL,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,MAAM,GAIP,MAAM,wBAAwB,CAAC;AAuBhC,MAAM,YAAY,GAAgC,CAAC,EACjD,OAAO,EACP,QAAQ,EACR,KAAK,EACL,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,UAAU,GAAG,eAAe,EAC5B,aAAa,EACb,OAAO,GAAG,QAAQ,EAClB,SAAS,EACT,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK,mBACS,UAAU,EACvB,MAAM,QACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,qBACjB,SAAS,sBACR,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAEzD,oBAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,6BAAK,EAAE,EAAE,aAAa,IAAG,WAAW,CAAO,CAAC,CAAC,CAAC,SAAS,EAClF,gBAAgB,EAAE,gBAAgB,iBACtB,sBAAsB,GAClC;QACF,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,gBAAc,SAAS,IACvD,QAAQ,CACC;QACX,aAAa,IAAI,CAChB,oBAAC,WAAW,QACT,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,EAAE,EAC/B,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAE,MAAM,CAAC,OAAO,iBACV,MAAM,CAAC,UAAU,IAE7B,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACU,CACf,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -2,10 +2,17 @@ export * from './types';
2
2
  export * from './const';
3
3
  export { default as Table } from './Table';
4
4
  export { default as TableBase } from './TableBase';
5
+ export { useManageColumns } from './useManageColumns';
6
+ export type { ManagedColumn, UseManageColumnsConfig, UseManageColumnsResult, } from './useManageColumns';
5
7
  export { default as useCheckboxTable } from './useCheckboxTable';
6
8
  export { default as useCheckboxTableBase } from './useCheckboxTableBase';
7
9
  export type { UseCheckboxTableBaseProps } from './useCheckboxTableBase';
8
10
  export { default as TableRowTitleDescription } from './TableRowTitleDescription';
9
11
  export { default as CheckboxTd } from './CheckboxTd';
10
12
  export { getTableColumnSort } from './useTableColumnSort';
13
+ export { ManageColumnsModal } from './manageColumns/ManageColumnsModal';
14
+ export type { ManageColumnsModalProps } from './manageColumns/ManageColumnsModal';
15
+ export { ManageColumnSearchInput } from './manageColumns/ManageColumnSearchInput';
16
+ export type { ManageColumnSearchInputProps } from './manageColumns/ManageColumnSearchInput';
17
+ export { reorderColumns } from './manageColumns/utils';
11
18
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,aAAa,EACb,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,YAAY,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,YAAY,EAAE,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}
@@ -2,9 +2,13 @@ export * from './types';
2
2
  export * from './const';
3
3
  export { default as Table } from './Table';
4
4
  export { default as TableBase } from './TableBase';
5
+ export { useManageColumns } from './useManageColumns';
5
6
  export { default as useCheckboxTable } from './useCheckboxTable';
6
7
  export { default as useCheckboxTableBase } from './useCheckboxTableBase';
7
8
  export { default as TableRowTitleDescription } from './TableRowTitleDescription';
8
9
  export { default as CheckboxTd } from './CheckboxTd';
9
10
  export { getTableColumnSort } from './useTableColumnSort';
11
+ export { ManageColumnsModal } from './manageColumns/ManageColumnsModal';
12
+ export { ManageColumnSearchInput } from './manageColumns/ManageColumnSearchInput';
13
+ export { reorderColumns } from './manageColumns/utils';
10
14
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGzE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGzE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAElF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export interface ManageColumnSearchInputProps {
3
+ value: string;
4
+ placeholder?: string;
5
+ onSearch: (value: string) => void;
6
+ dataTestId?: string;
7
+ }
8
+ export declare const ManageColumnSearchInput: React.FC<ManageColumnSearchInputProps>;
9
+ //# sourceMappingURL=ManageColumnSearchInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ManageColumnSearchInput.d.ts","sourceRoot":"","sources":["../../../../components/table/manageColumns/ManageColumnSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAsB1E,CAAC"}
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { SearchInput } from '@patternfly/react-core';
3
+ export const ManageColumnSearchInput = ({ value, placeholder = 'Filter by column name', onSearch, dataTestId = 'manage-column-search', }) => {
4
+ const handleChange = React.useCallback((_, newValue) => {
5
+ onSearch(newValue);
6
+ }, [onSearch]);
7
+ return (React.createElement(SearchInput, { "data-testid": dataTestId, placeholder: placeholder, value: value, onChange: handleChange, onClear: () => handleChange(null, '') }));
8
+ };
9
+ //# sourceMappingURL=ManageColumnSearchInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ManageColumnSearchInput.js","sourceRoot":"","sources":["../../../../components/table/manageColumns/ManageColumnSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AASrD,MAAM,CAAC,MAAM,uBAAuB,GAA2C,CAAC,EAC9E,KAAK,EACL,WAAW,GAAG,uBAAuB,EACrC,QAAQ,EACR,UAAU,GAAG,sBAAsB,GACpC,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAA2C,EAAE,QAAgB,EAAE,EAAE;QAChE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,mBACG,UAAU,EACvB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,GACrC,CACH,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,23 @@
1
+ import * as React from 'react';
2
+ import type { UseManageColumnsResult } from '../useManageColumns';
3
+ /**
4
+ * Configuration for the ManageColumnsModal
5
+ */
6
+ export interface ManageColumnsModalProps {
7
+ /** Result from useManageColumns hook - provides columns, callbacks, modal state, and defaults */
8
+ manageColumnsResult: Pick<UseManageColumnsResult<unknown>, 'managedColumns' | 'setVisibleColumnIds' | 'defaultVisibleColumnIds' | 'isModalOpen' | 'closeModal'>;
9
+ /** Modal title - defaults to "Customize columns" */
10
+ title?: string;
11
+ /** Description text shown above the column list */
12
+ description?: string;
13
+ /** Maximum number of columns that can be selected, undefined = unlimited */
14
+ maxSelections?: number;
15
+ /** Tooltip text when max is reached */
16
+ maxSelectionsTooltip?: string;
17
+ /** Placeholder for the search input */
18
+ searchPlaceholder?: string;
19
+ /** Test ID prefix for data-testid attributes */
20
+ dataTestId?: string;
21
+ }
22
+ export declare const ManageColumnsModal: React.FC<ManageColumnsModalProps>;
23
+ //# sourceMappingURL=ManageColumnsModal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ManageColumnsModal.d.ts","sourceRoot":"","sources":["../../../../components/table/manageColumns/ManageColumnsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,OAAO,KAAK,EAAiB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEjF;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,mBAAmB,EAAE,IAAI,CACvB,sBAAsB,CAAC,OAAO,CAAC,EAC7B,gBAAgB,GAChB,qBAAqB,GACrB,yBAAyB,GACzB,aAAa,GACb,YAAY,CACf,CAAC;IACF,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgNhE,CAAC"}
@@ -0,0 +1,108 @@
1
+ import * as React from 'react';
2
+ import { Button, Checkbox, EmptyState, EmptyStateBody, EmptyStateVariant, Flex, FlexItem, Label, Stack, StackItem, Tooltip, } from '@patternfly/react-core';
3
+ import { SearchIcon } from '@patternfly/react-icons';
4
+ import { DragDropSort, } from '@patternfly/react-drag-drop';
5
+ import ContentModal from '../../../components/modals/ContentModal';
6
+ import { ManageColumnSearchInput } from './ManageColumnSearchInput';
7
+ import { reorderColumns } from './utils';
8
+ export const ManageColumnsModal = ({ manageColumnsResult, title = 'Customize columns', description, maxSelections, maxSelectionsTooltip = 'Maximum columns selected.', searchPlaceholder = 'Filter by column name', dataTestId = 'manage-columns-modal', }) => {
9
+ const { managedColumns: initialColumns, setVisibleColumnIds, defaultVisibleColumnIds, isModalOpen, closeModal, } = manageColumnsResult;
10
+ const [columns, setColumns] = React.useState(initialColumns);
11
+ const [searchValue, setSearchValue] = React.useState('');
12
+ // Normalize whitespace (including NBSP) to regular spaces for search comparison
13
+ const normalizeWhitespace = (str) => str.replace(/\s+/g, ' ');
14
+ // Derive filtered columns from search
15
+ const columnsMatchingSearch = React.useMemo(() => searchValue
16
+ ? columns.filter((col) => normalizeWhitespace(col.label.toLowerCase()).includes(normalizeWhitespace(searchValue.toLowerCase())))
17
+ : columns, [columns, searchValue]);
18
+ // Reset state when modal opens with new columns
19
+ React.useEffect(() => {
20
+ if (isModalOpen) {
21
+ setColumns(initialColumns);
22
+ setSearchValue('');
23
+ }
24
+ }, [isModalOpen, initialColumns]);
25
+ const selectedCount = columns.filter((col) => col.isVisible).length;
26
+ const isMaxReached = maxSelections !== undefined && selectedCount >= maxSelections;
27
+ const handleUpdate = React.useCallback(() => {
28
+ const visibleColumnIds = columns.filter((col) => col.isVisible).map((col) => col.id);
29
+ setVisibleColumnIds(visibleColumnIds);
30
+ closeModal();
31
+ }, [columns, setVisibleColumnIds, closeModal]);
32
+ const handleSearch = React.useCallback((value) => {
33
+ setSearchValue(value);
34
+ }, []);
35
+ const handleToggleColumn = React.useCallback((columnId, isChecked) => {
36
+ setColumns((prev) => prev.map((col) => (col.id === columnId ? { ...col, isVisible: isChecked } : col)));
37
+ }, []);
38
+ const handleDrop = React.useCallback((_, newItems) => {
39
+ const reorderedIds = newItems.map((item) => String(item.id));
40
+ const matchingIds = new Set(columnsMatchingSearch.map((c) => c.id));
41
+ setColumns((prev) => reorderColumns(prev, matchingIds, reorderedIds));
42
+ }, [columnsMatchingSearch]);
43
+ const handleRestoreDefaults = React.useCallback(() => {
44
+ if (!defaultVisibleColumnIds) {
45
+ return;
46
+ }
47
+ // Update visibility based on default column IDs
48
+ // Also reorder to put default columns first in their original order
49
+ setColumns((prev) => {
50
+ const defaultSet = new Set(defaultVisibleColumnIds);
51
+ const defaultColumns = defaultVisibleColumnIds
52
+ .map((id) => prev.find((col) => col.id === id))
53
+ .filter((col) => col !== undefined)
54
+ .map((col) => ({ ...col, isVisible: true }));
55
+ const nonDefaultColumns = prev
56
+ .filter((col) => !defaultSet.has(col.id))
57
+ .map((col) => ({ ...col, isVisible: false }));
58
+ return [...defaultColumns, ...nonDefaultColumns];
59
+ });
60
+ }, [defaultVisibleColumnIds]);
61
+ if (!isModalOpen) {
62
+ return null;
63
+ }
64
+ const buttonActions = [
65
+ {
66
+ label: 'Update',
67
+ onClick: handleUpdate,
68
+ variant: 'primary',
69
+ dataTestId: `${dataTestId}-update-button`,
70
+ },
71
+ {
72
+ label: 'Cancel',
73
+ onClick: closeModal,
74
+ variant: 'link',
75
+ dataTestId: `${dataTestId}-cancel-button`,
76
+ },
77
+ ];
78
+ const descriptionContent = (React.createElement(Stack, { hasGutter: true, className: "pf-v6-u-pb-md" },
79
+ description && React.createElement(StackItem, { className: "pf-v6-u-mt-sm" }, description),
80
+ React.createElement(StackItem, null,
81
+ React.createElement(ManageColumnSearchInput, { value: searchValue, placeholder: searchPlaceholder, onSearch: handleSearch, dataTestId: `${dataTestId}-search` })),
82
+ React.createElement(StackItem, null,
83
+ React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },
84
+ React.createElement(FlexItem, null,
85
+ React.createElement(Label, null,
86
+ selectedCount,
87
+ " / total ",
88
+ columns.length,
89
+ " selected")),
90
+ defaultVisibleColumnIds && (React.createElement(FlexItem, null,
91
+ React.createElement(Button, { variant: "link", isInline: true, onClick: handleRestoreDefaults, "data-testid": `${dataTestId}-restore-defaults` }, "Restore default columns")))))));
92
+ const draggableItems = columnsMatchingSearch.map((col) => {
93
+ const currentCol = columns.find((c) => c.id === col.id) ?? col;
94
+ const isDisabled = isMaxReached && !currentCol.isVisible;
95
+ const checkbox = (React.createElement(Checkbox, { id: col.id, "aria-label": col.label, isChecked: currentCol.isVisible, isDisabled: isDisabled, onChange: (_, checked) => handleToggleColumn(col.id, checked) }));
96
+ return {
97
+ id: col.id,
98
+ content: (React.createElement("div", { className: "pf-v6-u-display-inline-block" },
99
+ React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' }, spaceItems: { default: 'spaceItemsSm' } },
100
+ React.createElement(FlexItem, null, isDisabled ? React.createElement(Tooltip, { content: maxSelectionsTooltip }, checkbox) : checkbox),
101
+ React.createElement(FlexItem, null, col.label)))),
102
+ props: { checked: currentCol.isVisible },
103
+ };
104
+ });
105
+ return (React.createElement(ContentModal, { onClose: closeModal, title: title, description: descriptionContent, contents: columnsMatchingSearch.length === 0 && searchValue ? (React.createElement(EmptyState, { headingLevel: "h4", icon: SearchIcon, titleText: "No results found", variant: EmptyStateVariant.sm },
106
+ React.createElement(EmptyStateBody, null, "No columns match your search. Try adjusting your search terms."))) : (React.createElement(DragDropSort, { items: draggableItems, variant: "default", onDrop: handleDrop })), buttonActions: buttonActions, dataTestId: dataTestId, variant: "small", bodyLabel: "Column names" }));
107
+ };
108
+ //# sourceMappingURL=ManageColumnsModal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ManageColumnsModal.js","sourceRoot":"","sources":["../../../../components/table/manageColumns/ManageColumnsModal.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ import type { ManagedColumn } from '../useManageColumns';
2
+ /**
3
+ * Reorders columns while preserving the positions of non-matching columns.
4
+ *
5
+ * When a user reorders columns during a search filter, only the filtered (matching)
6
+ * columns should change their relative order. Non-matching columns stay in their
7
+ * original positions.
8
+ *
9
+ * Example:
10
+ * - columns: [A, B, C, D, E]
11
+ * - matchingIds: [B, D] (search matches B and D)
12
+ * - reorderedIds: [D, B] (user dragged D before B)
13
+ * - result: [A, D, C, B, E] (B and D swap positions, others unchanged)
14
+ */
15
+ export declare const reorderColumns: (columns: ManagedColumn[], matchingIds: Set<string>, reorderedIds: string[]) => ManagedColumn[];
16
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../components/table/manageColumns/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,aAAa,EAAE,EACxB,aAAa,GAAG,CAAC,MAAM,CAAC,EACxB,cAAc,MAAM,EAAE,KACrB,aAAa,EAuBf,CAAC"}
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Reorders columns while preserving the positions of non-matching columns.
3
+ *
4
+ * When a user reorders columns during a search filter, only the filtered (matching)
5
+ * columns should change their relative order. Non-matching columns stay in their
6
+ * original positions.
7
+ *
8
+ * Example:
9
+ * - columns: [A, B, C, D, E]
10
+ * - matchingIds: [B, D] (search matches B and D)
11
+ * - reorderedIds: [D, B] (user dragged D before B)
12
+ * - result: [A, D, C, B, E] (B and D swap positions, others unchanged)
13
+ */
14
+ export const reorderColumns = (columns, matchingIds, reorderedIds) => {
15
+ const columnMap = new Map(columns.map((col) => [col.id, col]));
16
+ // Find indices where matching columns are located
17
+ const matchingIndices = [];
18
+ columns.forEach((col, index) => {
19
+ if (matchingIds.has(col.id)) {
20
+ matchingIndices.push(index);
21
+ }
22
+ });
23
+ // Start with a copy of columns (non-matching columns stay in place)
24
+ const result = [...columns];
25
+ // Place reordered columns at the original matching indices
26
+ reorderedIds.forEach((id, i) => {
27
+ const col = columnMap.get(id);
28
+ if (col && i < matchingIndices.length) {
29
+ result[matchingIndices[i]] = col;
30
+ }
31
+ });
32
+ return result;
33
+ };
34
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../components/table/manageColumns/utils.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAwB,EACxB,WAAwB,EACxB,YAAsB,EACL,EAAE;IACnB,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAE/D,kDAAkD;IAClD,MAAM,eAAe,GAAa,EAAE,CAAC;IACrC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC7B,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YAC5B,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,oEAAoE;IACpE,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;IAE5B,2DAA2D;IAC3D,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;QAC7B,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9B,IAAI,GAAG,IAAI,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC;YACtC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
@@ -0,0 +1,48 @@
1
+ import { SortableData } from './types';
2
+ /**
3
+ * Represents a column that can be managed (shown/hidden, reordered)
4
+ */
5
+ export interface ManagedColumn {
6
+ /** Unique identifier for the column (typically matches SortableData.field) */
7
+ id: string;
8
+ /** Display label for the column */
9
+ label: string;
10
+ /** Whether the column is currently visible */
11
+ isVisible: boolean;
12
+ }
13
+ /**
14
+ * Configuration for the useManageColumns hook
15
+ */
16
+ export interface UseManageColumnsConfig<T, C extends SortableData<T> = SortableData<T>> {
17
+ /** All possible columns (the full column definition) */
18
+ allColumns: C[];
19
+ /** Unique key for localStorage persistence */
20
+ storageKey: string;
21
+ /** Default visible column fields when no localStorage value exists */
22
+ defaultVisibleColumnIds?: string[];
23
+ /** Maximum number of manageable columns that can be visible */
24
+ maxVisibleColumns?: number;
25
+ }
26
+ /**
27
+ * Return type for the useManageColumns hook
28
+ */
29
+ export interface UseManageColumnsResult<T, C extends SortableData<T> = SortableData<T>> {
30
+ /** The columns to render in the table, filtered and ordered by visibility settings */
31
+ visibleColumns: C[];
32
+ /** All manageable columns with their current visibility state (for the modal) */
33
+ managedColumns: ManagedColumn[];
34
+ /** Callback to update which columns are visible (called from modal) */
35
+ setVisibleColumnIds: (columnIds: string[]) => void;
36
+ /** The currently visible column IDs (for display purposes like "X of Y selected") */
37
+ visibleColumnIds: string[];
38
+ /** Default visible column fields when no localStorage value exists. Returned as-is for convenience to pass to ManageColumnsModal. */
39
+ defaultVisibleColumnIds?: string[];
40
+ /** Whether the manage columns modal is open */
41
+ isModalOpen: boolean;
42
+ /** Opens the manage columns modal */
43
+ openModal: () => void;
44
+ /** Closes the manage columns modal */
45
+ closeModal: () => void;
46
+ }
47
+ export declare const useManageColumns: <T, C extends SortableData<T> = SortableData<T>>({ allColumns, storageKey, defaultVisibleColumnIds, maxVisibleColumns, }: UseManageColumnsConfig<T, C>) => UseManageColumnsResult<T, C>;
48
+ //# sourceMappingURL=useManageColumns.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useManageColumns.d.ts","sourceRoot":"","sources":["../../../components/table/useManageColumns.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC;IACpF,wDAAwD;IACxD,UAAU,EAAE,CAAC,EAAE,CAAC;IAChB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;IACnC,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC;IACpF,sFAAsF;IACtF,cAAc,EAAE,CAAC,EAAE,CAAC;IACpB,iFAAiF;IACjF,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,uEAAuE;IACvE,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,qFAAqF;IACrF,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,qIAAqI;IACrI,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;IACnC,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,sCAAsC;IACtC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,yEAK9E,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAG,sBAAsB,CAAC,CAAC,EAAE,CAAC,CA6H5D,CAAC"}
@@ -0,0 +1,99 @@
1
+ import * as React from 'react';
2
+ import { useBrowserStorage } from 'mod-arch-core';
3
+ import { CHECKBOX_FIELD_ID, EXPAND_FIELD_ID, KEBAB_FIELD_ID } from './const';
4
+ // Fields that are never manageable by users (UI chrome columns)
5
+ const NON_MANAGEABLE_FIELDS = [CHECKBOX_FIELD_ID, KEBAB_FIELD_ID, EXPAND_FIELD_ID];
6
+ export const useManageColumns = ({ allColumns, storageKey, defaultVisibleColumnIds, maxVisibleColumns, }) => {
7
+ // Get manageable columns (those that can be shown/hidden)
8
+ const manageableColumns = React.useMemo(() => allColumns.filter((col) => !NON_MANAGEABLE_FIELDS.includes(col.field)), [allColumns]);
9
+ // Calculate default visible fields if not provided
10
+ const effectivedefaultVisibleColumnIds = React.useMemo(() => {
11
+ if (defaultVisibleColumnIds) {
12
+ const normalizedDefaults = defaultVisibleColumnIds.filter((id) => manageableColumns.some((col) => col.field === id));
13
+ const defaultCount = maxVisibleColumns ?? 2;
14
+ return normalizedDefaults.slice(0, defaultCount);
15
+ }
16
+ // Default: show first maxVisibleColumns columns, or first 2 if not specified
17
+ const manageableFields = manageableColumns.map((col) => col.field);
18
+ const defaultCount = maxVisibleColumns ?? 2;
19
+ return manageableFields.slice(0, defaultCount);
20
+ }, [defaultVisibleColumnIds, manageableColumns, maxVisibleColumns]);
21
+ // Persist visible column IDs to localStorage
22
+ const [storedVisibleIds, setStoredVisibleIds] = useBrowserStorage(storageKey, effectivedefaultVisibleColumnIds, true);
23
+ // Build the managed columns list for the modal
24
+ // Preserves order from storage, adds any new columns at the end
25
+ const managedColumns = React.useMemo(() => {
26
+ const orderedIds = [...storedVisibleIds];
27
+ const allManageableIds = manageableColumns.map((col) => col.field);
28
+ // Add columns that are not in storage (new columns)
29
+ allManageableIds.forEach((id) => {
30
+ if (!orderedIds.includes(id)) {
31
+ orderedIds.push(id);
32
+ }
33
+ });
34
+ return orderedIds
35
+ .filter((id) => allManageableIds.includes(id)) // Remove deleted columns
36
+ .map((id) => {
37
+ const col = manageableColumns.find((c) => c.field === id);
38
+ if (!col) {
39
+ return null;
40
+ }
41
+ return {
42
+ id: col.field,
43
+ label: col.label,
44
+ isVisible: storedVisibleIds.includes(col.field),
45
+ };
46
+ })
47
+ .filter((col) => col !== null);
48
+ }, [manageableColumns, storedVisibleIds]);
49
+ // Build the final visible columns for the table
50
+ const visibleColumns = React.useMemo(() => {
51
+ const result = [];
52
+ // First, add columns that come before manageable columns (like checkbox)
53
+ allColumns.forEach((col) => {
54
+ if (col.field === CHECKBOX_FIELD_ID || col.field === EXPAND_FIELD_ID) {
55
+ result.push(col);
56
+ }
57
+ });
58
+ // Add visible manageable columns in their stored order
59
+ const visibleManageableIds = storedVisibleIds.filter((id) => manageableColumns.some((col) => col.field === id));
60
+ visibleManageableIds.forEach((id) => {
61
+ const col = manageableColumns.find((c) => c.field === id);
62
+ if (col) {
63
+ result.push(col);
64
+ }
65
+ });
66
+ // Add kebab column at the end if present
67
+ const kebabCol = allColumns.find((col) => col.field === KEBAB_FIELD_ID);
68
+ if (kebabCol) {
69
+ result.push(kebabCol);
70
+ }
71
+ return result;
72
+ }, [allColumns, storedVisibleIds, manageableColumns]);
73
+ const setVisibleColumnIds = React.useCallback((columnIds) => {
74
+ const uniqueManageableIds = Array.from(new Set(columnIds)).filter((id) => manageableColumns.some((col) => col.field === id));
75
+ const normalizedIds = maxVisibleColumns !== undefined
76
+ ? uniqueManageableIds.slice(0, maxVisibleColumns)
77
+ : uniqueManageableIds;
78
+ setStoredVisibleIds(normalizedIds);
79
+ }, [setStoredVisibleIds, manageableColumns, maxVisibleColumns]);
80
+ // Modal state management
81
+ const [isModalOpen, setIsModalOpen] = React.useState(false);
82
+ const openModal = React.useCallback(() => {
83
+ setIsModalOpen(true);
84
+ }, []);
85
+ const closeModal = React.useCallback(() => {
86
+ setIsModalOpen(false);
87
+ }, []);
88
+ return {
89
+ visibleColumns,
90
+ managedColumns,
91
+ setVisibleColumnIds,
92
+ visibleColumnIds: storedVisibleIds,
93
+ defaultVisibleColumnIds,
94
+ isModalOpen,
95
+ openModal,
96
+ closeModal,
97
+ };
98
+ };
99
+ //# sourceMappingURL=useManageColumns.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useManageColumns.js","sourceRoot":"","sources":["../../../components/table/useManageColumns.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-arch-shared",
3
- "version": "1.9.1",
3
+ "version": "1.10.0",
4
4
  "description": "Shared UI components and utilities for modular architecture micro-frontend projects",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -89,9 +89,11 @@
89
89
  },
90
90
  "dependencies": {
91
91
  "@patternfly/patternfly": "^6.4.0",
92
+ "@patternfly/react-drag-drop": "^6.4.0",
92
93
  "classnames": "^2.2.6",
93
94
  "dompurify": "^3.2.4",
94
- "lodash-es": "^4.17.15",
95
+ "lodash-es": "^4.17.23",
96
+ "mod-arch-core": "0.0.0-semantically-released",
95
97
  "showdown": "^2.1.0"
96
98
  },
97
99
  "optionalDependencies": {