@workos-inc/widgets 1.5.1 → 1.6.0

package/dist/esm/lib/user-profile.js

@@ -10,83 +10,80 @@ import {
   Strong,
   Text
 } from "@radix-ui/themes";
-import clsx from "clsx";
 import { Avatar, SecondaryButton, Skeleton } from "./elements.js";
 import { EditUserProfileDialog } from "./edit-user-profile-dialog.js";
-import { getBestName } from "./utils.js";
-import { getOAuthIcon, getOAuthName } from "./oauth-icons.js";
+import {
+  getBestName,
+  getDomProps
+} from "./utils.js";
+import { OAuthIcon, getOAuthName } from "./oauth-icons.js";
 import { GenericError } from "./generic-error.js";
-const UserProfile = ({ userData: user }) => {
-  const oauthAccounts = Object.entries(user.oauthProfiles || {});
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "user-profile",
-      size: "2",
-      children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
-        user.profilePictureUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-            /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Profile picture" }) }),
-            /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(
-              Avatar,
+const UserProfile = ({
+  userData: user,
+  ...domProps
+}) => {
+  const oauthAccounts = user.oauthProfiles ? Object.entries(user.oauthProfiles) : [];
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
+    user.profilePictureUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
+        /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Profile picture" }) }),
+        /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            size: "2",
+            fallback: /* @__PURE__ */ jsx(FallbackUserIcon, {}),
+            src: user.profilePictureUrl
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(ListSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
+      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Full name" }) }),
+      /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "between",
+          width: "100%",
+          minHeight: "var(--space-6)",
+          children: [
+            /* @__PURE__ */ jsx(Text, { size: "2", children: getBestName(user) || /* @__PURE__ */ jsx(
+              Text,
               {
-                size: "2",
-                fallback: /* @__PURE__ */ jsx(FallbackUserIcon, {}),
-                src: user.profilePictureUrl
+                color: "gray",
+                style: { color: "var(--gray-10)", cursor: "default" },
+                children: "Not set"
               }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx(ListSeparator, {})
-        ] }),
-        /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-          /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Full name" }) }),
-          /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              align: "center",
-              justify: "between",
-              width: "100%",
-              minHeight: "var(--space-6)",
-              children: [
-                /* @__PURE__ */ jsx(Text, { size: "2", children: getBestName(user) || /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    color: "gray",
-                    style: { color: "var(--gray-10)", cursor: "default" },
-                    children: "Not set"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(EditUserProfileDialog, { user, children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Edit" }) })
-              ]
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(ListSeparator, {}),
-        /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-          /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Email address" }) }),
-          /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: user.email }) }) })
-        ] }),
-        oauthAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ListSeparator, {}),
-          /* @__PURE__ */ jsxs(DataList.Item, { children: [
-            /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Connected accounts" }) }),
-            /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: oauthAccounts.map(([account, data]) => /* @__PURE__ */ jsx(
-              OAuthAccount,
-              {
-                account,
-                email: data?.email
-              },
-              account
-            )) }) })
-          ] })
-        ] })
+            ) }),
+            /* @__PURE__ */ jsx(EditUserProfileDialog, { user, children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Edit" }) })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(ListSeparator, {}),
+    /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
+      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Email address" }) }),
+      /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: user.email }) }) })
+    ] }),
+    oauthAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ListSeparator, {}),
+      /* @__PURE__ */ jsxs(DataList.Item, { children: [
+        /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Connected accounts" }) }),
+        /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: oauthAccounts.map(([account, data]) => /* @__PURE__ */ jsx(
+          OAuthAccount,
+          {
+            account,
+            email: data?.email
+          },
+          account
+        )) }) })
       ] })
-    }
-  );
+    ] })
+  ] }) });
 };
-const UserProfileLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
+const UserProfileLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
     /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
       /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Skeleton, { children: "Full name" }) }) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(
@@ -107,18 +104,20 @@ const UserProfileLoading = () => {
     ] })
   ] }) });
 };
