@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+import"./timetable.styles_7rp8kz.css";const l={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}},t="erxhy6s",e="t1e3v70i",r="t1rmyx7n",c="t1gzwlj3",i="rlj7vfj",n="r1wcbob7",d="rwd1dpu",o="r14gjl6n",a="tvbecqk",b="club8pr",p="c1ww0xmb",w="cu00ucx",m="c78q521",u="t12ob72k",s="tcjynx9",x="r1bl65p4",y="r18q97gy",g="c1wixfzv",j="c1ydv4q1",q="r1g67qip",v="rr9vcmw",W="lywjuzz",h="l1x75bdd",z="l1c8n8nw",f="n1c42c7o",k="l5bp49u",_="l1gsk7y7",H="lwaowax",A="p1l2dqit";export{g as clickableRowHeaderTitle,j as clickableRowHeaderTitleClickable,w as columnHeader,b as columnHeaderRow,p as columnHeaderRowScrolled,m as columnHeaderTitle,t as emptyTableContainer,H as loadingBar,_ as loadingCell,W as loadingSpinner,h as loadingSpinnerEmptyContent,z as loadingSpinnerHasContent,k as loadingWrapper,f as noResultsFound,A as popoverTrigger,i as rowColumnHeader,n as rowColumnHeaderScrolled,d as rowColumnHeaderScrolledX,o as rowColumnHeaderScrolledY,x as rowHeader,y as rowHeaderScrolled,q as rowHeaderSubtitle,v as rowHeaderSubtitleHidden,u as timeTableBody,e as timeTableContainer,c as timeTableContainerLoading,r as timeTableContainerNotAllLoaded,a as timeTableHeaderRow,s as timeTableRow,l as tokens};
+//# sourceMappingURL=timetable.styles.js.map

