@bi-digital/react 0.2.16 → 0.2.18

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.
Files changed (181) hide show
  1. package/dist/{alert-footer-DF92J9Xu.d.ts → alert-footer-BS8bENJI.d.ts} +38 -43
  2. package/dist/{button-ByuaxNe-.js → button-fhd-JARc.js} +12 -3
  3. package/dist/{button-ByuaxNe-.js.map → button-fhd-JARc.js.map} +1 -1
  4. package/dist/{card-action-DHCCNSRo.js → card-action-D8M3_IVq.js} +2 -2
  5. package/dist/{card-action-DHCCNSRo.js.map → card-action-D8M3_IVq.js.map} +1 -1
  6. package/dist/components/alert/alert-footer.d.ts +3 -3
  7. package/dist/components/alert/alert.d.ts +3 -3
  8. package/dist/components/alert/index.d.ts +3 -3
  9. package/dist/components/avatar/avatar.d.ts +3 -3
  10. package/dist/components/avatar/index.d.ts +3 -3
  11. package/dist/components/badge/badge.d.ts +3 -3
  12. package/dist/components/badge/index.d.ts +3 -3
  13. package/dist/components/button/button.d.ts +3 -3
  14. package/dist/components/button/button.js +1 -1
  15. package/dist/components/button/index.d.ts +3 -3
  16. package/dist/components/button/index.js +1 -1
  17. package/dist/components/card/card-action.d.ts +3 -3
  18. package/dist/components/card/card-action.js +2 -2
  19. package/dist/components/card/card-actions.d.ts +3 -3
  20. package/dist/components/card/card-content.d.ts +3 -3
  21. package/dist/components/card/card-date.d.ts +3 -3
  22. package/dist/components/card/card-header.d.ts +3 -3
  23. package/dist/components/card/card-media.d.ts +3 -3
  24. package/dist/components/card/card.d.ts +3 -3
  25. package/dist/components/card/index.d.ts +3 -3
  26. package/dist/components/card/index.js +2 -2
  27. package/dist/components/checkbox/checkbox.d.ts +3 -3
  28. package/dist/components/checkbox/index.d.ts +3 -3
  29. package/dist/components/chip/chip.d.ts +3 -3
  30. package/dist/components/chip/index.d.ts +3 -3
  31. package/dist/components/dialog/dialog-close-button.d.ts +3 -3
  32. package/dist/components/dialog/dialog-close-button.js +2 -2
  33. package/dist/components/dialog/dialog-content.d.ts +3 -3
  34. package/dist/components/dialog/dialog-footer.d.ts +3 -3
  35. package/dist/components/dialog/dialog-header.d.ts +3 -3
  36. package/dist/components/dialog/dialog-trigger.d.ts +3 -3
  37. package/dist/components/dialog/dialog-trigger.js +2 -2
  38. package/dist/components/dialog/dialog.d.ts +3 -3
  39. package/dist/components/dialog/index.d.ts +3 -3
  40. package/dist/components/dialog/index.js +3 -3
  41. package/dist/components/drawer/drawer-close-button.d.ts +3 -3
  42. package/dist/components/drawer/drawer-close-button.js +4 -4
  43. package/dist/components/drawer/drawer-content.d.ts +3 -3
  44. package/dist/components/drawer/drawer-content.js +3 -3
  45. package/dist/components/drawer/drawer-footer.d.ts +3 -3
  46. package/dist/components/drawer/drawer-footer.js +3 -3
  47. package/dist/components/drawer/drawer-header.d.ts +3 -3
  48. package/dist/components/drawer/drawer-header.js +3 -3
  49. package/dist/components/drawer/drawer-trigger-context.js +3 -3
  50. package/dist/components/drawer/drawer-trigger.d.ts +3 -3
  51. package/dist/components/drawer/drawer-trigger.js +4 -4
  52. package/dist/components/drawer/drawer.d.ts +3 -3
  53. package/dist/components/drawer/drawer.js +3 -3
  54. package/dist/components/drawer/index.d.ts +3 -3
  55. package/dist/components/drawer/index.js +5 -5
  56. package/dist/components/dropdown/dropdown-button.d.ts +3 -3
  57. package/dist/components/dropdown/dropdown-button.js +2 -2
  58. package/dist/components/dropdown/dropdown-trigger-context.js +5 -5
  59. package/dist/components/dropdown/dropdown-trigger.d.ts +3 -3
  60. package/dist/components/dropdown/dropdown-trigger.js +5 -5
  61. package/dist/components/dropdown/dropdown.d.ts +3 -3
  62. package/dist/components/dropdown/dropdown.js +5 -5
  63. package/dist/components/dropdown/index.d.ts +3 -3
  64. package/dist/components/dropdown/index.js +8 -8
  65. package/dist/components/field/field-affix.d.ts +3 -3
  66. package/dist/components/field/field-description.d.ts +3 -3
  67. package/dist/components/field/field.d.ts +3 -3
  68. package/dist/components/field/index.d.ts +3 -3
  69. package/dist/components/fieldset/fieldset-description.d.ts +3 -3
  70. package/dist/components/fieldset/fieldset-legend.d.ts +3 -3
  71. package/dist/components/fieldset/fieldset.d.ts +3 -3
  72. package/dist/components/fieldset/index.d.ts +3 -3
  73. package/dist/components/footer/footer.d.ts +3 -3
  74. package/dist/components/footer/footer.js +2 -2
  75. package/dist/components/footer/index.d.ts +3 -3
  76. package/dist/components/footer/index.js +2 -2
  77. package/dist/components/index.d.ts +3 -3
  78. package/dist/components/index.js +17 -17
  79. package/dist/components/input/index.d.ts +3 -3
  80. package/dist/components/input/input.d.ts +3 -3
  81. package/dist/components/label/index.d.ts +3 -3
  82. package/dist/components/label/label.d.ts +3 -3
  83. package/dist/components/link/index.d.ts +3 -3
  84. package/dist/components/link/link.d.ts +3 -3
  85. package/dist/components/logo/index.d.ts +3 -3
  86. package/dist/components/logo/logo.d.ts +3 -3
  87. package/dist/components/navbar/index.d.ts +3 -3
  88. package/dist/components/navbar/navbar.d.ts +3 -3
  89. package/dist/components/pagination/index.d.ts +3 -3
  90. package/dist/components/pagination/index.js +2 -2
  91. package/dist/components/pagination/pagination-button.d.ts +3 -3
  92. package/dist/components/pagination/pagination-button.js +2 -2
  93. package/dist/components/pagination/pagination-item.d.ts +1 -1
  94. package/dist/components/pagination/pagination.d.ts +3 -3
  95. package/dist/components/popover/index.d.ts +3 -3
  96. package/dist/components/popover/index.js +4 -4
  97. package/dist/components/popover/popover-trigger-context.d.ts +1 -1
  98. package/dist/components/popover/popover-trigger-context.js +1 -1
  99. package/dist/components/popover/popover-trigger.d.ts +3 -3
  100. package/dist/components/popover/popover-trigger.js +3 -3
  101. package/dist/components/popover/popover.d.ts +3 -3
  102. package/dist/components/popover/popover.js +2 -2
  103. package/dist/components/radio/index.d.ts +3 -3
  104. package/dist/components/radio/radio.d.ts +3 -3
  105. package/dist/components/search/index.d.ts +3 -3
  106. package/dist/components/search/index.js +2 -2
  107. package/dist/components/search/search.d.ts +3 -3
  108. package/dist/components/search/search.js +2 -2
  109. package/dist/components/select/index.d.ts +3 -3
  110. package/dist/components/select/select-optgroup.d.ts +3 -3
  111. package/dist/components/select/select-option.d.ts +3 -3
  112. package/dist/components/select/select.d.ts +3 -3
  113. package/dist/components/spinner/index.d.ts +3 -3
  114. package/dist/components/spinner/spinner.d.ts +3 -3
  115. package/dist/components/tabs/index.d.ts +3 -3
  116. package/dist/components/tabs/index.js +2 -2
  117. package/dist/components/tabs/tab.d.ts +3 -3
  118. package/dist/components/tabs/tab.js +2 -2
  119. package/dist/components/tabs/tabs-list.d.ts +3 -3
  120. package/dist/components/tabs/tabs-panel.d.ts +3 -3
  121. package/dist/components/tabs/tabs.d.ts +3 -3
  122. package/dist/components/textarea/index.d.ts +3 -3
  123. package/dist/components/textarea/textarea.d.ts +3 -3
  124. package/dist/components/textfield/index.d.ts +3 -3
  125. package/dist/components/textfield/textfield.d.ts +3 -3
  126. package/dist/components/validation-message/index.d.ts +3 -3
  127. package/dist/components/validation-message/validation-message.d.ts +3 -3
  128. package/dist/{dialog-close-button-C-S4WzSc.js → dialog-close-button-BhzM8xy4.js} +2 -2
  129. package/dist/{dialog-close-button-C-S4WzSc.js.map → dialog-close-button-BhzM8xy4.js.map} +1 -1
  130. package/dist/{dialog-trigger-B4XNx0m_.js → dialog-trigger-XPMx1psz.js} +2 -2
  131. package/dist/{dialog-trigger-B4XNx0m_.js.map → dialog-trigger-XPMx1psz.js.map} +1 -1
  132. package/dist/{drawer-close-button-g0PXenMb.js → drawer-close-button-dDQvoj0O.js} +2 -2
  133. package/dist/{drawer-close-button-g0PXenMb.js.map → drawer-close-button-dDQvoj0O.js.map} +1 -1
  134. package/dist/{drawer-trigger-Cv7iOUcE.js → drawer-trigger-AT7qYJPw.js} +2 -2
  135. package/dist/{drawer-trigger-Cv7iOUcE.js.map → drawer-trigger-AT7qYJPw.js.map} +1 -1
  136. package/dist/{dropdown-Dj2cRaaq.js → dropdown-BhdWlVMW.js} +4 -4
  137. package/dist/{dropdown-Dj2cRaaq.js.map → dropdown-BhdWlVMW.js.map} +1 -1
  138. package/dist/{dropdown-BjxU_86k.js → dropdown-C1hpsZcN.js} +2 -2
  139. package/dist/{dropdown-BjxU_86k.js.map → dropdown-C1hpsZcN.js.map} +1 -1
  140. package/dist/{dropdown-button-eH6Op53s.js → dropdown-button-Btuo7J5R.js} +2 -2
  141. package/dist/{dropdown-button-eH6Op53s.js.map → dropdown-button-Btuo7J5R.js.map} +1 -1
  142. package/dist/{dropdown-trigger-DavG703M.js → dropdown-trigger-DG-mnw2U.js} +2 -2
  143. package/dist/{dropdown-trigger-DavG703M.js.map → dropdown-trigger-DG-mnw2U.js.map} +1 -1
  144. package/dist/{dropdown-trigger-context-BWJr-7Sn.js → dropdown-trigger-context-Ce6Z9VPK.js} +2 -2
  145. package/dist/{dropdown-trigger-context-BWJr-7Sn.js.map → dropdown-trigger-context-Ce6Z9VPK.js.map} +1 -1
  146. package/dist/{footer-7eZZNCRY.js → footer-CU7LdbPO.js} +2 -2
  147. package/dist/{footer-7eZZNCRY.js.map → footer-CU7LdbPO.js.map} +1 -1
  148. package/dist/{index-Bh8T71Ia.d.ts → index-CRy7A5Iq.d.ts} +2 -3
  149. package/dist/{index-DJcJV0y7.d.ts → index-qXXUizvD.d.ts} +2 -2
  150. package/dist/main.d.ts +3 -3
  151. package/dist/main.js +17 -17
  152. package/dist/{pagination-button-b4U1ihSf.js → pagination-button-CG_QfJHY.js} +2 -2
  153. package/dist/{pagination-button-b4U1ihSf.js.map → pagination-button-CG_QfJHY.js.map} +1 -1
  154. package/dist/{pagination-item-DKL5arlo.d.ts → pagination-item-hMN-34PX.d.ts} +3 -3
  155. package/dist/popover-CGNoywPj.js +48 -0
  156. package/dist/popover-CGNoywPj.js.map +1 -0
  157. package/dist/{popover-D59x0S-P.js → popover-WJoHXecW.js} +27 -29
  158. package/dist/popover-WJoHXecW.js.map +1 -0
  159. package/dist/{popover-trigger-C6X2lGJa.js → popover-trigger-CjEKeJwY.js} +7 -5
  160. package/dist/{popover-trigger-C6X2lGJa.js.map → popover-trigger-CjEKeJwY.js.map} +1 -1
  161. package/dist/{popover-trigger-context-CdMmRbFv.js → popover-trigger-context-CNUJbbBn.js} +5 -2
  162. package/dist/popover-trigger-context-CNUJbbBn.js.map +1 -0
  163. package/dist/{popover-trigger-context-vREVdUak.d.ts → popover-trigger-context-DQy9nKB2.d.ts} +7 -5
  164. package/dist/{search-DbpZoxHj.js → search-Dg6xvCDB.js} +2 -2
  165. package/dist/{search-DbpZoxHj.js.map → search-Dg6xvCDB.js.map} +1 -1
  166. package/dist/{tab-mYdCvypj.js → tab-D-OGgeAb.js} +2 -2
  167. package/dist/{tab-mYdCvypj.js.map → tab-D-OGgeAb.js.map} +1 -1
  168. package/dist/utilities/hooks/index.d.ts +3 -3
  169. package/dist/utilities/hooks/usePagination/usePagination.d.ts +3 -3
  170. package/dist/utilities/index.d.ts +3 -3
  171. package/dist/vanilla/dropdown/index.d.ts +1 -1
  172. package/dist/vanilla/dropdown/index.js +2 -2
  173. package/dist/vanilla/index.d.ts +2 -2
  174. package/dist/vanilla/index.js +2 -2
  175. package/dist/vanilla/popover/index.d.ts +1 -1
  176. package/dist/vanilla/popover/index.js +1 -1
  177. package/package.json +4 -5
  178. package/dist/popover-BRH3zXGT.js +0 -45
  179. package/dist/popover-BRH3zXGT.js.map +0 -1
  180. package/dist/popover-D59x0S-P.js.map +0 -1
  181. package/dist/popover-trigger-context-CdMmRbFv.js.map +0 -1