-function UserProfileError({ error }) {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(GenericError, { error }) });
-}
+const UserProfileError = ({
+  error,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
+};
 const ListSeparator = () => /* @__PURE__ */ jsx(Box, { asChild: true, gridColumn: "span 2", children: /* @__PURE__ */ jsx(Inset, { side: "x", children: /* @__PURE__ */ jsx(Separator, { size: "4" }) }) });
 const OAuthAccount = ({
   account,
   email
 }) => {
-  const Icon = getOAuthIcon(account);
   const name = getOAuthName(account);
   return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
-    /* @__PURE__ */ jsx(Icon, {}),
+    /* @__PURE__ */ jsx(OAuthIcon, { account }),
     /* @__PURE__ */ jsx(Text, { size: "2", ml: "1", children: name }),
     email && /* @__PURE__ */ jsxs(Box, { display: { initial: "none", sm: "contents" }, children: [
       /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "\u2219" }),
@@ -140,6 +139,14 @@ const FallbackUserIcon = () => /* @__PURE__ */ jsxs(
     ]
   }
 );
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "user-profile",
+    widgetState: state
+  });
+}
 export {
   UserProfile,
   UserProfileError,

package/dist/esm/lib/user-profile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { Avatar, SecondaryButton, Skeleton } from \"./elements.js\";\nimport { Me } from \"../api/endpoint.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport { getBestName } from \"./utils.js\";\nimport { getOAuthIcon, getOAuthName } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\n\ninterface UserProfileProps {\n  userData: Me;\n}\n\nexport const UserProfile = ({ userData: user }: UserProfileProps) => {\n  const oauthAccounts = Object.entries(user.oauthProfiles || {});\n\n  return (\n    <Card\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-profile\"\n      size=\"2\"\n    >\n      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>Profile picture</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Full name</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    Not set\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <SecondaryButton>Edit</SecondaryButton>\n              </EditUserProfileDialog>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Email address</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>Connected accounts</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\n    </Card>\n  );\n};\n\nexport const UserProfileLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>Full name</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>Full name</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>Email address</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>Email address</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n};\n\nexport function UserProfileError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: string;\n  email?: string | null;\n}) => {\n  const Icon = getOAuthIcon(account);\n  const name = getOAuthName(account);\n\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <Icon />\n\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n"],"mappings":";AAmCU,mBAGM,KAFJ,YADF;AAjCV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,QAAQ,iBAAiB,gBAAgB;AAElD,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,cAAc,oBAAoB;AAC3C,SAAS,oBAAoB;AAMtB,MAAM,cAAc,CAAC,EAAE,UAAU,KAAK,MAAwB;AACnE,QAAM,gBAAgB,OAAO,QAAQ,KAAK,iBAAiB,CAAC,CAAC;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,mBAAmB;AAAA,MACnC,6BAA0B;AAAA,MAC1B,MAAK;AAAA,MAEL,+BAAC,SAAS,MAAT,EACE;AAAA,aAAK,qBACJ,iCACE;AAAA,+BAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,gCAAC,SAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,8BAAC,UAAO,6BAAe,GACzB;AAAA,YACA,oBAAC,SAAS,OAAT,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU,oBAAC,oBAAiB;AAAA,gBAC5B,KAAK,KAAK;AAAA;AAAA,YACZ,GACF;AAAA,aACF;AAAA,UAEA,oBAAC,iBAAc;AAAA,WACjB;AAAA,QAGF,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,8BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,uBAAS,GACnB;AAAA,UACA,oBAAC,SAAS,OAAT,EACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,WAAU;AAAA,cAEV;AAAA,oCAAC,QAAK,MAAK,KACR,sBAAY,IAAI,KACf;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,OAAO,EAAE,OAAO,kBAAkB,QAAQ,UAAU;AAAA,oBACrD;AAAA;AAAA,gBAED,GAEJ;AAAA,gBAEA,oBAAC,yBAAsB,MACrB,8BAAC,mBAAgB,kBAAI,GACvB;AAAA;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,iBAAc;AAAA,QAEf,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,8BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,2BAAa,GACvB;AAAA,UACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,UAAS,WAAU,kBAC7B,8BAAC,QAAK,MAAK,KAAK,eAAK,OAAM,GAC7B,GACF;AAAA,WACF;AAAA,QAEC,cAAc,SAAS,KACtB,iCACE;AAAA,8BAAC,iBAAc;AAAA,UAEf,qBAAC,SAAS,MAAT,EACC;AAAA,gCAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,gCAAkB,GAC5B;AAAA,YACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,wBAAc,IAAI,CAAC,CAAC,SAAS,IAAI,MAChC;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA,OAAO,MAAM;AAAA;AAAA,cAFR;AAAA,YAGP,CACD,GACH,GACF;AAAA,aACF;AAAA,WACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,qBAA+B,MAAM;AAChD,SACE,oBAAC,QAAK,MAAK,KACT,+BAAC,SAAS,MAAT,EACC;AAAA,yBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,8BAAC,UACC,8BAAC,YAAS,uBAAS,GACrB,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV,8BAAC,QAAK,MAAK,KACT,8BAAC,YAAS,uBAAS,GACrB;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,iBAAc;AAAA,IAEf,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UACC,8BAAC,YAAS,2BAAa,GACzB,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,UAAS,WAAU,kBAC7B,8BAAC,QAAK,MAAK,KACT,8BAAC,YAAS,2BAAa,GACzB,GACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,iBAAiB,EAAE,MAAM,GAAuB;AAC9D,SACE,oBAAC,QAAK,MAAK,KACT,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;AAEA,MAAM,gBAAgB,MACpB,oBAAC,OAAI,SAAO,MAAC,YAAW,UACtB,8BAAC,SAAM,MAAK,KACV,8BAAC,aAAU,MAAK,KAAI,GACtB,GACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACE,qBAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,wBAAC,QAAK;AAAA,IAEN,oBAAC,QAAK,MAAK,KAAI,IAAG,KACf,gBACH;AAAA,IAEC,SACC,qBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,WAAW,GAC9C;AAAA,0BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,MACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAClB,iBACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,SAAQ;AAAA,IAER;AAAA,0BAAC,WAAM,uBAAS;AAAA,MAChB,oBAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;","names":[]}
+{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, SecondaryButton, Skeleton } from \"./elements.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport {\n  getBestName,\n  getDomProps,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { OAuthIcon, getOAuthName, type OAuthAccount } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: Me;\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.oauthProfiles\n    ? (Object.entries(user.oauthProfiles) as [\n        keyof Exclude<MeOauthProfiles, null>,\n        OAuthProfile,\n      ][])\n    : [];\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>Profile picture</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Full name</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    Not set\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <SecondaryButton>Edit</SecondaryButton>\n              </EditUserProfileDialog>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Email address</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>Connected accounts</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileLoadingProps extends WidgetRootDomProps {}\n\nconst UserProfileLoading: React.FC<UserProfileLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>Full name</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>Full name</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>Email address</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>Email address</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserProfileError: React.FC<UserProfileErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: OAuthAccount;\n  email?: string | null;\n}) => {\n  const name = getOAuthName(account);\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <OAuthIcon account={account} />\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-profile\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserProfileProps,\n  UserProfileLoadingProps,\n  UserProfileErrorProps,\n};\nexport { UserProfile, UserProfileLoading, UserProfileError };\n"],"mappings":";AA2CU,mBAGM,KAFJ,YADF;AAxCV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,iBAAiB,gBAAgB;AAElD,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,WAAW,oBAAuC;AAC3D,SAAS,oBAAoB;AAM7B,MAAM,cAA0C,CAAC;AAAA,EAC/C,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB,KAAK,gBACtB,OAAO,QAAQ,KAAK,aAAa,IAIlC,CAAC;AACL,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,YAAY,QAAQ,GAC3D,+BAAC,SAAS,MAAT,EACE;AAAA,SAAK,qBACJ,iCACE;AAAA,2BAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,4BAAC,SAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,8BAAC,UAAO,6BAAe,GACzB;AAAA,QACA,oBAAC,SAAS,OAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAU,oBAAC,oBAAiB;AAAA,YAC5B,KAAK,KAAK;AAAA;AAAA,QACZ,GACF;AAAA,SACF;AAAA,MAEA,oBAAC,iBAAc;AAAA,OACjB;AAAA,IAGF,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,uBAAS,GACnB;AAAA,MACA,oBAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAK,MAAK,KACR,sBAAY,IAAI,KACf;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAO,EAAE,OAAO,kBAAkB,QAAQ,UAAU;AAAA,gBACrD;AAAA;AAAA,YAED,GAEJ;AAAA,YAEA,oBAAC,yBAAsB,MACrB,8BAAC,mBAAgB,kBAAI,GACvB;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,iBAAc;AAAA,IAEf,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,2BAAa,GACvB;AAAA,MACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,UAAS,WAAU,kBAC7B,8BAAC,QAAK,MAAK,KAAK,eAAK,OAAM,GAC7B,GACF;AAAA,OACF;AAAA,IAEC,cAAc,SAAS,KACtB,iCACE;AAAA,0BAAC,iBAAc;AAAA,MAEf,qBAAC,SAAS,MAAT,EACC;AAAA,4BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UAAO,gCAAkB,GAC5B;AAAA,QACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,wBAAc,IAAI,CAAC,CAAC,SAAS,IAAI,MAChC;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,OAAO,MAAM;AAAA;AAAA,UAFR;AAAA,QAGP,CACD,GACH,GACF;AAAA,SACF;AAAA,OACF;AAAA,KAEJ,GACF;AAEJ;AAIA,MAAM,qBAAwD,CAAC,UAAU;AACvE,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,KAAK,GACvD,+BAAC,SAAS,MAAT,EACC;AAAA,yBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,8BAAC,UACC,8BAAC,YAAS,uBAAS,GACrB,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV,8BAAC,QAAK,MAAK,KACT,8BAAC,YAAS,uBAAS,GACrB;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,iBAAc;AAAA,IAEf,qBAAC,SAAS,MAAT,EAAc,OAAM,UACnB;AAAA,0BAAC,SAAS,OAAT,EAAe,cAAY,MAC1B,8BAAC,UACC,8BAAC,YAAS,2BAAa,GACzB,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,UAAS,WAAU,kBAC7B,8BAAC,QAAK,MAAK,KACT,8BAAC,YAAS,2BAAa,GACzB,GACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,mBAAoD,CAAC;AAAA,EACzD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;AAEA,MAAM,gBAAgB,MACpB,oBAAC,OAAI,SAAO,MAAC,YAAW,UACtB,8BAAC,SAAM,MAAK,KACV,8BAAC,aAAU,MAAK,KAAI,GACtB,GACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,OAAO,aAAa,OAAO;AACjC,SACE,qBAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,wBAAC,aAAU,SAAkB;AAAA,IAC7B,oBAAC,QAAK,MAAK,KAAI,IAAG,KACf,gBACH;AAAA,IACC,SACC,qBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,WAAW,GAC9C;AAAA,0BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,MACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAClB,iBACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,SAAQ;AAAA,IAER;AAAA,0BAAC,WAAM,uBAAS;AAAA,MAChB,oBAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;AAGF,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/esm/lib/user-security.d.ts

