@workos-inc/widgets 1.18.0 → 1.19.0-next.1790102694835

package/dist/cjs/lib/user-profile.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport * as DataList from \"./data-list.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { ChangeEmailDialog } from \"./change-email-dialog.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\";\nimport { Translation } from \"./i18n/translation.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      <List>\n        {user.profilePictureUrl && (\n          <>\n            <ListItem>\n              <ListTitle minWidth=\"220px\">\n                <Translation\n                  defaultMessage=\"Profile picture\"\n                  description=\"Label for the user's avatar\"\n                  id=\"RvLqCQ\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </ListValue>\n            </ListItem>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Full name\"\n              id=\"kkBScm\"\n              description=\"Label for user's full name field\"\n            />\n          </ListTitle>\n          <ListValue>\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                    <Translation\n                      defaultMessage=\"Not set\"\n                      id=\"i4vzAY\"\n                      description=\"Placeholder text when user's name is not set\"\n                    />\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"5bhXUz\"\n                    description=\"Button text to edit user profile\"\n                  />\n                </Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Email address\"\n              id=\"nLk5pa\"\n              description=\"Label for user's email address field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">{user.email}</Text>\n\n              <ChangeEmailDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"+2ILQR\"\n                    description=\"Button text to edit the user's email address\"\n                  />\n                </Button>\n              </ChangeEmailDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <ListItem>\n              <ListTitle>\n                <Translation\n                  defaultMessage=\"Connected accounts\"\n                  id=\"AW/A69\"\n                  description=\"Label for user's connected OAuth accounts\"\n                />\n              </ListTitle>\n              <ListValue>\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              </ListValue>\n            </ListItem>\n          </>\n        )}\n      </List>\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      <List>\n        <ListItem>\n          <ListTitle minWidth=\"220px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"nc7fru\"\n                description=\"Loading placeholder for full name label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Full name\"\n                    id=\"6GcWa2\"\n                    description=\"Loading placeholder for full name value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"gjqw+H\"\n                description=\"Loading placeholder for email address label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Email address\"\n                    id=\"75F+g5\"\n                    description=\"Loading placeholder for email address value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n      </List>\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 ListIdContext = React.createContext<string | null>(null);\nListIdContext.displayName = \"ListIdContext\";\n\nconst List = ({ children }: { children: React.ReactNode }) => {\n  const listId = `user-profile-list-${React.useId()}`;\n  return (\n    <ListIdContext.Provider value={listId}>\n      <DataList.Root as=\"div\">{children}</DataList.Root>\n    </ListIdContext.Provider>\n  );\n};\n\nconst ListItemIdContext = React.createContext<string | null>(null);\nListItemIdContext.displayName = \"ListItemIdContext\";\n\nconst ListItem = ({ children }: { children: React.ReactNode }) => {\n  const listId = React.useContext(ListIdContext);\n  const currentId = React.useId();\n  const listItemId = [listId, \"item\", currentId].filter(Boolean).join(\"-\");\n  return (\n    <ListItemIdContext.Provider value={listItemId}>\n      <DataList.Item align=\"center\">{children}</DataList.Item>\n    </ListItemIdContext.Provider>\n  );\n};\n\nconst ListTitle = ({\n  children,\n  ...props\n}: Omit<DataList.LabelProps, \"as\" | \"role\" | \"asChild\">) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Label as=\"div\" role=\"term\" highContrast id={titleId} {...props}>\n      <Strong>{children}</Strong>\n    </DataList.Label>\n  );\n};\n\nconst ListValue = ({ children }: { children: React.ReactNode }) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Value as=\"div\" role=\"definition\" aria-labelledby={titleId}>\n      {children}\n    </DataList.Value>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\" aria-hidden>\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          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\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    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CU;AA3CV,YAAuB;AACvB,oBAQO;AACP,sBAAyC;AACzC,eAA0B;AAE1B,iCAAkC;AAClC,sCAAsC;AACtC,mBAKO;AACP,yBAA2D;AAC3D,2BAA6B;AAC7B,yBAA4B;AAM5B,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,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,YAAY,QAAQ,GAC3D,uDAAC,QACE;AAAA,SAAK,qBACJ,4EACE;AAAA,mDAAC,YACC;AAAA,oDAAC,aAAU,UAAS,SAClB;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,aAAY;AAAA,YACZ,IAAG;AAAA;AAAA,QACL,GACF;AAAA,QACA,4CAAC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAU,4CAAC,oBAAiB;AAAA,YAC5B,KAAK,KAAK;AAAA;AAAA,QACZ,GACF;AAAA,SACF;AAAA,MAEA,4CAAC,iBAAc;AAAA,OACjB;AAAA,IAGF,6CAAC,YACC;AAAA,kDAAC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA,wDAAC,sBAAK,MAAK,KACR,wCAAY,IAAI,KACf;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAO,EAAE,OAAO,kBAAkB,QAAQ,UAAU;AAAA,gBAEpD;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF,GAEJ;AAAA,YAEA,4CAAC,yDAAsB,MACrB,sDAAC,0BAAO,SAAQ,aACd;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,4CAAC,iBAAc;AAAA,IAEf,6CAAC,YACC;AAAA,kDAAC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,4CAAC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA,wDAAC,sBAAK,MAAK,KAAK,eAAK,OAAM;AAAA,YAE3B,4CAAC,gDAAkB,MACjB,sDAAC,0BAAO,SAAQ,aACd;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEC,cAAc,SAAS,KACtB,4EACE;AAAA,kDAAC,iBAAc;AAAA,MAEf,6CAAC,YACC;AAAA,oDAAC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF;AAAA,QACA,4CAAC,aACC,sDAAC,sBAAK,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,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,KAAK,GACvD,uDAAC,QACC;AAAA,iDAAC,YACC;AAAA,kDAAC,aAAU,UAAS,SAClB,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,MACA,4CAAC,aACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV,sDAAC,sBAAK,MAAK,KACT,sDAAC,4BACC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,4CAAC,iBAAc;AAAA,IAEf,6CAAC,YACC;AAAA,kDAAC,aACC,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,MACA,4CAAC,aACC,sDAAC,sBAAK,OAAM,UAAS,WAAU,kBAC7B,sDAAC,sBAAK,MAAK,KACT,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF,GACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,mBAAoD,CAAC;AAAA,EACzD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,sDAAC,qCAAa,OAAc,GAC9B;AAEJ;AAEA,MAAM,gBAAgB,MAAM,cAA6B,IAAI;AAC7D,cAAc,cAAc;AAE5B,MAAM,OAAO,CAAC,EAAE,SAAS,MAAqC;AAC5D,QAAM,SAAS,qBAAqB,MAAM,MAAM,CAAC;AACjD,SACE,4CAAC,cAAc,UAAd,EAAuB,OAAO,QAC7B,sDAAC,SAAS,MAAT,EAAc,IAAG,OAAO,UAAS,GACpC;AAEJ;AAEA,MAAM,oBAAoB,MAAM,cAA6B,IAAI;AACjE,kBAAkB,cAAc;AAEhC,MAAM,WAAW,CAAC,EAAE,SAAS,MAAqC;AAChE,QAAM,SAAS,MAAM,WAAW,aAAa;AAC7C,QAAM,YAAY,MAAM,MAAM;AAC9B,QAAM,aAAa,CAAC,QAAQ,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACvE,SACE,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,sDAAC,SAAS,MAAT,EAAc,OAAM,UAAU,UAAS,GAC1C;AAEJ;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,aAAa,MAAM,WAAW,iBAAiB;AACrD,QAAM,UAAU,CAAC,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC9D,SACE,4CAAC,SAAS,OAAT,EAAe,IAAG,OAAM,MAAK,QAAO,cAAY,MAAC,IAAI,SAAU,GAAG,OACjE,sDAAC,wBAAQ,UAAS,GACpB;AAEJ;AAEA,MAAM,YAAY,CAAC,EAAE,SAAS,MAAqC;AACjE,QAAM,aAAa,MAAM,WAAW,iBAAiB;AACrD,QAAM,UAAU,CAAC,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC9D,SACE,4CAAC,SAAS,OAAT,EAAe,IAAG,OAAM,MAAK,cAAa,mBAAiB,SACzD,UACH;AAEJ;AAEA,MAAM,gBAAgB,MACpB,4CAAC,qBAAI,SAAO,MAAC,YAAW,UAAS,eAAW,MAC1C,sDAAC,uBAAM,MAAK,KACV,sDAAC,2BAAU,MAAK,KAAI,GACtB,GACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,WAAO,iCAAa,OAAO;AACjC,SACE,6CAAC,sBAAK,OAAM,UAAS,KAAI,KACvB;AAAA,gDAAC,gCAAU,SAAkB;AAAA,IAC7B,4CAAC,sBAAK,MAAK,KAAI,IAAG,KACf,gBACH;AAAA,IACC,SACC,6CAAC,qBAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,WAAW,GAE9C;AAAA,kDAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,MACA,4CAAC,sBAAK,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,IAGR;AAAA,kDAAC,WAAM,uBAAS;AAAA,MAChB,4CAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;AAGF,SAAS,sBACP,OACA,UACA;AACA,aAAO,0BAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport * as DataList from \"./data-list.js\";\nimport type { ConnectedAccountFieldsFragment } from \"../api/client-graphql/generated.js\";\nimport type { CurrentUser } from \"./api/me.js\";\nimport { ChangeEmailDialog } from \"./change-email-dialog.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 {\n  OAuthIcon,\n  getOAuthName,\n  isOAuthAccount,\n  type OAuthAccount,\n} from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: CurrentUser;\n}\n\ntype SupportedConnectedAccount = ConnectedAccountFieldsFragment & {\n  provider: OAuthAccount;\n};\n\nfunction isSupportedConnectedAccount(\n  account: ConnectedAccountFieldsFragment,\n): account is SupportedConnectedAccount {\n  return isOAuthAccount(account.provider);\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.connectedAccounts.filter(\n    isSupportedConnectedAccount,\n  );\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <List>\n        {user.profilePictureUrl && (\n          <>\n            <ListItem>\n              <ListTitle minWidth=\"220px\">\n                <Translation\n                  defaultMessage=\"Profile picture\"\n                  description=\"Label for the user's avatar\"\n                  id=\"RvLqCQ\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </ListValue>\n            </ListItem>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Full name\"\n              id=\"kkBScm\"\n              description=\"Label for user's full name field\"\n            />\n          </ListTitle>\n          <ListValue>\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                    <Translation\n                      defaultMessage=\"Not set\"\n                      id=\"i4vzAY\"\n                      description=\"Placeholder text when user's name is not set\"\n                    />\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"5bhXUz\"\n                    description=\"Button text to edit user profile\"\n                  />\n                </Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Email address\"\n              id=\"nLk5pa\"\n              description=\"Label for user's email address field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">{user.email}</Text>\n\n              <ChangeEmailDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"+2ILQR\"\n                    description=\"Button text to edit the user's email address\"\n                  />\n                </Button>\n              </ChangeEmailDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <ListItem>\n              <ListTitle>\n                <Translation\n                  defaultMessage=\"Connected accounts\"\n                  id=\"AW/A69\"\n                  description=\"Label for user's connected OAuth accounts\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map((account) => (\n                    <OAuthAccount\n                      key={account.id}\n                      account={account.provider}\n                      email={account.email}\n                    />\n                  ))}\n                </Flex>\n              </ListValue>\n            </ListItem>\n          </>\n        )}\n      </List>\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      <List>\n        <ListItem>\n          <ListTitle minWidth=\"220px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"nc7fru\"\n                description=\"Loading placeholder for full name label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Full name\"\n                    id=\"6GcWa2\"\n                    description=\"Loading placeholder for full name value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"gjqw+H\"\n                description=\"Loading placeholder for email address label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Email address\"\n                    id=\"75F+g5\"\n                    description=\"Loading placeholder for email address value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n      </List>\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 ListIdContext = React.createContext<string | null>(null);\nListIdContext.displayName = \"ListIdContext\";\n\nconst List = ({ children }: { children: React.ReactNode }) => {\n  const listId = `user-profile-list-${React.useId()}`;\n  return (\n    <ListIdContext.Provider value={listId}>\n      <DataList.Root as=\"div\">{children}</DataList.Root>\n    </ListIdContext.Provider>\n  );\n};\n\nconst ListItemIdContext = React.createContext<string | null>(null);\nListItemIdContext.displayName = \"ListItemIdContext\";\n\nconst ListItem = ({ children }: { children: React.ReactNode }) => {\n  const listId = React.useContext(ListIdContext);\n  const currentId = React.useId();\n  const listItemId = [listId, \"item\", currentId].filter(Boolean).join(\"-\");\n  return (\n    <ListItemIdContext.Provider value={listItemId}>\n      <DataList.Item align=\"center\">{children}</DataList.Item>\n    </ListItemIdContext.Provider>\n  );\n};\n\nconst ListTitle = ({\n  children,\n  ...props\n}: Omit<DataList.LabelProps, \"as\" | \"role\" | \"asChild\">) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Label as=\"div\" role=\"term\" highContrast id={titleId} {...props}>\n      <Strong>{children}</Strong>\n    </DataList.Label>\n  );\n};\n\nconst ListValue = ({ children }: { children: React.ReactNode }) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Value as=\"div\" role=\"definition\" aria-labelledby={titleId}>\n      {children}\n    </DataList.Value>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\" aria-hidden>\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          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\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    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\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":"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","names":[]}

