@hazelcast/ui 1.3.2-next.8 → 1.3.2-next.80

package/lib/Table/TableContent.js

@@ -0,0 +1,52 @@
+import cn from 'classnames';
+import { IgnoreKeys } from 'react-hotkeys';
+import React, { useCallback } from 'react';
+import { Loader } from '../Loader';
+import { CellWrapper } from './CellWrapper';
+import { LinkRow, Row } from './Row';
+import { isCellSelected } from './features/columnsSelection';
+import styles from './TableContent.module.scss';
+export const TableContent = (props) => {
+    const { rootRef, page, onCopy, columns, getHref, loading, className, prepareRow, onRowClick, columnResizing, overlayLoading, onEndSelection, AnchorComponent, cellIndexOffset, selectedColumns, onClickSelection, getCustomRowProps, getCustomCellProps, selectionStartedRef, renderRowSubComponent, onMouseEnterSelection, selectedColumnValuesRef, } = props;
+    const handleOnContesxtMenu = useCallback((e) => {
+        // disable table custom context menu
+        e.stopPropagation();
+    }, []);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("div", { ref: rootRef, role: "rowgroup", "data-test": "table-cell-row-group", className: cn(styles.content, className), onMouseDown: () => {
+            selectionStartedRef.current = true;
+            document.body.addEventListener('mouseup', onEndSelection);
+            document.body.addEventListener('contextmenu', onEndSelection);
+        } },
+        page.map((row, rowIndex) => {
+            prepareRow(row);
+            const { key: rowKey, ...restRowProps } = row.getRowProps(getCustomRowProps === null || getCustomRowProps === void 0 ? void 0 : getCustomRowProps(row));
+            const cells = row.cells.map((cell, i) => {
+                const { key: cellKey, ...restCellProps } = cell.getCellProps(getCustomCellProps === null || getCustomCellProps === void 0 ? void 0 : getCustomCellProps(cell));
+                // We don't want to use cell.column.Cell as that is a ColumnInstance which already has a cell renderer
+                const column = columns[i];
+                const cellId = `${rowIndex}:${i}`;
+                const selected = isCellSelected(cellId, selectedColumns);
+                return (React.createElement(CellWrapper, { cell: cell, key: cellKey, cellId: cellId, column: column, selected: selected, selectable: !!onCopy, align: cell.column.align, columnResizing: columnResizing, onClickSelection: onClickSelection, selectionStartedRef: selectionStartedRef, onMouseEnterSelection: onMouseEnterSelection, selectedColumnValuesRef: selectedColumnValuesRef, ...restCellProps }));
+            });
+            if (getHref) {
+                const href = getHref(row);
+                if (href) {
+                    return (React.createElement(LinkRow, { key: rowKey, AnchorComponent: AnchorComponent, ...restRowProps, ariaRowIndex: row.index + 1 + cellIndexOffset, href: href }, cells));
+                }
+            }
+            return (React.createElement(React.Fragment, { key: rowKey },
+                React.createElement(Row, { ...restRowProps, ariaRowIndex: row.index + 1 + cellIndexOffset, onClick: onRowClick
+                        ? () => {
+                            onRowClick(row);
+                        }
+                        : undefined }, cells),
+                row.isExpanded
+                    ? renderRowSubComponent && (React.createElement(IgnoreKeys, { tabIndex: -1, className: styles.subRowWrapper, onContextMenu: handleOnContesxtMenu }, renderRowSubComponent(row)))
+                    : null));
+        }),
+        overlayLoading && loading && (React.createElement("div", { className: styles.overlayLoading },
+            React.createElement(Loader, null)))));
+};
+//# sourceMappingURL=TableContent.js.map

package/lib/Table/TableContent.js.map

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

package/lib/Table/TableContent.module.scss

@@ -0,0 +1,21 @@
+.content {
+  position: relative;
+}
+
+.subRowWrapper {
+  &:focus {
+    outline: none;
+  }
+}
+
+.overlayLoading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(255 255 255 / 50%);
+}