package/timetable/timetable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable.styles.js","sources":["../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n    rowColumnHeader: {\n        clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n        clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n    },\n    columnHeaderRow: {\n        columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n    },\n    loadingWrapper: {\n        cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n    padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n    ${tokens.rowColumnHeader.clipRight}: 0;\n    ${tokens.rowColumnHeader.clipBottom}: 0;\n\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    box-shadow: none;\n    clip-path: inset(0);\n    transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(\n        0 var(${tokens.rowColumnHeader.clipRight})\n            var(${tokens.rowColumnHeader.clipBottom}) 0\n    );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n    ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n    ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-auto-flow: column;\n    grid-auto-columns: max(\n        var(${tokens.columnHeaderRow.columnWidth}),\n        ${MIN_HOURLY_INTERVAL_WIDTH}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n    &:hover {\n        cursor: pointer;\n    }\n`;\n\nexport const rowHeaderSubtitle = css`\n    display: inline-flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n    display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n    grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n    grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.loadingWrapper.cellWidth}: initial;\n\n    display: flex;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    width: var(${tokens.loadingWrapper.cellWidth});\n    height: 100%;\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n    @keyframes timetable-loading-gradient {\n        0% {\n            background-position: -468px 0;\n        }\n        100% {\n            background-position: 468px 0;\n        }\n    }\n\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${Colour.Primitive[\"neutral-95\"]} 8%,\n        ${Colour.Primitive[\"neutral-100\"]} 18%,\n        ${Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","emptyTableContainer","timeTableContainer","timeTableContainerNotAllLoaded","timeTableContainerLoading","rowColumnHeader","rowColumnHeaderScrolled","rowColumnHeaderScrolledX","rowColumnHeaderScrolledY","timeTableHeaderRow","columnHeaderRowScrolled","columnHeader","columnHeaderTitle","timeTableBody","timeTableRow","rowHeader","rowHeaderScrolled","clickableRowHeaderTitle","clickableRowHeaderTitleClickable","rowHeaderSubtitle","rowHeaderSubtitleHidden","loadingSpinner","loadingSpinnerEmptyContent","loadingSpinnerHasContent","noResultsFound","loadingCell","loadingBar","popoverTrigger"],"mappings":"+DASO,MAAMA,EAAS,CAKlBC,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW,sDAQNC,EAAmB,UAOnBC,EAAkB,WAQlBC,EAA8B,WAI9BC,EAAyB,WAUzBC,EAAe,UAiBfC,EAAuB,WAQvBC,EAAwB,UAIxBC,EAAwB,WAIxBC,EAAkB,UAYlBZ,EAAe,UAafa,EAAuB,WAIvBC,EAAY,UAOZC,EAAiB,UAQjBC,EAAa,WAKbC,EAAY,UAQZC,EAAS,WAoBTC,EAAiB,WAKjBC,EAAuB,WASvBC,EAAgC,WAMhCC,EAAiB,WAOjBC,EAAuB,UAQvBC,EAAc,UASdC,EAA0B,WAI1BC,EAAwB,WAIxBC,EAAc,WAUdzB,EAAc,UAQd0B,EAAW,WAQXC,EAAU,UA0BVC,EAAc"}

package/timetable/timetable.styles_7rp8kz.css

@@ -0,0 +1,46 @@
+@layer fds{.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+.t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
+.t1rmyx7n{padding-bottom:128px;}
+.t1gzwlj3:hover{cursor:not-allowed;}
+.rlj7vfj{--fds-internal-timetable-rowColumnHeader-clipRight:0;--fds-internal-timetable-rowColumnHeader-clipBottom:0;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--fds-colour-bg);width:252px;height:68px;z-index:2;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);box-shadow:none;-webkit-clip-path:inset(0);clip-path:inset(0);-webkit-transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;}
+.r1wcbob7{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );}
+.rwd1dpu{--fds-internal-timetable-rowColumnHeader-clipRight:-0.12px;}
+.r14gjl6n{--fds-internal-timetable-rowColumnHeader-clipBottom:-0.12px;}
+.tvbecqk{display:-ms-grid;display:grid;position:-webkit-sticky;position:sticky;top:0;z-index:4;background-color:var(--fds-colour-bg);-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.club8pr{display:-ms-grid;display:grid;background-color:var(--fds-colour-bg);height:68px;-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.c1ww0xmb{box-shadow:var(--fds-shadow-md-subtle);}
+.cu00ucx{min-width:84px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding-bottom:var(--fds-spacing-4);}
+.c78q521{color:var(--fds-colour-text-subtler);}
+.t12ob72k{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;}
+.tcjynx9{display:-ms-grid;display:grid;-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.r1bl65p4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:-webkit-sticky;position:sticky;left:0;background-color:var(--fds-colour-bg);z-index:3;width:252px;height:68px;text-align:right;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-32);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.r18q97gy{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}
+.c1wixfzv{display:inline-block;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;color:var(--fds-colour-text-primary);}
+.c1ydv4q1:hover{cursor:pointer;}
+.r1g67qip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:var(--fds-spacing-4);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text-subtler);}
+.rr9vcmw{display:none;}
+.lywjuzz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-grid-row:2;grid-row:2;width:100%;height:100%;}
+.l1x75bdd{-ms-grid-column:1/-1;grid-column:1/-1;}
+.l1c8n8nw{-ms-grid-column:2/-1;grid-column:2/-1;}
+.n1c42c7o{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.l5bp49u{--fds-internal-timetable-loadingWrapper-cellWidth:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.l1gsk7y7{border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);width:var(--fds-internal-timetable-loadingWrapper-cellWidth);height:100%;padding:var(--fds-spacing-20) var(--fds-spacing-12);}
+.lwaowax{height:28px;width:100%;background:linear-gradient(
+        to right,
+        var(--fds-colour-neutral-95) 8%,
+        var(--fds-colour-neutral-100) 18%,
+        var(--fds-colour-neutral-95) 33%
+    );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}}

package/timetable/types.d.ts

@@ -1,116 +1,240 @@
-import { PopoverV2TriggerType } from "../popover-v2";
-import { ThemeStyleProps } from "../theme/types";
+import type { PopoverTriggerType } from "../popover";
+/**
+ * Visual and interaction state of a timetable cell.
+ *
+ * - `"filled"` — cell represents an occupied or confirmed entry
+ * - `"blocked"` — cell is unavailable and cannot be selected
+ * - `"default"` — cell is available with no special state
+ * - `"disabled"` — cell is inactive and non-interactive
+ * - `"pending"` — cell represents a provisional or in-progress entry
+ */
 export type TimeTableCellType = "filled" | "blocked" | "default" | "disabled" | "pending";