@@ -1,15 +1,18 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AuthenticationInformationResponseData } from '../api/endpoint.js';
+import { WidgetRootDomProps } from './utils.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
 
-interface UserSecurityProps {
+interface UserSecurityProps extends WidgetRootDomProps {
     settings: AuthenticationInformationResponseData;
 }
-declare const UserSecurity: ({ settings }: UserSecurityProps) => react_jsx_runtime.JSX.Element;
-declare function UserSecurityError({ error }: {
+declare const UserSecurity: React.FC<UserSecurityProps>;
+interface UserSecurityErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
-declare const UserSecurityLoading: React.FC;
+}
+declare const UserSecurityError: React.FC<UserSecurityErrorProps>;
+interface UserSecurityLoadingProps extends WidgetRootDomProps {
+}
+declare const UserSecurityLoading: React.FC<UserSecurityLoadingProps>;
 
-export { UserSecurity, UserSecurityError, UserSecurityLoading };
+export { UserSecurity, UserSecurityError, type UserSecurityErrorProps, UserSecurityLoading, type UserSecurityLoadingProps, type UserSecurityProps };

package/dist/esm/lib/user-security.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Card, Flex, Grid, Text } from "@radix-ui/themes";
-import clsx from "clsx";
 import { SecondaryButton, Skeleton } from "./elements.js";
 import { IconPanel } from "./icon-panel.js";
 import { ButtonIcon, LockClosedIcon } from "@radix-ui/react-icons";
@@ -11,33 +10,35 @@ import { AddMfaDialog } from "./add-mfa-dialog.js";
 import { ResetMfaDialog } from "./reset-mfa-dialog.js";
 import * as CardList from "./card-list.js";
 import { GenericError } from "./generic-error.js";
-import { getComparativeReadableDate } from "./utils.js";
-const UserSecurity = ({ settings }) => {
+import {
+  getComparativeReadableDate,
+  getDomProps
+} from "./utils.js";
+const UserSecurity = ({
+  settings,
+  ...domProps
+}) => {
   const passwordSettings = settings.verificationMethods.Password;
   const mfaSettings = settings.verificationMethods.Mfa;
-  return /* @__PURE__ */ jsxs(
-    CardList.Root,
-    {
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "user-security",
-      children: [
-        passwordSettings && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(PasswordSettings, { settings: passwordSettings }) }),
-        mfaSettings && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(
-          MfaSettings,
-          {
-            settings: mfaSettings,
-            isPasswordSet: !!passwordSettings?.isSetUp
-          }
-        ) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: [
+    passwordSettings && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(PasswordSettings, { settings: passwordSettings }) }),
+    mfaSettings && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(
+      MfaSettings,
+      {
+        settings: mfaSettings,
+        isPasswordSet: !!passwordSettings?.isSetUp
+      }
+    ) })
+  ] });
 };