package/dist/cjs/lib/user-profile.d.cts

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { Me } from '../api/endpoint.cjs';
+import { CurrentUser } from './api/me.cjs';
 import { WidgetRootDomProps } from './utils.cjs';
 import '@tanstack/react-query';
+import '../api/client-graphql/generated.cjs';
+import 'graphql-request';
+import '../api/endpoint.cjs';
 import '../api/widgets-api-client.cjs';
 import './elements.cjs';
 import '@radix-ui/themes';
@@ -16,7 +19,7 @@ import '../select-KR89Qnvm.cjs';
 import '@radix-ui/themes/components/select';
 
 interface UserProfileProps extends WidgetRootDomProps {
-    userData: Me;
+    userData: CurrentUser;
 }
 declare const UserProfile: React.FC<UserProfileProps>;
 interface UserProfileLoadingProps extends WidgetRootDomProps {

package/dist/cjs/lib/user-security.cjs

@@ -49,11 +49,12 @@ var import_utils = require("./utils.js");
 var import_translation = require("./i18n/translation.js");
 var import_use_locale = require("./i18n/use-locale.js");
 const UserSecurity = ({
+  user,
   settings,
   ...domProps
 }) => {
-  const passwordSettings = settings.verificationMethods.Password;
-  const mfaSettings = settings.verificationMethods.Mfa;
+  const passwordSettings = settings.passwordAuthEnabled ? { isSetUp: user.passwordSet, lastUsed: user.passwordLastUsedAt } : null;
+  const mfaSettings = settings.mfaEnabled ? { isSetUp: user.mfaEnabled, lastUsed: user.mfaLastUsedAt } : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: [
     passwordSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordSettings, { settings: passwordSettings }) }),
     mfaSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -102,9 +103,7 @@ const UserSecurityLoading = (props) => {
     ) }) }) })
   ] }) });
 };