+/**
+ * Background pattern for a timetable cell.
+ *
+ * - `"solid"` renders a flat fill.
+ * - `"stripes"` renders a diagonal stripe pattern.
+ * - `"default"` uses `"stripes"` for `"blocked"` and `"pending"` cells,
+ *   and `"solid"` for all other statuses.
+ */
+export type TimeTableCellStyleType = "default" | "solid" | "stripes";
+/**
+ * Custom visual styling overrides for an individual timetable cell.
+ */
 export interface TimeTableCellStyleAttributes {
-    /** Main background color for the cell */
-    backgroundColor?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** Alternate background color (used for striped patterns in blocked/pending status) */
-    altBackgroundColor?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** Hover background color for the cell */
-    hoverBackgroundColor?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** Alternate hover background color for the cell */
-    altHoverBackgroundColor?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** Display style for the cell. If not set, defaults based on cell type (blocked/pending = striped, others = solid) */
-    styleType?: "default" | "solid" | "stripes" | undefined;
+    /** Main background color for the cell. */
+    backgroundColor?: string | undefined;
+    /**
+     * Alternate background color used for the second stripe in striped patterns.
+     */
+    altBackgroundColor?: string | undefined;
+    /** Background color applied on hover. */
+    hoverBackgroundColor?: string | undefined;
+    /** Alternate background color applied on hover for striped patterns. */
+    altHoverBackgroundColor?: string | undefined;
+    /**
+     * Cell background pattern.
+     *
+     * @default "default"
+     */
+    styleType?: TimeTableCellStyleType | undefined;
 }
+/**
+ * Imperative handle returned by `TimeTable` via `ref`.
+ */
 export interface TimeTableRef {
-    /** Resets the scroll position to the initialScrollTime if provided */
+    /**
+     * Scrolls the timetable back to `initialScrollTime`.
+     * No-op when `initialScrollTime` is not set.
+     */
     resetScroll: () => void;
 }
+/**
+ * Represents a single row in the timetable.
+ */
 export interface TimeTableRowData {
-    /** Unique identifier for the row */
+    /** Unique identifier for the row. */
     id?: string | undefined;
-    /** Display name of the row */
+    /** Display name shown in the row header. */
     name: string;
-    /** Array of cell data for this row */
+    /** Cells occupying time slots within this row. */
     rowCells: TimeTableRowCellData[];
-    /** Optional subtitle text or element displayed below the row name */
+    /** Secondary text or element rendered beneath the row name in the header. */
     subtitle?: string | JSX.Element | undefined;
-    /** Popover configuration for the row header */
+    /** Popover attached to the row header label. */
     rowHeaderPopover?: TimeTablePopoverProps | undefined;
-    /** Popover configuration for cells outside the time range */
+    /**
+     * Popover shown when the user interacts with cells outside the active time range.
+     */
     outOfRangeCellPopover?: TimeTablePopoverProps | undefined;
-    /** The minimum time for this row. Format in HH:mm. Defaults to minTime */
+    /**
+     * Earliest time this row is active, in `HH:mm` format.
+     * Time slots before this value are rendered as out-of-range.
+     *
+     * @remarks Falls back to the timetable-level `minTime` when omitted.
+     */
     rowMinTime?: string | undefined;
-    /** The maximum time for this row. Format in HH:mm. Defaults to maxTime */
+    /**
+     * Latest time this row is active, in `HH:mm` format.
+     * Time slots after this value are rendered as out-of-range.
+     *
+     * @remarks Falls back to the timetable-level `maxTime` when omitted.
+     */
     rowMaxTime?: string | undefined;
-    /** Callback function when the row name is clicked */
+    /**
+     * Called when the row header name is clicked.
+     *
+     * @param rowData The full row data object for this row.
+     * @param e The originating mouse event.
+     */
     onRowNameClick?: ((rowData: TimeTableRowData, e: React.MouseEvent) => void) | undefined;
 }
+/**
+ * Configuration for a popover attached to a timetable row header or cell.
+ */
 export interface TimeTablePopoverProps {
-    /** The trigger type for showing the popover */
-    trigger: PopoverV2TriggerType;
-    /** The content to display in the popover */
+    /** Interaction that opens the popover */
+    trigger: PopoverTriggerType;
+    /** Content rendered inside the popover. */
     content: string | JSX.Element | (() => React.ReactNode);
-    /** Delay in milliseconds before opening/closing the popover */
+    /**
+     * Open and close delays in milliseconds.
+     * Useful for hover popovers to avoid flickering on quick mouse movements.
+     */
     delay?: {
         open?: number | undefined;
         close?: number | undefined;
     } | undefined;
-    /** Offset distance of the popover from the trigger element */
+    /** Distance in pixels between the popover and its trigger element. */
     offset?: number | undefined;
 }