-function UserSecurityError({ error }) {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(GenericError, { error }) });
-}
-const UserSecurityLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
+const UserSecurityError = ({
+  error,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
+};
+const UserSecurityLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: "Password" }) }),
@@ -91,6 +92,14 @@ function MfaSettings({
     settings.isSetUp ? /* @__PURE__ */ jsx(ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Disable" }) }) : /* @__PURE__ */ jsx(AddMfaDialog, { children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Set up authenticator app" }) })
   ] });
 }
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "user-security",
+    widgetState: state
+  });
+}
 export {
   UserSecurity,
   UserSecurityError,

package/dist/esm/lib/user-security.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getComparativeReadableDate } from \"./utils.js\";\n\ninterface UserSecurityProps {\n  settings: AuthenticationSettings;\n}\n\nexport const UserSecurity = ({ settings }: UserSecurityProps) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n\n  return (\n    <CardList.Root\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-security\"\n    >\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\nexport function UserSecurityError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\nexport const UserSecurityLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\ninterface UserSecurityErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSecurityError: React.FC<UserSecurityErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSecurityLoadingProps extends WidgetRootDomProps {}\n\nconst UserSecurityLoading: React.FC<UserSecurityLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-security\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserSecurityProps,\n  UserSecurityLoadingProps,\n  UserSecurityErrorProps,\n};\nexport { UserSecurity, UserSecurityLoading, UserSecurityError };\n"],"mappings":"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","names":[]}