-function PasswordSettings({
-  settings
-}) {
+function PasswordSettings({ settings }) {
   const locale = (0, import_use_locale.useLocale)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.LockClosedIcon, {}) }),

package/dist/cjs/lib/user-security.cjs.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 { Button, 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\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.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>\n              <Translation\n                defaultMessage=\"Password\"\n                id=\"z19aZa\"\n                description=\"Label for password security settings section\"\n              />\n            </Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Set a password to access your account\"\n                id=\"leodiT\"\n                description=\"Description for setting up a password\"\n              />\n            </Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <Button variant=\"secondary\">\n              <Translation\n                defaultMessage=\"Change\"\n                id=\"/ZV6cj\"\n                description=\"Button label to change password\"\n              />\n            </Button>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  const locale = useLocale();\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          <Translation\n            defaultMessage=\"Password\"\n            id=\"z19aZa\"\n            description=\"Label for password security settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              <Translation\n                defaultMessage=\"Last used {time}\"\n                id=\"Jqn+r+\"\n                description=\"Label indicating when password was last used with time\"\n                values={{\n                  time: getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                    { locale },\n                  ),\n                }}\n              />\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Set a password to access your account\"\n              id=\"leodiT\"\n              description=\"Description for setting up a password\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Change\"\n              id=\"/ZV6cj\"\n              description=\"Button label to change password\"\n            />\n          </Button>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set a password\"\n              id=\"zokPvK\"\n              description=\"Button label to set a new password\"\n            />\n          </Button>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  const locale = useLocale();\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          <Translation\n            defaultMessage=\"Multi-factor authentication\"\n            id=\"f3uhhm\"\n            description=\"Label for multi-factor authentication settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            <Translation\n              defaultMessage=\"Authenticator app\"\n              id=\"0p/a72\"\n              description=\"Label indicating MFA is set up with an authenticator app\"\n            />\n            {settings.lastUsed && (\n              <>\n                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  <Translation\n                    defaultMessage=\"Last used {time}\"\n                    id=\"h3R6gY\"\n                    description=\"Label indicating when MFA was last used with time\"\n                    values={{\n                      time: getComparativeReadableDate(\n                        new Date(),\n                        new Date(settings.lastUsed),\n                        { locale },\n                      ),\n                    }}\n                  />\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Secure your account with an extra verification step\"\n              id=\"xZFdkq\"\n              description=\"Description for setting up multi-factor authentication\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Disable\"\n              id=\"4flMgv\"\n              description=\"Button label to disable multi-factor authentication\"\n            />\n          </Button>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set up authenticator app\"\n              id=\"oLNIQv\"\n              description=\"Button label to set up multi-factor authentication with an authenticator app\"\n            />\n          </Button>\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":[]}
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { Button, 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  AuthenticationSettingsQuery,\n  UserFieldsFragment,\n} from \"../api/client-graphql/generated.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\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\n\ntype AuthenticationSettings =\n  AuthenticationSettingsQuery[\"authenticationSettings\"];\n\ninterface VerificationMethod {\n  isSetUp: boolean;\n  lastUsed?: string | null;\n}\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  user: UserFieldsFragment;\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  user,\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings: VerificationMethod | null =\n    settings.passwordAuthEnabled\n      ? { isSetUp: user.passwordSet, lastUsed: user.passwordLastUsedAt }\n      : null;\n  const mfaSettings: VerificationMethod | null = settings.mfaEnabled\n    ? { isSetUp: user.mfaEnabled, lastUsed: user.mfaLastUsedAt }\n    : null;\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>\n              <Translation\n                defaultMessage=\"Password\"\n                id=\"z19aZa\"\n                description=\"Label for password security settings section\"\n              />\n            </Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Set a password to access your account\"\n                id=\"leodiT\"\n                description=\"Description for setting up a password\"\n              />\n            </Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <Button variant=\"secondary\">\n              <Translation\n                defaultMessage=\"Change\"\n                id=\"/ZV6cj\"\n                description=\"Button label to change password\"\n              />\n            </Button>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({ settings }: { settings: VerificationMethod }) {\n  const locale = useLocale();\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          <Translation\n            defaultMessage=\"Password\"\n            id=\"z19aZa\"\n            description=\"Label for password security settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              <Translation\n                defaultMessage=\"Last used {time}\"\n                id=\"Jqn+r+\"\n                description=\"Label indicating when password was last used with time\"\n                values={{\n                  time: getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                    { locale },\n                  ),\n                }}\n              />\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Set a password to access your account\"\n              id=\"leodiT\"\n              description=\"Description for setting up a password\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Change\"\n              id=\"/ZV6cj\"\n              description=\"Button label to change password\"\n            />\n          </Button>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set a password\"\n              id=\"zokPvK\"\n              description=\"Button label to set a new password\"\n            />\n          </Button>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: VerificationMethod;\n  isPasswordSet: boolean;\n}) {\n  const locale = useLocale();\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          <Translation\n            defaultMessage=\"Multi-factor authentication\"\n            id=\"f3uhhm\"\n            description=\"Label for multi-factor authentication settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            <Translation\n              defaultMessage=\"Authenticator app\"\n              id=\"0p/a72\"\n              description=\"Label indicating MFA is set up with an authenticator app\"\n            />\n            {settings.lastUsed && (\n              <>\n                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  <Translation\n                    defaultMessage=\"Last used {time}\"\n                    id=\"h3R6gY\"\n                    description=\"Label indicating when MFA was last used with time\"\n                    values={{\n                      time: getComparativeReadableDate(\n                        new Date(),\n                        new Date(settings.lastUsed),\n                        { locale },\n                      ),\n                    }}\n                  />\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Secure your account with an extra verification step\"\n              id=\"xZFdkq\"\n              description=\"Description for setting up multi-factor authentication\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Disable\"\n              id=\"4flMgv\"\n              description=\"Button label to disable multi-factor authentication\"\n            />\n          </Button>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set up authenticator app\"\n              id=\"oLNIQv\"\n              description=\"Button label to set up multi-factor authentication with an authenticator app\"\n            />\n          </Button>\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/cjs/lib/user-security.d.cts