@@ -1,4 +1,4 @@
1
- import { Button } from "./button-ByuaxNe-.js";
1
+ import { Button } from "./button-fhd-JARc.js";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/pagination/pagination-button.tsx
@@ -11,4 +11,4 @@ const PaginationButton = ({ ref,...rest }) => /* @__PURE__ */ jsx(Button, {
11
11
 
12
12
  //#endregion
13
13
  export { PaginationButton };
14
- //# sourceMappingURL=pagination-button-b4U1ihSf.js.map
14
+ //# sourceMappingURL=pagination-button-CG_QfJHY.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pagination-button-b4U1ihSf.js","names":[],"sources":["../src/components/pagination/pagination-button.tsx"],"sourcesContent":["import { AriaAttributes } from 'react';\nimport { Button, type ButtonProps } from '../button';\n\nexport type PaginationButtonProps = ButtonProps & {\n /**\n * Toggle button as active\n * @default false\n */\n 'aria-current'?: AriaAttributes['aria-current'];\n};\n\nexport const PaginationButton = ({ ref, ...rest }: PaginationButtonProps) => (\n <Button variant='text' icon ref={ref} {...rest} />\n);\n"],"mappings":";;;;AAWA,MAAa,mBAAmB,CAAC,EAAE,IAAK,GAAG,MAA6B,qBACtE,IAAC;CAAO,SAAQ;CAAO;CAAU;CAAK,GAAI;EAAQ"}
1
+ {"version":3,"file":"pagination-button-CG_QfJHY.js","names":[],"sources":["../src/components/pagination/pagination-button.tsx"],"sourcesContent":["import { AriaAttributes } from 'react';\nimport { Button, type ButtonProps } from '../button';\n\nexport type PaginationButtonProps = ButtonProps & {\n /**\n * Toggle button as active\n * @default false\n */\n 'aria-current'?: AriaAttributes['aria-current'];\n};\n\nexport const PaginationButton = ({ ref, ...rest }: PaginationButtonProps) => (\n <Button variant='text' icon ref={ref} {...rest} />\n);\n"],"mappings":";;;;AAWA,MAAa,mBAAmB,CAAC,EAAE,IAAK,GAAG,MAA6B,qBACtE,IAAC;CAAO,SAAQ;CAAO;CAAU;CAAK,GAAI;EAAQ"}
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime49 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime50 from "react/jsx-runtime";
2
2
  import { HTMLAttributes, Ref } from "react";
3
3
 
4
4
  //#region src/components/pagination/pagination-item.d.ts
@@ -15,7 +15,7 @@ declare const PaginationItem: ({
15
15
  asChild,
16
16
  children,
17
17
  ...rest
18
- }: PaginationItemProps) => react_jsx_runtime49.JSX.Element;
18
+ }: PaginationItemProps) => react_jsx_runtime50.JSX.Element;
19
19
  //#endregion
20
20
  export { PaginationItem, PaginationItemProps };
