@rivtn/noseur 1.0.0

package/dist/esm/data/Column.d.ts

@@ -0,0 +1,235 @@
+import "./Data.css";
+import React from 'react';
+import { RowControlOptions } from "./Data";
+import { Scheme } from "../constants/Scheme";
+import { NoseurElement, NoseurObject, SortDirection, SortIcons } from '../constants/Types';
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+export type ColumnTemplateHandler = () => NoseurElement;
+export type ColumnOnSortHandler = (sortDirection: SortDirection) => void;
+export type ValuedColumnTemplateHandler = (value: any, rowControlOptions?: RowControlOptions) => NoseurElement;
+export interface ColumnManageRef {
+    unSort: () => void;
+}
+export interface ColumnProps extends ComponentBaseProps<HTMLTableColElement, ColumnManageRef> {
+    key: any;
+    value: any;
+    group: string;
+    element: string;
+    dataKey: string;
+    sortable: boolean;
+    canUnsort: boolean;
+    doNotRender: boolean;
+    sortIcons: SortIcons;
+    valueClassName: string;
+    rowControlOptions: RowControlOptions;
+    valuedProps: NoseurObject<Partial<ComponentBaseProps<any>> | ((value: any) => Partial<ComponentBaseProps<any>>)>;
+    onSort: ColumnOnSortHandler | undefined;
+    header: NoseurElement | ColumnTemplateHandler;
+    footer: NoseurElement | ColumnTemplateHandler;
+    content: NoseurElement | ColumnTemplateHandler;
+    template: ValuedColumnTemplateHandler | undefined;
+}
+interface ColumnState {
+    sortDirection: SortDirection;
+}
+export declare class ColumnComponent extends React.Component<ColumnProps, ColumnState> {
+    static defaultProps: Partial<ColumnProps>;
+    state: ColumnState;
+    constructor(props: ColumnProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    unSort(): void;
+    onClick(_: any): void;
+    renderSortIcon(): React.JSX.Element | null;
+    render(): React.DOMElement<{
+        role: string;
+        key: any;
+        "data-n-group": string;
+        ref?: React.Ref<any> | undefined;
+        manageRef?: React.ForwardedRef<{}> | undefined;
+        forwardRef?: React.ForwardedRef<any> | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        attrsRelay?: {} | undefined;
+        scheme?: Scheme | undefined;
+        noStyle?: boolean | undefined;
+        className?: string | undefined;
+        disabled?: boolean | undefined;
+        draggable?: boolean | undefined;
+        style?: React.CSSProperties | undefined;
+        children?: React.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: React.ClipboardEventHandler<any> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<any> | undefined;
+        onCut?: React.ClipboardEventHandler<any> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<any> | undefined;
+        onPaste?: React.ClipboardEventHandler<any> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<any> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<any> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<any> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<any> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<any> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<any> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<any> | undefined;
+        onFocus?: React.FocusEventHandler<any> | undefined;
+        onFocusCapture?: React.FocusEventHandler<any> | undefined;
+        onBlur?: React.FocusEventHandler<any> | undefined;
+        onBlurCapture?: React.FocusEventHandler<any> | undefined;
+        onChange?: React.ChangeEventHandler<any, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<any, Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<any> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<any> | undefined;
+        onInput?: React.InputEventHandler<any> | undefined;
+        onInputCapture?: React.InputEventHandler<any> | undefined;
+        onReset?: React.ReactEventHandler<any> | undefined;
+        onResetCapture?: React.ReactEventHandler<any> | undefined;
+        onSubmit?: React.SubmitEventHandler<any> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<any> | undefined;
+        onInvalid?: React.ReactEventHandler<any> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<any> | undefined;
+        onLoad?: React.ReactEventHandler<any> | undefined;
+        onLoadCapture?: React.ReactEventHandler<any> | undefined;
+        onError?: React.ReactEventHandler<any> | undefined;
+        onErrorCapture?: React.ReactEventHandler<any> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<any> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<any> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<any> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<any> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<any> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<any> | undefined;
+        onAbort?: React.ReactEventHandler<any> | undefined;
+        onAbortCapture?: React.ReactEventHandler<any> | undefined;
+        onCanPlay?: React.ReactEventHandler<any> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<any> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<any> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<any> | undefined;
+        onDurationChange?: React.ReactEventHandler<any> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<any> | undefined;
+        onEmptied?: React.ReactEventHandler<any> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<any> | undefined;
+        onEncrypted?: React.ReactEventHandler<any> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<any> | undefined;
+        onEnded?: React.ReactEventHandler<any> | undefined;
+        onEndedCapture?: React.ReactEventHandler<any> | undefined;
+        onLoadedData?: React.ReactEventHandler<any> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<any> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<any> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<any> | undefined;
+        onLoadStart?: React.ReactEventHandler<any> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<any> | undefined;
+        onPause?: React.ReactEventHandler<any> | undefined;
+        onPauseCapture?: React.ReactEventHandler<any> | undefined;
+        onPlay?: React.ReactEventHandler<any> | undefined;
+        onPlayCapture?: React.ReactEventHandler<any> | undefined;
+        onPlaying?: React.ReactEventHandler<any> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<any> | undefined;
+        onProgress?: React.ReactEventHandler<any> | undefined;
+        onProgressCapture?: React.ReactEventHandler<any> | undefined;
+        onRateChange?: React.ReactEventHandler<any> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<any> | undefined;
+        onSeeked?: React.ReactEventHandler<any> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<any> | undefined;
+        onSeeking?: React.ReactEventHandler<any> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<any> | undefined;
+        onStalled?: React.ReactEventHandler<any> | undefined;
+        onStalledCapture?: React.ReactEventHandler<any> | undefined;
+        onSuspend?: React.ReactEventHandler<any> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<any> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<any> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<any> | undefined;
+        onVolumeChange?: React.ReactEventHandler<any> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<any> | undefined;
+        onWaiting?: React.ReactEventHandler<any> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<any> | undefined;
+        onAuxClick?: React.MouseEventHandler<any> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<any> | undefined;
+        onClick?: React.MouseEventHandler<any> | undefined;
+        onClickCapture?: React.MouseEventHandler<any> | undefined;
+        onContextMenu?: React.MouseEventHandler<any> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<any> | undefined;
+        onDoubleClick?: React.MouseEventHandler<any> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<any> | undefined;
+        onDrag?: React.DragEventHandler<any> | undefined;
+        onDragCapture?: React.DragEventHandler<any> | undefined;
+        onDragEnd?: React.DragEventHandler<any> | undefined;
+        onDragEndCapture?: React.DragEventHandler<any> | undefined;
+        onDragEnter?: React.DragEventHandler<any> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<any> | undefined;
+        onDragExit?: React.DragEventHandler<any> | undefined;
+        onDragExitCapture?: React.DragEventHandler<any> | undefined;
+        onDragLeave?: React.DragEventHandler<any> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<any> | undefined;
+        onDragOver?: React.DragEventHandler<any> | undefined;
+        onDragOverCapture?: React.DragEventHandler<any> | undefined;
+        onDragStart?: React.DragEventHandler<any> | undefined;
+        onDragStartCapture?: React.DragEventHandler<any> | undefined;
+        onDrop?: React.DragEventHandler<any> | undefined;
+        onDropCapture?: React.DragEventHandler<any> | undefined;
+        onMouseDown?: React.MouseEventHandler<any> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<any> | undefined;
+        onMouseEnter?: React.MouseEventHandler<any> | undefined;
+        onMouseLeave?: React.MouseEventHandler<any> | undefined;
+        onMouseMove?: React.MouseEventHandler<any> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<any> | undefined;
+        onMouseOut?: React.MouseEventHandler<any> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<any> | undefined;
+        onMouseOver?: React.MouseEventHandler<any> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<any> | undefined;
+        onMouseUp?: React.MouseEventHandler<any> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<any> | undefined;
+        onSelect?: React.ReactEventHandler<any> | undefined;
+        onSelectCapture?: React.ReactEventHandler<any> | undefined;
+        onTouchCancel?: React.TouchEventHandler<any> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<any> | undefined;
+        onTouchEnd?: React.TouchEventHandler<any> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<any> | undefined;
+        onTouchMove?: React.TouchEventHandler<any> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<any> | undefined;
+        onTouchStart?: React.TouchEventHandler<any> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<any> | undefined;
+        onPointerDown?: React.PointerEventHandler<any> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<any> | undefined;
+        onPointerMove?: React.PointerEventHandler<any> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<any> | undefined;
+        onPointerUp?: React.PointerEventHandler<any> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<any> | undefined;
+        onPointerCancel?: React.PointerEventHandler<any> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<any> | undefined;
+        onPointerEnter?: React.PointerEventHandler<any> | undefined;
+        onPointerLeave?: React.PointerEventHandler<any> | undefined;
+        onPointerOver?: React.PointerEventHandler<any> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<any> | undefined;
+        onPointerOut?: React.PointerEventHandler<any> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<any> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<any> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<any> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<any> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<any> | undefined;
+        onScroll?: React.UIEventHandler<any> | undefined;
+        onScrollCapture?: React.UIEventHandler<any> | undefined;
+        onScrollEnd?: React.UIEventHandler<any> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<any> | undefined;
+        onWheel?: React.WheelEventHandler<any> | undefined;
+        onWheelCapture?: React.WheelEventHandler<any> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<any> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<any> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<any> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<any> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<any> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<any> | undefined;
+        onToggle?: React.ToggleEventHandler<any> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<any> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<any> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<any> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<any> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<any> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<any> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<any> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<any> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<any> | undefined;
+    }, any>;
+}
+export declare const Column: ({ ref, ...props }: Partial<ColumnProps>) => React.JSX.Element;
+export {};

package/dist/esm/data/Column.js

@@ -0,0 +1,98 @@
+import "./Data.css";
+import React from 'react';
+import { Scheme } from "../constants/Scheme";
+import { Classname } from "../utils/Classname";
+import { TypeChecker } from "../utils/TypeChecker";
+import { MicroBuilder } from "../utils/MicroBuilder";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { SortDirection } from '../constants/Types';
+import { extractMicroComponentBaseProps } from '../core/ComponentBaseProps';
+;
+export class ColumnComponent extends React.Component {
+    static defaultProps = {
+        element: "td",
+        valuedProps: {},
+        group: "column-body",
+        scheme: Scheme.STATELESS,
+        valueClassName: "noseur-column-body",
+    };
+    state = {
+        sortDirection: SortDirection.NONE,
+    };
+    constructor(props) {
+        super(props);
+        this.unSort = this.unSort.bind(this);
+        this.onClick = this.onClick.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            unSort: this.unSort,
+        });
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    unSort() {
+        this.setState({ sortDirection: SortDirection.NONE });
+    }
+    onClick(_) {
+        let sortDirection = this.state.sortDirection;
+        if (sortDirection == SortDirection.NONE) {
+            sortDirection = SortDirection.FORWARD;
+        }
+        else if (sortDirection == SortDirection.FORWARD) {
+            sortDirection = SortDirection.BACKWARD;
+        }
+        else if (sortDirection == SortDirection.BACKWARD) {
+            sortDirection = (this.props.canUnsort ? SortDirection.NONE : SortDirection.FORWARD);
+        }
+        this.setState({ sortDirection: sortDirection });
+        if (this.props.onSort)
+            this.props.onSort(sortDirection);
+    }
+    renderSortIcon() {
+        if (!this.props.sortable || !this.props.sortIcons)
+            return null;
+        const sortDirection = this.state.sortDirection;
+        let sortIcon = this.props.sortIcons.unsorted;
+        if (sortDirection == SortDirection.FORWARD)
+            sortIcon = this.props.sortIcons.asc;
+        else if (sortDirection == SortDirection.BACKWARD)
+            sortIcon = this.props.sortIcons.desc;
+        return MicroBuilder.buildIcon(sortIcon, { className: "noseur-column-sort-icon" });
+    }
+    render() {
+        let value = this.props.value;
+        if (this.props.template)
+            value = this.props.template(value, this.props.rowControlOptions);
+        else if (TypeChecker.isDict(value) && this.props.element != "th")
+            value = "";
+        const sortIcon = this.renderSortIcon();
+        let valuedRowProps = this.props.valuedProps[`${value}`] ?? {};
+        const props = extractMicroComponentBaseProps(this.props);
+        const cachedOnClick = props.onClick;
+        props.className = Classname.build(props.className, {
+            "noseur-column-sort": this.props.sortable
+        }, (this.props.scheme ? `${this.props.scheme}-bd-3px-bx-sw-ac ${this.props.scheme}-bd-3px-bx-sw-fc` : null));
+        if (this.props.sortable) {
+            props.tabIndex = 0;
+            props.onClick = (e) => {
+                this.onClick(e);
+                if (cachedOnClick)
+                    cachedOnClick(e);
+            };
+        }
+        if (valuedRowProps instanceof Function)
+            valuedRowProps = valuedRowProps(value);
+        return React.createElement(this.props.element, {
+            ...props,
+            ...valuedRowProps,
+            role: "row",
+            key: this.props.key,
+            "data-n-group": this.props.group,
+        }, (React.createElement("div", { className: Classname.build("noseur-column", this.props.valueClassName) },
+            value,
+            sortIcon)));
+    }
+}
+export const Column = ({ ref, ...props }) => (React.createElement(ColumnComponent, { ...props, forwardRef: ref }));

