@launchpad-ui/menu 0.6.6-alpha.0 → 0.6.6-alpha.1

package/dist/style.css

@@ -0,0 +1,222 @@
+.Menu-item {
+  display: block;
+  position: relative;
+  color: var(--color-text);
+  background: var(--color-background);
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0.6rem 2.5rem;
+  text-align: left;
+  font-family: inherit;
+  font-size: 1.3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  line-height: inherit;
+  border-width: 0;
+  width: 100%;
+}
+
+  .Menu-item:first-child {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .Menu-item:last-child {
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+
+.Menu-item-list {
+  min-width: 12rem;
+  overflow: auto;
+  max-height: 55vh;
+}
+
+.Menu-item-list > .Menu-item:last-child {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.Menu .Menu-item:not([disabled]):not([aria-disabled]):active {
+    text-decoration: none;
+    box-shadow: none;
+    background-color: var(--color-blue-200);
+    color: var(--color-blue-600);
+  }
+
+.Menu .Menu-item:not([disabled]):not([aria-disabled]):hover:not(:active):not(.has-focus) {
+    background-color: var(--color-background-hover);
+    box-shadow: inset 0 0 0 1px var(--color-gray-600);
+  }
+
+.Menu .Menu-item:not([disabled]):not([aria-disabled]).has-focus {
+    background-color: var(--color-background-hover);
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+
+/* stylelint-disable-next-line no-descending-specificity */
+
+.Menu-item-list > .VirtualMenu-item-list .VirtualMenu-item:last-child .Menu-item {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.Menu {
+  font-family: var(--font-family-base);
+}
+
+.Menu:focus {
+    outline: none;
+  }
+
+/* Override our link styles for MenuItemLink component */
+
+.Menu a.Menu-item:focus:not(:hover):not(.has-focus) {
+      text-decoration: none;
+      box-shadow: none;
+    }
+
+/* Ensures that links that are disabled don't show active styles */
+
+.Menu a.Menu-item:active[disabled],
+    .Menu a.Menu-item:active[aria-disabled] {
+      text-decoration: none;
+      color: var(--color-text-subtle-primary);
+    }
+
+/* stylelint-disable-next-line no-descending-specificity */
+
+.Menu .Menu-item-list:first-child > .Menu-item:first-child, .Menu [hidden]:first-child + .Menu .Menu-item-list > .Menu-item:first-child {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+
+.Menu .Menu-item-list:first-child > .VirtualMenu-item-list .VirtualMenu-item:first-child .Menu-item, .Menu [hidden]:first-child + .Menu .Menu-item-list > .VirtualMenu-item-list .VirtualMenu-item:first-child .Menu-item {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+
+.Menu-item--nested {
+  padding-left: 4rem;
+}
+
+.Menu-item--header {
+  font-weight: var(--font-weight-medium);
+}
+
+.Menu-item .Gravatar {
+  margin-right: 0.5rem;
+}
+
+.Menu-item.is-highlighted {
+  background-color: var(--color-background-hover);
+  box-shadow: inset 0 0 0 1px var(--color-gray-600);
+}
+
+.Menu-item.is-highlighted:active {
+    background-color: var(--color-blue-200);
+    color: var(--color-blue-600);
+    box-shadow: none;
+  }
+
+.Menu-item[aria-disabled],
+.Menu-item[disabled] {
+  color: var(--color-text-subtle-primary);
+  cursor: default;
+}
+
+.Menu-item-icon {
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.Menu-divider {
+  border-top: 1px solid var(--color-border);
+}
+
+.Menu-search {
+  padding: 1rem;
+  font-size: 1.3rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Menu-search:first-child {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.Menu-clear.Button {
+  text-decoration: none;
+  color: var(--color-system-red-600);
+  font-size: 1.3rem;
+  font-weight: var(--font-weight-medium);
+  padding: 1rem;
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Menu-clear.Button:active,
+.Menu-clear.Button:focus,
+.Menu-clear.Button:hover {
+  outline: none;
+  box-shadow: none;
+  box-shadow: initial;
+  color: var(--color-system-red-600);
+  border-bottom-color: var(--color-border);
+  background-color: var(--color-background-hover);
+}
+
+[class^='_Popover-content_'] .Menu-search {
+  width: 100%;
+}
+
+/* Removing anything that could give it some height */
+
+[class^='_Popover-content_'] .Menu-search .Menu-search-hidden-placeholder {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 0;
+    border: none;
+    visibility: hidden;
+  }
+
+.Menu--isVirtual {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.MenuSize--xl {
+  width: 32rem;
+}
+
+.MenuSize--lg {
+  width: 24rem;
+}
+
+.MenuSize--md {
+  width: 16rem;
+}
+
+.MenuSize--sm {
+  width: 12rem;
+}
+
+.VirtualMenu-item-list {
+  width: 100%;
+  position: relative;
+}
+
+.VirtualMenu-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+import type { EventHandler, KeyboardEvent, SyntheticEvent } from 'react';
+declare const createItemId: (index: number, id: string) => string;
+declare const getNodeForIndex: (index: number | null, menuId: string) => HTMLElement | null;
+declare const handleKeyboardInteractions: (event: KeyboardEvent, keyHandlers: Partial<Record<"handleUp" | "handleDown" | "handleEnter", (e: KeyboardEvent) => void>>) => void;
+declare const chainEventHandlers: (...handlers: Array<EventHandler<SyntheticEvent> | undefined>) => (event: SyntheticEvent) => void;
+export { createItemId, getNodeForIndex, handleKeyboardInteractions, chainEventHandlers };
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEzE,QAAA,MAAM,YAAY,UAAW,MAAM,MAAM,MAAM,WAA0B,CAAC;AAE1E,QAAA,MAAM,eAAe,UAAW,MAAM,GAAG,IAAI,UAAU,MAAM,uBACkB,CAAC;AAEhF,QAAA,MAAM,0BAA0B,UACvB,aAAa,6EAEoC,aAAa,KAAK,IAAI,WAa/E,CAAC;AAEF,QAAA,MAAM,kBAAkB,gBACR,MAAM,aAAa,cAAc,CAAC,GAAG,SAAS,CAAC,aACrD,cAAc,SAErB,CAAC;AAEJ,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/menu",
-  "version": "0.6.6-alpha.0",
+  "version": "0.6.6-alpha.1",
   "status": "beta",
   "publishConfig": {
     "access": "public"
@@ -26,11 +26,11 @@
   },
   "source": "src/index.ts",
   "dependencies": {
-    "@launchpad-ui/form": "~0.6.5-alpha.0",
-    "@launchpad-ui/icons": "~0.5.4-alpha.0",
-    "@launchpad-ui/popover": "~0.8.4-alpha.0",
+    "@launchpad-ui/form": "~0.6.5-alpha.1",
+    "@launchpad-ui/icons": "~0.5.4-alpha.1",
+    "@launchpad-ui/popover": "~0.8.4-alpha.1",
     "@launchpad-ui/tokens": "~0.1.5",
-    "@launchpad-ui/tooltip": "~0.6.5-alpha.0",
+    "@launchpad-ui/tooltip": "~0.6.5-alpha.1",
     "@radix-ui/react-slot": "^1.0.0",
     "@react-aria/focus": "^3.8.0",
     "@react-aria/separator": "^3.2.0",