@stackframe/stack 2.4.3 → 2.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/user-button.js +2 -1
- package/dist/components/user-button.js.map +1 -1
- package/dist/components-core/dropdown.js +3 -0
- package/dist/components-core/dropdown.js.map +1 -1
- package/dist/esm/components/user-button.js +2 -1
- package/dist/esm/components/user-button.js.map +1 -1
- package/dist/esm/components-core/dropdown.js +3 -0
- package/dist/esm/components-core/dropdown.js.map +1 -1
- package/dist/esm/lib/stack-app.js +2 -2
- package/dist/esm/lib/stack-app.js.map +1 -1
- package/dist/lib/stack-app.js +2 -2
- package/dist/lib/stack-app.js.map +1 -1
- package/package.json +1 -1
|
@@ -97,7 +97,8 @@ function UserButtonInnerInner(props) {
|
|
|
97
97
|
const textStyles = {
|
|
98
98
|
textOverflow: "ellipsis",
|
|
99
99
|
whiteSpace: "nowrap",
|
|
100
|
-
overflow: "hidden"
|
|
100
|
+
overflow: "hidden",
|
|
101
|
+
margin: 0
|
|
101
102
|
};
|
|
102
103
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
|
|
103
104
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden'
|
|
1
|
+
{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden',\n margin: 0,\n };\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n <Text style={textStyles}>{user.displayName}</Text>\n <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n </div>}\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent style={{ zIndex: 1500 }}>\n <DropdownMenuLabel>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n <div>\n {user && <Text>{user.displayName}</Text>}\n {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n {!user && <Text variant=\"secondary\">Not signed in</Text>}\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {user && <Item \n text=\"Account settings\" \n onClick={() => runAsynchronously(router.push(app.urls.accountSettings))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign in\"\n onClick={() => runAsynchronously(router.push(app.urls.signIn))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign up\"\n onClick={() => runAsynchronously(router.push(app.urls.signUp))}\n icon={icons.RxPencil2}\n />}\n {user && props.extraItems && props.extraItems.map((item, index) => (\n <Item key={index} {...item} />\n ))}\n {props.colorModeToggle && (\n <Item \n text=\"Toggle theme\" \n onClick={props.colorModeToggle} \n icon={icons.RxHalf2}\n />\n )}\n {user && <Item \n text=\"Sign out\" \n onClick={() => user.signOut()} \n icon={icons.RxEnter}\n />}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"mappings":"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","names":["styled","React","UserAvatar"]}
|
|
@@ -53,6 +53,9 @@ var StyledTrigger = (0, import_styled_components.default)(DropdownMenuPrimitive.
|
|
|
53
53
|
outline: none;
|
|
54
54
|
box-shadow: 0;
|
|
55
55
|
}
|
|
56
|
+
&:hover {
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
56
59
|
`;
|
|
57
60
|
var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTrigger, { ref, ...props }));
|
|
58
61
|
var StyledContent = (0, import_styled_components.default)(DropdownMenuPrimitive.Content)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;
|
|
1
|
+
{"version":3,"sources":["../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;AAoBzC;AAjBF,IAAM,eAAqC;AAE3C,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,gBACjD,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG1C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,kBAC5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAI/D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAClD,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SACE,4CAAuB,8BAAtB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAElC,IAAM,iBAAa,yBAAAA,SAA6B,0BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehD,CAAC,EAAE,OAAO,MAAM,UAAU,qBAAqB;AAAA;AAAA;AAAA,wBAG3B,4CAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,4CAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,kBAAc,yBAAAA,SAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,4CAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,sBAAkB,yBAAAA,SAA6B,+BAAS;AAAA;AAAA;AAAA,sBAKxC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGzC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAIlE,IAAM,wBAA8B,iBAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SAAO,4CAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":["styled"]}
|
|
@@ -64,7 +64,8 @@ function UserButtonInnerInner(props) {
|
|
|
64
64
|
const textStyles = {
|
|
65
65
|
textOverflow: "ellipsis",
|
|
66
66
|
whiteSpace: "nowrap",
|
|
67
|
-
overflow: "hidden"
|
|
67
|
+
overflow: "hidden",
|
|
68
|
+
margin: 0
|
|
68
69
|
};
|
|
69
70
|
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
70
71
|
/* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden'
|
|
1
|
+
{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\n\nconst icons = typedFromEntries(typedEntries({\n RxPencil2,\n RxPerson,\n RxEnter,\n RxHalf2,\n RxFilePlus\n} as const).map(([key, value]) => {\n const styledComponent = styled(value)`\n color: ${SECONDARY_FONT_COLORS.light};\n\n html[data-stack-theme='dark'] & {\n color: ${SECONDARY_FONT_COLORS.dark};\n }\n `;\n return [\n key,\n React.createElement(styledComponent, { size: 20 })\n ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n return (\n <DropdownMenuItem \n onClick={() => runAsynchronously(props.onClick)}\n style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n >\n {props.icon}\n <Text>{props.text}</Text>\n </DropdownMenuItem>\n );\n}\n\ntype UserButtonProps = {\n showUserInfo?: boolean,\n colorModeToggle?: () => void | Promise<void>,\n extraItems?: {\n text: string,\n icon: React.ReactNode,\n onClick: () => void | Promise<void>,\n }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n return (\n <Suspense\n fallback={\n <Skeleton>\n <UserButtonInnerInner {...props} user={null} />\n </Skeleton>\n }\n >\n <UserButtonInner {...props} />\n </Suspense>\n );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n const user = useUser();\n return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n const user = props.user;\n const app = useStackApp();\n const router = useRouter();\n\n const textStyles = {\n textOverflow: 'ellipsis', \n whiteSpace: 'nowrap', \n overflow: 'hidden',\n margin: 0,\n };\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n <Text style={textStyles}>{user.displayName}</Text>\n <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n </div>}\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent style={{ zIndex: 1500 }}>\n <DropdownMenuLabel>\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <UserAvatar user={user} />\n <div>\n {user && <Text>{user.displayName}</Text>}\n {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n {!user && <Text variant=\"secondary\">Not signed in</Text>}\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {user && <Item \n text=\"Account settings\" \n onClick={() => runAsynchronously(router.push(app.urls.accountSettings))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign in\"\n onClick={() => runAsynchronously(router.push(app.urls.signIn))}\n icon={icons.RxPerson}\n />}\n {!user && <Item\n text=\"Sign up\"\n onClick={() => runAsynchronously(router.push(app.urls.signUp))}\n icon={icons.RxPencil2}\n />}\n {user && props.extraItems && props.extraItems.map((item, index) => (\n <Item key={index} {...item} />\n ))}\n {props.colorModeToggle && (\n <Item \n text=\"Toggle theme\" \n onClick={props.colorModeToggle} \n icon={icons.RxHalf2}\n />\n )}\n {user && <Item \n text=\"Sign out\" \n onClick={() => user.signOut()} \n icon={icons.RxEnter}\n />}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -15,6 +15,9 @@ var StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`
|
|
|
15
15
|
outline: none;
|
|
16
16
|
box-shadow: 0;
|
|
17
17
|
}
|
|
18
|
+
&:hover {
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
18
21
|
`;
|
|
19
22
|
var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledTrigger, { ref, ...props }));
|
|
20
23
|
var StyledContent = styled(DropdownMenuPrimitive.Content)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,YAAY,2BAA2B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;
|
|
1
|
+
{"version":3,"sources":["../../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n all: unset;\n &:focus {\n outline: none;\n box-shadow: 0;\n }\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n $colors: ColorPalette,\n}>`\n z-index: 50;\n min-width: 8rem;\n overflow: hidden;\n border-radius: 4px;\n padding: 0.25rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n background: ${({ $colors }) => $colors.light.backgroundColor};\n\n html[data-stack-theme='dark'] & {\n border-color: ${({ $colors }) => $colors.dark.neutralColor};\n background: ${({ $colors }) => $colors.dark.backgroundColor};\n }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n const { colors } = useDesign();\n return (\n <DropdownMenuPrimitive.Portal>\n <StyledContent \n $colors={colors}\n sideOffset={sideOffset} \n ref={ref} \n {...props} \n />\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n $inset?: boolean,\n}>`\n display: flex;\n cursor: default;\n align-items: center;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n outline: none;\n transition: color 0.2s ease;\n &:focus {\n background-color: var(--accent);\n color: var(--accent-foreground);\n }\n ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.light};\n }\n\n html[data-stack-theme='dark'] & {\n &:hover {\n background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n }\n }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => {\n return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n padding: 0.375rem 0.5rem;\n font-size: 0.875rem;\n ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean,\n }\n>(({ className, inset, ...props }, ref) => (\n <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n $colors: ColorPalette,\n}>`\n margin: 0.25rem -0.25rem;\n height: 1px;\n background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n html[data-stack-theme='dark'] & {\n background-color: ${({ $colors }) => $colors.dark.neutralColor};\n }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { colors } = useDesign();\n return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,YAAY,2BAA2B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAoBzC;AAjBF,IAAM,eAAqC;AAE3C,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,gBACjD,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG1C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,kBAC5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAI/D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAClD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,oBAAuB,8BAAtB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAElC,IAAM,aAAa,OAA6B,0BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehD,CAAC,EAAE,OAAO,MAAM,UAAU,qBAAqB;AAAA;AAAA;AAAA,wBAG3B,2BAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,oBAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,cAAc,OAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,oBAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,kBAAkB,OAA6B,+BAAS;AAAA;AAAA;AAAA,sBAKxC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGzC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAIlE,IAAM,wBAA8B,iBAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO,oBAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":[]}
|
|
@@ -430,12 +430,12 @@ var _StackClientAppImpl = class __StackClientAppImpl {
|
|
|
430
430
|
get urls() {
|
|
431
431
|
return getUrls(this._urlOptions);
|
|
432
432
|
}
|
|
433
|
-
_redirectTo(handlerName) {
|
|
433
|
+
async _redirectTo(handlerName) {
|
|
434
434
|
if (!this.urls[handlerName]) {
|
|
435
435
|
throw new Error(`No URL for handler name ${handlerName}`);
|
|
436
436
|
}
|
|
437
437
|
window.location.href = this.urls[handlerName];
|
|
438
|
-
return wait(2e3);
|
|
438
|
+
return await wait(2e3);
|
|
439
439
|
}
|
|
440
440
|
async redirectToSignIn() {
|
|
441
441
|
return await this._redirectTo("signIn");
|