package/lib/Table/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ROW_SELECTOR_COLUMN_ID = "row-selector";
+export declare const ROW_EXPANDER_COLUMN_ID = "row-expander";

package/lib/Table/constants.js

@@ -0,0 +1,3 @@
+export const ROW_SELECTOR_COLUMN_ID = 'row-selector';
+export const ROW_EXPANDER_COLUMN_ID = 'row-expander';
+//# sourceMappingURL=constants.js.map

package/lib/Table/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/Table/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAA;AACpD,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAA"}

package/lib/Table/features/columnsSelection/CellCopyablePopover.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface CellCopyablePopover {
+    isOpen: boolean;
+    onClose: () => void;
+    contentClassName?: string;
+    anchorElement?: HTMLElement | null;
+}
+export declare const CellCopyablePopover: FC<CellCopyablePopover>;

package/lib/Table/features/columnsSelection/CellCopyablePopover.js

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+import cls from 'classnames';
+import { Popover } from '../../../Popover';
+import styles from './CellCopyablePopover.module.scss';
+export const CellCopyablePopover = ({ children, contentClassName, anchorElement, isOpen, onClose }) => {
+    var _a;
+    useEffect(() => {
+        return () => onClose();
+    }, [onClose]);
+    return (React.createElement(Popover, { open: isOpen, onClose: onClose, anchorElement: anchorElement, placement: "top-start", className: styles.root, "data-test": "cell-copyable-popover", offset: { y: -((_a = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight) !== null && _a !== void 0 ? _a : 0) } },
+        React.createElement("div", { className: cls(styles.content, contentClassName), onDoubleClick: onClose, style: { minHeight: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight, minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetWidth } }, children)));
+};
+//# sourceMappingURL=CellCopyablePopover.js.map

package/lib/Table/features/columnsSelection/CellCopyablePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellCopyablePopover.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/CellCopyablePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,GAAG,MAAM,YAAY,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAA4B,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;;IAC7H,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,MAAM,CAAC,IAAI,eACZ,uBAAuB,EACjC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,mCAAI,CAAC,CAAC,EAAE;QAElD,6BACE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAChD,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,EAAE,IAEtF,QAAQ,CACL,CACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/Table/features/columnsSelection/CellCopyablePopover.module.scss

@@ -0,0 +1,12 @@
+@use '../../../../styles/constants' as c;
+
+.root {
+  z-index: c.$zIndex2000;
+}
+
+.content {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}

package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface ContextMenuProps {
+    anchorElement: HTMLElement | null;
+    onCopy: () => void;
+}
+export declare const ContextMenu: ({ anchorElement, onCopy }: ContextMenuProps) => JSX.Element;

package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { Copy } from 'react-feather';
+import { ContextMenu as OriginalContextMenu } from '../../../../ContextMenu';
+import styles from './ContextMenu.module.scss';
+export const ContextMenu = ({ anchorElement, onCopy }) => {
+    const items = useMemo(() => [
+        {
+            content: (React.createElement(React.Fragment, null,
+                "Copy ",
+                React.createElement(Copy, null))),
+            className: styles.item,
+            onClick: onCopy,
+        },
+    ], [onCopy]);
+    return React.createElement(OriginalContextMenu, { anchorElement: anchorElement, items: items });
+};
+//# sourceMappingURL=ContextMenu.js.map

package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../../../src/Table/features/columnsSelection/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAmB,WAAW,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7F,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAO9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAoB,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC;QACJ;YACE,OAAO,EAAE,CACP;;gBACO,oBAAC,IAAI,OAAG,CACZ,CACJ;YACD,SAAS,EAAE,MAAM,CAAC,IAAI;YACtB,OAAO,EAAE,MAAM;SAChB;KACF,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,OAAO,oBAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;AAC5E,CAAC,CAAA"}

package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.module.scss

@@ -0,0 +1,6 @@
+.item {
+  display: flex;
+  justify-content: space-between;
+  width: 160px;
+  align-items: center;
+}