@@ -1,5 +1,7 @@
-import { AuthenticationInformationResponseData } from '../api/endpoint.cjs';
+import { UserFieldsFragment, AuthenticationSettingsQuery } from '../api/client-graphql/generated.cjs';
 import { WidgetRootDomProps } from './utils.cjs';
+import 'graphql-request';
+import '../api/endpoint.cjs';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
 import './elements.cjs';
@@ -15,8 +17,10 @@ import '@radix-ui/themes/components/dropdown-menu';
 import '../select-KR89Qnvm.cjs';
 import '@radix-ui/themes/components/select';
 
+type AuthenticationSettings = AuthenticationSettingsQuery["authenticationSettings"];
 interface UserSecurityProps extends WidgetRootDomProps {
-    settings: AuthenticationInformationResponseData;
+    user: UserFieldsFragment;
+    settings: AuthenticationSettings;
 }
 declare const UserSecurity: React.FC<UserSecurityProps>;
 interface UserSecurityErrorProps extends WidgetRootDomProps {

package/dist/cjs/lib/user-sessions.cjs

@@ -129,9 +129,9 @@ const UserSessions = ({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_logout_all_sessions_dialog.LogoutAllSessionsDialog,
           {
-            currentSessionId,
             open: openLogoutAllSessionsDialog,
-            onOpenChange: setOpenLogoutAllSessionsDialog
+            onOpenChange: setOpenLogoutAllSessionsDialog,
+            currentSessionId
           }
         )
       ]

package/dist/cjs/lib/user-sessions.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, Button, 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\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\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                <Translation\n                  defaultMessage=\"Sign out of all other devices\"\n                  id=\"sfkEFa\"\n                  description=\"Heading for sign out all other devices action\"\n                />\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                <Translation\n                  defaultMessage=\"Remove access from all devices except this one\"\n                  id=\"LsD5BK\"\n                  description=\"Description for sign out all other devices action\"\n                />\n              </Text>\n            </Box>\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              <Translation\n                defaultMessage=\"Sign out\"\n                id=\"oKQ0rm\"\n                description=\"Button text to sign out of all other devices\"\n              />\n            </Button>\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>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </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  const locale = useLocale();\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            <Translation\n              defaultMessage=\"Unknown device\"\n              id=\"nF+P+T\"\n              description=\"Label for a session whose device could not be determined from its user agent\"\n            />\n          )}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && (\n            <Badge ml=\"2\">\n              <Translation\n                defaultMessage=\"This device\"\n                id=\"Wz8T8u\"\n                description=\"Badge label indicating the current device session\"\n              />\n            </Badge>\n          )}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                <Translation\n                  defaultMessage=\"Last seen {timeAgo}\"\n                  id=\"gF+kUw\"\n                  description=\"Text showing when the session was last active\"\n                  values={{\n                    timeAgo: getComparativeReadableDate(\n                      new Date(),\n                      new Date(session.lastActivityAt),\n                      { locale },\n                    ),\n                  }}\n                />\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\">\n          <Button variant=\"secondary\" onClick={() => onSignOut?.(session)}>\n            <Translation\n              defaultMessage=\"Sign out\"\n              id=\"sT1L78\"\n              description=\"Button text to sign out of a session\"\n            />\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":[]}
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, Button, 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 type { SessionFieldsFragment } from \"../api/client-graphql/generated.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\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\n\ninterface UserSessionsProps extends WidgetRootDomProps {\n  sessionsData: SessionFieldsFragment[];\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<SessionFieldsFragment | 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                <Translation\n                  defaultMessage=\"Sign out of all other devices\"\n                  id=\"sfkEFa\"\n                  description=\"Heading for sign out all other devices action\"\n                />\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                <Translation\n                  defaultMessage=\"Remove access from all devices except this one\"\n                  id=\"LsD5BK\"\n                  description=\"Description for sign out all other devices action\"\n                />\n              </Text>\n            </Box>\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              <Translation\n                defaultMessage=\"Sign out\"\n                id=\"oKQ0rm\"\n                description=\"Button text to sign out of all other devices\"\n              />\n            </Button>\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        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n        currentSessionId={currentSessionId}\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>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </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: SessionFieldsFragment;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: SessionFieldsFragment) => 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  const locale = useLocale();\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            <Translation\n              defaultMessage=\"Unknown device\"\n              id=\"nF+P+T\"\n              description=\"Label for a session whose device could not be determined from its user agent\"\n            />\n          )}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && (\n            <Badge ml=\"2\">\n              <Translation\n                defaultMessage=\"This device\"\n                id=\"Wz8T8u\"\n                description=\"Badge label indicating the current device session\"\n              />\n            </Badge>\n          )}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                <Translation\n                  defaultMessage=\"Last seen {timeAgo}\"\n                  id=\"gF+kUw\"\n                  description=\"Text showing when the session was last active\"\n                  values={{\n                    timeAgo: getComparativeReadableDate(\n                      new Date(),\n                      new Date(session.lastActivityAt),\n                      { locale },\n                    ),\n                  }}\n                />\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\">\n          <Button variant=\"secondary\" onClick={() => onSignOut?.(session)}>\n            <Translation\n              defaultMessage=\"Sign out\"\n              id=\"sT1L78\"\n              description=\"Button text to sign out of a session\"\n            />\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/cjs/lib/user-sessions.d.cts

