@sebgroup/green-react 2.6.2 → 3.0.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.6.2",
+  "version": "3.0.1",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.2.4",
-    "@sebgroup/chlorophyll": "^2.3.0",
-    "@sebgroup/extract": "^2.1.2",
+    "@sebgroup/green-core": "^1.4.1",
+    "@sebgroup/chlorophyll": "^3.0.1",
+    "@sebgroup/extract": "^3.0.0",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"
   },

package/src/index.d.ts

@@ -18,4 +18,5 @@ export * from './lib/tabs/tabs';
 export * from './lib/modal/modal';
 export * from './lib/context-menu/context-menu';
 export * from './types';
+export * from './lib/table/components';
 export { AlertRibbon as Alert } from './lib/alert-ribbon/alert-ribbon';

package/src/lib/datepicker/datepicker.d.ts

@@ -1,2 +1,18 @@
-import { DatepickerOptions } from '@sebgroup/extract';
-export declare const Datepicker: (options?: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+import { GdsDatepicker } from '@sebgroup/green-core';
+export declare const CoreDatepicker: import("@lit/react").ReactWebComponent<GdsDatepicker, {
+    onchange: string;
+}>;
+export interface DatepickerOptions {
+    label?: string;
+    onChange?: (value: any) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    value?: Date;
+    showWeeks?: boolean;
+    testId?: string;
+    /** @deprecated Use `value` instead */
+    selectedDate?: Date;
+    /** @deprecated Use `value` instead */
+    currentDate?: Date;
+}
+export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;

package/src/lib/dropdown/dropdown.d.ts

@@ -28,6 +28,8 @@ export interface DropdownArgs {
     useValue?: string;
     validator?: IValidator;
     value?: any;
+    /** Force width of the popover to match trigger */
+    syncPopoverWidth?: boolean;
 }
 export interface DropdownTexts {
     placeholder?: string;
@@ -45,5 +47,5 @@ export declare const CoreOption: import("@lit/react").ReactWebComponent<GdsOptio
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;
 }
-export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, syncPopoverWidth, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/src/lib/stepper/stepper.d.ts

@@ -1,8 +1,15 @@
-import { IValidator, StepperArgs } from '@sebgroup/extract';
-export interface StepperProps extends StepperArgs {
+import { IValidator } from '@sebgroup/extract';
+import { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+export interface StepperProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    id?: string;
+    value?: string | number;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     label?: string;
     description?: string;
     statusMessage?: string;
     validator?: IValidator;
+    onIncrease?: () => void;
+    onDecrease?: () => void;
+    testId?: string;
 }
-export declare function Stepper({ id, label, description, statusMessage, validator, value, onChange, min, max, step, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ id, label, description, statusMessage, validator, value, onChange, onIncrease, onDecrease, testId, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/table/components/Table.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SortedColumn } from './context/TableContextProvider';
+export declare type TableProps = JSX.IntrinsicElements['table'] & {
+    /** callback when row is selected */
+    onRowSelect?: (event: React.ChangeEvent<HTMLInputElement>, rowKey: string) => void;
+    /** callback when row is expanded */
+    onRowExpand?: (isExpanded: boolean, rowKey: string) => void;
+    /** callback when column is sorted */
+    onSort?: (sortedColumn: SortedColumn) => void;
+    /** preset sorted column */
+    sortedColumn?: SortedColumn | null;
+};
+export declare const Table: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>>;

package/src/lib/table/components/context/TableContextProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SortDirection } from '../table-typings';
+export interface SortedColumn<T = any> {
+    accessor?: keyof T;
+    sortDirection: SortDirection;
+}
+export interface TableState {
+    sortedColumn: SortedColumn | null;
+    expandedRows: Array<string>;
+}
+export declare type TableContextType = {
+    tableState: TableState;
+    setTableState: (newState: TableState) => void;
+    onRowSelect?: (event: React.ChangeEvent<HTMLInputElement>, rowKey: string) => void;
+    onRowExpand?: (isExpanded: boolean, rowKey: string) => void;
+    onSort?: (sortedColumn: SortedColumn) => void;
+};
+export declare const TableContext: React.Context<TableContextType>;
+export declare const useTableContext: () => TableContextType;

package/src/lib/table/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './table-typings';
+export * from './context/TableContextProvider';
+export * from './parts/helperFunctions';
+export * from './parts/TableCell';
+export * from './parts/TableBody';
+export * from './parts/TableHeader';
+export * from './parts/TableHeaderCell';
+export * from './parts/TableRow';
+export * from './Table';

package/src/lib/table/components/parts/TableBody/TableBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare type TableBodyProps = JSX.IntrinsicElements['tbody'];
+declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableBody };

package/src/lib/table/components/parts/TableBody/index.d.ts

@@ -0,0 +1 @@
+export * from "./TableBody";

package/src/lib/table/components/parts/TableCell/TableCell.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare type TableCellProps = JSX.IntrinsicElements['td'];
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;

package/src/lib/table/components/parts/TableCell/index.d.ts

@@ -0,0 +1 @@
+export * from "./TableCell";

package/src/lib/table/components/parts/TableHeader/TableHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare type TableHeaderProps = JSX.IntrinsicElements['thead'];
+declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableHeader };

package/src/lib/table/components/parts/TableHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./TableHeader";