package/dist/esm/lib/user-sessions.d.ts

@@ -1,16 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WidgetRootDomProps } from './utils.js';
 import { ActiveSession } from '../api/endpoint.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
 
-interface UserSessionsProps {
+interface UserSessionsProps extends WidgetRootDomProps {
     sessionsData: ActiveSession[];
     currentSessionId: string;
 }
-declare const UserSessions: ({ sessionsData: sessions, currentSessionId, }: UserSessionsProps) => react_jsx_runtime.JSX.Element;
-declare const UserSessionsLoading: React.FC;
-declare function UserSessionsError({ error }: {
+declare const UserSessions: ({ sessionsData: sessions, currentSessionId, ...domProps }: UserSessionsProps) => react_jsx_runtime.JSX.Element;
+interface UserSessionsLoadingProps extends WidgetRootDomProps {
+}
+declare const UserSessionsLoading: React.FC<UserSessionsLoadingProps>;
+interface UserSessionsErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
+}
+declare const UserSessionsError: React.FC<UserSessionsErrorProps>;
 
-export { UserSessions, UserSessionsError, UserSessionsLoading };
+export { UserSessions, UserSessionsError, type UserSessionsErrorProps, UserSessionsLoading, type UserSessionsLoadingProps };

package/dist/esm/lib/user-sessions.js

@@ -1,10 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Box, Button, Card, Flex, Text } from "@radix-ui/themes";
-import clsx from "clsx";
 import { Badge, SecondaryButton, Skeleton } from "./elements.js";
 import {
   getComparativeReadableDate,
+  getDomProps,
   getUserLocation,
   parseUserAgent
 } from "./utils.js";
@@ -17,7 +17,8 @@ import { GenericError } from "./generic-error.js";
 import { LaptopIcon, MobileIcon } from "@radix-ui/react-icons";
 const UserSessions = ({
   sessionsData: sessions,
-  currentSessionId
+  currentSessionId,
+  ...domProps
 }) => {
   const currentSession = sessions.find(
     (session) => session.id === currentSessionId
@@ -33,8 +34,7 @@ const UserSessions = ({
     {
       direction: "column",
       gap: "4",
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "user-sessions",
+      ...getWidgetRootDomProps("resolved", domProps),
       children: [
         /* @__PURE__ */ jsxs(CardList.Root, { children: [
           currentSession && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(UserSession, { session: currentSession, isCurrentSession: true }) }),
@@ -84,8 +84,8 @@ const UserSessions = ({
     }
   );
 };
-const UserSessionsLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+const UserSessionsLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: "The location" }) }),
@@ -93,9 +93,12 @@ const UserSessionsLoading = () => {
     ] })
   ] }) });
 };
