@lifesg/react-design-system 2.2.0-canary.1 → 2.2.0-canary.2

package/data-table/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@lifesg/react-design-system/data-table",
+  "private": true,
+  "main": "../cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/data-table/types.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties, ReactNode } from "react";
+import { ErrorDisplayAttributes } from "../error-display/types";
+export interface DataTableProps {
+    id?: string | undefined;
+    "data-testid"?: string | undefined;
+    /** Configuration for each header */
+    headers: HeaderProps[];
+    rows?: RowProps[] | undefined;
+    className?: string | undefined;
+    selectedIds?: string[] | undefined;
+    disabledIds?: string[] | undefined;
+    /** Enables a checkbox for each row */
+    enableMultiSelect?: boolean | undefined;
+    /** Enables a select all checkbox */
+    enableSelectAll?: boolean | undefined;
+    /** Specifies if an action bar is visible when one or more rows are selected */
+    enableActionBar?: boolean | undefined;
+    /** Specifies if the header is fixed to the top */
+    enableStickyHeader?: boolean | undefined;
+    /** Custom content to be rendered within the action bar */
+    actionBarContent?: ReactNode | undefined;
+    loadState?: LoadStateType | undefined;
+    onSelect?: ((rowId: string, isSelected: boolean) => void) | undefined;
+    onSelectAll?: ((isAllSelected: boolean) => void) | undefined;
+    onHeaderClick?: ((fieldKey: string) => void) | undefined;
+    onClearSelectionClick?: (() => void) | undefined;
+    /** Specifies the sort indicator display state for each column **/
+    sortIndicators?: SortIndicatorsProps | undefined;
+    /** Specifies if every alternate row has a different background colour */
+    alternatingRows?: boolean | undefined;
+    /** Override props for the empty view display */
+    emptyView?: ErrorDisplayAttributes | undefined;
+    /** Returns a custom view to be rendered when the table is empty */
+    renderCustomEmptyView?: (() => ReactNode) | undefined;
+}
+export type LoadStateType = "loading" | "success";
+export type SortIndicatorType = "asc" | "desc";
+export interface SortIndicatorsProps {
+    [fieldKey: string]: SortIndicatorType;
+}
+/**
+ * When a string is specified, it will be used as the header label and
+ * the key of the value in the row item object.
+ *
+ * For additional customisation, pass a `HeaderItemProps` object
+ */
+export type HeaderProps = string | HeaderItemProps;
+interface HeaderItemProps {
+    fieldKey: string;
+    label: string | ReactNode;
+    clickable?: boolean | undefined;
+    style?: CSSProperties | undefined;
+}
+export interface RowProps {
+    id: string | number;
+    /** data with key matching fieldKey in `HeaderProps` */
+    [fieldKey: string]: string | number | ReactNode | ((row: RowProps, renderProps: RowRenderProps) => ReactNode) | undefined;
+}
+interface RowRenderProps {
+    isSelected: boolean;
+}
+export {};

package/error-display/index.js

@@ -319,5 +319,5 @@ import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import i,{keyfra
         width: 100%;
         margin: 2rem auto 0;
     }
-`,Br=t=>{var{type:i,img:n,title:a,description:o,actionButton:s,additionalProps:g,imageOnly:c}=t,d=l(t,["type","img","title","description","actionButton","additionalProps","imageOnly"]);const p=E.get(i),h=d["data-testid"]||"error-display",u=()=>{if("maintenance"===i){const e=g;return g&&e.dateString?p.renderDescription(e):o||void 0}return o||void 0};if(!p)return null;const f=Object.assign(Object.assign(Object.assign(Object.assign({},p),n&&{img:n}),a&&{title:a}),u()&&{description:u()});return e(mr,Object.assign({},d,{"data-testid":h},{children:[r(yr,Object.assign({},f.img,{alt:"","data-id":"error-display-image"})),!c&&(f.title||f.description?e(Fr,{children:[f.title&&r(vr,Object.assign({"data-testid":`${h}--title`,"data-id":"error-display-title"},{children:f.title})),f.description&&r(br,Object.assign({"data-testid":`${h}--description`,"data-id":"error-display-description"},{children:"string"==typeof f.description?r("p",{children:f.description}):f.description}))]}):null),s&&(()=>{const e=Object.assign({children:"Proceed"},s);return r(Sr,Object.assign({},e))})()]}))};export{Br as ErrorDisplay};
+`,Br=t=>{var{type:i,img:n,title:a,description:o,actionButton:s,additionalProps:g,imageOnly:c}=t,d=l(t,["type","img","title","description","actionButton","additionalProps","imageOnly"]);const p=E.get(i),h=d["data-testid"]||"error-display",u=()=>{if("maintenance"===i){const e=g;return g&&e.dateString?p.renderDescription(e):o||void 0}return o||void 0};if(!p)return null;const f=Object.assign(Object.assign(Object.assign(Object.assign({},p),n&&{img:n}),a&&{title:a}),u()&&{description:u()});return e(mr,Object.assign({},d,{"data-testid":h},{children:[r(yr,Object.assign({},f.img,{alt:"","data-id":"error-display-image"})),!c&&(f.title||f.description?e(Fr,{children:[f.title&&("string"==typeof f.title?r(vr,Object.assign({"data-testid":`${h}--title`,"data-id":"error-display-title"},{children:f.title})):f.title),f.description&&r(br,Object.assign({"data-testid":`${h}--description`,"data-id":"error-display-description"},{children:"string"==typeof f.description?r("p",{children:f.description}):f.description}))]}):null),s&&(()=>{const e=Object.assign({children:"Proceed"},s);return r(Sr,Object.assign({},e))})()]}))};export{Br as ErrorDisplay};
 //# sourceMappingURL=index.js.map