@lifesg/react-design-system 3.4.0-canary.6 → 3.4.0-canary.7

package/calendar/calendar.js

@@ -1,4 +1,4 @@
-import{jsx as a}from"react/jsx-runtime";import{useState as e,useEffect as i}from"react";import t,{css as n}from"styled-components";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as l}from"../shared/internal-calendar/internal-calendar.js";import{Spacing as o,Border as r,Colour as d,Radius as s}from"../theme/index.js";const m=t=>{const{className:n,styleType:o="bordered",variant:r,id:d,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,"data-testid":D}=t,g="multi"!==t.variant?t.value:void 0,$="multi"===t.variant?t.values:void 0,y="multi"===t.variant?t.minSelectable:void 0,w="multi"===t.variant?t.maxSelectable:void 0,[S,f]=e((()=>void 0!==$?$:void 0!==g?[g]:[]));i((()=>{f(void 0!==$?$:void 0!==g?[g]:[])}),[g,$]);return a(v,{className:n,id:d,"data-testid":D,$hasBorder:"bordered"===o,children:a(l,{value:S[0],values:S,initialCalendarDate:S[0],isFocusable:!0,variant:r,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,onSelect:a=>{var e,i;f([a]),"multi"!==t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a),null===(i=t.onSelect)||void 0===i||i.call(t,a))},onChange:a=>{var e;f(a),"multi"===t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a))},minSelectable:y,maxSelectable:w})})},v=t.div`
+import{jsx as a}from"react/jsx-runtime";import{useState as e,useEffect as i}from"react";import t,{css as n}from"styled-components";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as l}from"../shared/internal-calendar/internal-calendar.js";import{Spacing as o,Border as r,Colour as d,Radius as s}from"../theme/index.js";const m=t=>{const{className:n,styleType:o="bordered",variant:r="single",id:d,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,"data-testid":D}=t,g="multi"!==t.variant?t.value:void 0,$="multi"===t.variant?t.values:void 0,y="multi"===t.variant?t.minSelectable:void 0,w="multi"===t.variant?t.maxSelectable:void 0,[S,f]=e((()=>void 0!==$?$:void 0!==g?[g]:[]));i((()=>{f(void 0!==$?$:void 0!==g?[g]:[])}),[g,$]);return a(v,{className:n,id:d,"data-testid":D,$hasBorder:"bordered"===o,children:a(l,{value:S[0],values:S,initialCalendarDate:S[0],isFocusable:!0,variant:r,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,onSelect:a=>{var e,i;f([a]),"multi"!==t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a),null===(i=t.onSelect)||void 0===i||i.call(t,a))},onChange:a=>{var e;f(a),"multi"===t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a))},minSelectable:y,maxSelectable:w})})},v=t.div`
     --vertical-inset: ${o["spacing-24"]};
     --horizontal-inset: ${o["spacing-32"]};
     --header-bottom-spacing: ${o["spacing-8"]};

package/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { 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 controlledValue =\n        props.variant !== \"multi\" ? props.value : undefined;\n    const controlledValues =\n        props.variant === \"multi\" ? props.values : undefined;\n    const minSelectable =\n        props.variant === \"multi\" ? props.minSelectable : undefined;\n    const maxSelectable =\n        props.variant === \"multi\" ? 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        } else if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n        } else {\n            setSelectedValues([]);\n        }\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant !== \"multi\") {\n            props.onChange?.(date);\n            props.onSelect?.(date);\n        }\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        <Wrapper\n            className={className}\n            id={id}\n            data-testid={dataTestId}\n            $hasBorder={styleType === \"bordered\"}\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        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n                border-radius: ${Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","controlledValue","value","undefined","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","Wrapper","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues","styled","div","Spacing","$hasBorder","css","Border","solid","Colour","border","Radius"],"mappings":"gWAMO,MAAMA,EAAYC,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,EACgB,UAAlBb,EAAMG,QAAsBH,EAAMc,WAAQC,EACxCC,EACgB,UAAlBhB,EAAMG,QAAsBH,EAAMiB,YAASF,EACzCG,EACgB,UAAlBlB,EAAMG,QAAsBH,EAAMkB,mBAAgBH,EAChDI,EACgB,UAAlBnB,EAAMG,QAAsBH,EAAMmB,mBAAgBJ,GAQ/CK,EAAgBC,GACnBC,GAPkB,SACOP,IAArBC,EAAuCA,OACnBD,IAApBF,EAAsC,CAACA,GACpC,KASXU,GAAU,KAEFF,OADqBN,IAArBC,EACkBA,OACSD,IAApBF,EACW,CAACA,GAED,GACtB,GACD,CAACA,EAAiBG,IAuBrB,OACIQ,EAACC,EAAO,CACJxB,UAAWA,EACXG,GAAIA,EAAE,cACOQ,aACa,aAAdV,EAAwBwB,SAEpCF,EAACG,EAAgB,CACbb,MAAOM,EAAe,GACtBH,OAAQG,EACRQ,oBAAqBR,EAAe,GACpCS,aAAa,EACb1B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BmB,SAtCUC,YAClBV,EAAkB,CAACU,IACG,UAAlB/B,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAG+B,GACH,QAAdI,EAAAnC,EAAM8B,gBAAQ,IAAAK,GAAAA,EAAAD,KAAAlC,EAAG+B,GACrB,EAkCQE,SA/BeG,UACvBf,EAAkBe,GACI,UAAlBpC,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAGoC,GACrB,EA4BQlB,cAAeA,EACfC,cAAeA,KAEb,EAcZM,EAAUY,EAAOC,GAAe;wBACdC,EAAQ;0BACNA,EAAQ;+BACHA,EAAQ;;;;MAIhCvC,IACC,GAAIA,EAAMwC,WACN,OAAOC,CAAG;0BACIC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;iCACvCC,EAAW;;aAGpC;"}
+{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { 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 controlledValue =\n        props.variant !== \"multi\" ? props.value : undefined;\n    const controlledValues =\n        props.variant === \"multi\" ? props.values : undefined;\n    const minSelectable =\n        props.variant === \"multi\" ? props.minSelectable : undefined;\n    const maxSelectable =\n        props.variant === \"multi\" ? 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        } else if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n        } else {\n            setSelectedValues([]);\n        }\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant !== \"multi\") {\n            props.onChange?.(date);\n            props.onSelect?.(date);\n        }\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        <Wrapper\n            className={className}\n            id={id}\n            data-testid={dataTestId}\n            $hasBorder={styleType === \"bordered\"}\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        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n                border-radius: ${Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","controlledValue","value","undefined","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","Wrapper","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues","styled","div","Spacing","$hasBorder","css","Border","solid","Colour","border","Radius"],"mappings":"gWAMO,MAAMA,EAAYC,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,EACgB,UAAlBb,EAAMG,QAAsBH,EAAMc,WAAQC,EACxCC,EACgB,UAAlBhB,EAAMG,QAAsBH,EAAMiB,YAASF,EACzCG,EACgB,UAAlBlB,EAAMG,QAAsBH,EAAMkB,mBAAgBH,EAChDI,EACgB,UAAlBnB,EAAMG,QAAsBH,EAAMmB,mBAAgBJ,GAQ/CK,EAAgBC,GACnBC,GAPkB,SACOP,IAArBC,EAAuCA,OACnBD,IAApBF,EAAsC,CAACA,GACpC,KASXU,GAAU,KAEFF,OADqBN,IAArBC,EACkBA,OACSD,IAApBF,EACW,CAACA,GAED,GACtB,GACD,CAACA,EAAiBG,IAuBrB,OACIQ,EAACC,EAAO,CACJxB,UAAWA,EACXG,GAAIA,EAAE,cACOQ,aACa,aAAdV,EAAwBwB,SAEpCF,EAACG,EAAgB,CACbb,MAAOM,EAAe,GACtBH,OAAQG,EACRQ,oBAAqBR,EAAe,GACpCS,aAAa,EACb1B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BmB,SAtCUC,YAClBV,EAAkB,CAACU,IACG,UAAlB/B,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAG+B,GACH,QAAdI,EAAAnC,EAAM8B,gBAAQ,IAAAK,GAAAA,EAAAD,KAAAlC,EAAG+B,GACrB,EAkCQE,SA/BeG,UACvBf,EAAkBe,GACI,UAAlBpC,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAGoC,GACrB,EA4BQlB,cAAeA,EACfC,cAAeA,KAEb,EAcZM,EAAUY,EAAOC,GAAe;wBACdC,EAAQ;0BACNA,EAAQ;+BACHA,EAAQ;;;;MAIhCvC,IACC,GAAIA,EAAMwC,WACN,OAAOC,CAAG;0BACIC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;iCACvCC,EAAW;;aAGpC;"}