21
- //# sourceMappingURL=pagination-item-DKL5arlo.d.ts.map
21
+ //# sourceMappingURL=pagination-item-hMN-34PX.d.ts.map
@@ -0,0 +1,48 @@
1
+ import { autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
2
+
3
+ //#region src/vanilla/popover/index.ts
4
+ const padding = 20;
5
+ const initPopover = ({ id, disableAutoPlacement = false, placement = "top", positionMiddleware = [] }) => {
6
+ let cleanup;
7
+ const popover = document.getElementById(id);
8
+ const triggerSelector = `[aria-controls="${id}"]`;
9
+ const trigger = document.querySelector(triggerSelector);
10
+ if (!popover || !trigger) return;
11
+ const togglePopover = (open) => {
12
+ if (open) {
13
+ cleanup = autoUpdate(trigger, popover, () => {
14
+ computePosition(trigger, popover, {
15
+ middleware: [
16
+ offset(padding),
17
+ ...disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })],
18
+ ...positionMiddleware,
19
+ hide({ padding })
20
+ ],
21
+ strategy: "fixed",
22
+ placement
23
+ }).then(({ x, y, middlewareData }) => {
24
+ popover.style.translate = `${x}px ${y}px`;
25
+ popover.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
26
+ });
27
+ });
28
+ popover.setAttribute("aria-hidden", "false");
29
+ trigger.setAttribute("aria-expanded", "true");
30
+ } else {
31
+ cleanup?.();
32
+ popover.setAttribute("aria-hidden", "true");
33
+ trigger.setAttribute("aria-expanded", "false");
34
+ }
35
+ };
36
+ document.addEventListener("click", (event) => {
37
+ const el = event.target;
38
+ const isTrigger = el?.closest?.(triggerSelector);
39
+ const isOutside = !isTrigger && !popover.contains(el);
40
+ const isOpen = popover.getAttribute("aria-hidden") === "false";
41
+ if (isTrigger) togglePopover(!isOpen);
42
+ if (isOutside && isOpen) togglePopover(false);
43
+ }, true);
44
+ };
45
+
46
+ //#endregion
47
+ export { initPopover };
48
+ //# sourceMappingURL=popover-CGNoywPj.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-CGNoywPj.js","names":["cleanup: (() => void) | undefined","open: boolean"],"sources":["../src/vanilla/popover/index.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift, hide } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\n\nconst padding = 20;\n\nexport type InitPopoverOptions = {\n /** The id of the popover to initialize. The trigger element should have a `aria-controls` attribute with the same id. */\n id: string;\n /**\n * Placement of the popover relative to the trigger.\n * @default 'top'\n */\n placement?: Placement;\n /**\n * Additional middleware to use for positioning the popover.\n *\n * @example\n * Prevent the popover from overflowing the navbar by using the `size` middleware:\n * ```ts\n * positionMiddleware: [\n * size({\n * apply: ({ availableHeight, elements, ...state }) => {\n * const available = `${Math.max(0, availableHeight)}px`;\n * const maxHeight = state.placement.includes('top')\n * ? `calc(${available} - var(--bi-layout-navbar-height, 0))`\n * : available;\n * elements.floating.style.maxHeight = maxHeight;\n * },\n * padding,\n * })\n * ]}\n * ```\n */\n positionMiddleware?: Middleware[];\n /**\n * Whether to disable auto placement.\n * @default false\n */\n disableAutoPlacement?: boolean;\n};\n\nexport const initPopover = ({\n id,\n disableAutoPlacement = false,\n placement = 'top',\n positionMiddleware = [],\n}: InitPopoverOptions) => {\n // let isOpen = false;\n let cleanup: (() => void) | undefined;\n const popover = document.getElementById(id);\n const triggerSelector = `[aria-controls=\"${id}\"]`;\n const trigger = document.querySelector(triggerSelector);\n\n if (!popover || !trigger) return;\n\n const togglePopover = (open: boolean) => {\n if (open) {\n cleanup = autoUpdate(trigger, popover, () => {\n computePosition(trigger, popover, {\n middleware: [\n offset(padding),\n ...(disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })]),\n ...positionMiddleware,\n hide({ padding }),\n ],\n strategy: 'fixed',\n placement,\n }).then(({ x, y, middlewareData }) => {\n popover.style.translate = `${x}px ${y}px`;\n popover.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';\n });\n });\n popover.setAttribute('aria-hidden', 'false');\n trigger.setAttribute('aria-expanded', 'true');\n } else {\n cleanup?.();\n popover.setAttribute('aria-hidden', 'true');\n trigger.setAttribute('aria-expanded', 'false');\n }\n };\n\n document.addEventListener(\n 'click',\n (event) => {\n const el = event.target as Element | null;\n const isTrigger = el?.closest?.(triggerSelector);\n const isOutside = !isTrigger && !popover.contains(el as Node);\n const isOpen = popover.getAttribute('aria-hidden') === 'false';\n\n if (isTrigger) {\n togglePopover(!isOpen);\n }\n if (isOutside && isOpen) {\n togglePopover(false);\n }\n },\n true,\n );\n};\n"],"mappings":";;;AAGA,MAAM,UAAU;AAsChB,MAAa,cAAc,CAAC,EAC1B,IACA,uBAAuB,OACvB,YAAY,OACZ,qBAAqB,CAAE,GACJ,KAAK;CAExB,IAAIA;CACJ,MAAM,UAAU,SAAS,eAAe,GAAG;CAC3C,MAAM,mBAAmB,kBAAkB,GAAG;CAC9C,MAAM,UAAU,SAAS,cAAc,gBAAgB;AAEvD,MAAK,YAAY,QAAS;CAE1B,MAAM,gBAAgB,CAACC,SAAkB;AACvC,MAAI,MAAM;AACR,aAAU,WAAW,SAAS,SAAS,MAAM;AAC3C,oBAAgB,SAAS,SAAS;KAChC,YAAY;MACV,OAAO,QAAQ;MACf,GAAI,uBAAuB,CAAE,IAAG,CAAC,KAAK,EAAE,QAAS,EAAC,EAAE,MAAM,EAAE,QAAS,EAAC,AAAC;MACvE,GAAG;MACH,KAAK,EAAE,QAAS,EAAC;KAClB;KACD,UAAU;KACV;IACD,EAAC,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,gBAAgB,KAAK;AACpC,aAAQ,MAAM,aAAa,EAAE,EAAE,KAAK,EAAE;AACtC,aAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;IAC9E,EAAC;GACH,EAAC;AACF,WAAQ,aAAa,eAAe,QAAQ;AAC5C,WAAQ,aAAa,iBAAiB,OAAO;EAC9C,OAAM;AACL,cAAW;AACX,WAAQ,aAAa,eAAe,OAAO;AAC3C,WAAQ,aAAa,iBAAiB,QAAQ;EAC/C;CACF;AAED,UAAS,iBACP,SACA,CAAC,UAAU;EACT,MAAM,KAAK,MAAM;EACjB,MAAM,YAAY,IAAI,UAAU,gBAAgB;EAChD,MAAM,aAAa,cAAc,QAAQ,SAAS,GAAW;EAC7D,MAAM,SAAS,QAAQ,aAAa,cAAc,KAAK;AAEvD,MAAI,UACF,gBAAe,OAAO;AAExB,MAAI,aAAa,OACf,eAAc,MAAM;CAEvB,GACD,KACD;AACF"}
@@ -1,11 +1,11 @@
1
1
  import { useMergeRefs } from "./useMergeRefs-Cz-t7gpp.js";
2
- import { Context } from "./popover-trigger-context-CdMmRbFv.js";
2
+ import { Context } from "./popover-trigger-context-CNUJbbBn.js";
3
3
  import clsx from "clsx/lite";
4
4
  import { Slot } from "@radix-ui/react-slot";
5
5
  import { jsx } from "react/jsx-runtime";
