@lifesg/react-design-system 3.5.0-canary.4 → 3.5.0-canary.6

package/cjs/toggle/toggle.styles.js

@@ -27,15 +27,24 @@
     // apply container border and header background color
     ${o=>"no-border"===o.$styleType?o.$error?o.$disabled?e.css`
                             border-color: ${d.Colour["border-error"]};
-                        `:e.css`
-                            border-color: ${d.Colour["border-error"]};
+                        `:o.$selected?e.css`
+                            border-color: transparent;
+                            background: ${d.Colour["bg-error"]};
 
                             &:has(${g}:hover) {
                                 @media (pointer: fine) {
-                                    background: ${d.Colour["bg-hover-subtle"]};
+                                    background: ${d.Colour["bg-error-hover"]};
                                 }
                             }
-                        `:o.$disabled?o.$selected?e.css`
+                        `:e.css`
+                        border-color: ${d.Colour["border-error"]};
+
+                        &:has(${g}:hover) {
+                            @media (pointer: fine) {
+                                background: ${d.Colour["bg-hover-subtle"]};
+                            }
+                        }
+                    `:o.$disabled?o.$selected?e.css`
                             border: none;
                             background: ${d.Colour["bg-selected-disabled"]};
                         `:e.css`
@@ -67,15 +76,24 @@
                     }
                 `:o.$error?o.$disabled?e.css`
                             border-color: ${d.Colour["border-error"]};
-                        `:e.css`
+                        `:o.$selected?e.css`
                             border-color: ${d.Colour["border-error"]};
+                            background: ${d.Colour["bg-error"]};
 
                             &:has(${g}:hover) {
                                 @media (pointer: fine) {
-                                    background: ${d.Colour["bg-hover-subtle"]};
+                                    background: ${d.Colour["bg-error-hover"]};
                                 }
                             }
-                        `:o.$disabled?o.$selected?e.css`
+                        `:e.css`
+                        border-color: ${d.Colour["border-error"]};
+
+                        &:has(${g}:hover) {
+                            @media (pointer: fine) {
+                                background: ${d.Colour["bg-hover-subtle"]};
+                            }
+                        }
+                    `:o.$disabled?o.$selected?e.css`
                             border-color: ${d.Colour["border-selected-disabled"]};
                             background: ${d.Colour["bg-selected-disabled"]};
                         `:e.css`
@@ -130,12 +148,14 @@
     overflow: hidden;
 
     // apply header container text color
-    ${o=>o.$disabled?o.$selected?e.css`
+    ${o=>o.$selected?o.$disabled?e.css`
                     color: ${d.Colour["text-selected-disabled"]};
+                `:o.$error?e.css`
+                    color: ${d.Colour["text-error"]};
                 `:e.css`
-                    color: ${d.Colour["text-disabled"]};
-                `:o.$selected?e.css`
                 color: ${d.Colour["text-selected"]};
+            `:o.$disabled?e.css`
+                color: ${d.Colour["text-disabled"]};
             `:e.css`
             color: ${d.Colour.text};
         `}
@@ -168,13 +188,13 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-`,m=s.default.div`
+`,h=s.default.div`
     display: flex;
     height: 100%;
     width: 100%;
     position: relative;
     padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,h=s.default.button`
+`,m=s.default.button`
     color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
     white-space: nowrap;
     ${d.Font["body-md-semibold"]}
@@ -184,7 +204,7 @@
     background: none;
 
     cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-`,x=s.default.button`
+`,C=s.default.button`
     color: ${e=>e.disabled?d.Colour["text-disabled"]:d.Colour["text-primary"]};
     ${d.Font["body-baseline-semibold"]}
     display: flex;
@@ -202,7 +222,7 @@
         height: 1em;
         margin-left: 0.5rem;
     }
-`,C=s.default.div`
+`,x=s.default.div`
     width: 100%;
     color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
     border: none;
@@ -224,21 +244,23 @@
             `:o.$selected?e.css`
                 color: ${d.Colour["text-selected"]};
             `:e.css`
-                color: ${d.Colour.text};
-            `}
+            color: ${d.Colour.text};
+        `}
 `,y=s.default(i.Typography.BodyMD)`
     color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
 `,w=s.default(l.TextList.Ul)`
     color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
 `,k=s.default(t.ToggleIcon)`
-    ${o=>o.$disabled?o.$selected?e.css`
+    ${o=>o.$selected?o.$disabled?e.css`
                     color: ${d.Colour["icon-selected-disabled"]};
+                `:o.$error?e.css`
+                    color: ${d.Colour["icon-error-strong"]};
                 `:e.css`
-                    color: ${d.Colour["icon-disabled-subtle"]};
-                `:o.$selected?e.css`
                 color: ${d.Colour["icon-selected"]};
+            `:o.$disabled?e.css`
+                color: ${d.Colour["icon-disabled-subtle"]};
             `:e.css`
             color: ${d.Colour["icon-subtle"]};
         `};
