@plumile/ui 0.1.69 → 0.1.72

package/lib/esm/atomic/molecules/profile_dropdown/ProfileDropdown.js

@@ -1,119 +0,0 @@
-import { cx as e } from "../../../theme/tools.js";
-import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
-import { ProfileDropdownLogoutSvg as n } from "../../../icons/ProfileDropdownLogoutSvg.js";
-import { ProfileDropdownOrganizationSvg as r } from "../../../icons/ProfileDropdownOrganizationSvg.js";
-import { avatar as i, chevron as a, chevronOpen as o, container as s, dropdown as c, menuIcon as l, menuItem as u, menuLabel as d, organizationName as f, selectButton as p, selectContent as m, selectText as h, userName as g } from "./profileDropdown.css.js";
-import { useEffect as _, useRef as v, useState as y } from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { Link as S } from "@plumile/router";
-//#region src/atomic/molecules/profile_dropdown/ProfileDropdown.tsx
-var C = {
-	menuAriaLabel: "User menu",
-	profileSecurity: "Profile & Security",
-	switchOrganizations: "Switch Organizations",
-	signOut: "Sign Out"
-}, w = (w) => {
-	let [T, E] = y(!1), D = v(null), { viewer: O, organization: k, labels: A = C } = w, j = () => {
-		E((e) => !e);
-	}, M = () => {
-		E(!1);
-	};
-	_(() => {
-		let e = (e) => {
-			D.current != null && !D.current.contains(e.target) && E(!1);
-		};
-		return document.addEventListener("mousedown", e), () => {
-			document.removeEventListener("mousedown", e);
-		};
-	}, []);
-	let N = [O.firstName, O.lastName].filter((e) => e.trim().length > 0).join(" "), P = null;
-	return T && (P = /* @__PURE__ */ x("div", {
-		className: c,
-		role: "menu",
-		children: [
-			/* @__PURE__ */ x(S, {
-				to: w.profilePath,
-				className: u,
-				onClick: M,
-				children: [/* @__PURE__ */ b("span", {
-					className: l,
-					children: /* @__PURE__ */ b(r, {
-						width: 16,
-						height: 16
-					})
-				}), /* @__PURE__ */ b("span", {
-					className: d,
-					children: A.profileSecurity
-				})]
-			}),
-			/* @__PURE__ */ x(S, {
-				to: k.switchPath,
-				className: u,
-				onClick: M,
-				children: [/* @__PURE__ */ b("span", {
-					className: l,
-					children: /* @__PURE__ */ b(r, {
-						width: 16,
-						height: 16
-					})
-				}), /* @__PURE__ */ b("span", {
-					className: d,
-					children: A.switchOrganizations
-				})]
-			}),
-			/* @__PURE__ */ x("button", {
-				className: u,
-				onClick: () => {
-					w.onSignOut?.(), M();
-				},
-				type: "button",
-				role: "menuitem",
-				children: [/* @__PURE__ */ b("span", {
-					className: l,
-					children: /* @__PURE__ */ b(n, {
-						width: 16,
-						height: 16
-					})
-				}), /* @__PURE__ */ b("span", {
-					className: d,
-					children: A.signOut
-				})]
-			})
-		]
-	})), /* @__PURE__ */ x("div", {
-		className: e(s, w.className),
-		ref: D,
-		children: [/* @__PURE__ */ x("button", {
-			className: p,
-			onClick: j,
-			"aria-expanded": T,
-			"aria-haspopup": "menu",
-			"aria-label": A.menuAriaLabel,
-			type: "button",
-			children: [/* @__PURE__ */ x("span", {
-				className: m,
-				children: [/* @__PURE__ */ b("span", {
-					className: i,
-					children: O.initials
-				}), /* @__PURE__ */ x("span", {
-					className: h,
-					children: [/* @__PURE__ */ b("span", {
-						className: g,
-						children: N
-					}), /* @__PURE__ */ b("span", {
-						className: f,
-						children: k.name
-					})]
-				})]
-			}), /* @__PURE__ */ b(t, {
-				width: 16,
-				height: 16,
-				className: e(a, { [o]: T })
-			})]
-		}), P]
-	});
-};
-//#endregion
-export { w as ProfileDropdown, w as default };
-
-//# sourceMappingURL=ProfileDropdown.js.map