package/lib/Table/features/columnsSelection/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './ContextMenu';

package/lib/Table/features/columnsSelection/ContextMenu/index.js

@@ -0,0 +1,2 @@
+export * from './ContextMenu';
+//# sourceMappingURL=index.js.map

package/lib/Table/features/columnsSelection/ContextMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Table/features/columnsSelection/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/lib/Table/features/columnsSelection/columnsSelection.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { SelectedColumnsState } from './helpers';
+export type ColumnsSelectionProps = {
+    rowsPerPage: number;
+    columnsPerRow: number;
+};
+export declare const useColumnsSelection: (props: ColumnsSelectionProps) => {
+    onEndSelection: () => void;
+    selectedColumns: SelectedColumnsState;
+    onClickSelection: (id: string, modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+    }) => void;
+    setSelectedColumns: import("react").Dispatch<import("react").SetStateAction<SelectedColumnsState>>;
+    getSelectedColumns: () => SelectedColumnsState;
+    selectionStartedRef: import("react").MutableRefObject<boolean>;
+    onMouseEnterSelection: (id: string) => void;
+    selectedColumnValuesRef: import("react").MutableRefObject<(string | undefined)[][]>;
+};

package/lib/Table/features/columnsSelection/columnsSelection.js

@@ -0,0 +1,71 @@
+import { useCallback, useRef, useState } from 'react';
+import { useRefValue } from '../../../hooks';
+const initialSelectedColumnsState = {
+    columns: new Set(),
+    range: [undefined, undefined],
+};
+export const useColumnsSelection = (props) => {
+    const { columnsPerRow, rowsPerPage } = props;
+    const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumnsState);
+    const selectionStartedRef = useRef(false);
+    const selectedColumnValuesRef = useRef([]);
+    const getColumnsPerRow = useRefValue(columnsPerRow);
+    const getRowsPerPage = useRefValue(rowsPerPage);
+    const getSelectedColumns = useRefValue(selectedColumns);
+    const clearSelectedColumnsValue = useCallback(() => {
+        selectedColumnValuesRef.current = Array.from(Array(getRowsPerPage()), () => new Array(getColumnsPerRow()));
+    }, [selectedColumnValuesRef, getRowsPerPage, getColumnsPerRow]);
+    const onEndSelection = useCallback(() => {
+        document.body.removeEventListener('mouseup', onEndSelection);
+        document.body.removeEventListener('contextmenu', onEndSelection);
+        selectionStartedRef.current = false;
+    }, []);
+    const onClickSelection = useCallback((id, modifiers) => {
+        setSelectedColumns((currentValue) => {
+            if (modifiers.ctrl) {
+                return {
+                    ...currentValue,
+                    columns: new Set(currentValue.columns.add(id)),
+                };
+            }
+            if (modifiers.shift && currentValue.columns.size === 1) {
+                const firstItem = currentValue.columns.values().next();
+                return {
+                    columns: new Set(),
+                    range: [firstItem.value, id],
+                };
+            }
+            clearSelectedColumnsValue();
+            return {
+                range: [undefined, undefined],
+                columns: new Set([id]),
+            };
+        });
+    }, [clearSelectedColumnsValue]);
+    const onMouseEnterSelection = useCallback((id) => {
+        setSelectedColumns((currentValue) => {
+            if (currentValue.columns.size === 1 && currentValue.range[0] === undefined) {
+                const firstItem = currentValue.columns.values().next();
+                return {
+                    columns: new Set(),
+                    range: [firstItem.value, id],
+                };
+            }
+            return {
+                ...currentValue,
+                range: [currentValue.range[0], id],
+            };
+        });
+    }, []);
+    return {
+        onEndSelection,
+        selectedColumns,
+        onClickSelection,
+        setSelectedColumns,
+        getSelectedColumns,
+        selectionStartedRef,
+        onMouseEnterSelection,
+        selectedColumnValuesRef,
+    };
+};
+//# sourceMappingURL=columnsSelection.js.map