package/src/lib/table/components/parts/TableHeaderCell/TableHeaderCell.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SortDirection } from '../../table-typings';
+export declare type TableHeaderCellProps<T = any> = JSX.IntrinsicElements['th'] & {
+    accessor?: keyof T;
+    disableSort?: boolean;
+    sortDirection?: SortDirection;
+};
+declare const TableHeaderCell: React.ForwardRefExoticComponent<Omit<TableHeaderCellProps<any>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+export { TableHeaderCell };

package/src/lib/table/components/parts/TableHeaderCell/index.d.ts

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

package/src/lib/table/components/parts/TableRow/TableRow.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type TableRowProps = JSX.IntrinsicElements['tr'] & {
+    checked?: boolean;
+    indeterminate?: boolean;
+    isHeaderRow?: boolean;
+    hideSelect?: boolean;
+    uniqueKey?: string;
+    parentKey?: string;
+    isExpanded?: boolean;
+    isSubRow?: boolean;
+    collapseButtonProps?: JSX.IntrinsicElements['button'];
+    checkboxProps?: JSX.IntrinsicElements['input'];
+};
+declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+export { TableRow };

package/src/lib/table/components/parts/TableRow/index.d.ts

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

package/src/lib/table/components/parts/helperFunctions/helperFunctions.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { FilterColumn, GenericTableRow, SortDirection } from '../../table-typings';
+/**
+ * sum the total of columns or cols in a row
+ * @param colsLength the length of the columns
+ * @param useSelection add a column for selection checkboxes
+ * @param useShowActionColumn add another column for action columns
+ * @param useGroupBy add another columns for groupby
+ */
+export declare function sumCols(colsLength: number, useSelection?: boolean, useShowActionColumn?: boolean, useGroupBy?: boolean): number;
+/**
+ * sort array of tabke rows
+ * @param items table rows array
+ * @param columnName the target column name
+ * @param sortDirection the sort direction
+ * @return Array of tableRow
+ */
+export declare function sortArray<T>(items: T[] | undefined, columnName: keyof T, sortDirection: SortDirection): Array<T>;
+/**
+ *
+ * @param data table data
+ * @param filterColumns filter columns
+ */
+export declare function filterArrayByColumns<T>(data: Array<T>, filterColumns: Array<FilterColumn<T>>): Array<T>;
+/**
+ * search text in array of table row
+ * @param data the array of table rows
+ * @param keyword The keyword to search in the array
+ * @param searchFields the target field to search
+ */
+export declare function searchTextByColumns<T>(data: Array<T>, keyword: string, searchFields: Array<keyof T>): Array<T>;
+/**
+ * paginate data
+ * @param data table data
+ * @param offset page size
+ * @param currentPage current page index
+ */
+export declare function paginate<T = any>(data: Array<T>, offset: number, currentPage: number): T[];
+export interface RowSelectOutput<T = any> {
+    data: Array<GenericTableRow<T>>;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+}
+/**
+ * on row select
+ * @param event input event
+ * @param data rows of data
+ * @param rowUniqueAccessor row unique accessor
+ * @param rowId row id value
+ */
+export declare function onRowSelect<T = any>(event: React.ChangeEvent<HTMLInputElement>, data: Array<GenericTableRow<T>>, rowUniqueAccessor: keyof GenericTableRow<T>, rowId: string): RowSelectOutput<T>;

package/src/lib/table/components/parts/helperFunctions/index.d.ts

@@ -0,0 +1 @@
+export * from "./helperFunctions";

package/src/lib/table/components/table-typings.d.ts

@@ -0,0 +1,14 @@
+export declare enum SortDirection {
+    ASC = "ASC",
+    DESC = "DESC"
+}
+export interface FilterColumn<T = any> {
+    accessor: keyof T;
+    value: any;
+}
+export declare type GenericTableRow<T = any> = T & {
+    id?: string;
+    checked?: boolean;
+    expanded?: boolean;
+    indeterminate?: boolean;
+};

package/src/lib/table/story/multiple-story-tables.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { TableHeaderCellProps, GenericTableRow } from '../components';
+interface SuperHeroData {
+    id: ReactNode;
+    firstName: ReactNode;
+    lastName: ReactNode;
+    superHero: ReactNode;
+    rowContentDetails?: GenericTableRow<SuperHeroData>[];
+}
+declare type SuperHeroRowData = GenericTableRow<SuperHeroData>;
+declare type SuperHeroColumnDataT = Omit<TableHeaderCellProps<SuperHeroRowData>, 'ref'> & React.RefAttributes<HTMLTableCellElement>;
+export declare const columnData: SuperHeroColumnDataT[];
+export declare const rowData: SuperHeroRowData[];
+export declare const SortableTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const SelectableTable: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableTable: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/datepicker/hook.d.ts

@@ -1,12 +0,0 @@
-import { RefObject } from 'react';
-import { Datepicker, DatepickerData, DatepickerOptions, DatepickerState } from '@sebgroup/extract';
-interface HookResult {
-    datepicker: Datepicker;
-    data: DatepickerData;
-    state: DatepickerState;
-}
-interface DatepickerHook {
-    (datepickerRef: RefObject<HTMLElement>, datepickerDialogRef: RefObject<HTMLElement>, dateInputRef: RefObject<HTMLInputElement>, datepickerTriggerRef: RefObject<HTMLButtonElement>, options?: DatepickerOptions): HookResult;
-}
-export declare const useDatepicker: DatepickerHook;
-export {};