package/dist/esm/data/Data.css

@@ -0,0 +1,213 @@
+/* Data */
+.noseur-data-compound {
+  overflow: auto;
+  position: relative;
+  --noseurSchemeStripColor: #f9f9f9;
+  --noseurSchemeDataBorderColor: rgb(222, 226, 230);
+  --noseurSchemeFixtureBackgroundColor: #f6f6f6;
+}
+
+.noseur-data-empty-state, .noseur-data-loading-state {
+  padding: 15px;
+}
+
+.noseur-data-compound > .noseur-data-empty-state, .noseur-data-compound > .noseur-data-loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-data-empty-state, .noseur-data-compound.noseur-data-grid > .noseur-data-loading-state {
+  border: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+  border-top: none;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-data-header,
+.noseur-data-compound.noseur-data-grid > .noseur-data-footer,
+.noseur-data-compound.noseur-data-grid > .noseur-data-container {
+  border-left: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+  border-right: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-compound > .noseur-paginator {
+  padding: 15px;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-paginator {
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-paginator {
+  border: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+  border-bottom: none;
+}
+
+.noseur-data-compound.noseur-data-no-divider > .noseur-data-header {
+  border-top-width: 0px;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-paginator.noseur-data-grid-f {
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-compound.noseur-data-no-divider > .noseur-paginator {
+  border-bottom-width: 0px;
+}
+
+.noseur-data-header,
+.noseur-data-footer {
+  padding: 15px;
+}
+
+.noseur-data-header {
+  border-top: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-footer {
+  border-top: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-row-content {
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  position: absolute;
+}
+
+/* Column */
+.noseur-column {
+  display: flex;
+  align-items: center;
+}
+
+.noseur-column > .noseur-column-sort-icon {
+  margin-left: 7px;
+}
+
+.noseur-column-sort {
+  cursor: pointer;
+}
+
+.noseur-column-body,
+.noseur-column-header,
+.noseur-column-footer {
+  display: flex;
+}
+
+/* Table */
+.noseur-table {
+  width: 100%;
+  border-spacing: 0px;
+}
+
+.noseur-table.noseur-data-grid-h {
+  border-top: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-table.noseur-data-grid-f {
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-header,
+.noseur-data-footer,
+.noseur-table > .noseur-thead,
+.noseur-table > .noseur-tfoot {
+  color: var(--noseurSchemeFixtureColor);
+  background-color: var(--noseurSchemeFixtureBackgroundColor, #f6f6f6);
+}
+
+.noseur-table > .noseur-thead > tr,
+.noseur-table > .noseur-tbody > tr,
+.noseur-table > .noseur-tfoot > tr {
+  vertical-align: top;
+}
+
+.noseur-table > .noseur-thead > tr > th,
+.noseur-table > .noseur-tbody > tr > td,
+.noseur-table > .noseur-tfoot > tr > th {
+  padding: 10px;
+  border-style: solid;
+  border-width: 0px 0px 1px;
+  border-color: var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-table > .noseur-tfoot > tr > th {
+  border-width: 0px;
+}
+
+.noseur-table.noseur-data-striped > .noseur-tbody > tr:nth-child(even) {
+  background-color: var(--noseurSchemeStripColor, #f9f9f9);
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-thead > tr > th,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tbody > tr > td,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tfoot > tr > th {
+  border-right-width: 1px;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-thead > tr > th:last-child,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tbody > tr > td:last-child,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tfoot > tr > th:last-child {
+  border-right-width: 0px;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tfoot > tr > th {
+  border-bottom-width: 0px;
+}
+
+.noseur-data-compound.noseur-data-no-divider > .noseur-table > .noseur-thead > tr > th,
+.noseur-data-compound.noseur-data-no-divider > .noseur-table > .noseur-tfoot > tr > th,
+.noseur-data-compound.noseur-data-no-divider > .noseur-table > .noseur-tbody > tr > td,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tbody > tr > td:last-child {
+  border-bottom-width: 0px;
+}
+
+/* List */
+.noseur-list {
+  margin: 0px;
+  padding: 0px;
+  border-spacing: 0px;
+  list-style-type: none;
+}
+
+.noseur-list > li {
+  padding: 15px 0px;
+}
+
+.noseur-list.noseur-data-grid-h {
+  border-top: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-list.noseur-data-grid-f {
+  border-bottom: 1px solid var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-list > li {
+  padding: 15px;
+  border-style: solid;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 1px;
+  border-color: var(--noseurSchemeDataBorderColor, rgb(222, 226, 230));
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-list > li:last-child {
+  border-bottom-width: 0px;
+}
+
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-thead > tr > th:last-child,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tbody > tr > td:last-child,
+.noseur-data-compound.noseur-data-grid > .noseur-table > .noseur-tfoot > tr > th:last-child {
+  border-right-width: 0px;
+}
+
+.noseur-data-compound.noseur-data-no-divider > .noseur-list > li {
+  border-bottom-width: 0px;
+}
+
+.noseur-list.noseur-data-striped > li:nth-child(even) {
+  background-color: var(--noseurSchemeStripColor, #f9f9f9);
+}

package/dist/esm/data/Data.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+import { NoseurElement, SortDirection } from "../constants/Types";
+import { PaginatorPageChangeOption, PaginatorProps, PaginatorTemplateOptions } from "../presentation/Paginator";
+export interface RowProps {
+    id?: string;
+    key?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RowControlOptions {
+    toggleContent: () => void;
+}
+export type DataFixtureTemplateHandler = () => NoseurElement;
+export type DataRowValuedPropsHandler<D> = (data?: D) => RowProps;
+export type DataRowExpansionTemplateHandler<D> = (data: D) => NoseurElement;
+export type DataRowSelectionHandler<D> = (value: D, rowNumber?: number) => boolean;
+export type DataSelectionElementTemplateHandler = (index: number) => NoseurElement;
+export type DataComparatorHandler<D> = (sortDirection: SortDirection, dataKey: string, p: D, c: D) => number;
+export interface DataManageRef {
+    getData: <D>() => D[];
+    setData: <D>(data?: D[]) => void;
+    expandContent: (row: number) => void;
+    toggleContent: (row: number) => void;
+    collapseContent: (row: number) => void;
+    setLoadingState: (isLoading: boolean) => void;
+    setAndExpandRowContent: (row: number, content: NoseurElement) => void;
+}
+export interface DataInternalElementProps {
+    id?: string;
+    key?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface DataProps<T, D> extends ComponentBaseProps<T, DataManageRef> {
+    data?: D[];
+    dataId: string;
+    paginate: boolean;
+    rowProps: RowProps;
+    noDivider: boolean;
+    scrollable: boolean;
+    rowsPerPage: number;
+    totalRecords: number;
+    stripedRows: boolean;
+    rowSelection: boolean;
+    showGridLines: boolean;
+    dataRefreshKeys: any[];
+    dataSelectionKey: string;
+    emptyState: NoseurElement;
+    multiRowExpansion: boolean;
+    loadingState: NoseurElement;
+    allowNoDataPagination: boolean;
+    rowsContent: {
+        [key: number]: any;
+    };
+    paginatorProps: Partial<PaginatorProps>;
+    paginatorTemplate: PaginatorTemplateOptions;
+    internalElementProps: Partial<DataInternalElementProps>;
+    header: DataFixtureTemplateHandler;
+    footer: DataFixtureTemplateHandler;
+    compareData: DataComparatorHandler<D>;
+    onRowSelection: DataRowSelectionHandler<D>;
+    valuedRowProps: DataRowValuedPropsHandler<D>;
+    rowExpansionTemplate: DataRowExpansionTemplateHandler<D>;
+    onPageChange?: (event: PaginatorPageChangeOption) => void;
+    selectionElementTemplate: DataSelectionElementTemplateHandler;
+}
+export interface DataState<D> {
+    activeData?: D[];
+    isLoading?: boolean;
+    dataOffset: number;
+    currentPage: number;
+    rowsContent: {
+        [key: number]: any;
+    };
+}
+export declare class DataComponent<T, P extends DataProps<T, D>, S extends DataState<D>, D> extends React.Component<P, S> {
+    rowContentElementMaps: {
+        [key: number]: {
+            rowElement?: any;
+            contentElement?: any;
+            expanded?: boolean;
+            originalHeight?: number;
+        };
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    renderEmptyState(): React.JSX.Element | null;
+    renderLoadingState(): React.JSX.Element | null;
+    renderFixtures(fixture: DataFixtureTemplateHandler, className: string): React.JSX.Element | null;
+    buildRowProps(data?: any): any;
+    onPageChange(event: PaginatorPageChangeOption): void;
+    renderPaginator(hasFooter: boolean): React.JSX.Element | null;
+    internalToggleRowContent(row: number, expand?: boolean, content?: NoseurElement): void;
+    toggleRowContent(row: number, data: any, expand?: boolean, content?: NoseurElement): S["rowsContent"];
+    renderRowContents(): React.JSX.Element[];
+    resolveRowContentPositions(): void;
+}