+/**
+ * Props for the `TimeTable` component.
+ */
 export interface TimeTableProps {
-    /** Unique identifier for the timetable */
     id?: string | undefined;
-    /** Additional CSS class name */
     className?: string | undefined;
-    /** Test identifier for testing purposes */
     "data-testid"?: string | undefined;
-    /** The date to display in the timetable */
+    /**
+     * The date currently displayed.
+     */
     date: string;
-    /** Message to display when there is no content */
+    /**
+     * Text shown in the empty state when `rowData` is empty or
+     * `totalRecords` is `0`.
+     */
     emptyContentMessage?: string;
-    /** Array of row data to display in the timetable */
+    /** Rows to render in the timetable grid. */
     rowData: TimeTableRowData[];
-    /** Whether the timetable is in a loading state */
+    /**
+     * When `true`, replaces row content with a loading spinner.
+     */
     loading?: boolean | undefined;
-    /** The minimum time of the timetable. Format in HH:mm */
+    /**
+     * Earliest hour column displayed, in `HH:mm` format.
+     * Rounded to the nearest full hour internally.
+     *
+     * @default "00:00"
+     */
     minTime?: string | undefined;
-    /** The maximum time of the timetable. Format in HH:mm */
+    /**
+     * Latest hour column displayed, in `HH:mm` format.
+     * Rounded up to the nearest full hour internally.
+     *
+     * @default "23:00"
+     */
     maxTime?: string | undefined;
-    /** Initial scroll position in HH:mm format (e.g., "09:00" will scroll to 9am on mount) */
+    /**
+     * Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).
+     */
     initialScrollTime?: string | undefined;
-    /** The minimum selectable date */
+    /**
+     * Earliest date the user can navigate to in the date picker.
+     */
     minDate?: string | undefined;
-    /** The maximum selectable date */
+    /**
+     * Latest date the user can navigate to in the date picker
+     */
     maxDate?: string | undefined;
-    /** Total number of records for pagination */
+    /**
+     * Total number of records across all pages.
+     *
+     * When `0`, the empty state is shown regardless of `rowData`.
+     */
     totalRecords?: number | undefined;
-    /** Whether to display the current date as "Today" */
+    /**
+     * When `true`, the date header displays `"Today"` instead of the
+     * formatted date string when `date` matches the current calendar day.
+     */
     showCurrentDateAsToday?: boolean | undefined;
-    /** Whether to display the date in short form */
+    /** When `true`, the date header uses an abbreviated date format. */
     showDateAsShortForm?: boolean | undefined;
-    /** Rounds initial scroll time to the nearest interval, e.g 6:30 will be clamped to 6:00 when interval = 60. Default is true */
+    /**
+     * When `true`, `initialScrollTime` is snapped to the nearest time
+     * interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute
+     * interval).
+     *
+     * @default true
+     */
     roundInitialScrollTime?: boolean | undefined;
-    /** Callback function when the refresh button is clicked */
+    /** Called when the user clicks the refresh button in the header. */
     onRefresh?: (() => void) | undefined;
-    /** Callback function for pagination */
+    /**
+     * Called when the timetable needs to load the next page of rows.
+     *
+     * @remarks Triggered automatically when the user scrolls to the bottom
+     * and `rowData.length` is less than `totalRecords`. Providing this
+     * prop enables lazy loading.
+     */
     onPage?: (() => void) | undefined;
-    /** Callback function when the previous day button is clicked */
+    /**
+     * Called when the user navigates to the previous day.
+     *
+     * @param currentDate The date currently displayed before navigation.
+     */
     onPreviousDayClick: (currentDate: string) => void;
-    /** Callback function when the next day button is clicked */
+    /**
+     * Called when the user navigates to the next day.
+     *
+     * @param currentDate The date currently displayed before navigation.
+     */
     onNextDayClick: (currentDate: string) => void;
-    /** Callback function when a date is selected from the calendar */
+    /**
+     * Called when the user selects a date from the calendar picker.
+     *
+     * @param currentDate The date the user selected.
+     */
     onCalendarDateSelect?: ((currentDate: string) => void) | undefined;
 }
