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

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

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

Files changed (1304) hide show

package/codemods/run-codemod.ts CHANGED Viewed

@@ -3,8 +3,6 @@ import { execSync } from "child_process";
 import * as fs from "fs";
 import * as path from "path";
-import { Theme } from "./common";
 const codemodsDir =
     process.env.ENV === "dev"
         ? path.join(process.cwd(), "codemods")
@@ -14,12 +12,7 @@ const codemodsDir =
           );
 enum Codemod {
-    DeprecateV2Tokens = "deprecate-v2-tokens",
-    MigrateColour = "migrate-colour",
-    MigrateLayout = "migrate-layout",
-    MigrateMediaQuery = "migrate-media-query",
-    MigrateText = "migrate-text",
-    MigrateTextList = "migrate-text-list",
+    MigratePopover = "migrate-popover",
 }
 const theme = {
@@ -27,15 +20,8 @@ const theme = {
 };
 const CodemodDescriptions: { [key in Codemod]: string } = {
-    [Codemod.DeprecateV2Tokens]: "Migrate deprecated V2 imports",
-    [Codemod.MigrateColour]: "Replace V2_Color with new Colour tokens",
-    [Codemod.MigrateLayout]: "Replace V2_Layout with new Layout components",
-    [Codemod.MigrateMediaQuery]:
-        "Replace V2 media queries with new Breakpoint tokens",
-    [Codemod.MigrateText]:
-        "Replace V2_Text with new Typography components and V2_TextStyleHelper.getTextStyle() with Font",
-    [Codemod.MigrateTextList]:
-        "Replace V2_TextList with new Textlist components",
+    [Codemod.MigratePopover]:
+        "Replace deprecated Popover and migrate PopoverV2 imports",
 };
 const TargetDirectoryPaths = {
@@ -45,7 +31,6 @@ const TargetDirectoryPaths = {
 interface UserSelection {
     selectedCodemods: string[];
-    selectedTheme: Theme | null;
     targetPath: string;
 }
@@ -65,16 +50,12 @@ function listCodemods(): { name: string; value: string }[] {
 }
 function runCodemods(selection: UserSelection): void {
-    const { selectedCodemods, targetPath, selectedTheme } = selection;
+    const { selectedCodemods, targetPath } = selection;
     selectedCodemods.forEach((codemod) => {
         const codemodPath = path.join(codemodsDir, codemod, "index.ts");
         let command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} ${targetPath}`;
-        if (codemod === Codemod.MigrateColour && selectedTheme) {
-            command = `npx --yes jscodeshift --parser=tsx -t ${codemodPath} --mapping=${selectedTheme} ${targetPath}`;
-        }
         console.log(
             `Running codemod: ${codemod} on target path: ${targetPath}`
         );
@@ -133,24 +114,6 @@ async function chooseTargetPath(): Promise<string | null> {
     return selectedOption;
 }
-async function chooseTheme(): Promise<Theme | null> {
-    const themeOptions = [
-        { name: "LifeSG", value: Theme.LifeSG },
-        { name: "BookingSG", value: Theme.BookingSG },
-        { name: "MyLegacy", value: Theme.MyLegacy },
-        { name: "CCube", value: Theme.CCube },
-        { name: "RBS", value: Theme.RBS },
-        { name: "OneService", value: Theme.OneService },
-    ];
-    const selectedTheme = await select({
-        message: "Select the theme that your project is using:",
-        choices: themeOptions,
-    });
-    return selectedTheme;
-}
 async function getCodemodSelections(): Promise<UserSelection> {
     const codemods = listCodemods();
     if (codemods.length === 0) {
@@ -164,31 +127,21 @@ async function getCodemodSelections(): Promise<UserSelection> {
         theme,
     });
-    let selectedTheme: Theme | null = null;
-    if (selectedCodemods.includes(Codemod.MigrateColour)) {
-        selectedTheme = await chooseTheme();
-    }
     const targetPath = await chooseTargetPath();
     if (!targetPath) {
         throw new Error("No target path selected or provided");
     }
-    return { selectedCodemods, selectedTheme, targetPath };
+    return { selectedCodemods, targetPath };
 }
 async function getConfirmation(selection: UserSelection) {
-    const { selectedCodemods, selectedTheme, targetPath } = selection;
+    const { selectedCodemods, targetPath } = selection;
     const codemods = selectedCodemods.join(", ");
     const finalConfirmationMessage =
         `\nYou are about to run the following codemods: ${codemods}\n` +
-        `Target path: ${targetPath}\n` +
-        `${
-            selectedTheme
-                ? `Selected theme for "migrate-colour": ${selectedTheme}\n`
-                : ""
-        }`;
+        `Target path: ${targetPath}\n`;
     console.log(finalConfirmationMessage);

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

@@ -1,2 +1,2 @@
-import"./countdown-timer.styles_k50tkw.css";const t={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},n="wav7a6b",o="c1ji5mw9",i="csdqyky",d="cibq1kp",e="c1ehax2j",w="t6f42l5",r="t19x1azi",c="t1pvvziw";export{o as countdown,e as countdownFixed,i as countdownHidden,d as countdownInline,w as timeLeft,r as timer,c as timerIcon,t as tokens,n as wrapper};
+import"./countdown-timer.styles_ipn1b0.css";const t={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},n="wav7a6b",o="c1ji5mw9",i="csdqyky",d="cibq1kp",e="c1ehax2j",r="t6f42l5",w="t19x1azi",c="t1pvvziw";export{o as countdown,e as countdownFixed,i as countdownHidden,d as countdownInline,r as timeLeft,w as timer,c as timerIcon,t as tokens,n as wrapper};
 //# sourceMappingURL=countdown-timer.styles.js.map

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

@@ -1,5 +1,5 @@
 .wav7a6b{width:100%;}
-.c1ji5mw9{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
+.c1ji5mw9{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
 .csdqyky{opacity:0;}
 .cibq1kp{position:relative;}
 .c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport {\n BorderThickness~~,\n~~ Colour~~,\n~~ Radius~~,\n~~ toCssValue~~,\n useApplyStyle,\n~~ useResolvedTokenValue~~,\n~~} from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+~~qCAqBA~~,MAqFaA,EAAeC,GArFV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}
1	+ {"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MAqFaA,EAAeC,GArFV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n return selectedIds?.length === rows?.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","disabled","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRow","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}
1	+ {"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr className={styles.bodyRow}>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr className={styles.bodyRow}>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import"./data-table.styles_1nj2uzq.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",s="h4ne4e9",f="bfa3d3x",i="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",y="b1g3gl2s",u="e1yxh9il",w="s1w2nktt",W="axywpxo",g="anoy5c0",j="a1gvi5ye",m="aag0lf9",B="a1euqarq",_="ldhafdm",v="e1pcc0nq";export{g as actionBar,W as actionBarButton,j as actionBarFloating,m as actionBarWrapper,B as actionBarWrapperFloating,f as bodyCell,q as bodyCellCheckbox,y as bodyCellText,i as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,x as bodyRowWithBottomBorder,u as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,s as headerCellContent,c as headerRow,_ as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
+import"./data-table.styles_1iqq1g7.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",i="h4ne4e9",s="bfa3d3x",f="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",q="b1tvp43a",x="bx1feaw",y="b1g3gl2s",g="e1yxh9il",w="s1w2nktt",W="axywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="ldhafdm",v="e1pcc0nq";export{m as actionBar,W as actionBarButton,u as actionBarFloating,B as actionBarWrapper,_ as actionBarWrapperFloating,s as bodyCell,x as bodyCellCheckbox,y as bodyCellText,f as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,q as bodyRowWithBottomBorder,g as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,i as headerCellContent,c as headerRow,j as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
 //# sourceMappingURL=data-table.styles.js.map

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

@@ -17,7 +17,7 @@
 .b1g3gl2s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
 .e1yxh9il{padding:4rem 0;}.e1yxh9il:first-child{padding-left:1.5rem;}.e1yxh9il:last-child{padding-right:1.5rem;}
 .s1w2nktt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
-.axywpxo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
+.axywpxo{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
 .anoy5c0{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:all 300ms ease;transition:all 300ms ease;border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
 .a1gvi5ye{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .aag0lf9{bottom:0;position:-webkit-sticky;position:sticky;left:0;}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n if (!calendarOpen) return;\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/date-navigator/date-navigator.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./date-navigator.styles_1cotsgz.css";const t="c1mdg68z",a="h1w7ufcd",g="h7gg62z",o="d1pl361j";export{t as container,o as dateTextButton,a as headerArrowButton,g as headerArrowButtonIcon};
+import"./date-navigator.styles_wokh56.css";const t="c1mdg68z",a="h1w7ufcd",o="h7gg62z",d="d1pl361j";export{t as container,d as dateTextButton,a as headerArrowButton,o as headerArrowButtonIcon};
 //# sourceMappingURL=date-navigator.styles.js.map

package/date-navigator/date-navigator.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.styles.js","sources":["../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":["container","headerArrowButton","headerArrowButtonIcon","dateTextButton"],"mappings":"~~0EAIO~~,MAAMA,EAAS,WASTC,EAAiB,WAIjBC,EAAqB,UAIrBC,EAAc"}
1	+ {"version":3,"file":"date-navigator.styles.js","sources":["../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":["container","headerArrowButton","headerArrowButtonIcon","dateTextButton"],"mappings":"yEAIO,MAAMA,EAAS,WASTC,EAAiB,WAIjBC,EAAqB,UAIrBC,EAAc"}

package/date-navigator/date-navigator.styles_wokh56.css ADDED Viewed

@@ -0,0 +1,4 @@
+.c1mdg68z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);}
+.h1w7ufcd{margin:var(--fds-spacing-8);}
+.h7gg62z{color:var(--fds-colour-icon);}
+.d1pl361j{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);cursor:default;}.d1pl361j:not(:disabled){color:var(--fds-colour-text-primary);}.d1pl361j:not(:disabled):hover,.d1pl361j:not(:disabled):focus{outline:none;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;text-underline-position:under;}

package/divider/divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle, useResolvedTokenValue } from \"../theme\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","Divider","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"~~ovBASA~~,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GAGCC,EAAWC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAcd,EAAK,CACf,CAACe,EAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAc1B,OAAQA,EACvB,CAAC0B,EAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAKC,EAAiBxC,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAACG,EAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}
1	+ {"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","Divider","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"ovBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GAGCC,EAAWC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAcd,EAAK,CACf,CAACe,EAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAc1B,OAAQA,EACvB,CAAC0B,EAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAKC,EAAiBxC,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAACG,EAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}