package/lib/esm/atomic/molecules/profile_dropdown/ProfileDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProfileDropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/profile_dropdown/ProfileDropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type JSX } from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { ProfileDropdownLogoutSvg } from '../../../icons/ProfileDropdownLogoutSvg.js';\nimport { ProfileDropdownOrganizationSvg } from '../../../icons/ProfileDropdownOrganizationSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as classes from './profileDropdown.css.js';\n\ntype Props = {\n  viewer: {\n    firstName: string;\n    lastName: string;\n    initials: string;\n  };\n  profilePath: string;\n  organization: {\n    name: string;\n    switchPath: string;\n  };\n  labels?: {\n    menuAriaLabel: string;\n    profileSecurity: string;\n    switchOrganizations: string;\n    signOut: string;\n  };\n  className?: string;\n  onSignOut?: () => void;\n};\n\nconst DEFAULT_LABELS = {\n  menuAriaLabel: 'User menu',\n  profileSecurity: 'Profile & Security',\n  switchOrganizations: 'Switch Organizations',\n  signOut: 'Sign Out',\n};\n\nexport const ProfileDropdown = (props: Props): JSX.Element | null => {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const { viewer, organization, labels = DEFAULT_LABELS } = props;\n\n  const toggleDropdown = (): void => {\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const closeDropdown = (): void => {\n    setIsOpen(false);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent): void => {\n      if (\n        dropdownRef.current != null &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  const displayNameParts = [viewer.firstName, viewer.lastName].filter(\n    (part) => {\n      return part.trim().length > 0;\n    },\n  );\n  const userDisplayName = displayNameParts.join(' ');\n\n  let dropdownMenu: JSX.Element | null = null;\n  if (isOpen) {\n    dropdownMenu = (\n      <div className={classes.dropdown} role=\"menu\">\n        <Link\n          to={props.profilePath}\n          className={classes.menuItem}\n          onClick={closeDropdown}\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownOrganizationSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>{labels.profileSecurity}</span>\n        </Link>\n        <Link\n          to={organization.switchPath}\n          className={classes.menuItem}\n          onClick={closeDropdown}\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownOrganizationSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>\n            {labels.switchOrganizations}\n          </span>\n        </Link>\n\n        <button\n          className={classes.menuItem}\n          onClick={() => {\n            props.onSignOut?.();\n            closeDropdown();\n          }}\n          type=\"button\"\n          role=\"menuitem\"\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownLogoutSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>{labels.signOut}</span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(classes.container, props.className)} ref={dropdownRef}>\n      <button\n        className={classes.selectButton}\n        onClick={toggleDropdown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"menu\"\n        aria-label={labels.menuAriaLabel}\n        type=\"button\"\n      >\n        <span className={classes.selectContent}>\n          <span className={classes.avatar}>{viewer.initials}</span>\n          <span className={classes.selectText}>\n            <span className={classes.userName}>{userDisplayName}</span>\n            <span className={classes.organizationName}>\n              {organization.name}\n            </span>\n          </span>\n        </span>\n        <ChevronDownSvg\n          width={16}\n          height={16}\n          className={cx(classes.chevron, {\n            [classes.chevronOpen]: isOpen,\n          })}\n        />\n      </button>\n\n      {dropdownMenu}\n    </div>\n  );\n};\n\nexport default ProfileDropdown;\n"],"mappings":";;;;;;;;;AA8BA,IAAM,IAAiB;CACrB,eAAe;CACf,iBAAiB;CACjB,qBAAqB;CACrB,SAAS;CACV,EAEY,KAAmB,MAAqC;CACnE,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAc,EAAuB,KAAK,EAE1C,EAAE,WAAQ,iBAAc,YAAS,MAAmB,GAEpD,UAA6B;AACjC,KAAW,MACF,CAAC,EACR;IAGE,UAA4B;AAChC,IAAU,GAAM;;AAGlB,SAAgB;EACd,IAAM,KAAsB,MAA4B;AACtD,GACE,EAAY,WAAW,QACvB,CAAC,EAAY,QAAQ,SAAS,EAAM,OAAe,IAEnD,EAAU,GAAM;;AAKpB,SADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C;AACX,YAAS,oBAAoB,aAAa,EAAmB;;IAE9D,EAAE,CAAC;CAON,IAAM,IALmB,CAAC,EAAO,WAAW,EAAO,SAAS,CAAC,QAC1D,MACQ,EAAK,MAAM,CAAC,SAAS,EAE/B,CACwC,KAAK,IAAI,EAE9C,IAAmC;AA6CvC,QA5CI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW;EAAkB,MAAK;YAAvC;GACE,kBAAC,GAAD;IACE,IAAI,EAAM;IACV,WAAW;IACX,SAAS;cAHX,CAKE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAAgC,OAAO;MAAI,QAAQ;MAAM,CAAA;KACpD,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eAAoB,EAAO;KAAuB,CAAA,CAC9D;;GACP,kBAAC,GAAD;IACE,IAAI,EAAa;IACjB,WAAW;IACX,SAAS;cAHX,CAKE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAAgC,OAAO;MAAI,QAAQ;MAAM,CAAA;KACpD,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eACd,EAAO;KACH,CAAA,CACF;;GAEP,kBAAC,UAAD;IACE,WAAW;IACX,eAAe;AAEb,KADA,EAAM,aAAa,EACnB,GAAe;;IAEjB,MAAK;IACL,MAAK;cAPP,CASE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAA0B,OAAO;MAAI,QAAQ;MAAM,CAAA;KAC9C,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eAAoB,EAAO;KAAe,CAAA,CACpD;;GACL;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,EAAM,UAAU;EAAE,KAAK;YAA7D,CACE,kBAAC,UAAD;GACE,WAAW;GACX,SAAS;GACT,iBAAe;GACf,iBAAc;GACd,cAAY,EAAO;GACnB,MAAK;aANP,CAQE,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACE,kBAAC,QAAD;KAAM,WAAW;eAAiB,EAAO;KAAgB,CAAA,EACzD,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAmB;MAAuB,CAAA,EAC3D,kBAAC,QAAD;MAAM,WAAW;gBACd,EAAa;MACT,CAAA,CACF;OACF;OACP,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,EAAG,GAAiB,GAC5B,IAAsB,GACxB,CAAC;IACF,CAAA,CACK;MAER,EACG"}