package/lib/Table/features/columnsSelection/columnsSelection.js.map

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

package/lib/Table/features/columnsSelection/helpers.d.ts

@@ -0,0 +1,7 @@
+export type SelectedColumnsState = {
+    range: [string | undefined, string | undefined];
+    columns: Set<string>;
+};
+export declare const cellIdToNumbersArray: (cellId: string) => [number, number];
+export declare const inRange: (cellId: string, range: [string | undefined, string | undefined]) => boolean;
+export declare const isCellSelected: (cellId: string, selectedColumns: SelectedColumnsState) => boolean;

package/lib/Table/features/columnsSelection/helpers.js

@@ -0,0 +1,26 @@
+export const cellIdToNumbersArray = (cellId) => {
+    const values = cellId.split(':');
+    return [Number(values[0]), Number(values[1])];
+};
+export const inRange = (cellId, range) => {
+    const start = range[0];
+    const end = range[1];
+    if (start) {
+        if (end) {
+            const cellValues = cellIdToNumbersArray(cellId);
+            const startValues = cellIdToNumbersArray(start);
+            const endValues = cellIdToNumbersArray(end);
+            const minRowIndex = Math.min(startValues[0], endValues[0]);
+            const maxRowIndex = Math.max(startValues[0], endValues[0]);
+            const minCellIndex = Math.min(startValues[1], endValues[1]);
+            const maxCellIndex = Math.max(startValues[1], endValues[1]);
+            return cellValues[0] >= minRowIndex && cellValues[0] <= maxRowIndex && cellValues[1] >= minCellIndex && cellValues[1] <= maxCellIndex;
+        }
+        return cellId === start;
+    }
+    return false;
+};
+export const isCellSelected = (cellId, selectedColumns) => {
+    return selectedColumns.columns.has(cellId) || inRange(cellId, selectedColumns.range);
+};
+//# sourceMappingURL=helpers.js.map

package/lib/Table/features/columnsSelection/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAc,EAAoB,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEhC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC/C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,KAA+C,EAAW,EAAE;IAClG,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAEpB,IAAI,KAAK,EAAE;QACT,IAAI,GAAG,EAAE;YACP,MAAM,UAAU,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;YAC/C,MAAM,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC/C,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAE3D,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,CAAA;SACtI;QAED,OAAO,MAAM,KAAK,KAAK,CAAA;KACxB;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,eAAqC,EAAW,EAAE;IAC/F,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;AACtF,CAAC,CAAA"}

package/lib/Table/features/columnsSelection/index.d.ts

@@ -0,0 +1,4 @@
+export * from './columnsSelection';
+export * from './helpers';
+export * from './CellCopyablePopover';
+export * from './ContextMenu';

package/lib/Table/features/columnsSelection/index.js

@@ -0,0 +1,5 @@
+export * from './columnsSelection';
+export * from './helpers';
+export * from './CellCopyablePopover';
+export * from './ContextMenu';
+//# sourceMappingURL=index.js.map

package/lib/Table/features/columnsSelection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,uBAAuB,CAAA;AACrC,cAAc,eAAe,CAAA"}

package/lib/Tabs/Tab.d.ts

@@ -1,15 +1,15 @@
 import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import { IconProps } from '../Icon';