-function UserSessionsError({ error }) {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(GenericError, { error }) });
-}
+const UserSessionsError = ({
+  error,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
+};
 const UserSession = ({
   session,
   isCurrentSession = false,
@@ -138,6 +141,14 @@ const UserSession = ({
     ) })
   ] });
 };
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "user-sessions",
+    widgetState: state
+  });
+}
 export {
   UserSessions,
   UserSessionsError,

package/dist/esm/lib/user-sessions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getUserLocation,\n  parseUserAgent,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nexport const UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-sessions\"\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n\n            <SecondaryButton\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </SecondaryButton>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\nexport const UserSessionsLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function UserSessionsError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\" mr=\"2\">\n          <Button\n            variant=\"ghost\"\n            onClick={() => {\n              onSignOut?.(session);\n            }}\n          >\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  getUserLocation,\n  parseUserAgent,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps extends WidgetRootDomProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nconst UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n  ...domProps\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      {...getWidgetRootDomProps(\"resolved\", domProps)}\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n\n            <SecondaryButton\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </SecondaryButton>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\ninterface UserSessionsLoadingProps extends WidgetRootDomProps {}\n\nconst UserSessionsLoading: React.FC<UserSessionsLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface UserSessionsErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSessionsError: React.FC<UserSessionsErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\" mr=\"2\">\n          <Button\n            variant=\"ghost\"\n            onClick={() => {\n              onSignOut?.(session);\n            }}\n          >\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-sessions\",\n    widgetState: state,\n  });\n}\n\nexport type { UserSessionsLoadingProps, UserSessionsErrorProps };\nexport { UserSessions, UserSessionsLoading, UserSessionsError };\n"],"mappings":"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","names":[]}

package/dist/esm/lib/users-management.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { WidgetRootDomProps } from './utils.js';
 import { MemberRole, MembersQueryResult } from '../api/endpoint.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
 
-interface UsersManagementProps {
+interface UsersManagementProps extends WidgetRootDomProps {
     rolesData: {
         roles: MemberRole[];
         multipleRolesEnabled: boolean;
@@ -13,10 +13,13 @@ interface UsersManagementProps {
     disableRolesFilter?: boolean;
     isPending: boolean;
 }
-declare const UsersManagement: ({ userData, rolesData, isPending, disableRolesFilter, }: UsersManagementProps) => react_jsx_runtime.JSX.Element;
-declare const UsersManagementLoading: React.FC;
-declare function UsersManagementError({ error }: {
+declare const UsersManagement: React.FC<UsersManagementProps>;
+interface UsersManagementLoadingProps extends WidgetRootDomProps {
+}
+declare const UsersManagementLoading: React.FC<UsersManagementLoadingProps>;
+interface UsersManagementErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
+}
+declare const UsersManagementError: React.FC<UsersManagementErrorProps>;
 
-export { UsersManagement, UsersManagementError, UsersManagementLoading };
+export { UsersManagement, UsersManagementError, type UsersManagementErrorProps, UsersManagementLoading, type UsersManagementLoadingProps };