+/**
+ * Represents a single time-slot cell within a timetable row.
+ */
 export interface TimeTableRowCellData {
-    /** Unique identifier for the cell */
+    /** Unique identifier for the cell. */
     id?: string | undefined;
-    /** The start time of the cell. Format in HH:mm */
+    /** Start time of the cell in `HH:mm` format. */
     startTime: string;
-    /** The end time of the cell. Format in HH:mm */
+    /** End time of the cell in `HH:mm` format. */
     endTime: string;
-    /** The status/type of the cell. Values: "filled" | "blocked" | "default" | "disabled" | "pending" */
+    /**
+     * Visual and interaction state of the cell.
+     */
     status: TimeTableCellType;
-    /** Title text displayed in the cell */
+    /** Primary label rendered inside the cell. */
     title?: string | undefined;
-    /** Subtitle text displayed in the cell */
+    /** Secondary label rendered below `title` inside the cell. */
     subtitle?: string | undefined;
-    /** Custom popover configuration for this cell */
+    /** Popover shown when the user interacts with this cell. */
     customPopover?: TimeTablePopoverProps | undefined;
-    /** Custom style attributes for the cell. If not specified, falls back to default row bar colors. */
+    /**
+     * Color and pattern overrides for this cell.
+     */
     cellStyleAttributes?: TimeTableCellStyleAttributes | undefined;
-    /** Callback function when the cell is clicked */
+    /**
+     * Called when the user clicks this cell.
+     *
+     * @param data The cell data for this cell.
+     * @param e The originating mouse event.
+     */
     onClick?: ((data: TimeTableRowCellData, e: React.MouseEvent) => void) | undefined;
 }

package/toast/toast.d.ts

