@octaviaflow/core 3.0.18-beta.3 → 3.0.18-beta.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.
@@ -39,6 +39,13 @@ export interface DropdownMenuProps {
39
39
  "aria-label"?: string;
40
40
  /** id of an element that labels the trigger; alternative to aria-label. */
41
41
  "aria-labelledby"?: string;
42
+ /**
43
+ * Pin the popup's width to the trigger's rendered width. Useful when the
44
+ * trigger is wide (a full Sidebar user card, an Input combobox, etc.) and
45
+ * a narrow `min-width: 180px` popup would look detached. Default `false`
46
+ * — the popup sizes to its content.
47
+ */
48
+ matchTriggerWidth?: boolean;
42
49
  }
43
- export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, closeOnOutsideClick, closeOnEscape, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
50
+ export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, closeOnOutsideClick, closeOnEscape, matchTriggerWidth, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
44
51
  //# sourceMappingURL=DropdownMenu.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAC;AAQnE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoND,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,mBAA0B,EAC1B,aAAoB,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CAyCnB"}
1
+ {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAC;AAQnE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA8ND,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,mBAA0B,EAC1B,aAAoB,EACpB,iBAAyB,EACzB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CA0CnB"}
package/dist/index.cjs CHANGED
@@ -11960,7 +11960,8 @@ function MenuPopup({
11960
11960
  align,
11961
11961
  className,
11962
11962
  closeOnOutsideClick,
11963
- closeOnEscape
11963
+ closeOnEscape,
11964
+ matchTriggerWidth
11964
11965
  }) {
11965
11966
  const menuRef = (0, import_react58.useRef)(null);
11966
11967
  (0, import_react58.useEffect)(() => {
@@ -12037,6 +12038,10 @@ function MenuPopup({
12037
12038
  } else {
12038
12039
  style.left = rect.left;
12039
12040
  }
12041
+ if (matchTriggerWidth) {
12042
+ style.width = rect.width;
12043
+ style.minWidth = rect.width;
12044
+ }
12040
12045
  return style;
12041
12046
  };
12042
12047
  let nonSepIdx = 0;
@@ -12092,6 +12097,7 @@ function DropdownMenu({
12092
12097
  triggerClassName,
12093
12098
  closeOnOutsideClick = true,
12094
12099
  closeOnEscape = true,
12100
+ matchTriggerWidth = false,
12095
12101
  "aria-label": ariaLabel,
12096
12102
  "aria-labelledby": ariaLabelledby
12097
12103
  }) {
@@ -12125,7 +12131,8 @@ function DropdownMenu({
12125
12131
  align,
12126
12132
  className,
12127
12133
  closeOnOutsideClick,
12128
- closeOnEscape
12134
+ closeOnEscape,
12135
+ matchTriggerWidth
12129
12136
  }
12130
12137
  )
12131
12138
  ] });
@@ -22538,7 +22545,8 @@ function SidebarUserCard({ user }) {
22538
22545
  {
22539
22546
  trigger: body,
22540
22547
  items: user.menu,
22541
- align: "end",
22548
+ align: "start",
22549
+ matchTriggerWidth: true,
22542
22550
  "aria-label": labelText,
22543
22551
  triggerClassName: "ods-sidebar__user-card"
22544
22552
  }