-export declare type AnchorTabProps = {
+export type AnchorTabProps = {
     component: 'a';
     href: string;
 };
-export declare type ButtonTabProps = {
+export type ButtonTabProps = {
     component?: 'button';
     href?: never;
 };
-declare type TabTypeProps = AnchorTabProps | ButtonTabProps;
-declare type TabLabelProps = {
+type TabTypeProps = AnchorTabProps | ButtonTabProps;
+type TabLabelProps = {
     /** @deprecated The property should not be used */
     label: string;
     icon: IconProps['icon'];
@@ -30,11 +30,12 @@ declare type TabLabelProps = {
     children: ReactNode;
     ariaLabel: string;
 };
-export declare type TabCommonProps = {
+export type TabCommonProps = {
     value: number;
     onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement> | KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    className?: string;
 };
-export declare type TabProps<T = TabTypeProps> = TabCommonProps & T & TabLabelProps;
+export type TabProps<T = TabTypeProps> = TabCommonProps & T & TabLabelProps;
 /**
  * ### Purpose
  * A single tab implementation that works together with TabContext and TabList components.

package/lib/Tabs/Tab.js

@@ -23,7 +23,7 @@ label, value, href, onClick,
 /** @deprecated The property should not be used */
 icon, 
 /** @deprecated The property should not be used */
-iconAriaLabel, children, ariaLabel, }) => {
+iconAriaLabel, children, ariaLabel, className, }) => {
     var _a;
     const { onChange, value: activeValue, idPrefix, fullWidth } = useTabContext();
     const selected = value === activeValue;
@@ -44,7 +44,7 @@ iconAriaLabel, children, ariaLabel, }) => {
             handleClick(event);
         }
     }, [handleClick]);
