npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/cjs/calendar/calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),l=require("react");require("../shared/internal-calendar/calendar-dropdown.js");var r=require("../shared/internal-calendar/internal-calendar.js"),n=require("./calendar.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.Calendar=a=>{const{className:t,styleType:d="bordered",variant:o,id:s,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,"data-testid":p}=a,y="multi"===a.variant,x=y?void 0:a.value,S=y?a.values:void 0,C=y?a.minSelectable:void 0,f=y?a.maxSelectable:void 0,[j,w]=l.useState((()=>void 0!==S?S:void 0!==x?[x]:[]));l.useEffect((()=>{w(void 0===S?void 0===x?[]:[x]:S)}),[x,S]);return e.jsx("div",{className:i.default(n.wrapper,"bordered"===d&&n.wrapperBordered,t),id:s,"data-testid":p,children:e.jsx(r.InternalCalendar,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:o,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,onSelect:e=>{var l,r;w([e]),"multi"!==a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e),null===(r=a.onSelect)||void 0===r||r.call(a,e))},onChange:e=>{var l;w(e),"multi"===a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e))},minSelectable:C,maxSelectable:f})})};
+"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),l=require("react");require("../shared/internal-calendar/calendar-dropdown.js");var n=require("../shared/internal-calendar/internal-calendar.js"),r=require("./calendar.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.Calendar=a=>{const{className:t,styleType:d="bordered",variant:o="single",id:s,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,"data-testid":p}=a,y="multi"===a.variant,x=y?void 0:a.value,S=y?a.values:void 0,C=y?a.minSelectable:void 0,f=y?a.maxSelectable:void 0,[j,w]=l.useState((()=>void 0!==S?S:void 0!==x?[x]:[]));l.useEffect((()=>{w(void 0===S?void 0===x?[]:[x]:S)}),[x,S]);return e.jsx("div",{className:i.default(r.wrapper,"bordered"===d&&r.wrapperBordered,t),id:s,"data-testid":p,children:e.jsx(n.InternalCalendar,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:o,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,onSelect:e=>{var l,n;w([e]),"multi"!==a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e),null===(n=a.onSelect)||void 0===n||n.call(a,e))},onChange:e=>{var l;w(e),"multi"===a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e))},minSelectable:C,maxSelectable:f})})};
 //# sourceMappingURL=calendar.js.map

package/cjs/calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant,\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAOyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,~~EAAOC~~,~~GACPA~~,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}
1	+ {"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant = \"single\",\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAOyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/cjs/calendar/calendar.styles_11ho5x8.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
-.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}
+@layer fds{.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
+.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}}

package/cjs/card/card.styles_1gh9gs3.css CHANGED Viewed

@@ -1,3 +1,3 @@
-.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
+@layer fds{.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
 .c10ivu5q{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}
+.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}}

package/cjs/checkbox/checkbox.styles_gm5bu1.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.i76s810{-webkit-animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;width:100%;height:100%;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}@-webkit-keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}@keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}
+@layer fds{.i76s810{-webkit-animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;width:100%;height:100%;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}@-webkit-keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}@keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}
 .ue1dgoy{color:var(--fds-colour-icon-primary-subtlest);}
 .s8wyls8{color:var(--fds-colour-icon-selected);}
 .i1k0dk4y{color:var(--fds-colour-icon-disabled-subtle);}
@@ -6,4 +6,4 @@
 .c1rz5cog{height:1.5rem;width:1.5rem;}
 .iidy4i6{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;}
 @media (pointer: fine){.isykh53:hover+svg{color:var(--fds-colour-icon-hover);}}
-.iihjvql{cursor:not-allowed;}
+.iihjvql{cursor:not-allowed;}}