@@ -1,6 +1,9 @@
 import * as React$1 from 'react';
 import { WidgetRootDomProps } from './utils.cjs';
-import { ActiveSession } from '../api/endpoint.cjs';
+import { SessionFieldsFragment } from '../api/client-graphql/generated.cjs';
+import '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
 import './elements.cjs';
 import '@radix-ui/themes';
 import '@radix-ui/themes/props';
@@ -12,11 +15,10 @@ import '../dropdown-menu-BQ5LtvdR.cjs';
 import '@radix-ui/themes/components/dropdown-menu';
 import '../select-KR89Qnvm.cjs';
 import '@radix-ui/themes/components/select';
-import '@tanstack/react-query';
-import '../api/widgets-api-client.cjs';
+import 'graphql-request';
 
 interface UserSessionsProps extends WidgetRootDomProps {
-    sessionsData: ActiveSession[];
+    sessionsData: SessionFieldsFragment[];
     currentSessionId: string;
 }
 declare const UserSessions: ({ sessionsData: sessions, currentSessionId, ...domProps }: UserSessionsProps) => React$1.JSX.Element;

package/dist/cjs/lib/users-filter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/users-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select } from \"./elements.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { MemberRole } from \"../api/endpoint.js\";\n\nconst ALL_ROLES_NAME = \"All\";\nconst ALL_ROLES_VALUE = \"null\";\n\ntype UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {\n  roles: MemberRole[] | undefined;\n  disabled?: boolean;\n};\n\nexport const UsersFilter: React.FC<UsersFilterProps> = ({\n  roles,\n  disabled,\n}) => {\n  const {\n    dispatch,\n    state: { role },\n  } = useUsersManagementContext();\n\n  const setFilterParams = (value: string | null) => {\n    dispatch({ type: \"FILTER_BY_ROLE\", role: value });\n  };\n  const isValidRole = (value: unknown): value is string =>\n    roles ? roles.findIndex((role) => role.slug === value) !== -1 : false;\n  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;\n  const roleName =\n    roles?.find((role) => role.slug === filteredRole)?.name || ALL_ROLES_NAME;\n\n  const onValueChange = (value: string) => {\n    if (value === ALL_ROLES_VALUE) {\n      setFilterParams(null);\n    } else {\n      if (isValidRole(value)) {\n        setFilterParams(value);\n      }\n    }\n  };\n\n  return (\n    <Select.Root\n      value={roles ? filteredRole : \"null\"}\n      onValueChange={onValueChange}\n      disabled={disabled}\n    >\n      <Select.Trigger>{roles ? roleName : ALL_ROLES_NAME}</Select.Trigger>\n      <Select.Content>\n        <Select.Item value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</Select.Item>\n        {roles?.map((role) => (\n          <React.Fragment key={role.slug}>\n            <Select.Item value={role.slug}>{role.name}</Select.Item>\n          </React.Fragment>\n        ))}\n      </Select.Content>\n    </Select.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDM;AA/CN,YAAuB;AACvB,sBAAuB;AACvB,sCAA0C;AAG1C,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAOjB,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,2DAA0B;AAE9B,QAAM,kBAAkB,CAAC,UAAyB;AAChD,aAAS,EAAE,MAAM,kBAAkB,MAAM,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,cAAc,CAAC,UACnB,QAAQ,MAAM,UAAU,CAACA,UAASA,MAAK,SAAS,KAAK,MAAM,KAAK;AAClE,QAAM,eAAe,YAAY,IAAI,IAAI,OAAO;AAChD,QAAM,WACJ,OAAO,KAAK,CAACA,UAASA,MAAK,SAAS,YAAY,GAAG,QAAQ;AAE7D,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU,iBAAiB;AAC7B,sBAAgB,IAAI;AAAA,IACtB,OAAO;AACL,UAAI,YAAY,KAAK,GAAG;AACtB,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,uBAAO;AAAA,IAAP;AAAA,MACC,OAAO,QAAQ,eAAe;AAAA,MAC9B;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,uBAAO,SAAP,EAAgB,kBAAQ,WAAW,gBAAe;AAAA,QACnD,6CAAC,uBAAO,SAAP,EACC;AAAA,sDAAC,uBAAO,MAAP,EAAY,OAAO,iBAAkB,0BAAe;AAAA,UACpD,OAAO,IAAI,CAACA,UACX,4CAAC,MAAM,UAAN,EACC,sDAAC,uBAAO,MAAP,EAAY,OAAOA,MAAK,MAAO,UAAAA,MAAK,MAAK,KADvBA,MAAK,IAE1B,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["role"]}
+{"version":3,"sources":["../../../src/lib/users-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select } from \"./elements.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport type { Role } from \"./api/user.js\";\n\nconst ALL_ROLES_NAME = \"All\";\nconst ALL_ROLES_VALUE = \"null\";\n\ntype UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {\n  roles: Role[] | undefined;\n  disabled?: boolean;\n};\n\nexport const UsersFilter: React.FC<UsersFilterProps> = ({\n  roles,\n  disabled,\n}) => {\n  const {\n    dispatch,\n    state: { role },\n  } = useUsersManagementContext();\n\n  const setFilterParams = (value: string | null) => {\n    dispatch({ type: \"FILTER_BY_ROLE\", role: value });\n  };\n  const isValidRole = (value: unknown): value is string =>\n    roles ? roles.findIndex((role) => role.slug === value) !== -1 : false;\n  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;\n  const roleName =\n    roles?.find((role) => role.slug === filteredRole)?.name || ALL_ROLES_NAME;\n\n  const onValueChange = (value: string) => {\n    if (value === ALL_ROLES_VALUE) {\n      setFilterParams(null);\n    } else {\n      if (isValidRole(value)) {\n        setFilterParams(value);\n      }\n    }\n  };\n\n  return (\n    <Select.Root\n      value={roles ? filteredRole : \"null\"}\n      onValueChange={onValueChange}\n      disabled={disabled}\n    >\n      <Select.Trigger>{roles ? roleName : ALL_ROLES_NAME}</Select.Trigger>\n      <Select.Content>\n        <Select.Item value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</Select.Item>\n        {roles?.map((role) => (\n          <React.Fragment key={role.slug}>\n            <Select.Item value={role.slug}>{role.name}</Select.Item>\n          </React.Fragment>\n        ))}\n      </Select.Content>\n    </Select.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDM;AA/CN,YAAuB;AACvB,sBAAuB;AACvB,sCAA0C;AAG1C,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAOjB,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,2DAA0B;AAE9B,QAAM,kBAAkB,CAAC,UAAyB;AAChD,aAAS,EAAE,MAAM,kBAAkB,MAAM,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,cAAc,CAAC,UACnB,QAAQ,MAAM,UAAU,CAACA,UAASA,MAAK,SAAS,KAAK,MAAM,KAAK;AAClE,QAAM,eAAe,YAAY,IAAI,IAAI,OAAO;AAChD,QAAM,WACJ,OAAO,KAAK,CAACA,UAASA,MAAK,SAAS,YAAY,GAAG,QAAQ;AAE7D,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU,iBAAiB;AAC7B,sBAAgB,IAAI;AAAA,IACtB,OAAO;AACL,UAAI,YAAY,KAAK,GAAG;AACtB,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,uBAAO;AAAA,IAAP;AAAA,MACC,OAAO,QAAQ,eAAe;AAAA,MAC9B;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,uBAAO,SAAP,EAAgB,kBAAQ,WAAW,gBAAe;AAAA,QACnD,6CAAC,uBAAO,SAAP,EACC;AAAA,sDAAC,uBAAO,MAAP,EAAY,OAAO,iBAAkB,0BAAe;AAAA,UACpD,OAAO,IAAI,CAACA,UACX,4CAAC,MAAM,UAAN,EACC,sDAAC,uBAAO,MAAP,EAAY,OAAOA,MAAK,MAAO,UAAAA,MAAK,MAAK,KADvBA,MAAK,IAE1B,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["role"]}

package/dist/cjs/lib/users-filter.d.cts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Root } from '@radix-ui/themes/components/select';
-import { MemberRole } from '../api/endpoint.cjs';
+import { b as Role } from '../user-CgBDfSHl.cjs';
+import '../api/client-graphql/generated.cjs';
+import 'graphql-request';
 import '@tanstack/react-query';
-import '../api/widgets-api-client.cjs';
 
 type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Root> & {
-    roles: MemberRole[] | undefined;
+    roles: Role[] | undefined;
     disabled?: boolean;
 };
 declare const UsersFilter: React.FC<UsersFilterProps>;

package/dist/cjs/lib/users-management-context.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/users-management-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  UsersManagementAction,\n  UsersManagementState,\n  useUsersManagementState,\n} from \"./users-management-state.js\";\nimport { ListMetadata } from \"../api/endpoint.js\";\n\nexport interface UsersManagementContextType {\n  state: UsersManagementState;\n  dispatch: React.Dispatch<UsersManagementAction>;\n}\n\nconst UsersManagementContext = React.createContext<\n  UsersManagementContextType | undefined\n>(undefined);\nUsersManagementContext.displayName = \"UsersManagementContext\";\n\nconst initialState: UsersManagementState = {\n  pagination: null,\n  role: null,\n  searchQuery: null,\n};\n\nexport const UsersManagementContextProvider: React.FC<{\n  children?: React.ReactNode;\n}> = ({ children }) => {\n  const [state, dispatch] = useUsersManagementState(initialState);\n\n  const context = React.useMemo<UsersManagementContextType>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state, dispatch],\n  );\n\n  return (\n    <UsersManagementContext.Provider value={context}>\n      {children}\n    </UsersManagementContext.Provider>\n  );\n};\n\nconst NOOP = () => void 0;\nconst EMPTY_PAGINATION: ListMetadata = { before: null, after: null };\n\n/**\n * The context may be provided if it is instantiated in the tree above the user.\n */\nexport function useUsersManagementContext(\n  initialContext?: UsersManagementContextType | null,\n): UsersManagementContextType {\n  const context = React.useContext(UsersManagementContext);\n\n  if (context) {\n    return context;\n  }\n\n  if (initialContext) {\n    return initialContext;\n  }\n\n  return {\n    dispatch: NOOP,\n    state: {\n      pagination: EMPTY_PAGINATION,\n      role: null,\n      searchQuery: null,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCI;AAtCJ,YAAuB;AACvB,oCAIO;AAQP,MAAM,yBAAyB,MAAM,cAEnC,MAAS;AACX,uBAAuB,cAAc;AAErC,MAAM,eAAqC;AAAA,EACzC,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AACf;AAEO,MAAM,iCAER,CAAC,EAAE,SAAS,MAAM;AACrB,QAAM,CAAC,OAAO,QAAQ,QAAI,uDAAwB,YAAY;AAE9D,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,4CAAC,uBAAuB,UAAvB,EAAgC,OAAO,SACrC,UACH;AAEJ;AAEA,MAAM,OAAO,MAAM;AACnB,MAAM,mBAAiC,EAAE,QAAQ,MAAM,OAAO,KAAK;AAK5D,SAAS,0BACd,gBAC4B;AAC5B,QAAM,UAAU,MAAM,WAAW,sBAAsB;AAEvD,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB;AAClB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/users-management-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  UsersManagementAction,\n  UsersManagementState,\n  useUsersManagementState,\n} from \"./users-management-state.js\";\nimport type { ListMetadata } from \"./api/user.js\";\n\nexport interface UsersManagementContextType {\n  state: UsersManagementState;\n  dispatch: React.Dispatch<UsersManagementAction>;\n}\n\nconst UsersManagementContext = React.createContext<\n  UsersManagementContextType | undefined\n>(undefined);\nUsersManagementContext.displayName = \"UsersManagementContext\";\n\nconst initialState: UsersManagementState = {\n  pagination: null,\n  role: null,\n  searchQuery: null,\n};\n\nexport const UsersManagementContextProvider: React.FC<{\n  children?: React.ReactNode;\n}> = ({ children }) => {\n  const [state, dispatch] = useUsersManagementState(initialState);\n\n  const context = React.useMemo<UsersManagementContextType>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state, dispatch],\n  );\n\n  return (\n    <UsersManagementContext.Provider value={context}>\n      {children}\n    </UsersManagementContext.Provider>\n  );\n};\n\nconst NOOP = () => void 0;\nconst EMPTY_PAGINATION: ListMetadata = { before: null, after: null };\n\n/**\n * The context may be provided if it is instantiated in the tree above the user.\n */\nexport function useUsersManagementContext(\n  initialContext?: UsersManagementContextType | null,\n): UsersManagementContextType {\n  const context = React.useContext(UsersManagementContext);\n\n  if (context) {\n    return context;\n  }\n\n  if (initialContext) {\n    return initialContext;\n  }\n\n  return {\n    dispatch: NOOP,\n    state: {\n      pagination: EMPTY_PAGINATION,\n      role: null,\n      searchQuery: null,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCI;AAtCJ,YAAuB;AACvB,oCAIO;AAQP,MAAM,yBAAyB,MAAM,cAEnC,MAAS;AACX,uBAAuB,cAAc;AAErC,MAAM,eAAqC;AAAA,EACzC,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AACf;AAEO,MAAM,iCAER,CAAC,EAAE,SAAS,MAAM;AACrB,QAAM,CAAC,OAAO,QAAQ,QAAI,uDAAwB,YAAY;AAE9D,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,4CAAC,uBAAuB,UAAvB,EAAgC,OAAO,SACrC,UACH;AAEJ;AAEA,MAAM,OAAO,MAAM;AACnB,MAAM,mBAAiC,EAAE,QAAQ,MAAM,OAAO,KAAK;AAK5D,SAAS,0BACd,gBAC4B;AAC5B,QAAM,UAAU,MAAM,WAAW,sBAAsB;AAEvD,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB;AAClB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF;","names":[]}