6
- import { use, useEffect, useRef, useState } from "react";
6
+ import { use, useEffect, useRef } from "react";
7
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
7
8
  import { autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
8
- import "@oddbird/popover-polyfill";
9
9
 
10
10
  //#region src/components/popover/popover.tsx
11
11
  const padding = 20;
@@ -21,52 +21,50 @@ const padding = 20;
21
21
  * </PopoverTriggerContext>
22
22
  *
23
23
  * @example without TriggerContext
24
- * <Button popovertarget="my-popover">Open Popover</Button>
25
- * <Popover id="my-popover">
24
+ * <Button aria-controls="my-popover" aria-expanded={open}>Open Popover</Button>
25
+ * <Popover open={open} onOpenChange={onOpenChange} id="my-popover">
26
26
  * Content
27
27
  * </Popover>
28
28
  */
29
- const Popover = ({ id, className, onClose, onOpen, open, placement = "top", disableAutoPlacement = false, positionMiddleware = [], dark = false, asChild = false, ref,...rest }) => {
29
+ const Popover = ({ id, className, onOpenChange, open, placement = "top", disableAutoPlacement = false, positionMiddleware = [], dark = false, asChild = false, ref,...rest }) => {
30
30
  const Component = asChild ? Slot : "div";
31
31
  const popoverRef = useRef(null);
32
+ const isControlled = useRef(open !== void 0);
32
33
  const mergedRefs = useMergeRefs([popoverRef, ref]);
33
- const { popoverId, setPopoverId } = use(Context);
34
- const [internalOpen, setInternalOpen] = useState(false);
35
- const controlledOpen = open ?? internalOpen;
34
+ const { popoverId, setPopoverId, popoverOpen, setPopoverOpen } = use(Context);
35
+ const [isOpen, setIsOpen] = useControllableState({
36
+ prop: isControlled.current ? open : popoverOpen,
37
+ onChange: (val) => {
38
+ onOpenChange?.(val);
39
+ setPopoverOpen?.(val);
40
+ },
41
+ defaultProp: false,
42
+ caller: "Popover"
43
+ });
36
44
  useEffect(() => {
37
45
  const popover = popoverRef.current;
38
46
  const handleClick = (event) => {
39
47
  const el = event.target;
40
- const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
48
+ const isTrigger = el?.closest?.(`[aria-controls="${popover?.id}"]`);
41
49
  const isOutside = !isTrigger && !popover?.contains(el);
42
- if (isTrigger) {
43
- event.preventDefault();
44
- setInternalOpen((open$1) => !open$1);
45
- onOpen?.();
46
- }
47
- if (isOutside) {
48
- setInternalOpen(false);
49
- onClose?.();
50
- }
50
+ if (isOutside) setIsOpen(false);
51
51
  };
52
52
  const handleKeydown = (event) => {
53
- if (event.key !== "Escape" || !controlledOpen) return;
53
+ if (event.key !== "Escape" || !isOpen) return;
54
54
  event.preventDefault();
55
- setInternalOpen(false);
56
- onClose?.();
55
+ setIsOpen(false);
57
56
  };
58
- popover?.togglePopover?.(controlledOpen);
59
57
  document.addEventListener("click", handleClick, true);
60
58
  document.addEventListener("keydown", handleKeydown);
61
59
  return () => {
62
60
  document.removeEventListener("click", handleClick, true);
63
61
  document.removeEventListener("keydown", handleKeydown);
64
62
  };
65
- }, [controlledOpen]);
63
+ }, [isOpen, setIsOpen]);
66
64
  useEffect(() => {
67
65
  const popover = popoverRef.current;
68
- const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
69
- if (popover && trigger && controlledOpen) return autoUpdate(trigger, popover, () => {
66
+ const trigger = document.querySelector(`[aria-controls="${popover?.id}"]`);
67
+ if (popover && trigger && isOpen) return autoUpdate(trigger, popover, () => {
70
68
  computePosition(trigger, popover, {
71
69
  middleware: [
72
70
  offset(padding),
@@ -85,7 +83,7 @@ const Popover = ({ id, className, onClose, onOpen, open, placement = "top", disa
85
83
  });
86
84
  });
87
85
  }, [
88
- controlledOpen,
86
+ isOpen,
89
87
  placement,
90
88
  id,
91
89
  disableAutoPlacement,
@@ -97,7 +95,7 @@ const Popover = ({ id, className, onClose, onOpen, open, placement = "top", disa
97
95
  return /* @__PURE__ */ jsx(Component, {
98
96
  className: clsx("bi-popover", className),
99
97
  id: id || popoverId,
100
- popover: "manual",
98
+ "aria-hidden": !isOpen,
101
99
  "data-dark": dark,
102
100
  ref: mergedRefs,
103
101
  ...rest
@@ -106,4 +104,4 @@ const Popover = ({ id, className, onClose, onOpen, open, placement = "top", disa
106
104
 
107
105
  //#endregion
108
106
  export { Popover };
109
- //# sourceMappingURL=popover-D59x0S-P.js.map
107
+ //# sourceMappingURL=popover-WJoHXecW.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-WJoHXecW.js","names":["event: MouseEvent","event: KeyboardEvent"],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["// Thanks to Designsystemet:\n// https://github.com/digdir/designsystemet/blob/8aa6dc274e5b0338d15572f44b5dd3fab6fa4eb1/packages/react/src/components/Popover/Popover.tsx\n\nimport { autoUpdate, computePosition, flip, offset, shift, hide } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\nimport { Slot } from '@radix-ui/react-slot';\nimport cl from 'clsx/lite';\nimport { use, useRef } from 'react';\nimport type { HTMLAttributes, Ref } from 'react';\nimport { useEffect } from 'react';\nimport type { DefaultProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { useMergeRefs } from '../../utilities/hooks';\nimport { Context } from './popover-trigger-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nconst padding = 20;\n\nexport type PopoverProps = MergeRight<\n DefaultProps & HTMLAttributes<HTMLDivElement>,\n {\n /**\n * `id` to connect the trigger with the popover - required when not using PopoverContext.\n */\n id?: string;\n /**\n * Placement of the popover on the trigger.\n * @default 'top'\n */\n placement?: Placement;\n /**\n * When a boolean is provided, the popover will be controlled.\n * @default undefined\n */\n open?: boolean;\n /**\n * Callback when the open state changes.\n * @param open - The new open state of the popover.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Whether to disable auto placement.\n * @default false\n */\n disableAutoPlacement?: boolean;\n /**\n * Additional middleware to use for positioning the popover.\n *\n * @example\n * Prevent the popover from overflowing the navbar by using the `size` middleware:\n * ```ts\n * positionMiddleware={[\n * size({\n * apply: ({ availableHeight, elements, ...state }) => {\n * const available = `${Math.max(0, availableHeight)}px`;\n * const maxHeight = state.placement.includes('top')\n * ? `calc(${available} - var(--bi-layout-navbar-height, 0))`\n * : available;\n * elements.floating.style.maxHeight = maxHeight;\n * },\n * padding,\n * })\n * ]}\n * ```\n */\n positionMiddleware?: Middleware[];\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n ref?: Ref<HTMLDivElement>;\n }\n>;\n\n/**\n * Popover component, used to display content in a popover over an element.\n *\n * @example with TriggerContext\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n *\n * @example without TriggerContext\n * <Button aria-controls=\"my-popover\" aria-expanded={open}>Open Popover</Button>\n * <Popover open={open} onOpenChange={onOpenChange} id=\"my-popover\">\n * Content\n * </Popover>\n */\nexport const Popover = ({\n id,\n className,\n onOpenChange,\n open,\n placement = 'top',\n disableAutoPlacement = false,\n positionMiddleware = [],\n dark = false,\n asChild = false,\n ref,\n ...rest\n}: PopoverProps) => {\n const Component = asChild ? Slot : 'div';\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const isControlled = useRef(open !== undefined);\n const mergedRefs = useMergeRefs([popoverRef, ref]);\n const { popoverId, setPopoverId, popoverOpen, setPopoverOpen } = use(Context);\n\n const [isOpen, setIsOpen] = useControllableState({\n prop: isControlled.current ? open : popoverOpen,\n onChange: (val) => {\n onOpenChange?.(val);\n setPopoverOpen?.(val);\n },\n defaultProp: false,\n caller: 'Popover',\n });\n\n useEffect(() => {\n const popover = popoverRef.current;\n const handleClick = (event: MouseEvent) => {\n const el = event.target as Element | null;\n const isTrigger = el?.closest?.(`[aria-controls=\"${popover?.id}\"]`);\n const isOutside = !isTrigger && !popover?.contains(el as Node);\n\n if (isOutside) {\n setIsOpen(false);\n }\n };\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isOpen) return;\n event.preventDefault(); // Prevent closing fullscreen in Safari\n setIsOpen(false);\n };\n\n document.addEventListener('click', handleClick, true); // Use capture to execute before React event API\n document.addEventListener('keydown', handleKeydown);\n return () => {\n document.removeEventListener('click', handleClick, true);\n document.removeEventListener('keydown', handleKeydown);\n };\n }, [isOpen, setIsOpen]);\n\n useEffect(() => {\n const popover = popoverRef.current;\n const trigger = document.querySelector(`[aria-controls=\"${popover?.id}\"]`);\n\n if (popover && trigger && isOpen)\n return autoUpdate(trigger, popover, () => {\n computePosition(trigger, popover, {\n middleware: [\n offset(padding),\n ...(disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })]),\n ...positionMiddleware,\n hide({ padding, strategy: 'escaped' }),\n ],\n strategy: 'fixed',\n placement,\n }).then(({ x, y, middlewareData }) => {\n popover.style.translate = `${x}px ${y}px`;\n popover.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';\n });\n });\n }, [isOpen, placement, id, disableAutoPlacement, positionMiddleware]);\n\n // Update context with id\n useEffect(() => {\n if (id) setPopoverId?.(id);\n }, [id, setPopoverId]);\n\n return (\n <Component\n className={cl('bi-popover', className)}\n id={id || popoverId}\n aria-hidden={!isOpen}\n data-dark={dark}\n ref={mergedRefs}\n {...rest}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,UAAU;;;;;;;;;;;;;;;;;;AA4EhB,MAAa,UAAU,CAAC,EACtB,IACA,WACA,cACA,MACA,YAAY,OACZ,uBAAuB,OACvB,qBAAqB,CAAE,GACvB,OAAO,OACP,UAAU,OACV,IACA,GAAG,MACU,KAAK;CAClB,MAAM,YAAY,UAAU,OAAO;CAEnC,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,eAAe,OAAO,gBAAmB;CAC/C,MAAM,aAAa,aAAa,CAAC,YAAY,GAAI,EAAC;CAClD,MAAM,EAAE,WAAW,cAAc,aAAa,gBAAgB,GAAG,IAAI,QAAQ;CAE7E,MAAM,CAAC,QAAQ,UAAU,GAAG,qBAAqB;EAC/C,MAAM,aAAa,UAAU,OAAO;EACpC,UAAU,CAAC,QAAQ;AACjB,kBAAe,IAAI;AACnB,oBAAiB,IAAI;EACtB;EACD,aAAa;EACb,QAAQ;CACT,EAAC;AAEF,WAAU,MAAM;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,cAAc,CAACA,UAAsB;GACzC,MAAM,KAAK,MAAM;GACjB,MAAM,YAAY,IAAI,WAAW,kBAAkB,SAAS,GAAG,IAAI;GACnE,MAAM,aAAa,cAAc,SAAS,SAAS,GAAW;AAE9D,OAAI,UACF,WAAU,MAAM;EAEnB;EAED,MAAM,gBAAgB,CAACC,UAAyB;AAC9C,OAAI,MAAM,QAAQ,aAAa,OAAQ;AACvC,SAAM,gBAAgB;AACtB,aAAU,MAAM;EACjB;AAED,WAAS,iBAAiB,SAAS,aAAa,KAAK;AACrD,WAAS,iBAAiB,WAAW,cAAc;AACnD,SAAO,MAAM;AACX,YAAS,oBAAoB,SAAS,aAAa,KAAK;AACxD,YAAS,oBAAoB,WAAW,cAAc;EACvD;CACF,GAAE,CAAC,QAAQ,SAAU,EAAC;AAEvB,WAAU,MAAM;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,UAAU,SAAS,eAAe,kBAAkB,SAAS,GAAG,IAAI;AAE1E,MAAI,WAAW,WAAW,OACxB,QAAO,WAAW,SAAS,SAAS,MAAM;AACxC,mBAAgB,SAAS,SAAS;IAChC,YAAY;KACV,OAAO,QAAQ;KACf,GAAI,uBAAuB,CAAE,IAAG,CAAC,KAAK,EAAE,QAAS,EAAC,EAAE,MAAM,EAAE,QAAS,EAAC,AAAC;KACvE,GAAG;KACH,KAAK;MAAE;MAAS,UAAU;KAAW,EAAC;IACvC;IACD,UAAU;IACV;GACD,EAAC,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,gBAAgB,KAAK;AACpC,YAAQ,MAAM,aAAa,EAAE,EAAE,KAAK,EAAE;AACtC,YAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;GAC9E,EAAC;EACH,EAAC;CACL,GAAE;EAAC;EAAQ;EAAW;EAAI;EAAsB;CAAmB,EAAC;AAGrE,WAAU,MAAM;AACd,MAAI,GAAI,gBAAe,GAAG;CAC3B,GAAE,CAAC,IAAI,YAAa,EAAC;AAEtB,wBACE,IAAC;EACC,WAAW,KAAG,cAAc,UAAU;EACtC,IAAI,MAAM;EACV,gBAAc;EACd,aAAW;EACX,KAAK;EACL,GAAI;GACJ;AAEL"}
@@ -1,5 +1,5 @@
1
- import { Button } from "./button-ByuaxNe-.js";
2
- import { Context } from "./popover-trigger-context-CdMmRbFv.js";
1
+ import { Button } from "./button-fhd-JARc.js";
2
+ import { Context } from "./popover-trigger-context-CNUJbbBn.js";
3
3
  import { Slot } from "@radix-ui/react-slot";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  import { use } from "react";
@@ -27,10 +27,12 @@ import { use } from "react";
27
27
  * </PopoverTriggerContext>
28
28
  */
29
29
  const PopoverTrigger = ({ id, inline, asChild, ref,...rest }) => {
30
- const { popoverId } = use(Context);
30
+ const { popoverId, popoverOpen, setPopoverOpen } = use(Context);
31
31
  const Component = asChild ? Slot : inline ? "button" : Button;
32
32
  const popoverProps = Object.assign({
33
- popoverTarget: popoverId,
33
+ onClick: () => setPopoverOpen?.((prev) => !prev),
34
+ "aria-controls": popoverId,
35
+ "aria-expanded": popoverOpen,
34
36
  ...inline ? { "data-popover": "inline" } : {}
35
37
  }, rest);
36
38
  return /* @__PURE__ */ jsx(Component, {
@@ -41,4 +43,4 @@ const PopoverTrigger = ({ id, inline, asChild, ref,...rest }) => {
41
43
 
42
44
  //#endregion
43
45
  export { PopoverTrigger };
44
- //# sourceMappingURL=popover-trigger-C6X2lGJa.js.map
46
+ //# sourceMappingURL=popover-trigger-CjEKeJwY.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"popover-trigger-C6X2lGJa.js","names":[],"sources":["../src/components/popover/popover-trigger.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { type HTMLAttributes, Ref, use } from 'react';\nimport type { DefaultProps } from '../../types';\nimport { Button, type ButtonProps } from '../button';\nimport { Context } from './popover-trigger-context';\n\nexport type PopoverTriggerProps =\n | ({\n /**\n * Will render the trigger as inline text.\n * @default false\n */\n inline?: true;\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n ref?: Ref<HTMLButtonElement>;\n } & HTMLAttributes<HTMLButtonElement> &\n DefaultProps)\n | ({\n /**\n * Will not render the trigger as inline text.\n * @default false\n */\n inline?: false;\n } & ButtonProps);\n\n/**\n * PopoverTrigger component, used to trigger a popover.\n *\n * @example\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n *\n * @example inline\n * <PopoverTriggerContext>\n * <Paragraph>\n * We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.\n * </Paragraph>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const PopoverTrigger = ({ id, inline, asChild, ref, ...rest }: PopoverTriggerProps) => {\n const { popoverId } = use(Context);\n const Component = asChild ? Slot : inline ? 'button' : Button;\n\n const popoverProps = Object.assign(\n {\n popoverTarget: popoverId,\n ...(inline\n ? {\n 'data-popover': 'inline',\n }\n : {}),\n },\n rest,\n );\n\n return <Component ref={ref} {...popoverProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,iBAAiB,CAAC,EAAE,IAAI,QAAQ,SAAS,IAAK,GAAG,MAA2B,KAAK;CAC5F,MAAM,EAAE,WAAW,GAAG,IAAI,QAAQ;CAClC,MAAM,YAAY,UAAU,OAAO,SAAS,WAAW;CAEvD,MAAM,eAAe,OAAO,OAC1B;EACE,eAAe;EACf,GAAI,SACA,EACE,gBAAgB,SACjB,IACD,CAAE;CACP,GACD,KACD;AAED,wBAAO,IAAC;EAAe;EAAK,GAAI;GAAgB;AACjD"}
1
+ {"version":3,"file":"popover-trigger-CjEKeJwY.js","names":[],"sources":["../src/components/popover/popover-trigger.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { type HTMLAttributes, Ref, use } from 'react';\nimport type { DefaultProps } from '../../types';\nimport { Button, type ButtonProps } from '../button';\nimport { Context } from './popover-trigger-context';\n\nexport type PopoverTriggerProps =\n | ({\n /**\n * Will render the trigger as inline text.\n * @default false\n */\n inline?: true;\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n ref?: Ref<HTMLButtonElement>;\n } & HTMLAttributes<HTMLButtonElement> &\n DefaultProps)\n | ({\n /**\n * Will not render the trigger as inline text.\n * @default false\n */\n inline?: false;\n } & ButtonProps);\n\n/**\n * PopoverTrigger component, used to trigger a popover.\n *\n * @example\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n *\n * @example inline\n * <PopoverTriggerContext>\n * <Paragraph>\n * We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.\n * </Paragraph>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const PopoverTrigger = ({ id, inline, asChild, ref, ...rest }: PopoverTriggerProps) => {\n const { popoverId, popoverOpen, setPopoverOpen } = use(Context);\n const Component = asChild ? Slot : inline ? 'button' : Button;\n\n const popoverProps = Object.assign(\n {\n onClick: () => setPopoverOpen?.((prev) => !prev),\n 'aria-controls': popoverId,\n 'aria-expanded': popoverOpen,\n ...(inline\n ? {\n 'data-popover': 'inline',\n }\n : {}),\n },\n rest,\n );\n\n return <Component ref={ref} {...popoverProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,iBAAiB,CAAC,EAAE,IAAI,QAAQ,SAAS,IAAK,GAAG,MAA2B,KAAK;CAC5F,MAAM,EAAE,WAAW,aAAa,gBAAgB,GAAG,IAAI,QAAQ;CAC/D,MAAM,YAAY,UAAU,OAAO,SAAS,WAAW;CAEvD,MAAM,eAAe,OAAO,OAC1B;EACE,SAAS,MAAM,iBAAiB,CAAC,UAAU,KAAK;EAChD,iBAAiB;EACjB,iBAAiB;EACjB,GAAI,SACA,EACE,gBAAgB,SACjB,IACD,CAAE;CACP,GACD,KACD;AAED,wBAAO,IAAC;EAAe;EAAK,GAAI;GAAgB;AACjD"}
@@ -17,10 +17,13 @@ const Context = createContext({});
17
17
  const PopoverTriggerContext = ({ children }) => {
18
18
  const randomPopoverId = useId();
19
19
  const [popoverId, setPopoverId] = useState(randomPopoverId);
20
+ const [popoverOpen, setPopoverOpen] = useState(false);
20
21
  return /* @__PURE__ */ jsx(Context, {
21
22
  value: {
22
23
  popoverId,
23
- setPopoverId
24
+ setPopoverId,
25
+ popoverOpen,
26
+ setPopoverOpen
24
27
  },
25
28
  children
26
29
  });
@@ -28,4 +31,4 @@ const PopoverTriggerContext = ({ children }) => {
28
31
 
29
32
  //#endregion
30
33
  export { Context, PopoverTriggerContext };
31
- //# sourceMappingURL=popover-trigger-context-CdMmRbFv.js.map
34
+ //# sourceMappingURL=popover-trigger-context-CNUJbbBn.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-trigger-context-CNUJbbBn.js","names":[],"sources":["../src/components/popover/popover-trigger-context.tsx"],"sourcesContent":["import { createContext, useId, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const Context = createContext<{\n popoverId?: string;\n setPopoverId?: (id: string) => void;\n popoverOpen?: boolean;\n setPopoverOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}>({});\n\nexport type PopoverTriggerContextProps = {\n children: ReactNode;\n};\n\n/**\n * PopoverTriggerContext component, use to wrap a PopoverTrigger and Popover.\n *\n * @example\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n */\nexport const PopoverTriggerContext = ({ children }: PopoverTriggerContextProps) => {\n const randomPopoverId = useId();\n const [popoverId, setPopoverId] = useState(randomPopoverId);\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n return <Context value={{ popoverId, setPopoverId, popoverOpen, setPopoverOpen }}>{children}</Context>;\n};\n"],"mappings":";;;;AAGA,MAAa,UAAU,cAKpB,CAAE,EAAC;;;;;;;;;;;;AAiBN,MAAa,wBAAwB,CAAC,EAAE,UAAsC,KAAK;CACjF,MAAM,kBAAkB,OAAO;CAC/B,MAAM,CAAC,WAAW,aAAa,GAAG,SAAS,gBAAgB;CAC3D,MAAM,CAAC,aAAa,eAAe,GAAG,SAAS,MAAM;AAErD,wBAAO,IAAC;EAAQ,OAAO;GAAE;GAAW;GAAc;GAAa;EAAgB;EAAG;GAAmB;AACtG"}
@@ -1,11 +1,13 @@
1
- import * as react_jsx_runtime52 from "react/jsx-runtime";
2
- import * as react51 from "react";
1
+ import * as react_jsx_runtime53 from "react/jsx-runtime";
2
+ import * as react52 from "react";
3
3
  import { ReactNode } from "react";
4
4
 
5
5
  //#region src/components/popover/popover-trigger-context.d.ts
6
- declare const Context: react51.Context<{
6
+ declare const Context: react52.Context<{
7
7
  popoverId?: string;
8
8
  setPopoverId?: (id: string) => void;
9
+ popoverOpen?: boolean;
10
+ setPopoverOpen?: React.Dispatch<React.SetStateAction<boolean>>;
9
11
  }>;
10
12
  type PopoverTriggerContextProps = {
11
13
  children: ReactNode;
@@ -23,7 +25,7 @@ type PopoverTriggerContextProps = {
23
25
  */
24
26
  declare const PopoverTriggerContext: ({
25
27
  children
26
- }: PopoverTriggerContextProps) => react_jsx_runtime52.JSX.Element;
28
+ }: PopoverTriggerContextProps) => react_jsx_runtime53.JSX.Element;
27
29
  //#endregion
28
30
  export { Context, PopoverTriggerContext, PopoverTriggerContextProps };
29
- //# sourceMappingURL=popover-trigger-context-vREVdUak.d.ts.map
31
+ //# sourceMappingURL=popover-trigger-context-DQy9nKB2.d.ts.map
@@ -1,4 +1,4 @@
1
- import { Button } from "./button-ByuaxNe-.js";
1
+ import { Button } from "./button-fhd-JARc.js";
2
2
  import { Field } from "./field-U2SN9jkp.js";
3
3
  import { FieldAffix, FieldAffixes } from "./field-affix-npc6m7XL.js";
4
4
  import { Input } from "./input-Dr7BnTyd.js";
@@ -52,4 +52,4 @@ const Search = ({ className, onSubmit, clearAriaLabel = "Clear", size = "medium"
52
52
 
53
53
  //#endregion
54
54
  export { Search };
55
- //# sourceMappingURL=search-DbpZoxHj.js.map
55
+ //# sourceMappingURL=search-Dg6xvCDB.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"search-DbpZoxHj.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n Omit<InputProps, 'type' | 'size'>,\n {\n /**\n * Size of the search.\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Called when the user presses enter. You can use this to for example navigate on submit. */\n onSubmit?: (value: string) => void;\n /**\n * Aria-label for the clear button.\n * @defaultValue 'Clear'\n */\n clearAriaLabel?: string;\n }\n>;\n\nexport const Search = ({\n className,\n onSubmit,\n clearAriaLabel = 'Clear',\n size = 'medium',\n ref,\n dark,\n style,\n ...props\n}: SearchProps) => {\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (onSubmit) {\n const input = e.currentTarget.querySelector('input');\n onSubmit(input?.value || '');\n }\n };\n return (\n <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n <form onSubmit={handleSubmit}>\n <FieldAffixes>\n <FieldAffix>\n <BiIconMagnefyingGlass size={size} />\n </FieldAffix>\n <Input type='text' ref={ref} size={size} {...props} />\n <FieldAffix aria-hidden='false'>\n <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n <BiIconCrossSmall size={size} aria-hidden='true' />\n </Button>\n </FieldAffix>\n </FieldAffixes>\n </form>\n </Field>\n );\n};\n"],"mappings":";;;;;;;;;AAyBA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;6BACd,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAM,GAAI;MAAS;oBACtD,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}
1
+ {"version":3,"file":"search-Dg6xvCDB.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n Omit<InputProps, 'type' | 'size'>,\n {\n /**\n * Size of the search.\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Called when the user presses enter. You can use this to for example navigate on submit. */\n onSubmit?: (value: string) => void;\n /**\n * Aria-label for the clear button.\n * @defaultValue 'Clear'\n */\n clearAriaLabel?: string;\n }\n>;\n\nexport const Search = ({\n className,\n onSubmit,\n clearAriaLabel = 'Clear',\n size = 'medium',\n ref,\n dark,\n style,\n ...props\n}: SearchProps) => {\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (onSubmit) {\n const input = e.currentTarget.querySelector('input');\n onSubmit(input?.value || '');\n }\n };\n return (\n <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n <form onSubmit={handleSubmit}>\n <FieldAffixes>\n <FieldAffix>\n <BiIconMagnefyingGlass size={size} />\n </FieldAffix>\n <Input type='text' ref={ref} size={size} {...props} />\n <FieldAffix aria-hidden='false'>\n <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n <BiIconCrossSmall size={size} aria-hidden='true' />\n </Button>\n </FieldAffix>\n </FieldAffixes>\n </form>\n </Field>\n );\n};\n"],"mappings":";;;;;;;;;AAyBA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;6BACd,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAM,GAAI;MAAS;oBACtD,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}
@@ -1,4 +1,4 @@
1
- import { Button } from "./button-ByuaxNe-.js";
1
+ import { Button } from "./button-fhd-JARc.js";
2
2
  import clsx from "clsx/lite";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Trigger } from "@radix-ui/react-tabs";
@@ -24,4 +24,4 @@ const Tab = ({ className, value, disabled, children, asChild, dark, ref,...props
24
24
 
25
25
  //#endregion
26
26
  export { Tab };
27
- //# sourceMappingURL=tab-mYdCvypj.js.map
27
+ //# sourceMappingURL=tab-D-OGgeAb.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab-mYdCvypj.js","names":[],"sources":["../src/components/tabs/tab.tsx"],"sourcesContent":["import type { MergeRight } from '../../utilities';\nimport { Trigger } from '@radix-ui/react-tabs';\nimport clsx from 'clsx/lite';\nimport { Button, ButtonProps } from '../button';\n\nexport type TabProps = MergeRight<\n Omit<ButtonProps, 'variant' | 'type'>,\n {\n /** A unique value that associates the trigger with a content. */\n value: string;\n /**\n * When true, prevents the user from interacting with the tab.\n * @default false\n */\n disabled?: boolean;\n }\n>;\n\nexport const Tab = ({ className, value, disabled, children, asChild, dark, ref, ...props }: TabProps) => {\n return (\n <Trigger value={value} disabled={disabled} asChild>\n <Button\n ref={ref}\n variant='text'\n className={clsx('bi-tabs--tab', className)}\n disabled={disabled}\n asChild={asChild}\n dark={dark}\n {...props}\n >\n {children}\n </Button>\n </Trigger>\n );\n};\n"],"mappings":";;;;;;AAkBA,MAAa,MAAM,CAAC,EAAE,WAAW,OAAO,UAAU,UAAU,SAAS,MAAM,IAAK,GAAG,OAAiB,KAAK;AACvG,wBACE,IAAC;EAAe;EAAiB;EAAU;4BACzC,IAAC;GACM;GACL,SAAQ;GACR,WAAW,KAAK,gBAAgB,UAAU;GAChC;GACD;GACH;GACN,GAAI;GAEH;IACM;GACD;AAEb"}
1
+ {"version":3,"file":"tab-D-OGgeAb.js","names":[],"sources":["../src/components/tabs/tab.tsx"],"sourcesContent":["import type { MergeRight } from '../../utilities';\nimport { Trigger } from '@radix-ui/react-tabs';\nimport clsx from 'clsx/lite';\nimport { Button, ButtonProps } from '../button';\n\nexport type TabProps = MergeRight<\n Omit<ButtonProps, 'variant' | 'type'>,\n {\n /** A unique value that associates the trigger with a content. */\n value: string;\n /**\n * When true, prevents the user from interacting with the tab.\n * @default false\n */\n disabled?: boolean;\n }\n>;\n\nexport const Tab = ({ className, value, disabled, children, asChild, dark, ref, ...props }: TabProps) => {\n return (\n <Trigger value={value} disabled={disabled} asChild>\n <Button\n ref={ref}\n variant='text'\n className={clsx('bi-tabs--tab', className)}\n disabled={disabled}\n asChild={asChild}\n dark={dark}\n {...props}\n >\n {children}\n </Button>\n </Trigger>\n );\n};\n"],"mappings":";;;;;;AAkBA,MAAa,MAAM,CAAC,EAAE,WAAW,OAAO,UAAU,UAAU,SAAS,MAAM,IAAK,GAAG,OAAiB,KAAK;AACvG,wBACE,IAAC;EAAe;EAAiB;EAAU;4BACzC,IAAC;GACM;GACL,SAAQ;GACR,WAAW,KAAK,gBAAgB,UAAU;GAChC;GACD;GACH;GACN,GAAI;GAEH;IACM;GACD;AAEb"}
@@ -1,14 +1,14 @@
1
1
  import { useIsomorphicLayoutEffect } from "../../useIsomorphicLayoutEffect-D3y6bHpX.js";
2
2
  import { useMergeRefs } from "../../useMergeRefs-BTgz9pcs.js";
3
3
  import "../../types-BTJlwWCQ.js";
4
- import { UsePaginationProps, usePagination } from "../../alert-footer-DF92J9Xu.js";
4
+ import { UsePaginationProps, usePagination } from "../../alert-footer-BS8bENJI.js";
5
5
  import "../../dialog-trigger-context-BP03jmAI.js";
6
6
  import "../../drawer-trigger-context-BDcc94cu.js";
7
- import "../../popover-trigger-context-vREVdUak.js";
7
+ import "../../popover-trigger-context-DQy9nKB2.js";
8
8
  import "../../dropdown-item-bMZ3-43Z.js";
9
9
  import "../../dropdown-list-DenWbmcv.js";
10
10
  import "../../dropdown-trigger-context-BabMM_7k.js";
11
11
  import "../../footer-links-sRD7teEv.js";
12
- import "../../pagination-item-DKL5arlo.js";
12
+ import "../../pagination-item-hMN-34PX.js";
13
13
  import "../../types-CAwE6h3H.js";
14
14
  export { UsePaginationProps, useIsomorphicLayoutEffect, useMergeRefs, usePagination };
@@ -1,14 +1,14 @@
1
1
  import "../../../useIsomorphicLayoutEffect-D3y6bHpX.js";
2
2
  import "../../../useMergeRefs-BTgz9pcs.js";
3
3
  import "../../../types-BTJlwWCQ.js";
4
- import { UsePaginationProps, usePagination } from "../../../alert-footer-DF92J9Xu.js";
4
+ import { UsePaginationProps, usePagination } from "../../../alert-footer-BS8bENJI.js";
5
5
  import "../../../dialog-trigger-context-BP03jmAI.js";
6
6
  import "../../../drawer-trigger-context-BDcc94cu.js";
7
- import "../../../popover-trigger-context-vREVdUak.js";
7
+ import "../../../popover-trigger-context-DQy9nKB2.js";
8
8
  import "../../../dropdown-item-bMZ3-43Z.js";
9
9
  import "../../../dropdown-list-DenWbmcv.js";
10
10
  import "../../../dropdown-trigger-context-BabMM_7k.js";
11
11
  import "../../../footer-links-sRD7teEv.js";
12
- import "../../../pagination-item-DKL5arlo.js";
12
+ import "../../../pagination-item-hMN-34PX.js";
13
13
  import "../../../types-CAwE6h3H.js";
14
14
  export { UsePaginationProps, usePagination };
@@ -1,14 +1,14 @@
1
1
  import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect-D3y6bHpX.js";
2
2
  import "../useMergeRefs-BTgz9pcs.js";
3
3
  import "../types-BTJlwWCQ.js";
4
- import { UsePaginationProps, usePagination } from "../alert-footer-DF92J9Xu.js";
4
+ import { UsePaginationProps, usePagination } from "../alert-footer-BS8bENJI.js";
5
5
  import "../dialog-trigger-context-BP03jmAI.js";
6
6
  import "../drawer-trigger-context-BDcc94cu.js";
7
- import "../popover-trigger-context-vREVdUak.js";
7
+ import "../popover-trigger-context-DQy9nKB2.js";
8
8
  import "../dropdown-item-bMZ3-43Z.js";
9
9
  import "../dropdown-list-DenWbmcv.js";
10
10
  import "../dropdown-trigger-context-BabMM_7k.js";
11
11
  import "../footer-links-sRD7teEv.js";
12
- import "../pagination-item-DKL5arlo.js";
12
+ import "../pagination-item-hMN-34PX.js";
13
13
  import { MergeRight } from "../types-CAwE6h3H.js";
14
14
  export { MergeRight, UsePaginationProps, useIsomorphicLayoutEffect, usePagination };
@@ -1,2 +1,2 @@
1
- import { InitDropdownOptions, initDropdown } from "../../index-DJcJV0y7.js";
1
+ import { InitDropdownOptions, initDropdown } from "../../index-qXXUizvD.js";
2
2
  export { InitDropdownOptions, initDropdown };
@@ -1,4 +1,4 @@
1
- import "../../popover-BRH3zXGT.js";
2
- import { initDropdown } from "../../dropdown-BjxU_86k.js";
1
+ import "../../popover-CGNoywPj.js";
2
+ import { initDropdown } from "../../dropdown-C1hpsZcN.js";
3
3
 
4
4
  export { initDropdown };
@@ -1,3 +1,3 @@
1
- import { InitDropdownOptions, initDropdown } from "../index-DJcJV0y7.js";
2
- import { InitPopoverOptions, initPopover } from "../index-Bh8T71Ia.js";
1
+ import { InitDropdownOptions, initDropdown } from "../index-qXXUizvD.js";
2
+ import { InitPopoverOptions, initPopover } from "../index-CRy7A5Iq.js";
3
3
  export { InitDropdownOptions, InitPopoverOptions, initDropdown, initPopover };
@@ -1,4 +1,4 @@
1
- import { initPopover } from "../popover-BRH3zXGT.js";
2
- import { initDropdown } from "../dropdown-BjxU_86k.js";
1
+ import { initPopover } from "../popover-CGNoywPj.js";
2
+ import { initDropdown } from "../dropdown-C1hpsZcN.js";
3
3
 
4
4
  export { initDropdown, initPopover };
@@ -1,2 +1,2 @@
1
- import { InitPopoverOptions, initPopover } from "../../index-Bh8T71Ia.js";
1
+ import { InitPopoverOptions, initPopover } from "../../index-CRy7A5Iq.js";
2
2
  export { InitPopoverOptions, initPopover };
@@ -1,3 +1,3 @@
1
- import { initPopover } from "../../popover-BRH3zXGT.js";
1
+ import { initPopover } from "../../popover-CGNoywPj.js";
2
2
 
3
3
  export { initPopover };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/react",
3
- "version": "0.2.16",
3
+ "version": "0.2.18",
4
4
  "type": "module",
5
5
  "description": "React components from BI Digital",
6
6
  "author": "BI Digital",
@@ -25,7 +25,6 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@floating-ui/dom": "^1.6.13",
28
- "@oddbird/popover-polyfill": "^0.6.0",
29
28
  "@radix-ui/react-slot": "^1.2.2",
30
29
  "@radix-ui/react-tabs": "^1.1.12",
31
30
  "@radix-ui/react-use-controllable-state": "^1.2.2",
@@ -48,13 +47,13 @@
48
47
  "tsdown": "^0.12.7",
49
48
  "typescript": "^5.7.2",
50
49
  "vitest": "^3.2.1",
51
- "@bi-digital/icons-react": "0.2.16"
50
+ "@bi-digital/icons-react": "0.2.18"
52
51
  },
53
52
  "peerDependencies": {
54
53
  "react": "^19",
55
54
  "react-dom": "^19",
56
- "@bi-digital/css": "0.2.16",
57
- "@bi-digital/icons-react": "0.2.16"
55
+ "@bi-digital/css": "0.2.18",
56
+ "@bi-digital/icons-react": "0.2.18"
58
57
  },
59
58
  "scripts": {
60
59
  "build": "tsdown",
@@ -1,45 +0,0 @@
1
- import { autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
2
- import "@oddbird/popover-polyfill";
3
-
4
- //#region src/vanilla/popover/index.ts
5
- const padding = 20;
6
- const initPopover = ({ id, disableAutoPlacement = false, placement = "top", positionMiddleware = [] }) => {
7
- let cleanup;
8
- const popover = document.getElementById(id);
9
- const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
10
- if (!popover || !trigger) return;
11
- popover?.addEventListener("toggle", (e) => {
12
- const event = e;
13
- if (event.newState === "open") cleanup = autoUpdate(trigger, popover, () => {
14
- popover.style.visibility = "hidden";
15
- computePosition(trigger, popover, {
16
- middleware: [
17
- offset(padding),
18
- ...disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })],
19
- ...positionMiddleware,
20
- hide({ padding })
21
- ],
22
- strategy: "fixed",
23
- placement
24
- }).then(({ x, y, middlewareData }) => {
25
- popover.style.translate = `${x}px ${y}px`;
26
- popover.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
27
- });
28
- });
29
- else cleanup?.();
30
- });
31
- document.addEventListener("click", (event) => {
32
- const el = event.target;
33
- const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
34
- const isOutside = !isTrigger && !popover?.contains(el);
35
- if (isTrigger) {
36
- event.preventDefault();
37
- popover.togglePopover();
38
- }
39
- if (isOutside) popover.hidePopover();
40
- }, true);
41
- };
42
-
43
- //#endregion
44
- export { initPopover };
45
- //# sourceMappingURL=popover-BRH3zXGT.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"popover-BRH3zXGT.js","names":["cleanup: (() => void) | undefined"],"sources":["../src/vanilla/popover/index.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift, hide } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\nimport '@oddbird/popover-polyfill';\n\nconst padding = 20;\n\nexport type InitPopoverOptions = {\n /** The id of the popover to initialize. The trigger element should have a `popovertarget` attribute with the same id. */\n id: string;\n /**\n * Placement of the popover relative to the trigger.\n * @default 'top'\n */\n placement?: Placement;\n /**\n * Additional middleware to use for positioning the popover.\n *\n * @example\n * Prevent the popover from overflowing the navbar by using the `size` middleware:\n * ```ts\n * positionMiddleware: [\n * size({\n * apply: ({ availableHeight, elements, ...state }) => {\n * const available = `${Math.max(0, availableHeight)}px`;\n * const maxHeight = state.placement.includes('top')\n * ? `calc(${available} - var(--bi-layout-navbar-height, 0))`\n * : available;\n * elements.floating.style.maxHeight = maxHeight;\n * },\n * padding,\n * })\n * ]}\n * ```\n */\n positionMiddleware?: Middleware[];\n /**\n * Whether to disable auto placement.\n * @default false\n */\n disableAutoPlacement?: boolean;\n};\n\nexport const initPopover = ({\n id,\n disableAutoPlacement = false,\n placement = 'top',\n positionMiddleware = [],\n}: InitPopoverOptions) => {\n let cleanup: (() => void) | undefined;\n const popover = document.getElementById(id);\n const trigger = document.querySelector(`[popovertarget=\"${popover?.id}\"]`);\n\n if (!popover || !trigger) return;\n\n popover?.addEventListener('toggle', (e) => {\n const event = e as ToggleEvent;\n if (event.newState === 'open') {\n cleanup = autoUpdate(trigger, popover, () => {\n // Hide the popover initially to prevent flickering until the position is computed\n popover.style.visibility = 'hidden';\n\n computePosition(trigger, popover, {\n middleware: [\n offset(padding),\n ...(disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })]),\n ...positionMiddleware,\n hide({ padding }),\n ],\n strategy: 'fixed',\n placement,\n }).then(({ x, y, middlewareData }) => {\n popover.style.translate = `${x}px ${y}px`;\n popover.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';\n });\n });\n } else {\n cleanup?.();\n }\n });\n\n document.addEventListener(\n 'click',\n (event) => {\n const el = event.target as Element | null;\n const isTrigger = el?.closest?.(`[popovertarget=\"${popover?.id}\"]`);\n const isOutside = !isTrigger && !popover?.contains(el as Node);\n\n if (isTrigger) {\n event.preventDefault(); // Prevent native Popover API\n popover.togglePopover();\n }\n if (isOutside) {\n popover.hidePopover();\n }\n },\n true,\n );\n};\n"],"mappings":";;;;AAIA,MAAM,UAAU;AAsChB,MAAa,cAAc,CAAC,EAC1B,IACA,uBAAuB,OACvB,YAAY,OACZ,qBAAqB,CAAE,GACJ,KAAK;CACxB,IAAIA;CACJ,MAAM,UAAU,SAAS,eAAe,GAAG;CAC3C,MAAM,UAAU,SAAS,eAAe,kBAAkB,SAAS,GAAG,IAAI;AAE1E,MAAK,YAAY,QAAS;AAE1B,UAAS,iBAAiB,UAAU,CAAC,MAAM;EACzC,MAAM,QAAQ;AACd,MAAI,MAAM,aAAa,OACrB,WAAU,WAAW,SAAS,SAAS,MAAM;AAE3C,WAAQ,MAAM,aAAa;AAE3B,mBAAgB,SAAS,SAAS;IAChC,YAAY;KACV,OAAO,QAAQ;KACf,GAAI,uBAAuB,CAAE,IAAG,CAAC,KAAK,EAAE,QAAS,EAAC,EAAE,MAAM,EAAE,QAAS,EAAC,AAAC;KACvE,GAAG;KACH,KAAK,EAAE,QAAS,EAAC;IAClB;IACD,UAAU;IACV;GACD,EAAC,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,gBAAgB,KAAK;AACpC,YAAQ,MAAM,aAAa,EAAE,EAAE,KAAK,EAAE;AACtC,YAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;GAC9E,EAAC;EACH,EAAC;MAEF,YAAW;CAEd,EAAC;AAEF,UAAS,iBACP,SACA,CAAC,UAAU;EACT,MAAM,KAAK,MAAM;EACjB,MAAM,YAAY,IAAI,WAAW,kBAAkB,SAAS,GAAG,IAAI;EACnE,MAAM,aAAa,cAAc,SAAS,SAAS,GAAW;AAE9D,MAAI,WAAW;AACb,SAAM,gBAAgB;AACtB,WAAQ,eAAe;EACxB;AACD,MAAI,UACF,SAAQ,aAAa;CAExB,GACD,KACD;AACF"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"popover-D59x0S-P.js","names":["event: MouseEvent","open","event: KeyboardEvent"],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["// Thanks to Designsystemet:\n// https://github.com/digdir/designsystemet/blob/8aa6dc274e5b0338d15572f44b5dd3fab6fa4eb1/packages/react/src/components/Popover/Popover.tsx\n\nimport { autoUpdate, computePosition, flip, offset, shift, hide } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\nimport { Slot } from '@radix-ui/react-slot';\nimport cl from 'clsx/lite';\nimport { use, useRef, useState } from 'react';\nimport type { HTMLAttributes, Ref } from 'react';\nimport { useEffect } from 'react';\nimport type { DefaultProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { useMergeRefs } from '../../utilities/hooks';\nimport { Context } from './popover-trigger-context';\nimport '@oddbird/popover-polyfill';\n\nconst padding = 20;\n\nexport type PopoverProps = MergeRight<\n DefaultProps & HTMLAttributes<HTMLDivElement>,\n {\n /**\n * `id` to connect the trigger with the popover - required when not using PopoverContext.\n */\n id?: string;\n /**\n * Placement of the popover on the trigger.\n * @default 'top'\n */\n placement?: Placement;\n /**\n * When a boolean is provided, the popover will be controlled.\n * @default undefined\n */\n open?: boolean;\n /**\n * Callback when the popover wants to open.\n */\n onOpen?: () => void;\n /**\n * Callback when the popover wants to close.\n */\n onClose?: () => void;\n /**\n * Whether to disable auto placement.\n * @default false\n */\n disableAutoPlacement?: boolean;\n /**\n * Additional middleware to use for positioning the popover.\n *\n * @example\n * Prevent the popover from overflowing the navbar by using the `size` middleware:\n * ```ts\n * positionMiddleware={[\n * size({\n * apply: ({ availableHeight, elements, ...state }) => {\n * const available = `${Math.max(0, availableHeight)}px`;\n * const maxHeight = state.placement.includes('top')\n * ? `calc(${available} - var(--bi-layout-navbar-height, 0))`\n * : available;\n * elements.floating.style.maxHeight = maxHeight;\n * },\n * padding,\n * })\n * ]}\n * ```\n */\n positionMiddleware?: Middleware[];\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n ref?: Ref<HTMLDivElement>;\n }\n>;\n\n/**\n * Popover component, used to display content in a popover over an element.\n *\n * @example with TriggerContext\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n *\n * @example without TriggerContext\n * <Button popovertarget=\"my-popover\">Open Popover</Button>\n * <Popover id=\"my-popover\">\n * Content\n * </Popover>\n */\nexport const Popover = ({\n id,\n className,\n onClose,\n onOpen,\n open,\n placement = 'top',\n disableAutoPlacement = false,\n positionMiddleware = [],\n dark = false,\n asChild = false,\n ref,\n ...rest\n}: PopoverProps) => {\n const Component = asChild ? Slot : 'div';\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const mergedRefs = useMergeRefs([popoverRef, ref]);\n const { popoverId, setPopoverId } = use(Context);\n const [internalOpen, setInternalOpen] = useState(false);\n const controlledOpen = open ?? internalOpen;\n\n // NOTE: This code is purely to add React controlled component ability to Popover API\n useEffect(() => {\n const popover = popoverRef.current;\n const handleClick = (event: MouseEvent) => {\n const el = event.target as Element | null;\n const isTrigger = el?.closest?.(`[popovertarget=\"${popover?.id}\"]`);\n const isOutside = !isTrigger && !popover?.contains(el as Node);\n\n if (isTrigger) {\n event.preventDefault(); // Prevent native Popover API\n setInternalOpen((open) => !open);\n onOpen?.();\n }\n if (isOutside) {\n setInternalOpen(false);\n onClose?.();\n }\n };\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !controlledOpen) return;\n event.preventDefault(); // Prevent closing fullscreen in Safari\n setInternalOpen(false);\n onClose?.();\n };\n\n popover?.togglePopover?.(controlledOpen);\n document.addEventListener('click', handleClick, true); // Use capture to execute before React event API\n document.addEventListener('keydown', handleKeydown);\n return () => {\n document.removeEventListener('click', handleClick, true);\n document.removeEventListener('keydown', handleKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controlledOpen]);\n\n useEffect(() => {\n const popover = popoverRef.current;\n const trigger = document.querySelector(`[popovertarget=\"${popover?.id}\"]`);\n\n if (popover && trigger && controlledOpen)\n return autoUpdate(trigger, popover, () => {\n computePosition(trigger, popover, {\n middleware: [\n offset(padding),\n ...(disableAutoPlacement ? [] : [flip({ padding }), shift({ padding })]),\n ...positionMiddleware,\n hide({ padding, strategy: 'escaped' }),\n ],\n strategy: 'fixed',\n placement,\n }).then(({ x, y, middlewareData }) => {\n popover.style.translate = `${x}px ${y}px`;\n popover.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';\n });\n });\n }, [controlledOpen, placement, id, disableAutoPlacement, positionMiddleware]);\n\n // Update context with id\n useEffect(() => {\n if (id) setPopoverId?.(id);\n }, [id, setPopoverId]);\n\n return (\n <Component\n className={cl('bi-popover', className)}\n id={id || popoverId}\n popover='manual'\n data-dark={dark}\n ref={mergedRefs}\n {...rest}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,UAAU;;;;;;;;;;;;;;;;;;AA+EhB,MAAa,UAAU,CAAC,EACtB,IACA,WACA,SACA,QACA,MACA,YAAY,OACZ,uBAAuB,OACvB,qBAAqB,CAAE,GACvB,OAAO,OACP,UAAU,OACV,IACA,GAAG,MACU,KAAK;CAClB,MAAM,YAAY,UAAU,OAAO;CAEnC,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,aAAa,aAAa,CAAC,YAAY,GAAI,EAAC;CAClD,MAAM,EAAE,WAAW,cAAc,GAAG,IAAI,QAAQ;CAChD,MAAM,CAAC,cAAc,gBAAgB,GAAG,SAAS,MAAM;CACvD,MAAM,iBAAiB,QAAQ;AAG/B,WAAU,MAAM;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,cAAc,CAACA,UAAsB;GACzC,MAAM,KAAK,MAAM;GACjB,MAAM,YAAY,IAAI,WAAW,kBAAkB,SAAS,GAAG,IAAI;GACnE,MAAM,aAAa,cAAc,SAAS,SAAS,GAAW;AAE9D,OAAI,WAAW;AACb,UAAM,gBAAgB;AACtB,oBAAgB,CAACC,YAAUA,OAAK;AAChC,cAAU;GACX;AACD,OAAI,WAAW;AACb,oBAAgB,MAAM;AACtB,eAAW;GACZ;EACF;EAED,MAAM,gBAAgB,CAACC,UAAyB;AAC9C,OAAI,MAAM,QAAQ,aAAa,eAAgB;AAC/C,SAAM,gBAAgB;AACtB,mBAAgB,MAAM;AACtB,cAAW;EACZ;AAED,WAAS,gBAAgB,eAAe;AACxC,WAAS,iBAAiB,SAAS,aAAa,KAAK;AACrD,WAAS,iBAAiB,WAAW,cAAc;AACnD,SAAO,MAAM;AACX,YAAS,oBAAoB,SAAS,aAAa,KAAK;AACxD,YAAS,oBAAoB,WAAW,cAAc;EACvD;CAEF,GAAE,CAAC,cAAe,EAAC;AAEpB,WAAU,MAAM;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,UAAU,SAAS,eAAe,kBAAkB,SAAS,GAAG,IAAI;AAE1E,MAAI,WAAW,WAAW,eACxB,QAAO,WAAW,SAAS,SAAS,MAAM;AACxC,mBAAgB,SAAS,SAAS;IAChC,YAAY;KACV,OAAO,QAAQ;KACf,GAAI,uBAAuB,CAAE,IAAG,CAAC,KAAK,EAAE,QAAS,EAAC,EAAE,MAAM,EAAE,QAAS,EAAC,AAAC;KACvE,GAAG;KACH,KAAK;MAAE;MAAS,UAAU;KAAW,EAAC;IACvC;IACD,UAAU;IACV;GACD,EAAC,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,gBAAgB,KAAK;AACpC,YAAQ,MAAM,aAAa,EAAE,EAAE,KAAK,EAAE;AACtC,YAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;GAC9E,EAAC;EACH,EAAC;CACL,GAAE;EAAC;EAAgB;EAAW;EAAI;EAAsB;CAAmB,EAAC;AAG7E,WAAU,MAAM;AACd,MAAI,GAAI,gBAAe,GAAG;CAC3B,GAAE,CAAC,IAAI,YAAa,EAAC;AAEtB,wBACE,IAAC;EACC,WAAW,KAAG,cAAc,UAAU;EACtC,IAAI,MAAM;EACV,SAAQ;EACR,aAAW;EACX,KAAK;EACL,GAAI;GACJ;AAEL"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"popover-trigger-context-CdMmRbFv.js","names":[],"sources":["../src/components/popover/popover-trigger-context.tsx"],"sourcesContent":["import { createContext, useId, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const Context = createContext<{\n popoverId?: string;\n setPopoverId?: (id: string) => void;\n}>({});\n\nexport type PopoverTriggerContextProps = {\n children: ReactNode;\n};\n\n/**\n * PopoverTriggerContext component, use to wrap a PopoverTrigger and Popover.\n *\n * @example\n * <PopoverTriggerContext>\n * <PopoverTrigger>Open Popover</PopoverTrigger>\n * <Popover>\n * Content\n * </Popover>\n * </PopoverTriggerContext>\n */\nexport const PopoverTriggerContext = ({ children }: PopoverTriggerContextProps) => {\n const randomPopoverId = useId();\n const [popoverId, setPopoverId] = useState(randomPopoverId);\n\n return <Context value={{ popoverId, setPopoverId }}>{children}</Context>;\n};\n"],"mappings":";;;;AAGA,MAAa,UAAU,cAGpB,CAAE,EAAC;;;;;;;;;;;;AAiBN,MAAa,wBAAwB,CAAC,EAAE,UAAsC,KAAK;CACjF,MAAM,kBAAkB,OAAO;CAC/B,MAAM,CAAC,WAAW,aAAa,GAAG,SAAS,gBAAgB;AAE3D,wBAAO,IAAC;EAAQ,OAAO;GAAE;GAAW;EAAc;EAAG;GAAmB;AACzE"}