package/cjs/countdown-timer/countdown-timer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n formatUnitValue,\n useApplyStyle,\n useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const isMounted = useIsMounted();\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useApplyStyle(fixedCountdownRef, {\n [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n [styles.tokens.fixedCountdown.left]: formatUnitValue(\n getOffsetLeft(),\n \"px\"\n ),\n [styles.tokens.fixedCountdown.right]: formatUnitValue(\n getOffsetRight(),\n \"px\"\n ),\n });\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n function getOffsetLeft() {\n if (!isMounted \|\| align !== \"left\") return undefined;\n return offset?.left ?? clientRectX;\n }\n\n function getOffsetRight() {\n if (!isMounted \|\| align !== \"right\") return undefined;\n return (\n offset?.right ??\n Math.floor(document.body.clientWidth - clientRectRight)\n );\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n <div className={styles.timeLeft}>Time left:</div>\n <div\n className={styles.timer}\n aria-label={getAccessibleTimeText(remainingSeconds)}\n >\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </div>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderInlineCountdown = () => {\n return (\n <div\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n data-warn={!!warn}\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n className={clsx(\n styles.countdown,\n styles.countdownInline,\n !isVisible && styles.countdownHidden\n )}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n const renderFixedCountdown = () => {\n return (\n <div\n ref={fixedCountdownRef}\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n data-warn={!!warn}\n className={clsx(styles.countdown, styles.countdownFixed)}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <div className={clsx(styles.wrapper, className)} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderInlineCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </div>\n );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}
1	+ {"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n formatUnitValue,\n useApplyStyle,\n useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n/*\n Displays a live countdown of time remaining until a deadline.\n \n Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n /\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const isMounted = useIsMounted();\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useApplyStyle(fixedCountdownRef, {\n [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n [styles.tokens.fixedCountdown.left]: formatUnitValue(\n getOffsetLeft(),\n \"px\"\n ),\n [styles.tokens.fixedCountdown.right]: formatUnitValue(\n getOffsetRight(),\n \"px\"\n ),\n });\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n function getOffsetLeft() {\n if (!isMounted \|\| align !== \"left\") return undefined;\n return offset?.left ?? clientRectX;\n }\n\n function getOffsetRight() {\n if (!isMounted \|\| align !== \"right\") return undefined;\n return (\n offset?.right ??\n Math.floor(document.body.clientWidth - clientRectRight)\n );\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n <div className={styles.timeLeft}>Time left:</div>\n <div\n className={styles.timer}\n aria-label={getAccessibleTimeText(remainingSeconds)}\n >\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </div>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderInlineCountdown = () => {\n return (\n <div\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n data-warn={!!warn}\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n className={clsx(\n styles.countdown,\n styles.countdownInline,\n !isVisible && styles.countdownHidden\n )}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n const renderFixedCountdown = () => {\n return (\n <div\n ref={fixedCountdownRef}\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n data-warn={!!warn}\n className={clsx(styles.countdown, styles.countdownFixed)}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <div className={clsx(styles.wrapper, className)} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderInlineCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </div>\n );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/cjs/countdown-timer/countdown-timer.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./countdown-timer.styles_k50tkw.css");exports.countdown="c1ji5mw9",exports.countdownFixed="c1ehax2j",exports.countdownHidden="csdqyky",exports.countdownInline="cibq1kp",exports.timeLeft="t6f42l5",exports.timer="t19x1azi",exports.timerIcon="t1pvvziw",exports.tokens={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},exports.wrapper="wav7a6b";
+"use strict";require("./countdown-timer.styles_ipn1b0.css");exports.countdown="c1ji5mw9",exports.countdownFixed="c1ehax2j",exports.countdownHidden="csdqyky",exports.countdownInline="cibq1kp",exports.timeLeft="t6f42l5",exports.timer="t19x1azi",exports.timerIcon="t1pvvziw",exports.tokens={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},exports.wrapper="wav7a6b";
 //# sourceMappingURL=countdown-timer.styles.js.map

package/cjs/countdown-timer/{countdown-timer.styles_k50tkw.css → countdown-timer.styles_ipn1b0.css} RENAMED Viewed

@@ -1,8 +1,8 @@
-.wav7a6b{width:100%;}
-.c1ji5mw9{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
+@layer fds{.wav7a6b{width:100%;}
+.c1ji5mw9{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
 .csdqyky{opacity:0;}
 .cibq1kp{position:relative;}
 .c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}
 .t6f42l5{font-weight:var(--fds-font-weight-bold);margin-left:var(--fds-spacing-8);margin-right:var(--fds-spacing-24);}:where(body.fds-breakpoint-sm-max) .t6f42l5{margin-right:var(--fds-spacing-48);}
 .t19x1azi{font-weight:var(--fds-font-weight-semibold);margin-left:auto;}
-.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}
+.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}}

package/cjs/dashed-border/dashed-border.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),u=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js"),a=require("../theme/utils/token-resolver.js"),t=require("../theme/utils/use-apply-styles.js"),n=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/styling-helper.js"),k=require("./dashed-border.styles.js"),m=require("./dashed-border.utils.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(s);const q=u.forwardRef(((s,h)=>{const{enabled:q=!0,thickness:v=o.BorderThickness["width-010"],radius:f=l.Radius.none,colour:b=i.Colour.border,backgroundColor:g,className:y,children:T}=s,p=e.__rest(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),C=n.useResolvedTokenValue({value:v,fallback:o.BorderThickness["width-010"],isToken:c.isThicknessToken,normalizeCustom:a.toCssValue}),R=n.useResolvedTokenValue({value:f,fallback:l.Radius.none,isToken:c.isRadiusToken,normalizeCustom:a.toCssValue}),x=n.useResolvedTokenValue({value:b,fallback:i.Colour.border,isToken:c.isColourToken,normalizeCustom:String}),B=n.useResolvedTokenValue({value:g,fallback:"none",isToken:c.isColourToken,normalizeCustom:String}),V=q||!!g,S=m.createSvgBackgroundImage({radius:R,colour:x,thickness:C,enabled:q}),z=u.useRef(null),N=u.useRef(null),_=h?d.mergeRefs(z,h):z;return t.useApplyStyle(z,{[k.tokens.rootRadius]:R,[k.tokens.rootBackgroundColor]:g?B:null}),t.useApplyStyle(N,{[k.tokens.overlayBackgroundImage]:V?S:null}),r.jsxs("div",Object.assign({ref:_,className:j.default(k.root,y)},p,{children:[V&&r.jsx("div",{"aria-hidden":"true",className:k.overlay,ref:N}),T]}))}));exports.DashedBorder=q;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),u=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js"),a=require("../theme/utils/use-apply-styles.js"),t=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js");var n=require("../theme/utils/token-resolver.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/styling-helper.js"),k=require("./dashed-border.styles.js"),m=require("./dashed-border.utils.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(s);const q=u.forwardRef(((s,h)=>{const{enabled:q=!0,thickness:v=o.BorderThickness["width-010"],radius:f=l.Radius.none,colour:b=i.Colour.border,backgroundColor:g,className:y,children:T}=s,p=e.__rest(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),C=t.useResolvedTokenValue({value:v,fallback:o.BorderThickness["width-010"],isToken:c.isThicknessToken,normalizeCustom:n.toCssValue}),R=t.useResolvedTokenValue({value:f,fallback:l.Radius.none,isToken:c.isRadiusToken,normalizeCustom:n.toCssValue}),x=t.useResolvedTokenValue({value:b,fallback:i.Colour.border,isToken:c.isColourToken,normalizeCustom:String}),B=t.useResolvedTokenValue({value:g,fallback:"none",isToken:c.isColourToken,normalizeCustom:String}),V=q||!!g,S=m.createSvgBackgroundImage({radius:R,colour:x,thickness:C,enabled:q}),z=u.useRef(null),N=u.useRef(null),_=h?d.mergeRefs(z,h):z;return a.useApplyStyle(z,{[k.tokens.rootRadius]:R,[k.tokens.rootBackgroundColor]:g?B:null}),a.useApplyStyle(N,{[k.tokens.overlayBackgroundImage]:V?S:null}),r.jsxs("div",Object.assign({ref:_,className:j.default(k.root,y)},p,{children:[V&&r.jsx("div",{"aria-hidden":"true",className:k.overlay,ref:N}),T]}))}));exports.DashedBorder=q;
 //# sourceMappingURL=dashed-border.js.map

package/cjs/dashed-border/dashed-border.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport {\n BorderThickness~~,\n~~ Colour~~,\n~~ Radius~~,\n~~ toCssValue~~,\n useApplyStyle,\n~~ useResolvedTokenValue~~,\n~~} from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"~~6gCAqBA~~,~~MAqFaA~~,EAAeC,EAAAA,~~YArFV~~,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}
1	+ {"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\n/*\n A container that renders a dashed border using an SVG overlay.\n \n Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ihCAeA,MA2FaA,EAAeC,EAAAA,YA3FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}

package/cjs/dashed-border/dashed-border.styles_zszoox.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
-.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}
+@layer fds{.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
+.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}}