package/cjs/calendar/calendar.js

@@ -1,14 +1,14 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),i=require("styled-components");require("../shared/internal-calendar/calendar-dropdown.js");var r=require("../shared/internal-calendar/internal-calendar.js"),n=require("../theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=t(i).default.div`
-    --vertical-inset: ${n.Spacing["spacing-24"]};
-    --horizontal-inset: ${n.Spacing["spacing-32"]};
-    --header-bottom-spacing: ${n.Spacing["spacing-8"]};
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),i=require("styled-components");require("../shared/internal-calendar/calendar-dropdown.js");var n=require("../shared/internal-calendar/internal-calendar.js"),r=require("../theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=t(i).default.div`
+    --vertical-inset: ${r.Spacing["spacing-24"]};
+    --horizontal-inset: ${r.Spacing["spacing-32"]};
+    --header-bottom-spacing: ${r.Spacing["spacing-8"]};
 
     width: 41rem;
 
     ${e=>{if(e.$hasBorder)return i.css`
-                border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-                border-radius: ${n.Radius.lg};
+                border: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
+                border-radius: ${r.Radius.lg};
                 overflow: hidden;
             `}}
-`;exports.Calendar=i=>{const{className:n,styleType:t="bordered",variant:o,id:d,minDate:s,maxDate:c,disabledDates:u,allowDisabledSelection:v,showActiveMonthDaysOnly:h,onHover:m,onYearMonthDisplayChange:b,"data-testid":p}=i,g="multi"!==i.variant?i.value:void 0,D="multi"===i.variant?i.values:void 0,S="multi"===i.variant?i.minSelectable:void 0,y="multi"===i.variant?i.maxSelectable:void 0,[$,f]=a.useState((()=>void 0!==D?D:void 0!==g?[g]:[]));a.useEffect((()=>{f(void 0!==D?D:void 0!==g?[g]:[])}),[g,D]);return e.jsx(l,{className:n,id:d,"data-testid":p,$hasBorder:"bordered"===t,children:e.jsx(r.InternalCalendar,{value:$[0],values:$,initialCalendarDate:$[0],isFocusable:!0,variant:o,minDate:s,maxDate:c,disabledDates:u,allowDisabledSelection:v,showActiveMonthDaysOnly:h,onHover:m,onYearMonthDisplayChange:b,onSelect:e=>{var a,r;f([e]),"multi"!==i.variant&&(null===(a=i.onChange)||void 0===a||a.call(i,e),null===(r=i.onSelect)||void 0===r||r.call(i,e))},onChange:e=>{var a;f(e),"multi"===i.variant&&(null===(a=i.onChange)||void 0===a||a.call(i,e))},minSelectable:S,maxSelectable:y})})};
+`;exports.Calendar=i=>{const{className:r,styleType:t="bordered",variant:o="single",id:d,minDate:s,maxDate:c,disabledDates:u,allowDisabledSelection:v,showActiveMonthDaysOnly:h,onHover:m,onYearMonthDisplayChange:b,"data-testid":g}=i,p="multi"!==i.variant?i.value:void 0,D="multi"===i.variant?i.values:void 0,S="multi"===i.variant?i.minSelectable:void 0,y="multi"===i.variant?i.maxSelectable:void 0,[$,f]=a.useState((()=>void 0!==D?D:void 0!==p?[p]:[]));a.useEffect((()=>{f(void 0!==D?D:void 0!==p?[p]:[])}),[p,D]);return e.jsx(l,{className:r,id:d,"data-testid":g,$hasBorder:"bordered"===t,children:e.jsx(n.InternalCalendar,{value:$[0],values:$,initialCalendarDate:$[0],isFocusable:!0,variant:o,minDate:s,maxDate:c,disabledDates:u,allowDisabledSelection:v,showActiveMonthDaysOnly:h,onHover:m,onYearMonthDisplayChange:b,onSelect:e=>{var a,n;f([e]),"multi"!==i.variant&&(null===(a=i.onChange)||void 0===a||a.call(i,e),null===(n=i.onSelect)||void 0===n||n.call(i,e))},onChange:e=>{var a;f(e),"multi"===i.variant&&(null===(a=i.onChange)||void 0===a||a.call(i,e))},minSelectable:S,maxSelectable:y})})};
 //# sourceMappingURL=calendar.js.map

package/cjs/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { 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 controlledValue =\n        props.variant !== \"multi\" ? props.value : undefined;\n    const controlledValues =\n        props.variant === \"multi\" ? props.values : undefined;\n    const minSelectable =\n        props.variant === \"multi\" ? props.minSelectable : undefined;\n    const maxSelectable =\n        props.variant === \"multi\" ? 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        } else if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n        } else {\n            setSelectedValues([]);\n        }\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant !== \"multi\") {\n            props.onChange?.(date);\n            props.onSelect?.(date);\n        }\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        <Wrapper\n            className={className}\n            id={id}\n            data-testid={dataTestId}\n            $hasBorder={styleType === \"bordered\"}\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        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n                border-radius: ${Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","Spacing","props","$hasBorder","css","Border","solid","Colour","border","Radius","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","controlledValue","value","undefined","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"uUAMO,MA8GDA,OAAUC,QAAOC,GAAe;wBACdC,EAAAA,QAAQ;0BACNA,EAAAA,QAAQ;+BACHA,EAAAA,QAAQ;;;;MAIhCC,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;0BACIC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASC,EAAAA,OAAOC;iCACvCC,EAAAA,OAAW;;aAGpC;mBA5HiBP,IAIrB,MAAMQ,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAOC,GACPA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfnB,EAEEoB,EACgB,UAAlBpB,EAAMU,QAAsBV,EAAMqB,WAAQC,EACxCC,EACgB,UAAlBvB,EAAMU,QAAsBV,EAAMwB,YAASF,EACzCG,EACgB,UAAlBzB,EAAMU,QAAsBV,EAAMyB,mBAAgBH,EAChDI,EACgB,UAAlB1B,EAAMU,QAAsBV,EAAM0B,mBAAgBJ,GAQ/CK,EAAgBC,GACnBC,EAAAA,UAPkB,SACOP,IAArBC,EAAuCA,OACnBD,IAApBF,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAEFF,OADqBN,IAArBC,EACkBA,OACSD,IAApBF,EACW,CAACA,GAED,GACtB,GACD,CAACA,EAAiBG,IAuBrB,OACIQ,MAACnC,EAAO,CACJY,UAAWA,EACXG,GAAIA,EAAE,cACOQ,aACa,aAAdV,EAAwBuB,SAEpCD,EAAAA,IAACE,EAAAA,iBAAgB,CACbZ,MAAOM,EAAe,GACtBH,OAAQG,EACRO,oBAAqBP,EAAe,GACpCQ,aAAa,EACbzB,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BkB,SAtCUC,YAClBT,EAAkB,CAACS,IACG,UAAlBrC,EAAMU,UACQ,QAAd4B,EAAAtC,EAAMuC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAxC,EAAGqC,GACH,QAAdI,EAAAzC,EAAMoC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAAxC,EAAGqC,GACrB,EAkCQE,SA/BeG,UACvBd,EAAkBc,GACI,UAAlB1C,EAAMU,UACQ,QAAd4B,EAAAtC,EAAMuC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAxC,EAAG0C,GACrB,EA4BQjB,cAAeA,EACfC,cAAeA,KAEb"}
+{"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { 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 controlledValue =\n        props.variant !== \"multi\" ? props.value : undefined;\n    const controlledValues =\n        props.variant === \"multi\" ? props.values : undefined;\n    const minSelectable =\n        props.variant === \"multi\" ? props.minSelectable : undefined;\n    const maxSelectable =\n        props.variant === \"multi\" ? 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        } else if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n        } else {\n            setSelectedValues([]);\n        }\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant !== \"multi\") {\n            props.onChange?.(date);\n            props.onSelect?.(date);\n        }\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        <Wrapper\n            className={className}\n            id={id}\n            data-testid={dataTestId}\n            $hasBorder={styleType === \"bordered\"}\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        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n                border-radius: ${Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","Spacing","props","$hasBorder","css","Border","solid","Colour","border","Radius","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","controlledValue","value","undefined","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"uUAMO,MA8GDA,OAAUC,QAAOC,GAAe;wBACdC,EAAAA,QAAQ;0BACNA,EAAAA,QAAQ;+BACHA,EAAAA,QAAQ;;;;MAIhCC,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;0BACIC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASC,EAAAA,OAAOC;iCACvCC,EAAAA,OAAW;;aAGpC;mBA5HiBP,IAIrB,MAAMQ,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,GACfnB,EAEEoB,EACgB,UAAlBpB,EAAMU,QAAsBV,EAAMqB,WAAQC,EACxCC,EACgB,UAAlBvB,EAAMU,QAAsBV,EAAMwB,YAASF,EACzCG,EACgB,UAAlBzB,EAAMU,QAAsBV,EAAMyB,mBAAgBH,EAChDI,EACgB,UAAlB1B,EAAMU,QAAsBV,EAAM0B,mBAAgBJ,GAQ/CK,EAAgBC,GACnBC,EAAAA,UAPkB,SACOP,IAArBC,EAAuCA,OACnBD,IAApBF,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAEFF,OADqBN,IAArBC,EACkBA,OACSD,IAApBF,EACW,CAACA,GAED,GACtB,GACD,CAACA,EAAiBG,IAuBrB,OACIQ,MAACnC,EAAO,CACJY,UAAWA,EACXG,GAAIA,EAAE,cACOQ,aACa,aAAdV,EAAwBuB,SAEpCD,EAAAA,IAACE,EAAAA,iBAAgB,CACbZ,MAAOM,EAAe,GACtBH,OAAQG,EACRO,oBAAqBP,EAAe,GACpCQ,aAAa,EACbzB,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BkB,SAtCUC,YAClBT,EAAkB,CAACS,IACG,UAAlBrC,EAAMU,UACQ,QAAd4B,EAAAtC,EAAMuC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAxC,EAAGqC,GACH,QAAdI,EAAAzC,EAAMoC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAAxC,EAAGqC,GACrB,EAkCQE,SA/BeG,UACvBd,EAAkBc,GACI,UAAlB1C,EAAMU,UACQ,QAAd4B,EAAAtC,EAAMuC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAxC,EAAG0C,GACrB,EA4BQjB,cAAeA,EACfC,cAAeA,KAEb"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),n=require("../external/react-intersection-observer/index.js"),l=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-spinner/loading-spinner.js"),require("../animations/loading-dots/loading-dots.js");var s=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("styled-components");var o=require("../checkbox/checkbox.js"),a=require("../error-display/error-display.js");require("../error-display/helper.js");var d=require("../shared/accessibility/index.js"),c=require("../typography/typography.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var h=require("../util/use-event-listener.js"),p=require("./data-table.styles.js");exports.DataTable=g=>{var{id:b,headers:y,rows:x,className:j,sortIndicators:f,alternatingRows:w,loadState:m="success",enableMultiSelect:C,selectedIds:$,disabledIds:v,enableActionBar:S,enableSelectAll:k,enableStickyHeader:q,emptyView:B,actionBarContent:H,renderCustomEmptyView:R,onHeaderClick:I,onSelect:A,onSelectAll:T,onClearSelectionClick:D}=g,E=e.__rest(g,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=i.useRef(null),W=i.useRef(null),L=i.useRef(null),N=i.useRef(null),K=i.useRef(null),M=u.useId(),_=y.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[z,F]=i.useState(!1),[Y,O]=i.useState(!1),[P,U]=i.useState(!1),[G,J]=i.useState(!1),[Q,X]=i.useState(!1),{ref:Z,inView:ee}=n.useInView(),te=i.useCallback((()=>{if(!K.current||!N.current)return;const e=K.current.scrollHeight>K.current.clientHeight;F(e),e?N.current.style.transform="translateY(0)":ge()}),[]);i.useEffect((()=>{te()}),[]),l.useResizeDetector({onResize:te});h.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{z?pe():ge()})),K.current&&U(K.current.getBoundingClientRect().bottom<=window.innerHeight)}),"window"),i.useEffect((()=>{be()}),[x]);const re=()=>(null==$?void 0:$.length)===(null==x?void 0:x.length),ie=e=>!!(null==$?void 0:$.includes(e)),ne=e=>!!w&&e%2==1,le=e=>!!(null==v?void 0:v.includes(e)),se=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},oe=()=>y.length+(C?1:0),ae=e=>null==f?void 0:f[e],de=e=>{const t=ae(e);if(t)return"asc"===t?"ascending":"descending"},ce=e=>` by ${"asc"===ae(e)?"descending":"ascending"} order`,ue=(e,t)=>`${M}-row-${e}-${t}-key-column`,he=e=>{const t=_.map((t=>ue(e,t.fieldKey)));return d.concatIds(...t)},pe=()=>{if(!K.current)return;const e=K.current.getBoundingClientRect();J(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},ge=()=>{if(!(V.current&&W.current&&K.current&&N.current&&L.current))return;const e=W.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=V.current.getBoundingClientRect().height-L.current.clientHeight-32,i=Math.min(t,r);N.current.style.transform=`translateY(-${i}px)`}else N.current.style.transform="translateY(0)"},be=()=>{V.current&&K.current&&X(V.current.clientHeight+(S?56:0)<K.current.clientHeight)},ye=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!ae(r),o=(e=>`${M}-header-${e}`)(r);return t.jsxs(p.HeaderCell,{"data-testid":se(`header-${r}`),$clickable:n,scope:"col","aria-sort":de(r),style:l,$isCheckbox:!1,onClick:()=>(e=>{null==I||I(e)})(r),children:[t.jsxs(p.HeaderCellWrapper,{id:o,children:["string"==typeof i?t.jsx(c.Typography.BodyBL,{weight:"bold",children:i}):i,xe(r)]}),(n||s)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==I||I(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":o}),s&&ce(r)]})})]},r)},xe=e=>{const i=null==f?void 0:f[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},je=()=>t.jsx(p.HeaderCell,{"data-testid":se("header-selection"),$clickable:!1,$isCheckbox:!0,scope:"col",children:t.jsxs(p.CheckBoxWrapper,{children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),k&&t.jsx(o.Checkbox,{checked:re(),indeterminate:!!$&&0!==$.length&&!re(),"aria-label":"Select all rows",onClick:()=>{T&&T(re())}})]})}),fe=(e,r)=>{const i="string"!=typeof e?e.style:void 0,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],o=`${l}-${n}`;return t.jsx(p.BodyCell,{"data-testid":se(`row-${o}`),id:ue(l,n),style:i,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(p.BodyCellContent,{children:s}):"function"==typeof s?s(r,{isSelected:ie(l)}):s},o)},we=e=>{const r=e.id.toString();return t.jsx(p.BodyCell,{"data-testid":se(`row-${r}-selection`),$isCheckbox:!0,children:t.jsx(p.CheckBoxWrapper,{children:t.jsx(o.Checkbox,{checked:ie(r),"aria-labelledby":he(r),onClick:()=>{A&&A(r,!ie(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},me=()=>t.jsx(a.ErrorDisplay,Object.assign({type:"no-item-found"},B,{title:(null==B?void 0:B.title)?"string"==typeof B.title?t.jsx(p.ErrorDisplayTitle,{weight:"bold",children:B.title}):B.title:t.jsx(p.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==B?void 0:B.description)?B.description:"No matching rows"}));return t.jsxs(p.TableWrapper,{id:b||"table-wrapper","data-testid":E["data-testid"]||"table",className:j,ref:K,onScroll:()=>{z&&K.current&&O(K.current.scrollTop+K.current.clientHeight>=K.current.scrollHeight)},tabIndex:0,children:[t.jsx(p.TableContainer,{children:t.jsxs(p.Table,{$end:P,$scrollable:z,ref:V,$stickyHeader:q,children:[t.jsx("thead",{ref:L,children:t.jsxs(p.HeaderRow,{children:[C&&je(),y.map(ye)]})}),t.jsx(p.TableBody,{$showLastRowBottomBorder:Q,children:"success"===m?!x||x.length<1?t.jsx("tr",{children:t.jsx(p.EmptyViewCell,{colSpan:oe(),children:R?R():me()})}):t.jsx(t.Fragment,{children:null==x?void 0:x.map(((e,r)=>t.jsxs(p.BodyRow,{"data-testid":se(`row-${e.id.toString()}`),$alternating:ne(r),$isSelectable:C,$isSelected:ie(e.id.toString()),children:[C&&we(e),y.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx("tr",{children:t.jsx("td",{colSpan:oe(),children:t.jsx(p.LoaderWrapper,{role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===m&&t.jsx(s.LoadingDotsSpinner,{})})})})})]})}),S&&$&&$.length>0&&(()=>{var e,r,i,n;const l=null!==(e=null==$?void 0:$.length)&&void 0!==e?e:0;return t.jsx(p.ActionBarWrapper,{ref:N,$fixed:G,$left:null===(i=null===(r=null==V?void 0:V.current)||void 0===r?void 0:r.getBoundingClientRect())||void 0===i?void 0:i.left,$width:null===(n=null==V?void 0:V.current)||void 0===n?void 0:n.clientWidth,children:t.jsxs(p.ActionBar,{$float:(z?!Y:!ee)||G,$scrollable:z,children:[t.jsx(c.Typography.BodyMD,{weight:"semibold",children:`${l} item${l>1?"s":""} selected`}),t.jsx(p.TextButton,{type:"button","aria-label":`Clear selection of ${l} item${1===l?"":"s"}`,onClick:D,children:"Clear selection"}),H]})})})(),t.jsx("div",{ref:e=>{W.current=e,Z(e)}})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),n=require("../external/react-intersection-observer/index.js"),l=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-spinner/loading-spinner.js"),require("../animations/loading-dots/loading-dots.js");var s=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("styled-components");var a=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js");require("../error-display/helper.js");var d=require("../shared/accessibility/index.js"),c=require("../typography/typography.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var h=require("../util/use-event-listener.js"),p=require("./data-table.styles.js");exports.DataTable=g=>{var{id:b,headers:y,rows:x,className:j,sortIndicators:f,alternatingRows:w,loadState:m="success",enableMultiSelect:C,selectedIds:$,disabledIds:v,enableActionBar:S,enableSelectAll:k,enableStickyHeader:B,emptyView:q,actionBarContent:H,renderCustomEmptyView:R,onHeaderClick:I,onSelect:A,onSelectAll:T,onClearSelectionClick:D}=g,E=e.__rest(g,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=i.useRef(null),W=i.useRef(null),L=i.useRef(null),N=i.useRef(null),K=i.useRef(null),M=u.useId(),_=y.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[z,F]=i.useState(!1),[Y,O]=i.useState(!1),[P,U]=i.useState(!1),[G,J]=i.useState(!1),[Q,X]=i.useState(!1),{ref:Z,inView:ee}=n.useInView(),te=i.useCallback((()=>{if(!K.current||!N.current)return;const e=K.current.scrollHeight>K.current.clientHeight;F(e),e?N.current.style.transform="translateY(0)":ge()}),[]);i.useEffect((()=>{te()}),[]),l.useResizeDetector({onResize:te});h.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{z?pe():ge()})),K.current&&U(K.current.getBoundingClientRect().bottom<=window.innerHeight)}),"window"),i.useEffect((()=>{be()}),[x]);const re=()=>!!(x&&x.length&&$)&&$.length===x.length,ie=e=>!!(null==$?void 0:$.includes(e)),ne=e=>!!w&&e%2==1,le=e=>!!(null==v?void 0:v.includes(e)),se=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},ae=()=>y.length+(C?1:0),oe=e=>null==f?void 0:f[e],de=e=>{const t=oe(e);if(t)return"asc"===t?"ascending":"descending"},ce=e=>` by ${"asc"===oe(e)?"descending":"ascending"} order`,ue=(e,t)=>`${M}-row-${e}-${t}-key-column`,he=e=>{const t=_.map((t=>ue(e,t.fieldKey)));return d.concatIds(...t)},pe=()=>{if(!K.current)return;const e=K.current.getBoundingClientRect();J(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},ge=()=>{if(!(V.current&&W.current&&K.current&&N.current&&L.current))return;const e=W.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=V.current.getBoundingClientRect().height-L.current.clientHeight-32,i=Math.min(t,r);N.current.style.transform=`translateY(-${i}px)`}else N.current.style.transform="translateY(0)"},be=()=>{V.current&&K.current&&X(V.current.clientHeight+(S?56:0)<K.current.clientHeight)},ye=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!oe(r),a=(e=>`${M}-header-${e}`)(r);return t.jsxs(p.HeaderCell,{"data-testid":se(`header-${r}`),$clickable:n,scope:"col","aria-sort":de(r),style:l,$isCheckbox:!1,onClick:()=>(e=>{null==I||I(e)})(r),children:[t.jsxs(p.HeaderCellWrapper,{id:a,children:["string"==typeof i?t.jsx(c.Typography.BodyBL,{weight:"bold",children:i}):i,xe(r)]}),(n||s)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==I||I(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&ce(r)]})})]},r)},xe=e=>{const i=null==f?void 0:f[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},je=()=>t.jsx(p.HeaderCell,{"data-testid":se("header-selection"),$clickable:!1,$isCheckbox:!0,scope:"col",children:t.jsxs(p.CheckBoxWrapper,{children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),k&&t.jsx(a.Checkbox,{checked:re(),indeterminate:!!$&&0!==$.length&&!re(),disabled:!x||!x.length||!$,"aria-label":"Select all rows",onClick:()=>{T&&T(re())}})]})}),fe=(e,r)=>{const i="string"!=typeof e?e.style:void 0,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],a=`${l}-${n}`;return t.jsx(p.BodyCell,{"data-testid":se(`row-${a}`),id:ue(l,n),style:i,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(p.BodyCellContent,{children:s}):"function"==typeof s?s(r,{isSelected:ie(l)}):s},a)},we=e=>{const r=e.id.toString();return t.jsx(p.BodyCell,{"data-testid":se(`row-${r}-selection`),$isCheckbox:!0,children:t.jsx(p.CheckBoxWrapper,{children:t.jsx(a.Checkbox,{checked:ie(r),"aria-labelledby":he(r),onClick:()=>{A&&A(r,!ie(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},me=()=>t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},q,{title:(null==q?void 0:q.title)?"string"==typeof q.title?t.jsx(p.ErrorDisplayTitle,{weight:"bold",children:q.title}):q.title:t.jsx(p.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==q?void 0:q.description)?q.description:"No matching rows"}));return t.jsxs(p.TableWrapper,{id:b||"table-wrapper","data-testid":E["data-testid"]||"table",className:j,ref:K,onScroll:()=>{z&&K.current&&O(K.current.scrollTop+K.current.clientHeight>=K.current.scrollHeight)},tabIndex:0,children:[t.jsx(p.TableContainer,{children:t.jsxs(p.Table,{$end:P,$scrollable:z,ref:V,$stickyHeader:B,children:[t.jsx("thead",{ref:L,children:t.jsxs(p.HeaderRow,{children:[C&&je(),y.map(ye)]})}),t.jsx(p.TableBody,{$showLastRowBottomBorder:Q,children:"success"===m?!x||x.length<1?t.jsx(p.BodyRow,{$alternating:!1,children:t.jsx(p.EmptyViewCell,{colSpan:ae(),children:R?R():me()})}):t.jsx(t.Fragment,{children:null==x?void 0:x.map(((e,r)=>t.jsxs(p.BodyRow,{"data-testid":se(`row-${e.id.toString()}`),$alternating:ne(r),$isSelectable:C,$isSelected:ie(e.id.toString()),children:[C&&we(e),y.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx(p.BodyRow,{$alternating:!1,children:t.jsx("td",{colSpan:ae(),children:t.jsx(p.LoaderWrapper,{role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===m&&t.jsx(s.LoadingDotsSpinner,{})})})})})]})}),S&&$&&$.length>0&&(()=>{var e,r,i,n;const l=null!==(e=null==$?void 0:$.length)&&void 0!==e?e:0;return t.jsx(p.ActionBarWrapper,{ref:N,$fixed:G,$left:null===(i=null===(r=null==V?void 0:V.current)||void 0===r?void 0:r.getBoundingClientRect())||void 0===i?void 0:i.left,$width:null===(n=null==V?void 0:V.current)||void 0===n?void 0:n.clientWidth,children:t.jsxs(p.ActionBar,{$float:(z?!Y:!ee)||G,$scrollable:z,children:[t.jsx(c.Typography.BodyMD,{weight:"semibold",children:`${l} item${l>1?"s":""} selected`}),t.jsx(p.TextButton,{type:"button","aria-label":`Clear selection of ${l} item${1===l?"":"s"}`,onClick:D,children:"Clear selection"}),H]})})})(),t.jsx("div",{ref:e=>{W.current=e,Z(e)}})]})};
 //# sourceMappingURL=data-table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\n    ActionBarWrapper,\n    BodyCell,\n    BodyCellContent,\n    BodyRow,\n    CheckBoxWrapper,\n    EmptyViewCell,\n    ErrorDisplayTitle,\n    HeaderCell,\n    HeaderCellWrapper,\n    HeaderRow,\n    LoaderWrapper,\n    Table,\n    TableBody,\n    TableContainer,\n    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport { 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 [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\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        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\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 getHeaderWrapperId = (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 ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\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 headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                $clickable={clickable}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                $isCheckbox={false}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <HeaderCellWrapper id={headerCellWrapperId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </HeaderCellWrapper>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellWrapperId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </HeaderCell>\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            <HeaderCell\n                data-testid={getDataTestId(\"header-selection\")}\n                $clickable={false}\n                $isCheckbox={true}\n                scope=\"col\"\n            >\n                <CheckBoxWrapper>\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                </CheckBoxWrapper>\n            </HeaderCell>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <BodyRow\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        $alternating={isAlternatingRow(index)}\n                        $isSelectable={enableMultiSelect}\n                        $isSelected={isRowSelected(row.id.toString())}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </BodyRow>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header !== \"string\" ? header.style : undefined;\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        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                style={style}\n                $isCheckbox={false}\n            >\n                {typeof cellData === \"string\" ||\n                typeof cellData === \"number\" ? (\n                    <BodyCellContent>{cellData}</BodyCellContent>\n                ) : typeof cellData === \"function\" ? (\n                    cellData(row, { isSelected: isRowSelected(rowId) })\n                ) : (\n                    cellData\n                )}\n            </BodyCell>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                $isCheckbox={true}\n            >\n                <CheckBoxWrapper>\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                </CheckBoxWrapper>\n            </BodyCell>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={\n                    emptyView?.title ? (\n                        typeof emptyView.title === \"string\" ? (\n                            <ErrorDisplayTitle weight=\"bold\">\n                                {emptyView.title}\n                            </ErrorDisplayTitle>\n                        ) : (\n                            emptyView.title\n                        )\n                    ) : (\n                        <ErrorDisplayTitle weight=\"bold\">\n                            {\"No <items> found\"}\n                        </ErrorDisplayTitle>\n                    )\n                }\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                    <LoaderWrapper\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </LoaderWrapper>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </TextButton>\n                    {actionBarContent}\n                </ActionBar>\n            </ActionBarWrapper>\n        );\n    };\n\n    return (\n        <TableWrapper\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={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            <TableContainer>\n                <Table\n                    $end={tableEnd}\n                    $scrollable={scrollable}\n                    ref={tableRef}\n                    $stickyHeader={enableStickyHeader}\n                >\n                    {renderHeaders()}\n                    <TableBody $showLastRowBottomBorder={showLastBorder}>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\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        </TableWrapper>\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","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\n    ActionBarWrapper,\n    BodyCell,\n    BodyCellContent,\n    BodyRow,\n    CheckBoxWrapper,\n    EmptyViewCell,\n    ErrorDisplayTitle,\n    HeaderCell,\n    HeaderCellWrapper,\n    HeaderRow,\n    LoaderWrapper,\n    Table,\n    TableBody,\n    TableContainer,\n    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport { 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 [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\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        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\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\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 getHeaderWrapperId = (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 ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\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 headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                $clickable={clickable}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                $isCheckbox={false}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <HeaderCellWrapper id={headerCellWrapperId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </HeaderCellWrapper>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellWrapperId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </HeaderCell>\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            <HeaderCell\n                data-testid={getDataTestId(\"header-selection\")}\n                $clickable={false}\n                $isCheckbox={true}\n                scope=\"col\"\n            >\n                <CheckBoxWrapper>\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                </CheckBoxWrapper>\n            </HeaderCell>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <BodyRow $alternating={false}>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </BodyRow>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <BodyRow\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        $alternating={isAlternatingRow(index)}\n                        $isSelectable={enableMultiSelect}\n                        $isSelected={isRowSelected(row.id.toString())}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </BodyRow>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header !== \"string\" ? header.style : undefined;\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        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                style={style}\n                $isCheckbox={false}\n            >\n                {typeof cellData === \"string\" ||\n                typeof cellData === \"number\" ? (\n                    <BodyCellContent>{cellData}</BodyCellContent>\n                ) : typeof cellData === \"function\" ? (\n                    cellData(row, { isSelected: isRowSelected(rowId) })\n                ) : (\n                    cellData\n                )}\n            </BodyCell>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                $isCheckbox={true}\n            >\n                <CheckBoxWrapper>\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                </CheckBoxWrapper>\n            </BodyCell>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={\n                    emptyView?.title ? (\n                        typeof emptyView.title === \"string\" ? (\n                            <ErrorDisplayTitle weight=\"bold\">\n                                {emptyView.title}\n                            </ErrorDisplayTitle>\n                        ) : (\n                            emptyView.title\n                        )\n                    ) : (\n                        <ErrorDisplayTitle weight=\"bold\">\n                            {\"No <items> found\"}\n                        </ErrorDisplayTitle>\n                    )\n                }\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <BodyRow $alternating={false}>\n                <td colSpan={getTotalColumns()}>\n                    <LoaderWrapper\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </LoaderWrapper>\n                </td>\n            </BodyRow>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </TextButton>\n                    {actionBarContent}\n                </ActionBar>\n            </ActionBarWrapper>\n        );\n    };\n\n    return (\n        <TableWrapper\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={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            <TableContainer>\n                <Table\n                    $end={tableEnd}\n                    $scrollable={scrollable}\n                    ref={tableRef}\n                    $stickyHeader={enableStickyHeader}\n                >\n                    {renderHeaders()}\n                    <TableBody $showLastRowBottomBorder={showLastBorder}>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\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        </TableWrapper>\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","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"mappings":"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"}

package/cjs/filter/filter-modal.styles.js

@@ -1,38 +1,39 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../button-with-icon/button-with-icon.js"),n=require("../theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=o(t);const a=r.default.div`
-    background-color: ${n.Colour["bg-strong"]};
+"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../button-with-icon/button-with-icon.js"),o=require("../theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t);const l=r.default.div`
+    background-color: ${o.Colour["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,l=r.default.div`
-    background-color: ${n.Colour.bg};
+`,a=r.default.div`
+    background-color: ${o.Colour.bg};
     height: 100%;
     width: 100%;
 `,p=r.default.div`
     height: 100%;
-`,d=r.default.div`
+`,u=r.default.div`
     display: flex;
     align-items: center;
-    background-color: ${n.Colour.bg};
+    background-color: ${o.Colour.bg};
     ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,s=r.default.div`
+`,d=r.default.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: ${n.Spacing["spacing-8"]};
-    margin: ${n.Spacing["spacing-24"]} 0;
-`,u=r.default.h2`
-    ${n.Font["heading-xs-semibold"]}
-`,g=r.default.span`
+    gap: ${o.Spacing["spacing-8"]};
+    margin: ${o.Spacing["spacing-24"]} 0;
+`,s=r.default.h2`
+    ${o.Font["heading-xs-semibold"]}
+    color: ${o.Colour.text};
+`,c=r.default.span`
     display: inline-flex;
     align-items: center;
-    gap: ${n.Spacing["spacing-8"]};
-`,c=r.default(e.Button.Small)`
+    gap: ${o.Spacing["spacing-8"]};
+`,g=r.default(e.Button.Small)`
     background-color: transparent;
     height: 100%;
-    padding: ${n.Spacing["spacing-24"]} ${n.Spacing["spacing-20"]};
+    padding: ${o.Spacing["spacing-24"]} ${o.Spacing["spacing-20"]};
 `,f=r.default(i.ButtonWithIcon.Default)`
     width: 100%;
-`;exports.FilterButton=f,exports.FilterClearButton=c,exports.FilterHeader=d,exports.FilterTitle=u,exports.FilterTitleGroup=s,exports.FilterToggleContent=g,exports.FloatingWrapper=p,exports.MobileContainer=a,exports.MobileOverlayContainer=l;
+`;exports.FilterButton=f,exports.FilterClearButton=g,exports.FilterHeader=u,exports.FilterTitle=s,exports.FilterTitleGroup=d,exports.FilterToggleContent=c,exports.FloatingWrapper=p,exports.MobileContainer=l,exports.MobileOverlayContainer=a;
 //# sourceMappingURL=filter-modal.styles.js.map

package/cjs/filter/filter-modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAAA,QAAOC,GAAG;;;;;WAK/BQ,EAAAA,QAAQ;cACLA,EAAAA,QAAQ;EAGTC,EAAcV,EAAAA,QAAOW,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAsBb,EAAAA,QAAOc,IAAI;;;WAGnCL,EAAAA,QAAQ;EAGNM,EAAoBf,EAAAA,QAAOgB,SAAOC,MAAM;;;eAGtCR,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCS,EAAelB,EAAAA,QAAOmB,iBAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAAA,QAAOC,GAAG;;;;;WAK/BQ,EAAAA,QAAQ;cACLA,EAAAA,QAAQ;EAGTC,EAAcV,EAAAA,QAAOW,EAAE;MAC9BC,EAAAA,KAAK;aACEV,EAAAA,OAAa;EAGbW,EAAsBb,EAAAA,QAAOc,IAAI;;;WAGnCL,EAAAA,QAAQ;EAGNM,EAAoBf,EAAAA,QAAOgB,SAAOC,MAAM;;;eAGtCR,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCS,EAAelB,EAAAA,QAAOmB,iBAAeC,QAAQ;;"}

package/cjs/filter/filter-sidebar.styles.js

@@ -9,6 +9,7 @@
     align-items: center;
 
     background-color: ${r.Colour.bg};
+    color: ${r.Colour.text};
 `,d=o.default.div`
     flex: 1;
     display: flex;

package/cjs/filter/filter-sidebar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;EAGtBI,EAAmBN,EAAAA,QAAOC,GAAG;;;;;WAK/BM,EAAAA,QAAQ;cACLA,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAoBX,EAAAA,QAAOY,SAAOC,MAAM;;qBAEhCN,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;aACtBA,EAAAA,OAAa;EAGbI,EAAmBN,EAAAA,QAAOC,GAAG;;;;;WAK/BM,EAAAA,QAAQ;cACLA,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAoBX,EAAAA,QAAOY,SAAOC,MAAM;;qBAEhCN,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}

package/cjs/filter/filter.styles.js

@@ -1,8 +1,9 @@
-"use strict";var o=require("styled-components"),e=require("../button/button.js"),t=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(o);const a=n.default.div`
+"use strict";var o=require("styled-components"),t=require("../button/button.js"),e=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(o);const l=n.default.div`
     flex: 1;
     width: 100%;
     overflow-y: auto;
-`,d=n.default(t.ClickableIcon)`
+    color: ${r.Colour.text};
+`,a=n.default(e.ClickableIcon)`
     padding: ${r.Spacing["spacing-24"]} ${r.Spacing["spacing-20"]};
     margin-right: auto;
     color: ${r.Colour.icon};
@@ -15,12 +16,12 @@
     &:hover {
         color: ${r.Colour["icon-hover"]};
     }
-`,l=n.default.div`
+`,d=n.default.div`
     padding: ${r.Spacing["spacing-24"]} ${r.Spacing["spacing-20"]};
     background-color: ${r.Colour.bg};
     border-top: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
     ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
-`,c=n.default(e.Button.Default)`
+`,c=n.default(t.Button.Default)`
     width: 100%;
-`;exports.FilterBody=a,exports.FilterDoneButton=c,exports.FilterFooter=l,exports.FilterHeaderButton=d;
+`;exports.FilterBody=l,exports.FilterDoneButton=c,exports.FilterFooter=d,exports.FilterHeaderButton=a;
 //# sourceMappingURL=filter.styles.js.map

package/cjs/filter/filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","FilterHeaderButton","ClickableIcon","Spacing","Colour","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"2PAiBO,MAAMA,EAAaC,EAAAA,QAAOC,GAAG;;;;EAUvBC,EAAqBF,EAAAA,QAAOG,EAAAA,cAAc;eACxCC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCC,EAAAA,OAAa;;;;;;;;iBAQTA,EAAAA,OAAO;;EAQXC,EAAeN,EAAAA,QAAOC,GAAsB;eAC1CG,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;wBACxBC,EAAAA,OAAW;kBACjBE,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKF,SAAe;MACpEG,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAAA,QAAOW,SAAOC,QAAQ;;"}
+{"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n    color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","Colour","FilterHeaderButton","ClickableIcon","Spacing","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"2PAiBO,MAAMA,EAAaC,EAAAA,QAAOC,GAAG;;;;aAIvBC,EAAAA,OAAa;EAObC,EAAqBH,EAAAA,QAAOI,EAAAA,cAAc;eACxCC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCH,EAAAA,OAAa;;;;;;;;iBAQTA,EAAAA,OAAO;;EAQXI,EAAeN,EAAAA,QAAOC,GAAsB;eAC1CI,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;wBACxBH,EAAAA,OAAW;kBACjBK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKL,SAAe;MACpEM,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAAA,QAAOW,SAAOC,QAAQ;;"}

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles.js

@@ -1,25 +1,26 @@
-"use strict";var e=require("styled-components"),t=require("../../theme/index.js"),r=require("../styles/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e);const a=i.default.div`
+"use strict";var e=require("styled-components"),t=require("../../theme/index.js"),r=require("../styles/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e);const o=i.default.div`
     position: relative;
     width: 100%;
     ${t=>{const r="small"===t.$variant?2.5:3;return e.css`
             min-height: ${r}rem;
             height: ${r}rem; // Need this to persist the height when expanding or collapsing list
         `}}
-`,s=i.default.div`
+`,a=i.default.div`
     display: flex;
     flex: 1;
     word-break: break-all;
     ${r=>{if(r.$disabled)return e.css`
                 color: ${t.Colour["text-disabled"]};
             `}}
-`,o=i.default.div`
+`,s=i.default.div`
     ${e=>"small"===e.$variant?t.Font["body-md-regular"]:t.Font["body-baseline-regular"]}
+    color: ${t.Colour.text};
     text-align: left;
     ${t=>{if("middle"!==t.$truncateType)return e.css`
                     ${r.lineClampCss(1)}
                 `}}
     overflow: hidden;
-`,n=i.default(o)`
+`,n=i.default(s)`
     color: ${t.Colour["text-subtler"]};
-`;exports.LabelContainer=s,exports.PlaceholderLabel=n,exports.ValueLabel=o,exports.Wrapper=a;
+`;exports.LabelContainer=a,exports.PlaceholderLabel=n,exports.ValueLabel=s,exports.Wrapper=o;
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qMA+BA,MAIaA,EAAUC,EAAAA,QAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,KAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAAA,QAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,KAAG;yBACGG,EAAAA,OAAO;aAExB;EAIKC,EAAaT,EAAAA,QAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;MAEZR,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,KAAG;sBACJO,EAAAA,aAAa;;;EAOtBC,EAAmBb,EAAAA,QAAOS,EAAW;aACrCD,EAAAA,OAAO;"}
+{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qMA+BA,MAIaA,EAAUC,EAAAA,QAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,KAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAAA,QAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,KAAG;yBACGG,EAAAA,OAAO;aAExB;EAIKC,EAAaT,EAAAA,QAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAAA,KAAK,mBACLA,EAAAA,KAAK;aACNF,EAAAA,OAAa;;MAEnBN,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,KAAG;sBACJO,EAAAA,aAAa;;;EAOtBC,EAAmBb,EAAAA,QAAOS,EAAW;aACrCD,EAAAA,OAAO;"}

package/cjs/shared/internal-calendar/single/single-cell.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),r=require("../../../util/calendar-helper.js");require("../../../util/date-helper.js"),require("../../../util/date-input-helper.js"),require("react"),require("../../../util/simple-id-generator.js"),require("../../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../day-cell/day-cell.js");exports.SingleCell=({date:l,calendarDate:i,selectedDate:n,hoverDate:s,focusDate:o,minDate:c,maxDate:d,disabledDates:u,allowDisabledSelection:y,showActiveMonthDaysOnly:D,onSelect:h,onHover:b,onFocus:f,setFocusCell:v,tabIndex:p})=>{const m=r.CalendarHelper.isDisabledDay(l,u,c,d),j=!m||y,Y=()=>{h(l,!j)},g={date:l,calendarDate:i,disabled:m,interactive:j,currentDateIndicator:!0,onSelect:Y,onHover:()=>{b(l.format("YYYY-MM-DD"),!j)},onFocus:()=>{f(l.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(j&&Y());(e=>{let t;const r={ArrowLeft:()=>l.subtract(1,"day"),ArrowRight:()=>l.add(1,"day"),ArrowUp:()=>l.subtract(7,"day"),ArrowDown:()=>l.add(7,"day"),Home:()=>l.startOf("week"),End:()=>l.endOf("week"),PageUp:()=>e.shiftKey?l.subtract(1,"year"):l.subtract(1,"month"),PageDown:()=>e.shiftKey?l.add(1,"year"):l.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),v(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t.default(o),tabIndex:p};return e.jsx(a.DayCell,Object.assign({},g,(()=>{const e={};i.month()!==l.month()?e.labelType=D?"hidden":"unavailable":t.default().isSame(l,"day")&&!m&&(e.labelType="current");const r=l.isSame(n,"day"),a=l.isSame(s,"day");return r&&a?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):r?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):a&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),r=require("../../../util/calendar-helper.js");require("../../../util/date-helper.js"),require("../../../util/date-input-helper.js"),require("react"),require("../../../util/simple-id-generator.js"),require("../../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../day-cell/day-cell.js");exports.SingleCell=({date:l,calendarDate:i,selectedDate:n,hoverDate:s,focusDate:o,minDate:c,maxDate:d,disabledDates:u,allowDisabledSelection:y,showActiveMonthDaysOnly:D,onSelect:h,onHover:b,onFocus:f,setFocusCell:v,tabIndex:p})=>{const m=r.CalendarHelper.isDisabledDay(l,u,c,d),j=!m||y,Y=()=>{h(l,!j)},g={date:l,calendarDate:i,disabled:m,interactive:j,currentDateIndicator:!0,onSelect:Y,onHover:()=>{b(l.format("YYYY-MM-DD"),!j)},onFocus:()=>{f(l.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(j&&Y());(e=>{let t;const r={ArrowLeft:()=>l.subtract(1,"day"),ArrowRight:()=>l.add(1,"day"),ArrowUp:()=>l.subtract(7,"day"),ArrowDown:()=>l.add(7,"day"),Home:()=>l.startOf("week"),End:()=>l.endOf("week"),PageUp:()=>e.shiftKey?l.subtract(1,"year"):l.subtract(1,"month"),PageDown:()=>e.shiftKey?l.add(1,"year"):l.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),v(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t.default(o),tabIndex:p};return e.jsx(a.DayCell,Object.assign({},g,(()=>{const e={};i.month()!==l.month()?e.labelType=D?"hidden":"unavailable":t.default().isSame(l,"day")&&!m&&(e.labelType="current");const r=n&&l.isSame(n,"day"),a=l.isSame(s,"day");return r&&a?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):r?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):a&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};
 //# sourceMappingURL=single-cell.js.map

package/cjs/shared/internal-calendar/single/single-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-cell.js","sources":["../../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import dayjs, { Dayjs } from \"dayjs\";\nimport { CalendarHelper } from \"../../../util\";\nimport { CellStyleProps, DayCell, DayCellProps } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string | undefined;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const SingleCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        const isSelected = date.isSame(selectedDate, \"day\");\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        if (isSelected && isHover) {\n            props.labelType = \"selected-hover\";\n            props.circleLeft = \"selected-hover-outline\";\n            props.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            props.labelType = \"hover\";\n            props.circleLeft = \"hover-subtle\";\n            props.circleRight = \"hover-subtle\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"mbAsB0B,EACtBA,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAAA,eAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAAA,QAAMzC,GACjBU,YAGJ,OAAOgC,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,EAAAA,UAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAatD,EAAKqD,OAAOnD,EAAc,OACvCqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}
+{"version":3,"file":"single-cell.js","sources":["../../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import dayjs, { Dayjs } from \"dayjs\";\nimport { CalendarHelper } from \"../../../util\";\nimport { CellStyleProps, DayCell, DayCellProps } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string | undefined;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const SingleCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        const isSelected = selectedDate && date.isSame(selectedDate, \"day\");\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        if (isSelected && isHover) {\n            props.labelType = \"selected-hover\";\n            props.circleLeft = \"selected-hover-outline\";\n            props.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            props.labelType = \"hover\";\n            props.circleLeft = \"hover-subtle\";\n            props.circleRight = \"hover-subtle\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"mbAsB0B,EACtBA,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAAA,eAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAAA,QAAMzC,GACjBU,YAGJ,OAAOgC,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,EAAAA,UAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAapD,GAAgBF,EAAKqD,OAAOnD,EAAc,OACvDqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}