-    return (React.createElement(Component, { className: cn(styles.tab, { [styles.selected]: selected, [styles.fullWidth]: fullWidth }), role: "tab", id: getTabId(idPrefix, value.toString()), "aria-controls": getPanelId(idPrefix, value.toString()), "aria-selected": selected, tabIndex: selected ? 0 : -1, onKeyPress: onKeyPress, onClick: handleClick, ...(Component === 'a' && selected && href), "aria-label": label !== null && label !== void 0 ? label : ariaLabel }, children
+    return (React.createElement(Component, { className: cn(styles.tab, { [styles.selected]: selected, [styles.fullWidth]: fullWidth }, className), role: "tab", id: getTabId(idPrefix, value.toString()), "aria-controls": getPanelId(idPrefix, value.toString()), "aria-selected": selected, tabIndex: selected ? 0 : -1, onKeyPress: onKeyPress, onClick: handleClick, ...(Component === 'a' && !selected && { href }), "aria-label": label !== null && label !== void 0 ? label : ariaLabel }, children
         ? children
         : (_a = (icon && iconAriaLabel && (React.createElement("span", null,
             React.createElement(Icon, { icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),

package/lib/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAwC,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA6CtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,SAAS,EAAE,SAAS,GAAG,QAAQ;AAC/B;;GAEG;AACH,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO;AACP,kDAAkD;AAClD,IAAI;AACJ,kDAAkD;AAClD,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA+G,EAAE,EAAE;QAClH,IAAI,QAAQ,EAAE;YACZ,OAAM;SACP;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CACrC,CAAA;IAED,wDAAwD;IACxD,+DAA+D;IAC/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA2D,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;YACvC,WAAW,CAAC,KAAK,CAAC,CAAA;SACnB;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,EACzF,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACzB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACtC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,WAAW,KAChB,CAAC,SAAS,KAAK,GAAG,IAAI,QAAQ,IAAI,IAAI,CAAC,gBAC/B,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,IAE7B,QAAQ;QACP,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,MAAA,CAAC,IAAI,IAAI,aAAa,IAAI,CACxB;YACE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YACrE,KAAK,CACD,CACR,CAAC,mCACF,KAAK,CACC,CACb,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAwC,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA8CtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,SAAS,EAAE,SAAS,GAAG,QAAQ;AAC/B;;GAEG;AACH,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO;AACP,kDAAkD;AAClD,IAAI;AACJ,kDAAkD;AAClD,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,EAAE;;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA+G,EAAE,EAAE;QAClH,IAAI,QAAQ,EAAE;YACZ,OAAM;SACP;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CACrC,CAAA;IAED,wDAAwD;IACxD,+DAA+D;IAC/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA2D,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;YACvC,WAAW,CAAC,KAAK,CAAC,CAAA;SACnB;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,EACpG,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACzB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACtC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,WAAW,KAChB,CAAC,SAAS,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,gBACpC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,IAE7B,QAAQ;QACP,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,MAAA,CAAC,IAAI,IAAI,aAAa,IAAI,CACxB;YACE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YACrE,KAAK,CACD,CACR,CAAC,mCACF,KAAK,CACC,CACb,CAAA;AACH,CAAC,CAAA"}

package/lib/Tabs/TabContext.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-export declare type TabContextValue = {
+export type TabContextValue = {
     onChange: (value: number) => void;
     value: number;
     idPrefix: string;
@@ -14,7 +14,7 @@ export declare const TabContext: React.Context<TabContextValue>;
  * A custom hook utilizing context for easy usage.
  */
 export declare const useTabContext: () => TabContextValue;
-export declare type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'> & {
+export type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'> & {
     children: ReactNode;
 };
 /**
@@ -22,7 +22,7 @@ export declare type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'>
  * If you want more control over the value state (active tab) you can use TabContextProviderControlled.
  */
 export declare const TabContextProvider: FC<TabContextProviderProps>;
-export declare type TabContextProviderControlledProps = Omit<TabContextValue, 'idPrefix'> & {
+export type TabContextProviderControlledProps = Omit<TabContextValue, 'idPrefix'> & {
     children: ReactNode;
 };
 /**

package/lib/Tabs/TabList.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-export declare type TabListProps = {
+export type TabListProps = {
     ariaLabel: string;
     className?: string;
     children: ReactNode;

package/lib/Tabs/TabPanel.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-export declare type TabPanelProps = {
+export type TabPanelProps = {
     value: number;
     children: ReactNode;
 };

package/lib/Terminal.d.ts

@@ -3,7 +3,7 @@ import { DataTestProp } from '@hazelcast/helpers';
 export declare class CommandTimeoutError extends Error {
     name: string;
 }
-export declare type TerminalProps = {
+export type TerminalProps = {
     onExecute: (command: string, args: string[]) => Promise<string[]>;
     commandTimeout?: number;
     historyLimit?: number;

package/lib/TextArea.d.ts

@@ -1,19 +1,19 @@
 import { ChangeEvent, FC, FocusEvent } from 'react';
 import { DataTestProp } from '@hazelcast/helpers';
 import { FieldHeaderProps } from './FieldHeader';
-export declare type TextAreaSize = 'medium' | 'small';
-export declare type TextAreaCoreProps = {
+export type TextAreaSize = 'medium' | 'small';
+export type TextAreaCoreProps = {
     name: string;
     value?: string;
     onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
     onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     error?: string;
 };
-export declare type TextAreaExtraProps = {
+export type TextAreaExtraProps = {
     textareaClassName?: string;
     errorClassName?: string;
     resizable?: boolean;
     size?: TextAreaSize;
 } & Partial<Pick<HTMLTextAreaElement, 'className' | 'disabled' | 'placeholder' | 'required' | 'rows'>> & Omit<FieldHeaderProps, 'id'>;
-export declare type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
+export type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
 export declare const TextArea: FC<TextAreaProps>;

package/lib/TextArea.module.scss

@@ -84,7 +84,7 @@
     line-height: inherit;
     letter-spacing: inherit;
     color: inherit;
-    background-color: c.$colorNeutralLighter;
+    background-color: c.$colorOverlayBackground;
     /* doiuse-disable css-resize */
     resize: vertical;
     /* doiuse-enable css-resize */
@@ -123,6 +123,10 @@
     .textAreaWrapper .borderOverlay {
       border-color: c.$colorError;
     }
+
+    label {
+      color: c.$colorError;
+    }
   }
 
   textarea:focus {

package/lib/TextAreaFormik.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { FieldValidator } from 'formik';
 import { TextAreaExtraProps } from './TextArea';
 import { ExtractKeysOfValueType } from './utils/types';
-export declare type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
+export type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
     name: ExtractKeysOfValueType<V, string | undefined>;
     validate?: FieldValidator;
 };

package/lib/TextField.d.ts

@@ -4,25 +4,29 @@ import { Icon as IconType } from 'react-feather';
 import { FieldHeaderProps } from './FieldHeader';
 import { IconSize } from './Icon';
 import { TooltipProps } from './Tooltip';
-export declare type TextFieldSize = 'medium' | 'small';
-declare type TextFieldTrailingIcon = {
+export type TextFieldSize = 'medium' | 'small' | 'large';
+export type TextFieldVariant = 'primary' | 'secondary';
+type TextFieldTrailingIcon = {
     inputTrailingIcon: IconType;
     inputTrailingIconLabel: string;
 } | {
     inputTrailingIcon?: never;
     inputTrailingIconLabel?: never;
 };
-export declare type TextFieldTypes = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | undefined;
-declare type TextFieldCoreProps<T extends TextFieldTypes> = {
+export type TextFieldTypes = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | undefined;
+type TextFieldCoreProps<T extends TextFieldTypes> = {
     name: string;
     value?: T extends 'number' ? number : string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onClick?: (e: MouseEvent<HTMLInputElement>) => void;
     error?: string;
 };
-export declare type TextFieldExtraProps<T extends TextFieldTypes> = {
+export type TextFieldExtraProps<T extends TextFieldTypes> = {
+    ariaLabel?: string;
     size?: TextFieldSize;
+    variant?: TextFieldVariant;
     iconSize?: IconSize;
     className?: string;
     inputContainerClassName?: string;
@@ -36,7 +40,7 @@ export declare type TextFieldExtraProps<T extends TextFieldTypes> = {
     clearable?: boolean;
     errorTooltipPlacement?: TooltipProps['placement'];
 } & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
-export declare type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
+export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
 export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: TextFieldProps<T> & {
     mRef?: React.Ref<HTMLInputElement> | undefined;
 }) => JSX.Element;

package/lib/TextField.js

@@ -20,14 +20,13 @@ import styles from './TextField.module.scss';
  * - Text Field is available in 2 variations: `small` (height of 30 px) and `medium` (height of 40 px). The use depends mainly on the space in UI.
  * - All of the variations can be either with the label, or without label.
  * - Standard label alignment is left-aligned with the field underneath.
- * - Mostly all of the fields are required. If some of them are not, use text "Optional" behind the label.
  * - If needed, you can use icon on the left side or on the right side inside the Text Input (e.g. Eye icon to show / hide password).
  *
  * ### Usage
  * Use a text input when the expected user input is a single line of text.
  */
 const TextFieldInternal = (props, ref) => {
-    const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, size = 'medium', onBlur, onChange, onKeyPress, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', ...htmlAttrs } = props;
+    const { 'data-test': dataTest, ariaLabel, className, disabled, error, errorClassName, helperText, helperTextTooltipWordBreak, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, size = 'medium', variant = 'primary', onBlur, onFocus, onChange, onKeyPress, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', ...htmlAttrs } = props;
     const autoId = useUID();
     const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
     const inputRef = useRef(null);
@@ -41,15 +40,16 @@ const TextFieldInternal = (props, ref) => {
     return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
             [styles.withError]: 'error' in props,
             [styles.small]: size === 'small',
+            [styles.large]: size === 'large',
             [styles.disabled]: disabled,
             [styles.hasError]: error,
             [styles.withIcon]: inputIcon,
             [styles.empty]: value === undefined,
         }, className) },
-        React.createElement(FieldHeader, { id: id, size: size, label: label, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement(FieldHeader, { id: id, size: size, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
         React.createElement("div", { className: styles.inputBlock },
             React.createElement("div", { className: cn(styles.inputContainer, inputContainerClassName) },
-                React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, readOnly: readOnly, onKeyPress: onKeyPress, onClick: onClick, "aria-label": showAriaLabel ? label : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
+                React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, onKeyPress: onKeyPress, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
                         [styles.trailingIcon]: inputTrailingIcon,
                     }), ...htmlAttrs }),
                 React.createElement("div", { className: styles.borderOverlay }),