@@ -1,2 +1,9 @@
-import { ToastProps } from "./types";
-export declare const Toast: ({ type, title, label, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+import type { ToastProps } from "./types";
+/**
+ * A brief notification that appears on screen to provide feedback about an
+ * operation or event.
+ *
+ * Use `Toast` to surface status messages without interrupting the user's workflow.
+ * @keywords alert, feedback, notification, snackbar
+ */
+export declare const Toast: ({ type, title, label, className, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/toast/toast.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as n,ExclamationCircleFillIcon as s,ExclamationTriangleFillIcon as o,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as c}from"@react-spring/web";import m,{useRef as d,useState as u,useContext as p,useEffect as f}from"react";import{r as y}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as h}from"styled-components";import{inertValue as v,VisuallyHidden as x}from"../shared/accessibility/index.js";import{Breakpoint as g}from"../theme/index.js";import{Wrapper as b,ContentWrapper as j,TextIconWrapper as k,TextContainer as D,ActionButton as E,DismissButton as $,Title as T,DescriptionMD as w,DescriptionBL as C}from"./toast.styles.js";const B=4e3,L={success:a,warning:o,error:s,info:n},O=n=>{var{type:s="success",title:o,label:a,autoDismiss:O,autoDismissTime:Q=B,onDismiss:V,fixed:X=!0,actionButton:Y}=n,_=e(n,["type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const I=d(null),[M,R]=u(!1),W=p(h),q=g["lg-max"]({theme:W}),z=y.useMediaQuery({maxWidth:q});f((()=>{R(!0)}),[]),f((()=>{if(!O)return;const e=setTimeout((()=>{R(!1)}),Q);return()=>clearTimeout(e)}),[O]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=I.current)||void 0===t?void 0:t.contains(document.activeElement))&&A()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const A=()=>{R(!1)},F=l({opacity:M?1:0,transform:M?z?"translateY(0%)":"translateX(0%)":z?"translateY(-1500%)":"translateX(150%)",config:{easing:c.easeInOutQuart,duration:1e3},onRest:()=>{M||null==V||V()}});return t(b,Object.assign({ref:I,style:F,$type:s,$fixed:X,role:"alert",inert:v(!M)},_,{children:[i(x,{children:s}),t(j,{children:[t(k,{$type:s,children:[(()=>{const e=L[s];return e&&i(e,{"aria-hidden":!0})})(),t(D,{children:[o&&(m.isValidElement(o)?o:i(T,{$type:s,role:"presentation",children:o})),a&&(m.isValidElement(a)?a:i(o?w:C,{$type:s,children:a}))]})]}),Y&&i(E,{styleType:"light",onClick:Y.onClick,children:Y.label})]}),t($,{$type:s,onClick:A,children:[i(x,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{O as Toast};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as s,ExclamationCircleFillIcon as o,ExclamationTriangleFillIcon as n,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as m,animated as c}from"@react-spring/web";import d from"clsx";import p,{useRef as u,useState as h,useEffect as f}from"react";import{Button as y}from"../button/button.js";import{inertValue as j,VisuallyHidden as v}from"../shared/accessibility/index.js";import{ClickableIcon as b}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as k}from"../theme/utils/use-media-query.js";import{Typography as g}from"../typography/index.js";import{wrapper as x,contentWrapper as N,textIconWrapper as D,textContainer as E,actionButton as T,dismissButton as B,title as w,description as C}from"./toast.styles.js";const L=4e3,q={success:a,warning:n,error:o,info:s},O=s=>{var{type:o="success",title:n,label:a,className:O,autoDismiss:V,autoDismissTime:X=L,onDismiss:Y,fixed:_=!0,actionButton:z}=s,I=e(s,["type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const M=u(null),[Q,R]=h(!1),A=k("lg");f((()=>{R(!0)}),[]),f((()=>{if(!V)return;const e=setTimeout((()=>{R(!1)}),X);return()=>clearTimeout(e)}),[V,X]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=M.current)||void 0===t?void 0:t.contains(document.activeElement))&&F()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const F=()=>{R(!1)},G=l({opacity:Q?1:0,transform:Q?A?"translateY(0%)":"translateX(0%)":A?"translateY(-1500%)":"translateX(150%)",config:{easing:m.easeInOutQuart,duration:1e3},onRest:()=>{Q||null==Y||Y()}});return t(c.div,Object.assign({ref:M,style:G,className:d(x,O),"data-type":o,"data-fixed":_,role:"alert",inert:j(!Q)},I,{children:[i(v,{children:o}),t("div",{className:N,children:[t("div",{className:D,"data-type":o,children:[(()=>{const e=q[o];return e&&i(e,{"aria-hidden":!0})})(),t("div",{className:E,children:[n&&(p.isValidElement(n)?n:i("h2",{className:w,role:"presentation",children:n})),a&&(p.isValidElement(a)?a:i(n?g.BodyMD:g.BodyBL,{className:C,children:a}))]})]}),z&&i(y,{className:T,styleType:"light",onClick:z.onClick,sizeType:"small",children:z.label})]}),t(b,{className:B,onClick:F,children:[i(v,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{O as Toast};
 //# sourceMappingURL=toast.js.map

package/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { VisuallyHidden, inertValue } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport {\n    ActionButton,\n    ContentWrapper,\n    DescriptionBL,\n    DescriptionMD,\n    DismissButton,\n    TextContainer,\n    TextIconWrapper,\n    Title,\n    Wrapper,\n} from \"./toast.styles\";\nimport { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const theme = useContext(ThemeContext);\n\n    const mobileBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: 1000,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <Title $type={type} role=\"presentation\">\n                    {title}\n                </Title>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return <DescriptionMD $type={type}>{label}</DescriptionMD>;\n        } else {\n            return <DescriptionBL $type={type}>{label}</DescriptionBL>;\n        }\n    };\n\n    return (\n        <Wrapper\n            ref={toastRef}\n            style={transitions}\n            $type={type}\n            $fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <ContentWrapper>\n                <TextIconWrapper $type={type}>\n                    {renderIcon()}\n                    <TextContainer>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </TextContainer>\n                </TextIconWrapper>\n\n                {actionButton && (\n                    <ActionButton\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                    >\n                        {actionButton.label}\n                    </ActionButton>\n                )}\n            </ContentWrapper>\n            <DismissButton $type={type} onClick={handleDismiss}>\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </DismissButton>\n        </Wrapper>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","Wrapper","Object","assign","ref","style","$type","$fixed","role","inert","inertValue","children","_jsx","VisuallyHidden","ContentWrapper","TextIconWrapper","Icon","renderIcon","TextContainer","React","isValidElement","Title","DescriptionMD","DescriptionBL","ActionButton","styleType","onClick","DismissButton","CrossIcon"],"mappings":"k0BA0BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAGGC,EAASC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBhB,EAAyBiB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAQC,EAAWC,GAEnBC,EAAmBC,EAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,GAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,GAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhB9B,EAAAW,EAASoB,eAAO,IAAA/B,OAAA,EAAAA,EAAEgC,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBrB,GAAW,EAAM,EAMfwB,EAAcC,EAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAACC,EAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,GAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAE1D,IACjB+C,EAACc,EAAc,CAAAH,SAAA,CACXX,EAACe,EAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAO1E,EAAeW,GAC5B,OAAO+D,GAAQJ,EAACI,qBAAmB,EAsCtBC,GACDjB,EAACkB,EAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAMC,eAAelE,GACdA,EAGH0D,EAACS,EAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAMC,eAAejE,GACdA,EAEAyD,EADA1D,EACCoE,EAEAC,EAFa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WA0B/BK,GACGoD,EAACY,EAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,EAAC2B,EAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAACC,GAAeL,KAAK,eAAcG,SAAA,uBAGnCC,EAACgB,EAAS,CAAA,eAAA,UAER"}
+{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n * @keywords alert, feedback, notification, snackbar\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","BodyBL","styles.description","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"+xCAmBA,MAAMA,EAA4B,IAG5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAWGC,EAASC,IAAA,IAAAC,KAClBA,EAAO,gBACPC,EAAKC,MACLA,EAAKC,UACLA,EAASC,YACTA,EAAWC,gBACXA,EAAkBjB,EAAyBkB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYT,EACTU,EAAUC,EAAAX,EAVK,CAAA,OAAA,QAAA,QAAA,YAAA,cAAA,kBAAA,YAAA,QAAA,iBAelB,MAAMY,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAWC,EAAsB,MAKvCC,GAAU,KACNJ,GAAW,EAAK,GACjB,IAEHI,GAAU,KACN,IAAKd,EAAa,OAElB,MAAMe,EAAUC,YAAW,KACvBN,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMgB,aAAaF,EAAQ,GACnC,CAACf,EAAaC,IAEjBa,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhBzB,EAAAY,EAASc,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBf,GAAW,EAAM,EAMfkB,EAAcC,EAAU,CAC1BC,QAASrB,EAAY,EAAI,EACzBsB,UAAWtB,EACLG,EACI,iBACA,iBACJA,EACA,qBACA,mBACNoB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SA3FY,KA6FhBC,OAAQ,KACC5B,GAAWP,SAAAA,GAAa,IA0CrC,OACIoC,EAACC,EAASC,IAAGC,OAAAC,OAAA,CACTC,IAAKpC,EACLqC,MAAOhB,EACP7B,UAAW8C,EAAKC,EAAgB/C,GAAU,YAC/BH,EAAI,aACHO,EACZ4C,KAAK,QACLC,MAAOC,GAAYxC,IACfJ,EAAU,CAAA6C,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAEtD,IACjB0C,EAAA,MAAA,CAAKvC,UAAWsD,EAAqBH,SAAA,CACjCZ,EAAA,MAAA,CAAKvC,UAAWuD,EAAsB,YAAa1D,EAAIsD,SAAA,CAhDhD,MACf,MAAMK,EAAOtE,EAAeW,GAC5B,OAAO2D,GAAQJ,EAACI,qBAAmB,EA+CtBC,GACDlB,EAAA,MAAA,CAAKvC,UAAW0D,EAAoBP,SAAA,CAC/BrD,IA7Cb6D,EAAMC,eAAe9D,GACdA,EAGHsD,EAAA,KAAA,CAAIpD,UAAW6D,EAAcb,KAAK,eAAcG,SAC3CrD,KAyCIC,IAlCb4D,EAAMC,eAAe7D,GACdA,EAGHqD,EAFGtD,EAEFgE,EAAWC,OAMXD,EAAWE,OANM,CAAChE,UAAWiE,EAAkBd,SAC3CpD,WAiCJM,GACG+C,EAACc,EAAM,CACHlE,UAAWmE,EACXC,UAAU,QACVC,QAAShE,EAAagE,QACtBC,SAAS,QAAOnB,SAEf9C,EAAaN,WAI1BwC,EAACgC,GACGvE,UAAWwE,EACXH,QAAS3C,EAAayB,SAAA,CAEtBC,EAACC,EAAc,CAACL,KAAK,eAAcG,SAAA,uBAGnCC,EAACqB,EAAS,CAAA,eAAA,UAEH"}

package/toast/toast.styles.d.ts

@@ -1,35 +1,8 @@
-import { ToastType } from "./types";
-interface StyleProps {
-    $type: ToastType;
-    $fixed?: boolean | undefined;
-}
-export declare const Wrapper: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string>;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TextIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const DescriptionMD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const DescriptionBL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const contentWrapper: import("@linaria/core").LinariaClassName;
+export declare const textIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;

package/toast/toast.styles.js

@@ -1,99 +1,2 @@
-import{animated as e}from"@react-spring/web";import r,{css as o}from"styled-components";import{Button as i}from"../button/button.js";import{ClickableIcon as t}from"../shared/clickable-icon/clickable-icon.js";import{Radius as n,MediaQuery as a,Font as d,Colour as c}from"../theme/index.js";import{Typography as s}from"../typography/typography.js";const l=e=>{const r={success:{Background:"bg-success",Border:"border-success",Text:"text-success",Icon:"icon-success"},warning:{Background:"bg-warning",Border:"border-warning",Text:"text-warning",Icon:"icon-warning"},error:{Background:"bg-error",Border:"border-error",Text:"text-error",Icon:"icon-error"},info:{Background:"bg-info",Border:"border-info",Text:"text-info",Icon:"icon-info"}}[e.$type];return{Background:c[r.Background],Border:c[r.Border],Text:c[r.Text],Icon:c[r.Icon]}},g=e(r.div`
-    display: flex;
-    flex-direction: row;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    margin: ${e=>e.$fixed?"1rem":0};
-    top: 0;
-    right: 0;
-    padding: 1rem;
-    border-radius: ${n.md};
-    z-index: 10;
-    align-items: center;
-    gap: 2rem;
-
-    ${a.MaxWidth.lg} {
-        left: 0;
-    }
-
-    ${e=>o`
-            background: ${l(e).Background};
-            border: 1px solid ${l(e).Border};
-            color: ${l(e).Text};
-        `};
-`),m=r.div`
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    flex: 1;
-    justify-content: space-between;
-
-    ${a.MaxWidth.sm} {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-`,x=r.div`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    ${e=>o`
-            & > svg {
-                flex-shrink: 0;
-                width: 1.5rem;
-                height: 1.5rem;
-                margin-top: 0.0625rem;
-                margin-right: 0.5rem;
-                color: ${l(e).Icon};
-            }
-        `};
-`,f=r.div`
-    display: flex;
-    flex-direction: column;
-`,p=r.h2`
-    display: flex;
-    ${d["body-baseline-semibold"]}
-
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,$=r(s.BodyMD)`
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,h=r(s.BodyBL)`
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,u=r(i.Small)`
-    align-self: center;
-    margin-left: auto;
-    height: auto;
-    width: fit-content;
-    flex-shrink: 0;
-
-    ${a.MaxWidth.sm} {
-        align-self: flex-start;
-        margin-left: 2rem;
-    }
-`,b=r(t)`
-    padding: 0.75rem;
-    margin: -0.75rem;
-    align-self: stretch;
-
-    ${e=>o`
-            svg {
-                width: 1.5rem;
-                height: 1.5rem;
-                color: ${l(e).Text};
-            }
-            &:hover {
-                background: transparent;
-            }
-            ${a.MaxWidth.sm} {
-                align-self: center;
-            }
-        `};
-`;export{u as ActionButton,m as ContentWrapper,h as DescriptionBL,$ as DescriptionMD,b as DismissButton,f as TextContainer,x as TextIconWrapper,p as Title,g as Wrapper};
+import"./toast.styles_57j3lf.css";const t="wqf508q",s="c1ll5mdk",l="t1mt05g8",o="t1j1n9on",e="t1see4ey",m="dmmbr7j",d="a10z10pl",j="d1jd4l4i";export{d as actionButton,s as contentWrapper,m as description,j as dismissButton,o as textContainer,l as textIconWrapper,e as title,t as wrapper};
 //# sourceMappingURL=toast.styles.js.map