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

package/cjs/uneditable-section/uneditable-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    className,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n"],"names":["_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"qWAWsCA,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAA,OAAAf,EAdqB,yJAmBlC,MAAMgB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAAA,IAAA,KAAA,CACIZ,UAAWgB,EAAAA,QACPC,EAAAA,OACAtB,GAAWuB,EAAAA,mBACXtB,GAAauB,EAAAA,iBAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAA,KAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAAAA,IAACW,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EAAAA,QACPW,EAAAA,MACAhC,GAAWuB,EAAAA,oBACdzB,SAEAJ,IAGRC,GACGsB,MAACW,EAAAA,WAAWK,OAAM,CACd5B,UAAWgB,EAAAA,QACPa,EAAAA,YACAlC,GAAWuB,EAAAA,6BAGd5B,IAGRC,GACGqB,EAAAA,IAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAAA,IAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAAA,yBACIZ,UAAWgB,UACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,YAEHmB,OAKTR,EAAAA,IAACoB,EAAAA,OAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EAAAA,QACPkB,UACAxC,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}
+{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0VAaA,MA0JaA,OAAwBC,QAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAA,OAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAAA,IAAA,KAAA,CACIZ,UAAWgB,EAAAA,QACPC,EAAAA,OACAtB,GAAWuB,EAAAA,mBACXtB,GAAauB,EAAAA,iBAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAA,KAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAAAA,IAACW,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EAAAA,QACPW,EAAAA,MACAhC,GAAWuB,EAAAA,oBACdzB,SAEAJ,IAGRC,GACGsB,MAACW,EAAAA,WAAWK,OAAM,CACd5B,UAAWgB,EAAAA,QACPa,EAAAA,YACAlC,GAAWuB,EAAAA,6BAGd5B,IAGRC,GACGqB,EAAAA,IAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAAA,IAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAAA,IAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EAAAA,QACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAAAA,IAACoB,SAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,UACPkB,EAAAA,QACAxC,GAAcqC,oBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

package/cjs/uneditable-section/uneditable-section.styles_aj9zun.css

@@ -1,8 +1,8 @@
-.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
+@layer fds{.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
 .wbsp4gm{padding-top:2rem;padding-bottom:2rem;}
 .w3q0cqh{background:var(--fds-colour-bg-strong);}
 .t29kg6u{margin-bottom:1rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .t29kg6u{-ms-grid-column:1/-1;grid-column:1/-1;}
 .dkpvxbb{margin-bottom:2rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .dkpvxbb{-ms-grid-column:1/-1;grid-column:1/-1;}
 .ctukz41{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .ctukz41{-ms-grid-column:1/-1;grid-column:1/-1;}
 .g11duom5{grid-column:span 8;-webkit-column-gap:2rem;column-gap:2rem;row-gap:2rem;display:-ms-grid;display:grid;-ms-grid-columns:repeat(8, minmax(0, 1fr));grid-template-columns:repeat(8, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .g11duom5{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .g11duom5{-webkit-column-gap:1.5rem;column-gap:1.5rem;}:where(body.fds-breakpoint-sm-max) .g11duom5{-webkit-column-gap:1rem;column-gap:1rem;}.g11duom5:not(:last-child){margin-bottom:2rem;}
-.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}
+.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}}

package/cjs/unit-number/unit-number-input.styles_8yizj.css

@@ -1,7 +1,7 @@
-.h1ujh1ah{margin-right:0.5rem;}
+@layer fds{.h1ujh1ah{margin-right:0.5rem;}
 .i1a7rbgo input{text-align:center;}
 .fqv7th5{width:2.5rem;}
 .u1g8qqjx{margin-left:0.5rem;width:6rem;}.u1g8qqjx input{text-align:left;}
 .u52196f{margin:0 0.25rem;}
 .urthzty{color:var(--fds-colour-text-disabled);}
-.rwsbmaf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(3rem - 2px);}
+.rwsbmaf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(3rem - 2px);}}

package/cjs/util/is-styled-components.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(e){return null!=e&&("function"==typeof e||"object"==typeof e)&&"styledComponentId"in e};
+//# sourceMappingURL=is-styled-components.js.map

package/cjs/util/is-styled-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-styled-components.js","sources":["../../../src/util/is-styled-components.ts"],"sourcesContent":["/*\n    Extracted isStyledComponent function from styled-components repo \n    Refer to the original implementation here:\n    https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/isStyledComponent.ts\n*/\n\ntype StyledComponentBrand = { readonly _sc: symbol };\n\nexport default function isStyledComponent(\n    target: any\n): target is StyledComponentBrand {\n    return (\n        target != null &&\n        (typeof target === \"function\" || typeof target === \"object\") &&\n        \"styledComponentId\" in target\n    );\n}\n"],"names":["target"],"mappings":"oFAQc,SACVA,GAEA,OACc,MAAVA,IACmB,mBAAXA,GAA2C,iBAAXA,IACxC,sBAAuBA,CAE/B"}

package/cjs/util/styling-helper.js

@@ -1,2 +1,2 @@
-"use strict";require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var e=require("../theme/tokens/border.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var r=require("../theme/tokens/radius.js"),s=require("../theme/utils/token-resolver.js");require("./calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("./simple-id-generator.js"),require("./string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");const i=new Set(Object.values(r.Radius)),t=new Set(Object.values(e.BorderThickness));exports.isColourToken=e=>s.isTokenWithPrefix(e,"var(--fds-colour-"),exports.isRadiusToken=e=>s.isTokenFromSet(e,i),exports.isThicknessToken=e=>s.isTokenFromSet(e,t);
+"use strict";require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var e=require("../theme/tokens/border.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var r=require("../theme/tokens/radius.js");require("./calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("./simple-id-generator.js"),require("./string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var s=require("../theme/utils/token-resolver.js");const i=new Set(Object.values(r.Radius)),t=new Set(Object.values(e.BorderThickness));exports.isColourToken=e=>s.isTokenWithPrefix(e,"var(--fds-colour-"),exports.isRadiusToken=e=>s.isTokenFromSet(e,i),exports.isThicknessToken=e=>s.isTokenFromSet(e,t);
 //# sourceMappingURL=styling-helper.js.map

package/cjs/util/styling-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling-helper.js","sources":["../../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","value","isTokenWithPrefix","isTokenFromSet"],"mappings":"6kBAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,EAAAA,SAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,EAAAA,wCAkBpDC,GAEOC,EAAAA,kBACHD,EACA,2CAnBJA,GAEOE,EAAAA,eAAwCF,EAAOP,4BAItDO,GAEOE,EAAAA,eACHF,EACAF"}
+{"version":3,"file":"styling-helper.js","sources":["../../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport { BorderThickness, Radius } from \"../theme\";\nimport { isTokenFromSet, isTokenWithPrefix } from \"../theme/utils\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","value","isTokenWithPrefix","isTokenFromSet"],"mappings":"ilBAQA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,EAAAA,SAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,EAAAA,wCAkBpDC,GAEOC,EAAAA,kBACHD,EACA,2CAnBJA,GAEOE,EAAAA,eAAwCF,EAAOP,4BAItDO,GAEOE,EAAAA,eACHF,EACAF"}

package/codemod-utils.d.ts

@@ -3,6 +3,7 @@ export declare class CodemodUtils {
     static hasImport(source: Collection, api: API, importPath: string | string[], importSpecifier: string): boolean;
     static addImport(source: Collection, api: API, importPath: string, importSpecifier: string): void;
     static removeImport(source: Collection, api: API, importPath: string | string[], importSpecifier: string): void;
+    static replaceImport(source: Collection, api: API, oldImportPath: string | string[], oldImportSpecifier: string, newImportPath: string, newImportSpecifier: string): void;
     static hasReferences(source: Collection, api: API, importPath: string | string[], importSpecifier: string): boolean;
     static getObjectPath(source: Collection, api: API, path: ASTPath<MemberExpression>): string | undefined;
 }

package/codemods/codemod-utils.ts

@@ -122,6 +122,23 @@ export class CodemodUtils {
         });
     }
 
+    public static replaceImport(
+        source: Collection,
+        api: API,
+        oldImportPath: string | string[],
+        oldImportSpecifier: string,
+        newImportPath: string,
+        newImportSpecifier: string
+    ) {
+        CodemodUtils.addImport(source, api, newImportPath, newImportSpecifier);
+        CodemodUtils.removeImport(
+            source,
+            api,
+            oldImportPath,
+            oldImportSpecifier
+        );
+    }
+
     public static hasReferences(
         source: Collection,
         api: API,

package/codemods/index.ts

@@ -1,111 +1,267 @@
-import type { API, FileInfo, JSCodeshift } from "jscodeshift";
+import type {
+    API,
+    FileInfo,
+    JSCodeshift,
+    JSXAttribute,
+    JSXElement,
+    Literal,
+    Property,
+} from "jscodeshift";
 
 import { CodemodUtils } from "../codemod-utils";
-import { sizePropMapping } from "./data";
 
-// ======= Constants ======= //
+// =============================================================================
+// CONSTANTS
+// =============================================================================
 
-const IMPORT_PATHS = {
-    TEXT_LIST: "@lifesg/react-design-system/text-list",
-    V2_TEXT_LIST: "@lifesg/react-design-system/v2_text-list",
+const OLD_IMPORT_PATHS = {
+    V2_POPOVER: "@lifesg/react-design-system/popover-v2",
+    V1_POPOVER: "@lifesg/react-design-system/popover",
     DESIGN_SYSTEM: "@lifesg/react-design-system",
 };
 
-const IMPORT_SPECIFIERS = {
-    TEXT_LIST: "TextList",
-    V2_TEXT_LIST: "V2_TextList",
+const NEW_IMPORT_PATHS = {
+    POPOVER: "@lifesg/react-design-system/popover",
 };
 
-const JSX_IDENTIFIERS = {
-    TEXT_LIST: "TextList",
-    V2_TEXT_LIST: "V2_TextList",
+const OLD_IDENTIFIERS = {
+    V2_POPOVER: "PopoverV2",
+    V2_POPOVER_TRIGGER: "PopoverTrigger",
+    V1_POPOVER: "Popover",
+    V1_POPOVER_TRIGGER: "withPopover",
 };
 
-// ======= Transformer Function ======= //
+const NEW_IDENTIFIERS = {
+    POPOVER: "Popover",
+    POPOVER_TRIGGER: "PopoverTrigger",
+};
+
+const TYPING_MAP = {
+    PopoverV2Props: "PopoverProps",
+    PopoverRenderProps: "PopoverRenderProps",
+    PopoverV2TriggerType: "PopoverTriggerType",
+    PopoverOverflowType: "PopoverOverflowType",
+    PopoverV2Position: "PopoverPosition",
+    PopoverV2TriggerProps: "PopoverTriggerProps",
+    PopoverInlineStyle: "PopoverInlineStyle",
+    PopoverInlineProps: "PopoverInlineProps",
+    PopoverInline: "PopoverInline",
+};
+
+// =============================================================================
+// TRANSFORMER
+// =============================================================================
 
 export default function transformer(file: FileInfo, api: API) {
     const j: JSCodeshift = api.jscodeshift;
     const source = j(file.source);
 
-    const isV2TextListImport = CodemodUtils.hasImport(
+    // =========================================================================
+    // Migrate Popover to PopoverV2 usage
+    // =========================================================================
+
+    const isV1PopoverImport = CodemodUtils.hasImport(
         source,
         api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
-        IMPORT_SPECIFIERS.V2_TEXT_LIST
+        [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V1_POPOVER],
+        OLD_IDENTIFIERS.V1_POPOVER
     );
 
-    if (isV2TextListImport) {
-        CodemodUtils.addImport(
+    if (isV1PopoverImport) {
+        CodemodUtils.replaceImport(
             source,
             api,
-            IMPORT_PATHS.TEXT_LIST,
-            IMPORT_SPECIFIERS.TEXT_LIST
+            [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V1_POPOVER],
+            OLD_IDENTIFIERS.V1_POPOVER,
+            OLD_IMPORT_PATHS.V2_POPOVER,
+            OLD_IDENTIFIERS.V2_POPOVER
         );
 
-        CodemodUtils.removeImport(
+        // simple 1:1 rename as there are no breaking changes to the props
+        source
+            .find(j.JSXIdentifier, { name: OLD_IDENTIFIERS.V1_POPOVER })
+            .forEach((path) => {
+                path.node.name = OLD_IDENTIFIERS.V2_POPOVER;
+            });
+    }
+
+    const isV1PopoverTriggerImport = CodemodUtils.hasImport(
+        source,
+        api,
+        [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V1_POPOVER],
+        OLD_IDENTIFIERS.V1_POPOVER_TRIGGER
+    );
+
+    if (isV1PopoverTriggerImport) {
+        let successCount = 0;
+        let failureCount = 0;
+
+        source
+            .find(j.CallExpression, {
+                callee: { name: OLD_IDENTIFIERS.V1_POPOVER_TRIGGER },
+            })
+            .forEach((path) => {
+                const [triggerComponent, options] = path.node.arguments;
+
+                let triggerAsJSXElement: JSXElement;
+
+                if (j.Identifier.check(triggerComponent)) {
+                    triggerAsJSXElement = j.jsxElement(
+                        j.jsxOpeningElement(
+                            j.jsxIdentifier(triggerComponent.name),
+                            [],
+                            true
+                        )
+                    );
+                    successCount++;
+                } else if (j.JSXElement.check(triggerComponent)) {
+                    triggerAsJSXElement = triggerComponent;
+                    successCount++;
+                } else {
+                    failureCount++;
+                    return;
+                }
+
+                const attributes: JSXAttribute[] = [];
+
+                if (j.ObjectExpression.check(options)) {
+                    const trigger = options.properties.find(
+                        (prop) =>
+                            j.ObjectProperty.check(prop) &&
+                            j.Identifier.check(prop.key) &&
+                            prop.key.name === "trigger"
+                    ) as Property;
+
+                    if (trigger && j.Literal.check(trigger.value)) {
+                        attributes.push(
+                            j.jsxAttribute(
+                                j.jsxIdentifier("trigger"),
+                                trigger.value
+                            )
+                        );
+                    }
+
+                    const content = options.properties.find(
+                        (prop) =>
+                            j.ObjectProperty.check(prop) &&
+                            j.Identifier.check(prop.key) &&
+                            prop.key.name === "content"
+                    ) as Property;
+
+                    if (content) {
+                        attributes.push(
+                            j.jsxAttribute(
+                                j.jsxIdentifier("popoverContent"),
+                                content.value as Literal | JSXElement
+                            )
+                        );
+                    }
+                }
+
+                path.replace(
+                    j.jsxElement(
+                        j.jsxOpeningElement(
+                            j.jsxIdentifier(NEW_IDENTIFIERS.POPOVER_TRIGGER),
+                            attributes
+                        ),
+                        j.jsxClosingElement(
+                            j.jsxIdentifier(NEW_IDENTIFIERS.POPOVER_TRIGGER)
+                        ),
+                        [triggerAsJSXElement]
+                    )
+                );
+            });
+
+        if (successCount) {
+            CodemodUtils.addImport(
+                source,
+                api,
+                NEW_IMPORT_PATHS.POPOVER,
+                NEW_IDENTIFIERS.POPOVER_TRIGGER
+            );
+        }
+
+        if (failureCount) {
+            console.warn(
+                `\x1b[31m[MIGRATION] Unable to migrate withPopover at file:\x1b[0m ${file.path}`
+            );
+        } else {
+            CodemodUtils.removeImport(
+                source,
+                api,
+                [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V1_POPOVER],
+                OLD_IDENTIFIERS.V1_POPOVER_TRIGGER
+            );
+        }
+    }
+
+    // =========================================================================
+    // Migrate PopoverV2 to new import path and specifiers
+    // =========================================================================
+
+    const isV2PopoverImport = CodemodUtils.hasImport(
+        source,
+        api,
+        [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+        OLD_IDENTIFIERS.V2_POPOVER
+    );
+
+    if (isV2PopoverImport) {
+        CodemodUtils.replaceImport(
             source,
             api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
-            IMPORT_SPECIFIERS.V2_TEXT_LIST
+            [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+            OLD_IDENTIFIERS.V2_POPOVER,
+            NEW_IMPORT_PATHS.POPOVER,
+            NEW_IDENTIFIERS.POPOVER
         );
 
         source
-            .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT_LIST })
+            .find(j.JSXIdentifier, {
+                name: OLD_IDENTIFIERS.V2_POPOVER,
+            })
             .forEach((path) => {
-                path.node.name = JSX_IDENTIFIERS.TEXT_LIST;
+                path.node.name = NEW_IDENTIFIERS.POPOVER;
             });
+    }
 
-        source.find(j.MemberExpression).forEach((path) => {
-            if (
-                j.Identifier.check(path.node.object) &&
-                path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
-            ) {
-                path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
-            }
-        });
-
-        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;
-            }
-        });
-
-        source.find(j.JSXOpeningElement).forEach((path) => {
-            const openingElement = path.node;
-            let isTextListElement = false;
-
-            if (
-                j.JSXMemberExpression.check(openingElement.name) &&
-                j.JSXIdentifier.check(openingElement.name.object) &&
-                openingElement.name.object.name === JSX_IDENTIFIERS.TEXT_LIST
-            ) {
-                isTextListElement = true;
-            }
-
-            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 isV2PopoverTriggerImport = CodemodUtils.hasImport(
+        source,
+        api,
+        [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+        OLD_IDENTIFIERS.V2_POPOVER_TRIGGER
+    );
+
+    if (isV2PopoverTriggerImport) {
+        CodemodUtils.replaceImport(
+            source,
+            api,
+            [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+            OLD_IDENTIFIERS.V2_POPOVER_TRIGGER,
+            NEW_IMPORT_PATHS.POPOVER,
+            NEW_IDENTIFIERS.POPOVER_TRIGGER
+        );
     }
 
+    Object.entries(TYPING_MAP).forEach(([oldType, newType]) => {
+        if (
+            CodemodUtils.hasImport(
+                source,
+                api,
+                [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+                oldType
+            )
+        ) {
+            CodemodUtils.replaceImport(
+                source,
+                api,
+                [OLD_IMPORT_PATHS.DESIGN_SYSTEM, OLD_IMPORT_PATHS.V2_POPOVER],
+                oldType,
+                NEW_IMPORT_PATHS.POPOVER,
+                newType
+            );
+        }
+    });
+
     return source.toSource();
 }