package/cjs/data-table/data-table.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),n=require("react"),l=require("../external/react-intersection-observer/index.js"),s=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var a=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var o=require("../checkbox/checkbox.js"),d=require("../error-display/error-display.js"),c=require("../shared/accessibility/index.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var p=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var y=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var g=require("../util/use-event-listener.js"),m=require("./data-table.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=b(i);exports.DataTable=i=>{var{id:b,headers:x,rows:f,className:w,sortIndicators:v,alternatingRows:C,loadState:S="success",enableMultiSelect:k,selectedIds:q,disabledIds:B,enableActionBar:N,enableSelectAll:$,enableStickyHeader:H,emptyView:R,actionBarContent:I,renderCustomEmptyView:W,onHeaderClick:A,onSelect:T,onSelectAll:V,onClearSelectionClick:D}=i,E=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const L=n.useRef(null),M=n.useRef(null),F=n.useRef(null),K=n.useRef(null),_=n.useRef(null),z=y.useId(),Y=x.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[O,P]=n.useState(!1),[U,G]=n.useState(!1),[J,Q]=n.useState(!1),[X,Z]=n.useState(!1),{ref:ee,inView:te}=l.useInView();h.useApplyStyle(K,{[m.tokens.actionBarWrapperLeft]:J&&L.current?`${L.current.getBoundingClientRect().left}px`:void 0,[m.tokens.actionBarWrapperWidth]:J&&L.current?`${L.current.clientWidth}px`:void 0});const re=n.useCallback((()=>{if(!_.current||!K.current)return;const e=_.current.scrollHeight>_.current.clientHeight;P(e),e?K.current.style.transform="translateY(0)":ge()}),[]);n.useEffect((()=>{re()}),[]),s.useResizeDetector({onResize:re});g.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{O?ye():ge()}))}),"window"),n.useEffect((()=>{me()}),[f]);const ie=()=>(null==q?void 0:q.length)===(null==f?void 0:f.length),ne=e=>!!(null==q?void 0:q.includes(e)),le=e=>!!C&&e%2==1,se=e=>!!(null==B?void 0:B.includes(e)),ae=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},oe=()=>x.length+(k?1:0),de=e=>null==v?void 0:v[e],ce=e=>{const t=de(e);if(t)return"asc"===t?"ascending":"descending"},ue=e=>` by ${"asc"===de(e)?"descending":"ascending"} order`,he=(e,t)=>`${z}-row-${e}-${t}-key-column`,pe=e=>{const t=Y.map((t=>he(e,t.fieldKey)));return c.concatIds(...t)},ye=()=>{if(!_.current)return;const e=_.current.getBoundingClientRect();Q(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},ge=()=>{if(!(L.current&&M.current&&_.current&&K.current&&F.current))return;const e=M.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=L.current.getBoundingClientRect().height-F.current.clientHeight-32,i=Math.min(t,r);K.current.style.transform=`translateY(-${i}px)`}else K.current.style.transform="translateY(0)"},me=()=>{L.current&&_.current&&Z(L.current.clientHeight+(N?56:0)<_.current.clientHeight)},be=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!de(r),a=(e=>`${z}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ae(`header-${r}`),className:j.default(m.headerCell,n&&m.headerCellClickable),scope:"col","aria-sort":ce(r),style:l,onClick:()=>(e=>{null==A||A(e)})(r),children:[t.jsxs("div",{className:m.headerCellContent,id:a,children:["string"==typeof i?t.jsx(p.Typography.BodyBL,{weight:"bold",children:i}):i,je(r)]}),(n||s)&&t.jsx(c.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==A||A(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&ue(r)]})})]},r)},je=e=>{const i=null==v?void 0:v[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},xe=()=>t.jsx("th",{"data-testid":ae("header-selection"),className:j.default(m.headerCell,m.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:m.selectionCheckboxWrapper,children:[t.jsx(c.VisuallyHidden,{children:"Row selection"}),$&&t.jsx(o.Checkbox,{checked:ie(),indeterminate:!!q&&0!==q.length&&!ie(),"aria-label":"Select all rows",onClick:()=>{V&&V(ie())}})]})}),fe=(e,r)=>{const i="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],a=`${l}-${n}`;let o;return o="string"==typeof s||"number"==typeof s?t.jsx(p.Typography.BodyBL,{className:m.bodyCellText,children:s}):"function"==typeof s?s(r,{isSelected:ne(l)}):s,t.jsx("td",{"data-testid":ae(`row-${a}`),id:he(l,n),className:m.bodyCell,style:i,children:o},a)},we=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ae(`row-${r}-selection`),className:j.default(m.bodyCell,m.bodyCellCheckbox),children:t.jsx("div",{className:m.selectionCheckboxWrapper,children:t.jsx(o.Checkbox,{checked:ne(r),"aria-labelledby":pe(r),onClick:()=>{T&&T(r,!ne(r))},disabled:se(r),focusableWhenDisabled:se(r)})})})},ve=()=>{let e;return e=(null==R?void 0:R.title)?"string"==typeof R.title?t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:R.title}):R.title:t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(d.ErrorDisplay,Object.assign({type:"no-item-found"},R,{title:e,description:(null==R?void 0:R.description)?R.description:"No matching rows"}))};return t.jsxs("div",{id:b||"table-wrapper","data-testid":E["data-testid"]||"table",className:j.default(m.tableWrapper,w),ref:_,onScroll:()=>{O&&_.current&&G(_.current.scrollTop+_.current.clientHeight>=_.current.scrollHeight)},tabIndex:0,children:[t.jsx("div",{className:m.tableContainer,children:t.jsxs("table",{ref:L,className:j.default(m.table),children:[t.jsx("thead",{ref:F,className:H?m.stickyHeader:void 0,children:t.jsxs("tr",{className:m.headerRow,children:[k&&xe(),x.map(be)]})}),t.jsx("tbody",{children:"success"===S?!f||f.length<1?t.jsx("tr",{children:t.jsx("td",{className:m.emptyStateCell,colSpan:oe(),children:W?W():ve()})}):t.jsx(t.Fragment,{children:null==f?void 0:f.map(((e,r)=>t.jsxs("tr",{"data-testid":ae(`row-${e.id.toString()}`),className:j.default(m.bodyRow,X&&m.bodyRowWithBottomBorder,le(r)&&m.bodyRowAlternating,k&&m.bodyRowSelectable,ne(e.id.toString())&&m.bodyRowSelected),children:[k&&we(e),x.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx("tr",{children:t.jsx("td",{colSpan:oe(),children:t.jsx("div",{className:m.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===S&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),N&&q&&q.length>0&&(()=>{var e;const r=null!==(e=null==q?void 0:q.length)&&void 0!==e?e:0,i=O&&!U||!O&&!te||J;return t.jsx("div",{ref:K,className:j.default(m.actionBarWrapper,J&&m.actionBarWrapperFloating),children:t.jsxs("div",{className:j.default(m.actionBar,i&&m.actionBarFloating),children:[t.jsx(p.Typography.BodyMD,{weight:"semibold",children:`${r} item${r>1?"s":""} selected`}),t.jsx(u.BasicButton,{className:m.actionBarButton,type:"button","aria-label":`Clear selection of ${r} item${1===r?"":"s"}`,onClick:D,children:"Clear selection"}),I]})})})(),t.jsx("div",{ref:e=>{M.current=e,ee(e)}})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),n=require("react"),l=require("../external/react-intersection-observer/index.js"),s=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var a=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var o=require("../checkbox/checkbox.js"),d=require("../error-display/error-display.js"),c=require("../shared/accessibility/index.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var p=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var y=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var g=require("../util/use-event-listener.js"),m=require("./data-table.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=b(i);exports.DataTable=i=>{var{id:b,headers:x,rows:f,className:w,sortIndicators:C,alternatingRows:v,loadState:S="success",enableMultiSelect:k,selectedIds:q,disabledIds:N,enableActionBar:B,enableSelectAll:$,enableStickyHeader:R,emptyView:H,actionBarContent:I,renderCustomEmptyView:W,onHeaderClick:A,onSelect:T,onSelectAll:V,onClearSelectionClick:D}=i,E=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const L=n.useRef(null),M=n.useRef(null),F=n.useRef(null),K=n.useRef(null),_=n.useRef(null),z=y.useId(),Y=x.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[O,P]=n.useState(!1),[U,G]=n.useState(!1),[J,Q]=n.useState(!1),[X,Z]=n.useState(!1),{ref:ee,inView:te}=l.useInView();h.useApplyStyle(K,{[m.tokens.actionBarWrapperLeft]:J&&L.current?`${L.current.getBoundingClientRect().left}px`:void 0,[m.tokens.actionBarWrapperWidth]:J&&L.current?`${L.current.clientWidth}px`:void 0});const re=n.useCallback((()=>{if(!_.current||!K.current)return;const e=_.current.scrollHeight>_.current.clientHeight;P(e),e?K.current.style.transform="translateY(0)":ge()}),[]);n.useEffect((()=>{re()}),[]),s.useResizeDetector({onResize:re});g.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{O?ye():ge()}))}),"window"),n.useEffect((()=>{me()}),[f]);const ie=()=>!!(f&&f.length&&q)&&q.length===f.length,ne=e=>!!(null==q?void 0:q.includes(e)),le=e=>!!v&&e%2==1,se=e=>!!(null==N?void 0:N.includes(e)),ae=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},oe=()=>x.length+(k?1:0),de=e=>null==C?void 0:C[e],ce=e=>{const t=de(e);if(t)return"asc"===t?"ascending":"descending"},ue=e=>` by ${"asc"===de(e)?"descending":"ascending"} order`,he=(e,t)=>`${z}-row-${e}-${t}-key-column`,pe=e=>{const t=Y.map((t=>he(e,t.fieldKey)));return c.concatIds(...t)},ye=()=>{if(!_.current)return;const e=_.current.getBoundingClientRect();Q(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},ge=()=>{if(!(L.current&&M.current&&_.current&&K.current&&F.current))return;const e=M.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=L.current.getBoundingClientRect().height-F.current.clientHeight-32,i=Math.min(t,r);K.current.style.transform=`translateY(-${i}px)`}else K.current.style.transform="translateY(0)"},me=()=>{L.current&&_.current&&Z(L.current.clientHeight+(B?56:0)<_.current.clientHeight)},be=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!de(r),a=(e=>`${z}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ae(`header-${r}`),className:j.default(m.headerCell,n&&m.headerCellClickable),scope:"col","aria-sort":ce(r),style:l,onClick:()=>(e=>{null==A||A(e)})(r),children:[t.jsxs("div",{className:m.headerCellContent,id:a,children:["string"==typeof i?t.jsx(p.Typography.BodyBL,{weight:"bold",children:i}):i,je(r)]}),(n||s)&&t.jsx(c.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==A||A(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&ue(r)]})})]},r)},je=e=>{const i=null==C?void 0:C[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},xe=()=>t.jsx("th",{"data-testid":ae("header-selection"),className:j.default(m.headerCell,m.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:m.selectionCheckboxWrapper,children:[t.jsx(c.VisuallyHidden,{children:"Row selection"}),$&&t.jsx(o.Checkbox,{checked:ie(),indeterminate:!!q&&0!==q.length&&!ie(),disabled:!f||!f.length||!q,"aria-label":"Select all rows",onClick:()=>{V&&V(ie())}})]})}),fe=(e,r)=>{const i="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],a=`${l}-${n}`;let o;return o="string"==typeof s||"number"==typeof s?t.jsx(p.Typography.BodyBL,{className:m.bodyCellText,children:s}):"function"==typeof s?s(r,{isSelected:ne(l)}):s,t.jsx("td",{"data-testid":ae(`row-${a}`),id:he(l,n),className:m.bodyCell,style:i,children:o},a)},we=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ae(`row-${r}-selection`),className:j.default(m.bodyCell,m.bodyCellCheckbox),children:t.jsx("div",{className:m.selectionCheckboxWrapper,children:t.jsx(o.Checkbox,{checked:ne(r),"aria-labelledby":pe(r),onClick:()=>{T&&T(r,!ne(r))},disabled:se(r),focusableWhenDisabled:se(r)})})})},Ce=()=>{let e;return e=(null==H?void 0:H.title)?"string"==typeof H.title?t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:H.title}):H.title:t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(d.ErrorDisplay,Object.assign({type:"no-item-found"},H,{title:e,description:(null==H?void 0:H.description)?H.description:"No matching rows"}))};return t.jsxs("div",{id:b||"table-wrapper","data-testid":E["data-testid"]||"table",className:j.default(m.tableWrapper,w),ref:_,onScroll:()=>{O&&_.current&&G(_.current.scrollTop+_.current.clientHeight>=_.current.scrollHeight)},tabIndex:0,children:[t.jsx("div",{className:m.tableContainer,children:t.jsxs("table",{ref:L,className:j.default(m.table),children:[t.jsx("thead",{ref:F,className:R?m.stickyHeader:void 0,children:t.jsxs("tr",{className:m.headerRow,children:[k&&xe(),x.map(be)]})}),t.jsx("tbody",{children:"success"===S?!f||f.length<1?t.jsx("tr",{className:m.bodyRow,children:t.jsx("td",{className:m.emptyStateCell,colSpan:oe(),children:W?W():Ce()})}):t.jsx(t.Fragment,{children:null==f?void 0:f.map(((e,r)=>t.jsxs("tr",{"data-testid":ae(`row-${e.id.toString()}`),className:j.default(m.bodyRow,X&&m.bodyRowWithBottomBorder,le(r)&&m.bodyRowAlternating,k&&m.bodyRowSelectable,ne(e.id.toString())&&m.bodyRowSelected),children:[k&&we(e),x.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx("tr",{className:m.bodyRow,children:t.jsx("td",{colSpan:oe(),children:t.jsx("div",{className:m.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===S&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),B&&q&&q.length>0&&(()=>{var e;const r=null!==(e=null==q?void 0:q.length)&&void 0!==e?e:0,i=O&&!U||!O&&!te||J;return t.jsx("div",{ref:K,className:j.default(m.actionBarWrapper,J&&m.actionBarWrapperFloating),children:t.jsxs("div",{className:j.default(m.actionBar,i&&m.actionBarFloating),children:[t.jsx(p.Typography.BodyMD,{weight:"semibold",children:`${r} item${r>1?"s":""} selected`}),t.jsx(u.BasicButton,{className:m.actionBarButton,type:"button","aria-label":`Clear selection of ${r} item${1===r?"":"s"}`,onClick:D,children:"Clear selection"}),I]})})})(),t.jsx("div",{ref:e=>{M.current=e,ee(e)}})]})};
 //# sourceMappingURL=data-table.js.map

package/cjs/data-table/data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n return selectedIds?.length === rows?.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","disabled","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRow","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"+4CAkB0BA,QAAAC,GACtBA,EAAEC,QACFA,EAAOC,KACPA,EAAIC,UACJA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,UACfA,EAAY,UAASC,kBACrBA,EAAiBC,YACjBA,EAAWC,YACXA,EAAWC,gBACXA,EAAeC,gBACfA,EAAeC,mBACfA,EAAkBC,UAClBA,EAASC,iBACTA,EAAgBC,sBAChBA,EAAqBC,cACrBA,EAAaC,SACbA,EAAQC,YACRA,EAAWC,sBACXA,KACGC,EAAUC,EAAAA,OAAAtB,EArBS,CAAA,KAAA,UAAA,OAAA,YAAA,iBAAA,kBAAA,YAAA,oBAAA,cAAA,cAAA,kBAAA,kBAAA,qBAAA,YAAA,mBAAA,wBAAA,gBAAA,WAAA,cAAA,0BA0BtB,MAAMuB,EAAWC,EAAAA,OAAyB,MACpCC,EAAcD,EAAAA,OAA8B,MAC5CE,EAAYF,EAAAA,OAAgC,MAC5CG,EAAeH,EAAAA,OAAuB,MACtCI,EAAaJ,EAAAA,OAAuB,MACpCK,EAAaC,EAAAA,QACbC,EAAa7B,EAAQ8B,QACtBC,GAC4B,iBAAXA,KAAyBA,EAAOC,aAI/CC,EAAYC,GAAiBC,EAAAA,UAAS,IACtCC,EAAWC,GAAgBF,EAAAA,UAAS,IACpCG,EAAqBC,GAA0BJ,EAAAA,UAAS,IACxDK,EAAgBC,GAAqBN,EAAAA,UAAS,IAE7CO,IAAKC,GAAQC,OAAQC,IAAQC,EAAAA,YAErCC,EAAAA,cAActB,EAAc,CACxB,CAACuB,SAAcC,sBACXX,GAAuBjB,EAAS6B,QAC1B,GAAG7B,EAAS6B,QAAQC,wBAAwBC,cAC5CC,EACV,CAACL,SAAcM,uBACXhB,GAAuBjB,EAAS6B,QAC1B,GAAG7B,EAAS6B,QAAQK,qBACpBF,IAMd,MAAMG,GAAWC,EAAAA,aAAY,KACzB,IAAK/B,EAAWwB,UAAYzB,EAAayB,QACrC,OAEJ,MAAMjB,EACFP,EAAWwB,QAAQQ,aAAehC,EAAWwB,QAAQS,aACzDzB,EAAcD,GAEVA,EACAR,EAAayB,QAAQU,MAAMC,UAAY,gBAEvCC,IACJ,GACD,IAEHC,EAAAA,WAAU,KACNP,IAAU,GACX,IAEHQ,EAAAA,kBAAkB,CAAER,cAYpBS,mBAAiB,UAVK,KAClBC,uBAAsB,KACdjC,EACAkC,KAEAL,IACJ,GACF,GAGoC,UAE1CC,EAAAA,WAAU,KACNK,IAAiB,GAClB,CAACnE,IAKJ,MAAMoE,GAAwB,KACnB9D,aAAW,EAAXA,EAAa+D,WAAWrE,aAAI,EAAJA,EAAMqE,QAWnCC,GAAiBC,MACVjE,aAAW,EAAXA,EAAakE,SAASD,IAG7BE,GAAoBC,KACbvE,GAAmBuE,EAAQ,GAAM,EAGxCC,GAAiBJ,MACVhE,aAAW,EAAXA,EAAaiE,SAASD,IAG7BK,GAAiBC,IACnB,GAAK3D,EAAW,eAChB,MAAO,GAAGA,EAAW,kBAAkB2D,GAAQ,EAG7CC,GAAkB,IACb/E,EAAQsE,QAAUhE,EAAoB,EAAI,GAG/C0E,GAAoBC,GACf9E,aAAc,EAAdA,EAAiB8E,GAGtBC,GAAqBD,IACvB,MAAME,EAAgBH,GAAiBC,GAEvC,GAAKE,EAIL,MAAyB,QAAlBA,EAA0B,YAAc,YAAY,EAGzDC,GAA0BH,GAIrB,OAF4B,QAA/BD,GAAiBC,GAAsB,aAAe,oBAQxDI,GAAY,CAACb,EAAeS,IACvB,GAAGtD,SAAkB6C,KAASS,eAGnCK,GAAgCd,IAClC,MAAMe,EAAe1D,EAAW2D,KAAKzD,GACjCsD,GAAUb,EAAOzC,EAAOkD,YAG5B,OAAOQ,EAAAA,aAAaF,EAAa,EAG/BpB,GAA2B,KAC7B,IAAKzC,EAAWwB,QACZ,OAEJ,MAAMwC,EAAgBhE,EAAWwB,QAAQC,wBACzCZ,EACImD,EAAcC,OAASC,OAAOC,YAAc,IACxCH,EAAcI,IAAMF,OAAOC,YAAc,IAChD,EAGC/B,GAA4B,KAC9B,KACKzC,EAAS6B,SACT3B,EAAY2B,SACZxB,EAAWwB,SACXzB,EAAayB,SACb1B,EAAU0B,SAEX,OAGJ,MAAM6C,EAAYxE,EAAY2B,QAAQC,wBAEtC,GAAI4C,EAAUD,IAAMF,OAAOC,YAAa,CACpC,MAAMG,EAAeD,EAAUJ,OAASC,OAAOC,YACzCI,EACF5E,EAAS6B,QAAQC,wBAAwB+C,OACzC1E,EAAU0B,QAAQS,aAClB,GACEwC,EAAkBC,KAAKC,IACzBL,EACAC,GAGJxE,EAAayB,QAAQU,MAAMC,UAAY,eAAesC,MAC1D,MACI1E,EAAayB,QAAQU,MAAMC,UAAY,eAC3C,EAGEO,GAAkB,KACf/C,EAAS6B,SAAYxB,EAAWwB,SAIrCT,EACIpB,EAAS6B,QAAQS,cAAgBlD,EAAkB,GAAK,GACpDiB,EAAWwB,QAAQS,aAC1B,EAiCC2C,GAAoBvE,IACtB,MAAMkD,SACFA,EAAQsB,MACRA,EAAKC,UACLA,GAAY,EAAK5C,MACjBA,GACkB,iBAAX7B,EACL,CACIkD,SAAUlD,EACVwE,MAAOxE,EACP6B,WAAOP,GAEXtB,EAEA0E,IAAezB,GAAiBC,GAChCyB,EAhHc,CAACzB,GACd,GAAGtD,YAAqBsD,IA+GV0B,CAAgB1B,GACrC,OACI2B,EAAAA,KAAA,KAAA,CAAA,cACiB/B,GAAc,UAAUI,KAErC/E,UAAW2G,EAAAA,QACPC,EAAAA,WACAN,GAAaO,uBAEjBC,MAAM,MAAK,YACA9B,GAAkBD,GAC7BrB,MAAOA,EACPqD,QAAS,IAtDK,CAAChC,IACvBlE,SAAAA,EAAgBkE,EAAS,EAqDFiC,CAAkBjC,GAASkC,SAAA,CAE1CP,cAAK1G,UAAWkH,EAAAA,kBAA0BrH,GAAI2G,EAAYS,SAAA,CACpC,iBAAVZ,EACJc,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACC,OAAO,OAAML,SAC3BZ,IACe,EAIvBkB,GAAkBxC,OAErBuB,GAAaC,IACXY,MAACK,EAAAA,yBACGd,EAAAA,KAAA,SAAA,CACIK,QAAUU,GAjEF,EAC5BA,EACA1C,KAEA0C,EAAMC,kBACN7G,SAAAA,EAAgBkE,EAAS,EA6DD4C,CAAwBF,EAAO1C,GAASkC,SAAA,CAG3CV,GAAc,QACfY,EAAAA,IAAA,OAAA,CAAA,kBAAuBX,IACtBD,GAAcrB,GAAuBH,UA7B7CA,EAiCJ,EAIPwC,GAAqBxC,IACvB,MAAM6C,EAAW3H,eAAAA,EAAiB8E,GAElC,OAAK6C,EAGY,QAAbA,EAEIT,MAACU,EAAAA,YAAW,CAAA,eAAA,EAAA,cAEKlD,GAAc,UAAUI,eAK7CoC,MAACW,EAAAA,cAAa,CAAA,eAAA,EAAA,cAEGnD,GAAc,UAAUI,iBAblCoC,EAAAA,kBAcL,EAIJY,GAAuB,IAErBZ,EAAAA,IAAA,KAAA,CAAA,cACiBxC,GAAc,oBAC3B3E,UAAW2G,EAAAA,QAAKC,EAAAA,WAAmBoB,sBACnClB,MAAM,MAAKG,SAEXP,EAAAA,KAAA,MAAA,CAAK1G,UAAWiI,EAAAA,yBAA+BhB,SAAA,CAC3CE,EAAAA,IAACK,EAAAA,eAAc,CAAAP,SAAA,kBACdzG,GACG2G,MAACe,EAAAA,SAAQ,CACLC,QAAShE,KACTiE,gBA3Od/H,GACqB,IAAvBA,EAAY+D,SACXD,KAyOuD,aAC7B,kBACX4C,QAAS,KACDhG,GACAA,EAAYoD,KAChB,SA8CtBkE,GAAgB,CAACxG,EAAqByG,KACxC,MAAM5E,EAA0B,iBAAX7B,OAAsBsB,EAAYtB,EAAO6B,MACxDqB,EAA6B,iBAAXlD,EAAsBA,EAASA,EAAOkD,SACxDT,EAAQgE,EAAIzI,GAAG0I,WACfC,EAAWF,EAAIvD,GACf0D,EAAS,GAAGnE,KAASS,IAE3B,IAAI2D,EAaJ,OAXIA,EADoB,iBAAbF,GAA6C,iBAAbA,EAEnCrB,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACrH,UAAW2I,eAAmB1B,SAC5CuB,IAGkB,mBAAbA,EACAA,EAASF,EAAK,CAAEM,WAAYvE,GAAcC,KAE1CkE,EAIdrB,EAAAA,IAAA,KAAA,CAAA,cACiBxC,GAAc,OAAO8D,KAElC5I,GAAIsF,GAAUb,EAAOS,GACrB/E,UAAW6I,EAAAA,SACXnF,MAAOA,WAENgF,GALID,EAMJ,EAIPK,GAAqBR,IACvB,MAAMhE,EAAQgE,EAAIzI,GAAG0I,WAErB,OACIpB,EAAAA,wBACiBxC,GAAc,OAAOL,eAClCtE,UAAW2G,EAAAA,QAAKkC,EAAAA,SAAiBE,EAAAA,kBAAwB9B,SAEzDE,EAAAA,IAAA,MAAA,CAAKnH,UAAWiI,EAAAA,yBAA+BhB,SAC3CE,EAAAA,IAACe,EAAAA,SAAQ,CACLC,QAAS9D,GAAcC,GAAM,kBACZc,GAA6Bd,GAC9CyC,QAAS,KACDjG,GACAA,EAASwD,GAAQD,GAAcC,GACnC,EAEJ0E,SAAUtE,GAAcJ,GACxB2E,sBAAuBvE,GAAcJ,QAG5C,EAIP4E,GAAuB,KACzB,IAAIC,EAuBJ,OAZIA,GAVCzI,aAAS,EAATA,EAAW0I,OASsB,iBAApB1I,EAAU0I,MAEpBjC,EAAAA,IAACC,EAAAA,WAAWiC,UAAS,CACjBrJ,UAAWsJ,EAAAA,gBACXhC,OAAO,OAAML,SAEZvG,EAAU0I,QAIN1I,EAAU0I,MAjBnBjC,EAAAA,IAACC,aAAWiC,UAAS,CACjBrJ,UAAWsJ,kBACXhC,OAAO,gBAEN,qBAiBTH,EAAAA,IAACoC,EAAAA,aAAYC,OAAAC,OAAA,CACTC,KAAM,iBACFhJ,EAAS,CACb0I,MAAOD,EACPQ,aACIjJ,aAAS,EAATA,EAAWiJ,aACLjJ,EAAUiJ,YACV,qBAEZ,EA+DV,OACIjD,EAAAA,KAAA,MAAA,CACI7G,GAAIA,GAAM,gBAAe,cACZoB,EAAW,gBAAkB,QAC1CjB,UAAW2G,EAAAA,QAAKiD,eAAqB5J,GACrCwC,IAAKhB,EACLqI,SAAU,KACF9H,GAAcP,EAAWwB,SACzBb,EACIX,EAAWwB,QAAQ8G,UACftI,EAAWwB,QAAQS,cACnBjC,EAAWwB,QAAQQ,aAE/B,EAEJuG,SAAU,YAEV5C,EAAAA,IAAA,MAAA,CAAKnH,UAAWgK,EAAAA,eAAqB/C,SACjCP,EAAAA,KAAA,QAAA,CAAOlE,IAAKrB,EAAUnB,UAAW2G,UAAKsD,EAAAA,OAAahD,SAAA,CArU3DE,MAAA,QAAA,CACI3E,IAAKlB,EACLtB,UAAWS,EAAqByJ,EAAAA,kBAAsB/G,EAAS8D,SAE/DP,EAAAA,KAAA,KAAA,CAAI1G,UAAWmK,EAAAA,UAAgBlD,SAAA,CAC1B7G,GAAqB2H,KACrBjI,EAAQwF,IAAIc,SAiUTe,EAAAA,IAAA,QAAA,CAAAF,SACmB,YAAd9G,GApNTJ,GAAQA,EAAKqE,OAAS,EAC1B+C,EAAAA,mBACIA,EAAAA,IAAA,KAAA,CACInH,UAAWoK,EAAAA,eACXC,QAASxF,KAAiBoC,SAEzBrG,EACKA,IACAsI,SAId/B,EAAAA,IAAAmD,EAAAA,SAAA,CAAArD,SACKlH,aAAI,EAAJA,EAAMuF,KAAI,CAACgD,EAAe7D,IACvBiC,EAAAA,KAAA,KAAA,CAAA,cACiB/B,GAAc,OAAO2D,EAAIzI,GAAG0I,cAEzCvI,UAAW2G,EAAAA,QACP4D,EAAAA,QACAjI,GAAkBkI,EAAAA,wBAClBhG,GAAiBC,IACbgG,EAAAA,mBACJrK,GAAqBsK,oBACrBrG,GAAciE,EAAIzI,GAAG0I,aACjBoC,mBACP1D,SAAA,CAEA7G,GAAqB0I,GAAkBR,GAEvCxI,EAAQwF,KAAKzD,GAAWwG,GAAcxG,EAAQyG,OAb1CA,EAAIzI,GAAG0I,gBAsHxBpB,EAAAA,IAAA,KAAA,CAAAF,SACIE,EAAAA,IAAA,KAAA,CAAIkD,QAASxF,KAAiBoC,SAC1BE,EAAAA,IAAA,MAAA,CACInH,UAAW4K,EAAAA,oBACXC,KAAK,SAAQ,YACH,SAAQ,aACP,gBAAe5D,SAEX,YAAd9G,GAA2BgH,EAAAA,IAAC2D,EAAAA,mBAAkB,CAAA,gBA4E1DvK,GACGF,GACAA,EAAY+D,OAAS,GAvEN,YACvB,MAAM2G,EAA2B,QAAnBnL,EAAAS,aAAW,EAAXA,EAAa+D,cAAM,IAAAxE,EAAAA,EAAI,EAG/BoL,EAF6BjJ,IAAeG,IACnBH,IAAeY,IAI1CP,EAEJ,OACI+E,EAAAA,WACI3E,IAAKjB,EACLvB,UAAW2G,EAAAA,QACPsE,EAAAA,iBACA7I,GAAuB8I,EAAAA,0BAC1BjE,SAEDP,EAAAA,KAAA,MAAA,CACI1G,UAAW2G,EAAAA,QACPwE,EAAAA,UACAH,GAA8BI,EAAAA,mBACjCnE,SAAA,CAEDE,EAAAA,IAACC,EAAAA,WAAWiE,OAAM,CAAC/D,OAAO,WAAUL,SAAE,GAAG8D,SACrCA,EAAQ,EAAI,IAAM,gBAEtB5D,EAAAA,IAACmE,EAAAA,YAAW,CACRtL,UAAWuL,EAAAA,gBACX7B,KAAK,SAAQ,aACD,sBAAsBqB,SACpB,IAAVA,EAAc,GAAK,MAEvBhE,QAAS/F,EAAqBiG,SAAA,oBAIjCtG,MAEH,EAkCF6K,GACJrE,EAAAA,IAAA,MAAA,CACI3E,IAAMiJ,IACFpK,EAAY2B,QAAUyI,EACtBhJ,GAAOgJ,EAAE,MAGf"}
1	+ {"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n/*\n Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n \n Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr className={styles.bodyRow}>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr className={styles.bodyRow}>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}

package/cjs/data-table/data-table.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./data-table.styles_1nj2uzq.css");exports.actionBar="anoy5c0",exports.actionBarButton="axywpxo",exports.actionBarFloating="a1gvi5ye",exports.actionBarWrapper="aag0lf9",exports.actionBarWrapperFloating="a1euqarq",exports.bodyCell="bfa3d3x",exports.bodyCellCheckbox="bx1feaw",exports.bodyCellText="b1g3gl2s",exports.bodyRow="b6ks76c",exports.bodyRowAlternating="b1bceurq",exports.bodyRowSelectable="bjmthdi",exports.bodyRowSelected="b8t2s91",exports.bodyRowWithBottomBorder="b1tvp43a",exports.emptyStateCell="e1yxh9il",exports.emptyStateTitle="e1pcc0nq",exports.headerCell="h1744qno",exports.headerCellCheckbox="hp15x3z",exports.headerCellClickable="h1ec4wtd",exports.headerCellContent="h4ne4e9",exports.headerRow="h1nfqacf",exports.loadingStateWrapper="ldhafdm",exports.selectionCheckboxWrapper="s1w2nktt",exports.stickyHeader="s7u4vf5",exports.table="t4ucy2z",exports.tableContainer="t1j0mhj",exports.tableWrapper="t188sfx3",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
+"use strict";require("./data-table.styles_1iqq1g7.css");exports.actionBar="anoy5c0",exports.actionBarButton="axywpxo",exports.actionBarFloating="a1gvi5ye",exports.actionBarWrapper="aag0lf9",exports.actionBarWrapperFloating="a1euqarq",exports.bodyCell="bfa3d3x",exports.bodyCellCheckbox="bx1feaw",exports.bodyCellText="b1g3gl2s",exports.bodyRow="b6ks76c",exports.bodyRowAlternating="b1bceurq",exports.bodyRowSelectable="bjmthdi",exports.bodyRowSelected="b8t2s91",exports.bodyRowWithBottomBorder="b1tvp43a",exports.emptyStateCell="e1yxh9il",exports.emptyStateTitle="e1pcc0nq",exports.headerCell="h1744qno",exports.headerCellCheckbox="hp15x3z",exports.headerCellClickable="h1ec4wtd",exports.headerCellContent="h4ne4e9",exports.headerRow="h1nfqacf",exports.loadingStateWrapper="ldhafdm",exports.selectionCheckboxWrapper="s1w2nktt",exports.stickyHeader="s7u4vf5",exports.table="t4ucy2z",exports.tableContainer="t1j0mhj",exports.tableWrapper="t188sfx3",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
 //# sourceMappingURL=data-table.styles.js.map

package/cjs/data-table/{data-table.styles_1nj2uzq.css → data-table.styles_1iqq1g7.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.t188sfx3{overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.t188sfx3::-webkit-scrollbar{display:none;}.t188sfx3 *{-ms-overflow-style:none;scrollbar-width:none;}
+@layer fds{.t188sfx3{overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.t188sfx3::-webkit-scrollbar{display:none;}.t188sfx3 *{-ms-overflow-style:none;scrollbar-width:none;}
 .t1j0mhj{-webkit-flex:1;-ms-flex:1;flex:1;}
 .t4ucy2z{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
 .s7u4vf5{position:-webkit-sticky;position:sticky;top:0;z-index:20;}
@@ -17,10 +17,10 @@
 .b1g3gl2s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
 .e1yxh9il{padding:4rem 0;}.e1yxh9il:first-child{padding-left:1.5rem;}.e1yxh9il:last-child{padding-right:1.5rem;}
 .s1w2nktt{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;}
-.axywpxo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
+.axywpxo{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
 .anoy5c0{overflow:hidden;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;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:all 300ms ease;transition:all 300ms ease;border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
 .a1gvi5ye{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .aag0lf9{bottom:0;position:-webkit-sticky;position:sticky;left:0;}
 .a1euqarq{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;position:fixed;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}
 .ldhafdm{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:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4rem 0;}
-.e1pcc0nq{margin-top:2rem;margin-bottom:1rem;}
+.e1pcc0nq{margin-top:2rem;margin-bottom:1rem;}}

package/cjs/date-input/date-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),t=require("../external/dayjs/dayjs.min.js"),n=require("react"),i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var o=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./date-input.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(r);exports.DateInput=r=>{var{minDate:c,maxDate:v,disabled:D,disabledDates:h,error:f,hideInputKeyboard:m,value:b,onChange:j,onFocus:w,onBlur:I,onYearMonthDisplayChange:q,withButton:x=!0,readOnly:y,id:g,allowDisabledSelection:S,zIndex:C,dropdownRootNode:Y,className:R}=r,B=e.__rest(r,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[N,O]=n.useState(o.DateInputHelper.sanitizeInput(b)),[z,H]=n.useState(o.DateInputHelper.sanitizeInput(b)),[M,F]=n.useState(void 0),[_,E]=n.useState(!1),[K,W]=n.useState(!1),V=n.useRef(null),k=n.useRef(null),T=n.useRef(null);n.useEffect((()=>{const e=o.DateInputHelper.sanitizeInput(b);O(e),H(e)}),[b]);const Z=e=>{!S&&o.DateInputHelper.isDateDisabled(e,{disabledDates:h,minDate:c,maxDate:v})||(H(e),x||(Q(e),O(e),e&&E(!1)))},A=e=>{var a;H(e),x||(Q(e),O(e),e&&(null===(a=k.current)||void 0===a||a.focusYearRef(),E(!1)),F(void 0))},G=()=>{y||D||(E(!0),K||(W(!0),w&&w()))},J=e=>{var a,r,t;const n=e.relatedTarget,i=T.current&&T.current.contains(n),l=V.current&&V.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(K&&!_&&!l&&!s||_&&!l&&!i&&!s)&&(null===(t=k.current)||void 0===t||t.resetInput(),H(N),W(!1),E(!1),U())},L=e=>{F(e)},P=e=>{var a,r;switch(e){case"reset":H(N);break;case"confirmed":O(z),Q(z)}t.default(z,"YYYY-MM-DD",!0).isValid()?null===(a=k.current)||void 0===a||a.focusYearRef():null===(r=V.current)||void 0===r||r.focus(),E(!1)},Q=e=>{j&&j(e)},U=()=>{I&&I()};return a.jsx(i.ElementWithDropdown,{enabled:!y&&!D,isOpen:_,renderElement:()=>a.jsx(l.InputWrapper,Object.assign({role:"group",tabIndex:0,ref:V,onBlur:J,onFocus:G,disabled:D,readOnly:y,focused:K,error:f,id:g,"data-testid":B["data-testid"],"aria-disabled":D,className:p.default(u.container,R)},B,{children:a.jsx(d.StandaloneDateInput,{ref:k,disabled:D,onChange:Z,readOnly:y,focused:_,names:["start-day","start-month","start-year"],value:z,hoverValue:M,hideInputKeyboard:m})})),renderDropdown:({elementWidth:e})=>a.jsx(s.CalendarDropdown,{variant:"single",ref:T,initialCalendarDate:z,withButton:x,value:z,disabledDates:h,minDate:c,maxDate:v,allowDisabledSelection:S,onHover:L,onSelect:A,onDismiss:P,onYearMonthDisplayChange:q,width:e,isFocusable:!y&&!D}),onClose:()=>{var e;null===(e=k.current)||void 0===e||e.resetInput(),H(N),E(!1),W(!1),U(),F(void 0)},onDismiss:()=>{var e,a;null===(e=k.current)||void 0===e||e.resetInput(),null===(a=V.current)||void 0===a||a.focus(),H(N),E(!1)},customZIndex:C,offset:16,rootNode:Y})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),t=require("../external/dayjs/dayjs.min.js"),n=require("react"),i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var o=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./date-input.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(r);exports.DateInput=r=>{var{minDate:c,maxDate:v,disabled:D,disabledDates:h,error:f,hideInputKeyboard:m,value:b,onChange:j,onFocus:w,onBlur:I,onYearMonthDisplayChange:q,withButton:x=!0,readOnly:y,id:g,allowDisabledSelection:S,zIndex:C,dropdownRootNode:Y,className:R}=r,B=e.__rest(r,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[N,O]=n.useState(o.DateInputHelper.sanitizeInput(b)),[z,H]=n.useState(o.DateInputHelper.sanitizeInput(b)),[M,F]=n.useState(void 0),[_,E]=n.useState(!1),[K,W]=n.useState(!1),V=n.useRef(null),k=n.useRef(null),T=n.useRef(null);n.useEffect((()=>{const e=o.DateInputHelper.sanitizeInput(b);O(e),H(e)}),[b]);const Z=e=>{!S&&o.DateInputHelper.isDateDisabled(e,{disabledDates:h,minDate:c,maxDate:v})||(H(e),x||(Q(e),O(e),e&&E(!1)))},A=e=>{var a;H(e),x||(Q(e),O(e),e&&(null===(a=k.current)||void 0===a||a.focusYearRef(),E(!1)),F(void 0))},G=()=>{y||D||(E(!0),K||(W(!0),w&&w()))},J=e=>{var a,r,t;const n=e.relatedTarget,i=T.current&&T.current.contains(n),l=V.current&&V.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(K&&!_&&!l&&!s||_&&!l&&!i&&!s)&&(null===(t=k.current)||void 0===t||t.resetInput(),H(N),W(!1),E(!1),U())},L=e=>{_&&F(e)},P=e=>{var a,r;switch(e){case"reset":H(N);break;case"confirmed":O(z),Q(z)}t.default(z,"YYYY-MM-DD",!0).isValid()?null===(a=k.current)||void 0===a||a.focusYearRef():null===(r=V.current)||void 0===r||r.focus(),E(!1)},Q=e=>{j&&j(e)},U=()=>{I&&I()};return a.jsx(i.ElementWithDropdown,{enabled:!y&&!D,isOpen:_,renderElement:()=>a.jsx(l.InputWrapper,Object.assign({role:"group",tabIndex:0,ref:V,onBlur:J,onFocus:G,disabled:D,readOnly:y,focused:K,error:f,id:g,"data-testid":B["data-testid"],"aria-disabled":D,className:p.default(u.container,R)},B,{children:a.jsx(d.StandaloneDateInput,{ref:k,disabled:D,onChange:Z,readOnly:y,focused:_,names:["start-day","start-month","start-year"],value:z,hoverValue:M,hideInputKeyboard:m})})),renderDropdown:({elementWidth:e})=>a.jsx(s.CalendarDropdown,{variant:"single",ref:T,initialCalendarDate:z,withButton:x,value:z,disabledDates:h,minDate:c,maxDate:v,allowDisabledSelection:S,onHover:L,onSelect:A,onDismiss:P,onYearMonthDisplayChange:q,width:e,isFocusable:!y&&!D}),onClose:()=>{var e;null===(e=k.current)||void 0===e||e.resetInput(),H(N),E(!1),W(!1),U(),F(void 0)},onDismiss:()=>{var e,a;null===(e=k.current)||void 0===e||e.resetInput(),null===(a=V.current)||void 0===a||a.focus(),H(N),E(!1)},customZIndex:C,offset:16,rootNode:Y})};
 //# sourceMappingURL=date-input.js.map