package/lib/esm/atomic/molecules/profile_dropdown/profileDropdown.css.js

@@ -1,8 +0,0 @@
-/* empty css                                      */
-/* empty css                               */
-//#region src/atomic/molecules/profile_dropdown/profileDropdown.css.ts
-var e = "_1vukrf60 txvbqbpsf txvbqbu6f", t = "_1vukrf61 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbdoo txvbqbu6f txvbqb1rx txvbqbv4h txvbqbv txvbqbt5o txvbqb1co txvbqb1qf txvbqbwo", n = "_1vukrf62 txvbqb9io txvbqbco txvbqbaof txvbqb9mx txvbqbk4x", r = "_1vukrf63 txvbqb9io txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1sx txvbqbuy6 txvbqbv9z txvbqb8o txvbqbamo txvbqb66", i = "_1vukrf64 txvbqb9io txvbqbai6 txvbqbk4x", a = "_1vukrf65 txvbqbps6 txvbqbthf txvbqbdpf txvbqbiio txvbqbuso txvbqbkgo txvbqbv4h txvbqb1ro txvbqb1co txvbqb1qf txvbqb106 txvbqbuux txvbqbl9x txvbqb8s6", o = "_1vukrf66 txvbqb8x txvbqbamo txvbqbv53 txvbqbuw6 txvbqbl6f txvbqbt6f", s = "_1vukrf67 txvbqb8o txvbqbamo txvbqbv53 txvbqbvar txvbqbuw6 txvbqbl6f txvbqbt6f", c = "_1vukrf69 _1vukrf68 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb77 txvbqb6x txvbqb7k txvbqb9io txvbqbco txvbqbu6f txvbqb12f txvbqb1px txvbqbuzj txvbqb1rf txvbqbv txvbqbt5o txvbqb3b txvbqbva3 txvbqb8x txvbqbamo", l = "_1vukrf6a txvbqb9io txvbqbco txvbqbdnx txvbqbha6 txvbqbv4z", u = "_1vukrf6b txvbqb9mx txvbqbuw6", d = "_1vukrf6c txvbqbv9p txvbqb7g txvbqb6x txvbqb7k", f = "_1vukrf6d txvbqb2w";
-//#endregion
-export { r as avatar, d as chevron, f as chevronOpen, e as container, a as dropdown, l as menuIcon, c as menuItem, u as menuLabel, s as organizationName, t as selectButton, n as selectContent, i as selectText, o as userName };
-
-//# sourceMappingURL=profileDropdown.css.js.map