package/dist/cjs/lib/users-management-context.d.cts

@@ -1,19 +1,5 @@
-import * as React from 'react';
-import { UsersManagementState, UsersManagementAction } from './users-management-state.cjs';
-import '../api/endpoint.cjs';
+import 'react';
+export { e as UsersManagementContextProvider, d as UsersManagementContextType, f as useUsersManagementContext } from '../user-CgBDfSHl.cjs';
+import '../api/client-graphql/generated.cjs';
+import 'graphql-request';
 import '@tanstack/react-query';
-import '../api/widgets-api-client.cjs';
-
-interface UsersManagementContextType {
-    state: UsersManagementState;
-    dispatch: React.Dispatch<UsersManagementAction>;
-}
-declare const UsersManagementContextProvider: React.FC<{
-    children?: React.ReactNode;
-}>;
-/**
- * The context may be provided if it is instantiated in the tree above the user.
- */
-declare function useUsersManagementContext(initialContext?: UsersManagementContextType | null): UsersManagementContextType;
-
-export { UsersManagementContextProvider, type UsersManagementContextType, useUsersManagementContext };

package/dist/cjs/lib/users-management-state.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/users-management-state.ts"],"sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"./utils.js\";\nimport { ListMetadata } from \"../api/endpoint.js\";\n\nexport function useUsersManagementState(initialState: UsersManagementState) {\n  const [[state, effects], dispatch] = React.useReducer(reducer, [\n    initialState,\n    [],\n  ]);\n\n  React.useEffect(() => {\n    if (window !== window.top) {\n      // do not use query params if widget is rendered in an iframe\n      return;\n    }\n    const params = new URLSearchParams(window.location.search);\n    dispatch({ type: \"INIT\", params });\n  }, []);\n\n  React.useEffect(() => {\n    for (const effect of effects) {\n      effect();\n    }\n  }, [effects]);\n\n  return [state, dispatch] as const;\n}\n\nfunction reducer(\n  current: StateWithEffects<UsersManagementState>,\n  action: UsersManagementAction,\n): StateWithEffects<UsersManagementState> {\n  const effects: EffectFn[] = [];\n  const exec = (fn: () => void) => {\n    const effect = () => {\n      if (!effect.disposed) {\n        effect.disposed = true;\n        fn();\n      }\n    };\n    effect.disposed = false;\n    effects.push(effect);\n  };\n\n  const [currentState] = current;\n  switch (action.type) {\n    case \"INIT\": {\n      const { params } = action;\n      let role, searchQuery;\n      if ((role = params.get(\"ak_role\"))) {\n        return [{ ...currentState, searchQuery: null, role }, effects];\n      }\n      if ((searchQuery = params.get(\"ak_q\"))) {\n        return [{ ...currentState, searchQuery, role: null }, effects];\n      }\n      return current;\n    }\n    case \"SET_PAGINATION\": {\n      const { pagination } = action;\n      if (\n        (pagination.after &&\n          pagination.after === currentState.pagination?.after) ||\n        (pagination.before &&\n          pagination.before === currentState.pagination?.before)\n      ) {\n        return current;\n      }\n\n      return [{ ...currentState, pagination }, effects];\n    }\n    case \"FILTER_BY_ROLE\": {\n      if (action.role === currentState.role) {\n        return current;\n      }\n      const { role } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: role, ak_q: null },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role, searchQuery: null },\n        effects,\n      ];\n    }\n    case \"FILTER_BY_SEARCH\": {\n      if (action.searchQuery === currentState.searchQuery) {\n        return current;\n      }\n      const { searchQuery } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: null, ak_q: searchQuery },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role: null, searchQuery },\n        effects,\n      ];\n    }\n    default:\n      return current;\n  }\n}\n\nexport interface UsersManagementState {\n  searchQuery: string | null;\n  role: string | null;\n  pagination: ListMetadata | null;\n}\n\nexport type UsersManagementAction =\n  | { type: \"INIT\"; params: URLSearchParams }\n  | { type: \"FILTER_BY_SEARCH\"; searchQuery: string | null }\n  | { type: \"FILTER_BY_ROLE\"; role: string | null }\n  | { type: \"SET_PAGINATION\"; pagination: ListMetadata };\n\ntype EffectFn = {\n  (): void;\n  disposed: boolean;\n};\n\ntype StateWithEffects<State> = [State, EffectFn[]];\n\nfunction updateQueryParams(\n  newParams: { [key: string]: { toString(): string } | null },\n  args: { replaceState?: boolean } = {},\n) {\n  if (!canUseDOM) {\n    throw new Error(\"Cannot update query params on the server\");\n  }\n\n  if (window !== window.top) {\n    // do not update query params if widget is rendered in an iframe\n    return;\n  }\n\n  const initialSearch = window.location.search;\n  const params = new URLSearchParams(initialSearch);\n  Object.entries(newParams).forEach(([key, value]) => {\n    if (value != null && value !== \"\") {\n      params.set(key, String(value));\n    } else {\n      params.delete(key);\n    }\n  });\n\n  if (initialSearch === `?${params.toString()}`) {\n    return;\n  }\n\n  const newUrl = params.toString()\n    ? `${window.location.pathname}?${params}`\n    : window.location.pathname;\n\n  if (args.replaceState) {\n    window.history.replaceState({}, \"\", newUrl);\n  } else {\n    window.history.pushState({}, \"\", newUrl);\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/users-management-state.ts"],"sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"./utils.js\";\nimport type { ListMetadata } from \"./api/user.js\";\n\nexport function useUsersManagementState(initialState: UsersManagementState) {\n  const [[state, effects], dispatch] = React.useReducer(reducer, [\n    initialState,\n    [],\n  ]);\n\n  React.useEffect(() => {\n    if (window !== window.top) {\n      // do not use query params if widget is rendered in an iframe\n      return;\n    }\n    const params = new URLSearchParams(window.location.search);\n    dispatch({ type: \"INIT\", params });\n  }, []);\n\n  React.useEffect(() => {\n    for (const effect of effects) {\n      effect();\n    }\n  }, [effects]);\n\n  return [state, dispatch] as const;\n}\n\nfunction reducer(\n  current: StateWithEffects<UsersManagementState>,\n  action: UsersManagementAction,\n): StateWithEffects<UsersManagementState> {\n  const effects: EffectFn[] = [];\n  const exec = (fn: () => void) => {\n    const effect = () => {\n      if (!effect.disposed) {\n        effect.disposed = true;\n        fn();\n      }\n    };\n    effect.disposed = false;\n    effects.push(effect);\n  };\n\n  const [currentState] = current;\n  switch (action.type) {\n    case \"INIT\": {\n      const { params } = action;\n      let role, searchQuery;\n      if ((role = params.get(\"ak_role\"))) {\n        return [{ ...currentState, searchQuery: null, role }, effects];\n      }\n      if ((searchQuery = params.get(\"ak_q\"))) {\n        return [{ ...currentState, searchQuery, role: null }, effects];\n      }\n      return current;\n    }\n    case \"SET_PAGINATION\": {\n      const { pagination } = action;\n      if (\n        (pagination.after &&\n          pagination.after === currentState.pagination?.after) ||\n        (pagination.before &&\n          pagination.before === currentState.pagination?.before)\n      ) {\n        return current;\n      }\n\n      return [{ ...currentState, pagination }, effects];\n    }\n    case \"FILTER_BY_ROLE\": {\n      if (action.role === currentState.role) {\n        return current;\n      }\n      const { role } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: role, ak_q: null },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role, searchQuery: null },\n        effects,\n      ];\n    }\n    case \"FILTER_BY_SEARCH\": {\n      if (action.searchQuery === currentState.searchQuery) {\n        return current;\n      }\n      const { searchQuery } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: null, ak_q: searchQuery },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role: null, searchQuery },\n        effects,\n      ];\n    }\n    default:\n      return current;\n  }\n}\n\nexport interface UsersManagementState {\n  searchQuery: string | null;\n  role: string | null;\n  pagination: ListMetadata | null;\n}\n\nexport type UsersManagementAction =\n  | { type: \"INIT\"; params: URLSearchParams }\n  | { type: \"FILTER_BY_SEARCH\"; searchQuery: string | null }\n  | { type: \"FILTER_BY_ROLE\"; role: string | null }\n  | { type: \"SET_PAGINATION\"; pagination: ListMetadata };\n\ntype EffectFn = {\n  (): void;\n  disposed: boolean;\n};\n\ntype StateWithEffects<State> = [State, EffectFn[]];\n\nfunction updateQueryParams(\n  newParams: { [key: string]: { toString(): string } | null },\n  args: { replaceState?: boolean } = {},\n) {\n  if (!canUseDOM) {\n    throw new Error(\"Cannot update query params on the server\");\n  }\n\n  if (window !== window.top) {\n    // do not update query params if widget is rendered in an iframe\n    return;\n  }\n\n  const initialSearch = window.location.search;\n  const params = new URLSearchParams(initialSearch);\n  Object.entries(newParams).forEach(([key, value]) => {\n    if (value != null && value !== \"\") {\n      params.set(key, String(value));\n    } else {\n      params.delete(key);\n    }\n  });\n\n  if (initialSearch === `?${params.toString()}`) {\n    return;\n  }\n\n  const newUrl = params.toString()\n    ? `${window.location.pathname}?${params}`\n    : window.location.pathname;\n\n  if (args.replaceState) {\n    window.history.replaceState({}, \"\", newUrl);\n  } else {\n    window.history.pushState({}, \"\", newUrl);\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/users-management-state.d.cts

@@ -1,26 +1,5 @@
-import * as React from 'react';
-import { ListMetadata } from '../api/endpoint.cjs';
+import 'react';
+export { c as UsersManagementAction, U as UsersManagementState, u as useUsersManagementState } from '../user-CgBDfSHl.cjs';
+import '../api/client-graphql/generated.cjs';
+import 'graphql-request';
 import '@tanstack/react-query';
-import '../api/widgets-api-client.cjs';
-
-declare function useUsersManagementState(initialState: UsersManagementState): readonly [UsersManagementState, React.ActionDispatch<[action: UsersManagementAction]>];
-interface UsersManagementState {
-    searchQuery: string | null;
-    role: string | null;
-    pagination: ListMetadata | null;
-}
-type UsersManagementAction = {
-    type: "INIT";
-    params: URLSearchParams;
-} | {
-    type: "FILTER_BY_SEARCH";
-    searchQuery: string | null;
-} | {
-    type: "FILTER_BY_ROLE";
-    role: string | null;
-} | {
-    type: "SET_PAGINATION";
-    pagination: ListMetadata;
-};
-
-export { type UsersManagementAction, type UsersManagementState, useUsersManagementState };