-`;exports.AlertContainer=f,exports.Children=v,exports.Container=a,exports.ErrorContainer=C,exports.ErrorList=w,exports.ErrorText=y,exports.ExpandButton=x,exports.HeaderContainer=g,exports.IndicatorLabelContainer=m,exports.Input=c,exports.InputContainer=u,exports.Label=$,exports.RemoveButton=h,exports.StyledToggleIcon=k,exports.SubLabel=p,exports.TextContainer=b;
+`;exports.AlertContainer=f,exports.Children=v,exports.Container=a,exports.ErrorContainer=x,exports.ErrorList=w,exports.ErrorText=y,exports.ExpandButton=C,exports.HeaderContainer=g,exports.IndicatorLabelContainer=h,exports.Input=c,exports.InputContainer=u,exports.Label=$,exports.RemoveButton=m,exports.StyledToggleIcon=k,exports.SubLabel=p,exports.TextContainer=b;
 //# sourceMappingURL=toggle.styles.js.map

package/cjs/toggle/toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\ninterface InteractiveStyleProps {\n    $disabledVisual?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-selected-disabled\"]};\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-disabled\"]};\n                            background: ${Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${Colour[\"border-selected\"]};\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input<InteractiveStyleProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${Colour[\"text-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? Font[\"body-baseline-semibold\"]\n            : Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled ? Colour[\"text-disabled\"] : Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${Colour.text};\n            `;\n        }\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${Colour[\"icon-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${Colour[\"icon-disabled-subtle\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"icon-selected\"]};\n            `;\n        }\n        return css`\n            color: ${Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","Radius","Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","HeaderContainer","$selected","TextContainer","StyledToggleIcon","border","Input","input","$disabledVisual","InputContainer","text","Label","label","Font","_a","_b","$maxLines","desktop","MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","disabled","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $error?: boolean;\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\ninterface InteractiveStyleProps {\n    $disabledVisual?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: transparent;\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-selected-disabled\"]};\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-disabled\"]};\n                            background: ${Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${Colour[\"border-selected\"]};\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input<InteractiveStyleProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled) {\n                return css`\n                    color: ${Colour[\"text-selected-disabled\"]};\n                `;\n            }\n\n            if (props.$error) {\n                return css`\n                    color: ${Colour[\"text-error\"]};\n                `;\n            }\n\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? Font[\"body-baseline-semibold\"]\n            : Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled ? Colour[\"text-disabled\"] : Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled)\n                return css`\n                    color: ${Colour[\"icon-selected-disabled\"]};\n                `;\n\n            if (props.$error)\n                return css`\n                    color: ${Colour[\"icon-error-strong\"]};\n                `;\n\n            return css`\n                color: ${Colour[\"icon-selected\"]};\n            `;\n        }\n\n        if (props.$disabled)\n            return css`\n                color: ${Colour[\"icon-disabled-subtle\"]};\n            `;\n\n        return css`\n            color: ${Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","Radius","Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","$selected","HeaderContainer","TextContainer","StyledToggleIcon","border","Input","input","$disabledVisual","InputContainer","text","Label","label","Font","_a","_b","$maxLines","desktop","MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","disabled","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"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"}

package/codemods/data.ts

@@ -1,23 +1,4 @@
-export const textComponentMap = {
-    D1: "HeadingXXL",
-    D2: "HeadingXL",
-    D3: "HeadingMD",
-    D4: "HeadingSM",
-    H1: "HeadingLG",
-    H2: "HeadingMD",
-    H3: "HeadingSM",
-    H4: "HeadingXS",
-    H5: "BodyMD",
-    H6: "BodySM",
-    DBody: "HeadingSM",
-    Body: "BodyBL",
-    BodySmall: "BodyMD",
-    XSmall: "BodyXS",
-    "Hyperlink.Default": "LinkBL",
-    "Hyperlink.Small": "LinkMD",
-};
-
-export const textStyleFontMap = {
+export const sizePropMapping = {
     D1: "heading-xxl",
     D2: "heading-xl",
     D3: "heading-md",
@@ -33,16 +14,3 @@ export const textStyleFontMap = {
     BodySmall: "body-md",
     XSmall: "body-xs",
 };
-
-export const weightMap = {
-    regular: "regular",
-    semibold: "semibold",
-    bold: "bold",
-    light: "light",
-    black: "bold",
-    400: "regular",
-    600: "semibold",
-    700: "bold",
-    300: "light",
-    900: "bold",
-};

package/codemods/index.ts

@@ -1,36 +1,23 @@
-import {
-    API,
-    ASTPath,
-    FileInfo,
-    JSCodeshift,
-    MemberExpression,
-} from "jscodeshift";
+import { API, FileInfo, JSCodeshift } from "jscodeshift";
 import { CodemodUtils } from "../codemod-utils";
-import { textComponentMap, textStyleFontMap, weightMap } from "./data";
+import { sizePropMapping } from "./data";
 
 // ======= Constants ======= //
 
 const IMPORT_PATHS = {
-    V2_TEXT: "@lifesg/react-design-system/v2_text",
+    TEXT_LIST: "@lifesg/react-design-system/text-list",
+    V2_TEXT_LIST: "@lifesg/react-design-system/v2_text-list",
     DESIGN_SYSTEM: "@lifesg/react-design-system",
-    TYPOGRAPHY: "@lifesg/react-design-system/typography",
-    THEME: "@lifesg/react-design-system/theme",
 };
 
 const IMPORT_SPECIFIERS = {
-    V2_TEXT: "V2_Text",
-    V2_TEXT_STYLE_HELPER: "V2_TextStyleHelper",
-    TYPOGRAPHY: "Typography",
-    FONT: "Font",
+    TEXT_LIST: "TextList",
+    V2_TEXT_LIST: "V2_TextList",
 };
 
 const JSX_IDENTIFIERS = {
-    V2_TEXT: "V2_Text",
-    TYPOGRAPHY: "Typography",
-};
-
-const IDENTIFIERS = {
-    V2_GET_TEXT_STYLE: "getTextStyle",
+    TEXT_LIST: "TextList",
+    V2_TEXT_LIST: "V2_TextList",
 };
 
 // ======= Transformer Function ======= //
@@ -39,156 +26,84 @@ export default function transformer(file: FileInfo, api: API) {
     const j: JSCodeshift = api.jscodeshift;
     const source = j(file.source);
 
-    const importsText = CodemodUtils.hasImport(
-        source,
-        api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
-        IMPORT_SPECIFIERS.V2_TEXT
-    );
-    const importsTextStyleHelper = CodemodUtils.hasImport(
+    const isV2TextListImport = CodemodUtils.hasImport(
         source,
         api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
-        IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
+        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
+        IMPORT_SPECIFIERS.V2_TEXT_LIST
     );
 
-    const replaceWithTypography = (
-        path: ASTPath<MemberExpression>,
-        newComponentValue: string
-    ) => {
-        path.replace(
-            j.memberExpression(
-                j.identifier(JSX_IDENTIFIERS.TYPOGRAPHY),
-                j.identifier(newComponentValue)
-            )
-        );
-    };
-
-    if (importsText) {
+    if (isV2TextListImport) {
         CodemodUtils.addImport(
             source,
             api,
-            IMPORT_PATHS.TYPOGRAPHY,
-            IMPORT_SPECIFIERS.TYPOGRAPHY
+            IMPORT_PATHS.TEXT_LIST,
+            IMPORT_SPECIFIERS.TEXT_LIST
         );
 
         CodemodUtils.removeImport(
             source,
             api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
-            IMPORT_SPECIFIERS.V2_TEXT
+            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
+            IMPORT_SPECIFIERS.V2_TEXT_LIST
         );
 
         source
-            .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT })
+            .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT_LIST })
             .forEach((path) => {
-                // Replace V2_Text with Typography
-                path.node.name = JSX_IDENTIFIERS.TYPOGRAPHY;
+                path.node.name = JSX_IDENTIFIERS.TEXT_LIST;
             });
 
-        // Map to respective V3 Typography component usage
         source.find(j.MemberExpression).forEach((path) => {
-            const propertyNameParts: string[] = [];
-            let currentPath = path.node;
-            let startsWithTypography = false;
-
-            while (j.MemberExpression.check(currentPath)) {
-                const property = currentPath.property;
-                const object = currentPath.object;
-
-                if (j.Identifier.check(property)) {
-                    propertyNameParts.unshift(property.name);
-                }
-
-                if (j.MemberExpression.check(object)) {
-                    currentPath = object;
-                } else if (j.Identifier.check(object)) {
-                    if (object.name === JSX_IDENTIFIERS.TYPOGRAPHY) {
-                        startsWithTypography = true;
-                    }
-                    break;
-                } else {
-                    break;
-                }
+            if (
+                j.Identifier.check(path.node.object) &&
+                path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
+            ) {
+                path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
             }
+        });
 
-            if (startsWithTypography) {
-                const propertyName = propertyNameParts.join(
-                    "."
-                ) as keyof typeof textComponentMap;
-                const newTypographyValue = textComponentMap[propertyName];
-                if (newTypographyValue) {
-                    replaceWithTypography(path, newTypographyValue);
-                }
+        source.find(j.JSXMemberExpression).forEach((path) => {
+            if (
+                j.JSXIdentifier.check(path.node.object) &&
+                path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
+            ) {
+                path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
             }
         });
-    }
 
-    if (importsTextStyleHelper) {
-        let usesTextStyleHelper = false;
+        source.find(j.JSXOpeningElement).forEach((path) => {
+            const openingElement = path.node;
+            let isTextListElement = false;
 
-        source.find(j.CallExpression).forEach((path) => {
             if (
-                !j.CallExpression.check(path.node) ||
-                !j.MemberExpression.check(path.node.callee) ||
-                !j.Identifier.check(path.node.callee.object) ||
-                path.node.callee.object.name !==
-                    IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER ||
-                !j.Identifier.check(path.node.callee.property) ||
-                path.node.callee.property.name !== IDENTIFIERS.V2_GET_TEXT_STYLE
+                j.JSXMemberExpression.check(openingElement.name) &&
+                j.JSXIdentifier.check(openingElement.name.object) &&
+                openingElement.name.object.name === JSX_IDENTIFIERS.TEXT_LIST
             ) {
-                return;
+                isTextListElement = true;
             }
 
-            const style = j.Literal.check(path.node.arguments[0])
-                ? path.node.arguments[0].value
-                : undefined;
-            const weight = j.Literal.check(path.node.arguments[1])
-                ? path.node.arguments[1].value
-                : "regular";
-
-            if (!style) {
-                return;
+            if (isTextListElement) {
+                const attributes = openingElement.attributes;
+
+                attributes?.forEach((attribute) => {
+                    if (
+                        j.JSXAttribute.check(attribute) &&
+                        attribute.name.name === "size" &&
+                        j.StringLiteral.check(attribute.value)
+                    ) {
+                        const sizeValue = attribute.value
+                            .value as keyof typeof sizePropMapping;
+                        if (sizePropMapping[sizeValue]) {
+                            attribute.value = j.literal(
+                                sizePropMapping[sizeValue]
+                            );
+                        }
+                    }
+                });
             }
-
-            const mappedType =
-                textStyleFontMap[style as keyof typeof textStyleFontMap];
-            const mappedWeight = weightMap[weight as keyof typeof weightMap];
-
-            j(path).replaceWith(() => {
-                return j.memberExpression(
-                    j.identifier("Font"),
-                    j.literal(`${mappedType}-${mappedWeight}`)
-                );
-            });
-
-            usesTextStyleHelper = true;
         });
-
-        if (usesTextStyleHelper) {
-            CodemodUtils.addImport(
-                source,
-                api,
-                IMPORT_PATHS.THEME,
-                IMPORT_SPECIFIERS.FONT
-            );
-        }
-
-        if (
-            !CodemodUtils.hasReferences(
-                source,
-                api,
-                [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
-                IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
-            )
-        ) {
-            CodemodUtils.removeImport(
-                source,
-                api,
-                [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
-                IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
-            );
-        }
     }
 
     return source.toSource();

package/data-table/data-table.d.ts

@@ -1,2 +1,2 @@
 import { DataTableProps } from "./types";
-export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableActionBarWithoutSelection, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;

package/data-table/data-table.js

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