package/lib/esm/atomic/molecules/profile_dropdown/profileDropdown.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"profileDropdown.css.js","names":[],"sources":["../../../../../src/atomic/molecules/profile_dropdown/profileDropdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  width: 'full',\n});\n\nexport const selectButton = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  width: 'full',\n  paddingY: 2,\n  paddingX: 3,\n  borderRadius: 'xl',\n  backgroundColor: 'brandWhite',\n  cursor: 'pointer',\n  textAlign: 'left',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const selectContent = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const avatar = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: '1/2',\n  backgroundImage: 'brandDiagonal',\n  color: 'brandWhite',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n});\n\nexport const selectText = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const dropdown = sprinkles({\n  position: 'absolute',\n  top: 'full',\n  left: 0,\n  marginTop: 1.5,\n  width: 'max',\n  minWidth: 'full',\n  backgroundColor: 'brandWhite',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  zIndex: 30,\n  padding: 2,\n  boxShadow: 'profileDropdownShadow',\n});\n\nexport const userName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'black',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const organizationName = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'black',\n  opacity: 50,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuItem = style([\n  sprinkles({\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    alignItems: 'center',\n    width: 'full',\n    paddingY: 2,\n    paddingX: 3,\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n    borderRadius: 'md',\n    cursor: 'pointer',\n    textAlign: 'left',\n    textDecoration: 'none',\n    color: 'brandDarkGray',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n  }),\n  {\n    selectors: {\n      '& + &': {\n        marginTop: vars.spacing[1],\n      },\n    },\n    ':hover': {\n      backgroundColor: vars.colors.brandLightGray,\n      color: vars.colors.brandPrimaryRed,\n      textDecoration: 'none',\n    },\n    ':focus-visible': {\n      outline: 'none',\n      boxShadow: `0 0 0 2px ${vars.colors.brandPrimaryRed}`,\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginRight: 3,\n  color: 'current',\n});\n\nexport const menuLabel = sprinkles({\n  flex: 1,\n  whiteSpace: 'nowrap',\n});\n\nexport const chevron = sprinkles({\n  color: 'brandPrimaryRed',\n  transitionProperty: 'transform',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n"],"mappings":""}

package/lib/types/atomic/molecules/profile_dropdown/ProfileDropdown.d.ts

@@ -1,24 +0,0 @@
-import { type JSX } from 'react';
-type Props = {
-    viewer: {
-        firstName: string;
-        lastName: string;
-        initials: string;
-    };
-    profilePath: string;
-    organization: {
-        name: string;
-        switchPath: string;
-    };
-    labels?: {
-        menuAriaLabel: string;
-        profileSecurity: string;
-        switchOrganizations: string;
-        signOut: string;
-    };
-    className?: string;
-    onSignOut?: () => void;
-};
-export declare const ProfileDropdown: (props: Props) => JSX.Element | null;
-export default ProfileDropdown;
-//# sourceMappingURL=ProfileDropdown.d.ts.map

package/lib/types/atomic/molecules/profile_dropdown/ProfileDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProfileDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/atomic/molecules/profile_dropdown/ProfileDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAS9D,KAAK,KAAK,GAAG;IACX,MAAM,EAAE;QACN,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,aAAa,EAAE,MAAM,CAAC;QACtB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AASF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,KAAG,GAAG,CAAC,OAAO,GAAG,IAmH5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/types/atomic/molecules/profile_dropdown/profileDropdown.css.d.ts

@@ -1,14 +0,0 @@
-export declare const container: string;
-export declare const selectButton: string;
-export declare const selectContent: string;
-export declare const avatar: string;
-export declare const selectText: string;
-export declare const dropdown: string;
-export declare const userName: string;
-export declare const organizationName: string;
-export declare const menuItem: string;
-export declare const menuIcon: string;
-export declare const menuLabel: string;
-export declare const chevron: string;
-export declare const chevronOpen: string;
-//# sourceMappingURL=profileDropdown.css.d.ts.map

package/lib/types/atomic/molecules/profile_dropdown/profileDropdown.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"profileDropdown.css.d.ts","sourceRoot":"","sources":["../../../../../src/atomic/molecules/profile_dropdown/profileDropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAcvB,CAAC;AAEH,eAAO,MAAM,aAAa,QAMxB,CAAC;AAEH,eAAO,MAAM,MAAM,QAYjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAenB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAQ3B,CAAC;AAEH,eAAO,MAAM,QAAQ,QAqCnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC"}