@bi-digital/react 0.12.2 → 0.12.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.
Files changed (231) hide show
  1. package/dist/{alert-footer-Yb_zpMhd.d.mts → alert-footer-BoTu7E1s.d.mts} +194 -605
  2. package/dist/components/alert/alert-footer.d.mts +1 -1
  3. package/dist/components/alert/alert-footer.mjs.map +1 -1
  4. package/dist/components/alert/alert.d.mts +1 -1
  5. package/dist/components/alert/alert.mjs +1 -1
  6. package/dist/components/alert/alert.mjs.map +1 -1
  7. package/dist/components/alert/index.d.mts +2 -2
  8. package/dist/components/avatar/avatar.d.mts +1 -1
  9. package/dist/components/avatar/avatar.mjs.map +1 -1
  10. package/dist/components/avatar/index.d.mts +2 -2
  11. package/dist/components/badge/badge.d.mts +1 -1
  12. package/dist/components/badge/badge.mjs.map +1 -1
  13. package/dist/components/badge/index.d.mts +2 -2
  14. package/dist/components/button/button.d.mts +1 -1
  15. package/dist/components/button/button.mjs.map +1 -1
  16. package/dist/components/button/index.d.mts +2 -2
  17. package/dist/components/card/card-action.d.mts +1 -1
  18. package/dist/components/card/card-action.mjs.map +1 -1
  19. package/dist/components/card/card-actions.d.mts +1 -1
  20. package/dist/components/card/card-actions.mjs.map +1 -1
  21. package/dist/components/card/card-content.d.mts +1 -1
  22. package/dist/components/card/card-content.mjs.map +1 -1
  23. package/dist/components/card/card-date.d.mts +1 -1
  24. package/dist/components/card/card-date.mjs.map +1 -1
  25. package/dist/components/card/card-header.d.mts +1 -1
  26. package/dist/components/card/card-header.mjs.map +1 -1
  27. package/dist/components/card/card-media.d.mts +1 -1
  28. package/dist/components/card/card-media.mjs.map +1 -1
  29. package/dist/components/card/card.d.mts +1 -1
  30. package/dist/components/card/card.mjs.map +1 -1
  31. package/dist/components/card/index.d.mts +2 -2
  32. package/dist/components/checkbox/checkbox-subsection.d.mts +1 -1
  33. package/dist/components/checkbox/checkbox-subsection.mjs.map +1 -1
  34. package/dist/components/checkbox/checkbox.d.mts +1 -1
  35. package/dist/components/checkbox/checkbox.mjs.map +1 -1
  36. package/dist/components/checkbox/index.d.mts +2 -2
  37. package/dist/components/chip/chip.d.mts +1 -1
  38. package/dist/components/chip/chip.mjs.map +1 -1
  39. package/dist/components/chip/index.d.mts +2 -2
  40. package/dist/components/details/details-content.d.mts +1 -1
  41. package/dist/components/details/details-content.mjs.map +1 -1
  42. package/dist/components/details/details-summary.d.mts +1 -1
  43. package/dist/components/details/details-summary.mjs.map +1 -1
  44. package/dist/components/details/details.d.mts +1 -1
  45. package/dist/components/details/details.mjs.map +1 -1
  46. package/dist/components/details/index.d.mts +2 -2
  47. package/dist/components/dialog/dialog-close-button.d.mts +1 -1
  48. package/dist/components/dialog/dialog-close-button.mjs.map +1 -1
  49. package/dist/components/dialog/dialog-content.d.mts +1 -1
  50. package/dist/components/dialog/dialog-content.mjs.map +1 -1
  51. package/dist/components/dialog/dialog-footer.d.mts +1 -1
  52. package/dist/components/dialog/dialog-footer.mjs.map +1 -1
  53. package/dist/components/dialog/dialog-header.d.mts +1 -1
  54. package/dist/components/dialog/dialog-header.mjs.map +1 -1
  55. package/dist/components/dialog/dialog-trigger-context.d.mts +1 -1
  56. package/dist/components/dialog/dialog-trigger-context.mjs.map +1 -1
  57. package/dist/components/dialog/dialog-trigger.d.mts +1 -1
  58. package/dist/components/dialog/dialog-trigger.mjs.map +1 -1
  59. package/dist/components/dialog/dialog.d.mts +1 -1
  60. package/dist/components/dialog/dialog.mjs.map +1 -1
  61. package/dist/components/dialog/index.d.mts +3 -3
  62. package/dist/components/dropdown/dropdown-button.d.mts +1 -1
  63. package/dist/components/dropdown/dropdown-button.mjs.map +1 -1
  64. package/dist/components/dropdown/dropdown-item.d.mts +1 -1
  65. package/dist/components/dropdown/dropdown-item.mjs.map +1 -1
  66. package/dist/components/dropdown/dropdown-list.d.mts +1 -1
  67. package/dist/components/dropdown/dropdown-list.mjs.map +1 -1
  68. package/dist/components/dropdown/dropdown-trigger-context.d.mts +1 -1
  69. package/dist/components/dropdown/dropdown-trigger-context.mjs.map +1 -1
  70. package/dist/components/dropdown/dropdown-trigger.d.mts +1 -1
  71. package/dist/components/dropdown/dropdown-trigger.mjs.map +1 -1
  72. package/dist/components/dropdown/dropdown.d.mts +1 -1
  73. package/dist/components/dropdown/dropdown.mjs.map +1 -1
  74. package/dist/components/dropdown/index.d.mts +4 -4
  75. package/dist/components/field/field-affix.d.mts +1 -1
  76. package/dist/components/field/field-affix.mjs.map +1 -1
  77. package/dist/components/field/field-description.d.mts +1 -1
  78. package/dist/components/field/field-description.mjs.map +1 -1
  79. package/dist/components/field/field.d.mts +1 -1
  80. package/dist/components/field/field.mjs.map +1 -1
  81. package/dist/components/field/index.d.mts +2 -2
  82. package/dist/components/fieldset/fieldset-description.d.mts +1 -1
  83. package/dist/components/fieldset/fieldset-description.mjs.map +1 -1
  84. package/dist/components/fieldset/fieldset-legend.d.mts +1 -1
  85. package/dist/components/fieldset/fieldset-legend.mjs.map +1 -1
  86. package/dist/components/fieldset/fieldset.d.mts +1 -1
  87. package/dist/components/fieldset/fieldset.mjs.map +1 -1
  88. package/dist/components/fieldset/index.d.mts +2 -2
  89. package/dist/components/filter-group/filter-group.d.mts +1 -1
  90. package/dist/components/filter-group/filter-group.mjs.map +1 -1
  91. package/dist/components/filter-group/index.d.mts +2 -2
  92. package/dist/components/footer/footer-links.d.mts +1 -1
  93. package/dist/components/footer/footer-links.mjs.map +1 -1
  94. package/dist/components/footer/footer.d.mts +1 -1
  95. package/dist/components/footer/footer.mjs.map +1 -1
  96. package/dist/components/footer/index.d.mts +3 -3
  97. package/dist/components/index.d.mts +9 -9
  98. package/dist/components/input/index.d.mts +2 -2
  99. package/dist/components/input/input.d.mts +1 -1
  100. package/dist/components/input/input.mjs.map +1 -1
  101. package/dist/components/label/index.d.mts +2 -2
  102. package/dist/components/label/label.d.mts +1 -1
  103. package/dist/components/label/label.mjs.map +1 -1
  104. package/dist/components/link/index.d.mts +2 -2
  105. package/dist/components/link/link.d.mts +1 -1
  106. package/dist/components/link/link.mjs +1 -2
  107. package/dist/components/link/link.mjs.map +1 -1
  108. package/dist/components/logo/index.d.mts +2 -2
  109. package/dist/components/logo/logo.d.mts +1 -1
  110. package/dist/components/logo/logo.mjs.map +1 -1
  111. package/dist/components/navbar/index.d.mts +2 -2
  112. package/dist/components/navbar/navbar.d.mts +1 -1
  113. package/dist/components/navbar/navbar.mjs.map +1 -1
  114. package/dist/components/navbar/sub-navbar.d.mts +1 -1
  115. package/dist/components/navbar/sub-navbar.mjs.map +1 -1
  116. package/dist/components/pagination/index.d.mts +3 -3
  117. package/dist/components/pagination/pagination-button.d.mts +1 -1
  118. package/dist/components/pagination/pagination-button.mjs.map +1 -1
  119. package/dist/components/pagination/pagination-item.d.mts +1 -1
  120. package/dist/components/pagination/pagination-item.mjs.map +1 -1
  121. package/dist/components/pagination/pagination.d.mts +1 -1
  122. package/dist/components/pagination/pagination.mjs.map +1 -1
  123. package/dist/components/popover/index.d.mts +3 -3
  124. package/dist/components/popover/popover-trigger-context.d.mts +1 -1
  125. package/dist/components/popover/popover-trigger-context.mjs +2 -1
  126. package/dist/components/popover/popover-trigger-context.mjs.map +1 -1
  127. package/dist/components/popover/popover-trigger.d.mts +1 -1
  128. package/dist/components/popover/popover-trigger.mjs +9 -7
  129. package/dist/components/popover/popover-trigger.mjs.map +1 -1
  130. package/dist/components/popover/popover.d.mts +1 -1
  131. package/dist/components/popover/popover.mjs.map +1 -1
  132. package/dist/components/radio/index.d.mts +2 -2
  133. package/dist/components/radio/radio.d.mts +1 -1
  134. package/dist/components/radio/radio.mjs.map +1 -1
  135. package/dist/components/search/index.d.mts +2 -2
  136. package/dist/components/search/search.d.mts +1 -1
  137. package/dist/components/search/search.mjs.map +1 -1
  138. package/dist/components/select/index.d.mts +2 -2
  139. package/dist/components/select/select-optgroup.d.mts +1 -1
  140. package/dist/components/select/select-optgroup.mjs.map +1 -1
  141. package/dist/components/select/select-option.d.mts +1 -1
  142. package/dist/components/select/select-option.mjs.map +1 -1
  143. package/dist/components/select/select.d.mts +1 -1
  144. package/dist/components/select/select.mjs.map +1 -1
  145. package/dist/components/selectfield/index.d.mts +2 -2
  146. package/dist/components/selectfield/selectfield.d.mts +1 -1
  147. package/dist/components/selectfield/selectfield.mjs.map +1 -1
  148. package/dist/components/skip-link/index.d.mts +2 -2
  149. package/dist/components/skip-link/skip-link.d.mts +1 -1
  150. package/dist/components/skip-link/skip-link.mjs.map +1 -1
  151. package/dist/components/spinner/index.d.mts +2 -2
  152. package/dist/components/spinner/spinner.d.mts +1 -1
  153. package/dist/components/spinner/spinner.mjs +1 -2
  154. package/dist/components/spinner/spinner.mjs.map +1 -1
  155. package/dist/components/sticky-header/index.d.mts +3 -2
  156. package/dist/components/sticky-header/sticky-header.d.mts +1 -1
  157. package/dist/components/sticky-header/sticky-header.mjs.map +1 -1
  158. package/dist/components/switch/index.d.mts +2 -2
  159. package/dist/components/switch/switch.d.mts +1 -1
  160. package/dist/components/switch/switch.mjs.map +1 -1
  161. package/dist/components/tabs/index.d.mts +2 -2
  162. package/dist/components/tabs/tab.d.mts +1 -1
  163. package/dist/components/tabs/tab.mjs.map +1 -1
  164. package/dist/components/tabs/tabs-list.d.mts +1 -1
  165. package/dist/components/tabs/tabs-list.mjs.map +1 -1
  166. package/dist/components/tabs/tabs-panel.d.mts +1 -1
  167. package/dist/components/tabs/tabs-panel.mjs.map +1 -1
  168. package/dist/components/tabs/tabs.d.mts +1 -1
  169. package/dist/components/tabs/tabs.mjs.map +1 -1
  170. package/dist/components/textarea/index.d.mts +2 -2
  171. package/dist/components/textarea/textarea.d.mts +1 -1
  172. package/dist/components/textarea/textarea.mjs.map +1 -1
  173. package/dist/components/textfield/index.d.mts +2 -2
  174. package/dist/components/textfield/textfield.d.mts +1 -1
  175. package/dist/components/textfield/textfield.mjs.map +1 -1
  176. package/dist/components/tooltip/index.d.mts +2 -2
  177. package/dist/components/tooltip/tooltip.d.mts +1 -1
  178. package/dist/components/tooltip/tooltip.mjs.map +1 -1
  179. package/dist/components/validation-message/index.d.mts +2 -2
  180. package/dist/components/validation-message/validation-message.d.mts +1 -1
  181. package/dist/components/validation-message/validation-message.mjs.map +1 -1
  182. package/dist/{dialog-trigger-context-DbUhxoNL.d.mts → dialog-trigger-context-Orqo_NHj.d.mts} +3 -8
  183. package/dist/{dropdown-item-bA64wFOZ.d.mts → dropdown-item-B6Ahk6en.d.mts} +2 -7
  184. package/dist/{dropdown-list-CaYz-O1j.d.mts → dropdown-list-CXM9VhRl.d.mts} +2 -7
  185. package/dist/{footer-links-DwBghNrz.d.mts → footer-links-Dk977Qoi.d.mts} +2 -9
  186. package/dist/index-CaxrMD1A.d.mts +1 -0
  187. package/dist/index-Dqg5-Rt-.d.mts +1 -0
  188. package/dist/main.d.mts +15 -15
  189. package/dist/{pagination-item-DJicBrIN.d.mts → pagination-item-DqbKxAHU.d.mts} +2 -9
  190. package/dist/{popover-trigger-context-BLjAozBn.d.mts → popover-trigger-context-DeCbAC6V.d.mts} +3 -10
  191. package/dist/react-types.d.ts +43 -1
  192. package/dist/{sticky-header-CVfE0TUC.d.mts → sticky-header-BXlBWEWo.d.mts} +2 -6
  193. package/dist/{types-C0q7hMe_.d.mts → types-BoBDvyAZ.d.mts} +1 -2
  194. package/dist/{types-74lJC5tL.d.mts → types-oMo2uOVa.d.mts} +1 -1
  195. package/dist/types.d.mts +1 -1
  196. package/dist/{useCheckboxGroup-Boc_tLJ3.d.mts → useCheckboxGroup-BTzX7PfS.d.mts} +4 -7
  197. package/dist/{useIsElementAboveViewport-Cxt9TwLS.d.mts → useIsElementAboveViewport-Db7ndg3S.d.mts} +1 -2
  198. package/dist/{useIsomorphicLayoutEffect-DXCY5AxR.d.mts → useIsomorphicLayoutEffect-D-Mi76vH.d.mts} +1 -2
  199. package/dist/{useMediaQuery-Di0fXraw.d.mts → useMediaQuery-c1R0kas_.d.mts} +2 -5
  200. package/dist/{useScrollDirection-6pq5a8B3.d.mts → useScrollDirection-DS9Rfs_K.d.mts} +1 -1
  201. package/dist/utilities/hooks/index.d.mts +7 -7
  202. package/dist/utilities/hooks/useCheckboxGroup/useCheckboxGroup.d.mts +1 -1
  203. package/dist/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mjs.map +1 -1
  204. package/dist/utilities/hooks/useIsElementAboveViewport/useIsElementAboveViewport.d.mts +1 -1
  205. package/dist/utilities/hooks/useIsElementAboveViewport/useIsElementAboveViewport.mjs.map +1 -1
  206. package/dist/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.mts +1 -1
  207. package/dist/utilities/hooks/useMediaQuery/useMediaQuery.d.mts +1 -1
  208. package/dist/utilities/hooks/useMediaQuery/useMediaQuery.mjs +2 -4
  209. package/dist/utilities/hooks/useMediaQuery/useMediaQuery.mjs.map +1 -1
  210. package/dist/utilities/hooks/useMergeRefs/useMergeRefs.d.mts +0 -1
  211. package/dist/utilities/hooks/useMergeRefs/useMergeRefs.mjs.map +1 -1
  212. package/dist/utilities/hooks/usePagination/usePagination.d.mts +1 -1
  213. package/dist/utilities/hooks/usePagination/usePagination.mjs.map +1 -1
  214. package/dist/utilities/hooks/useScrollDirection/useScrollDirection.d.mts +1 -1
  215. package/dist/utilities/hooks/useScrollDirection/useScrollDirection.mjs.map +1 -1
  216. package/dist/utilities/index.d.mts +8 -8
  217. package/dist/utilities/types.d.mts +1 -1
  218. package/dist/vanilla/dropdown/index.d.mts +3 -9
  219. package/dist/vanilla/dropdown/index.mjs.map +1 -1
  220. package/dist/vanilla/index.d.mts +1 -0
  221. package/dist/vanilla/popover/index.d.mts +3 -9
  222. package/dist/vanilla/popover/index.mjs +1 -3
  223. package/dist/vanilla/popover/index.mjs.map +1 -1
  224. package/dist/vanilla/sub-navbar/index.d.mts +1 -3
  225. package/dist/vanilla/sub-navbar/index.mjs.map +1 -1
  226. package/dist/vanilla/tooltip/index.d.mts +1 -1
  227. package/dist/vanilla/tooltip/index.mjs.map +1 -1
  228. package/dist/vite-env.d.mts +1 -1
  229. package/package.json +19 -19
  230. package/dist/index-D9zIjQH9.d.mts +0 -1
  231. package/dist/index-Dc-SdpIe.d.mts +0 -1
@@ -1,8 +1,8 @@
1
1
  import { Middleware, Placement } from "@floating-ui/dom";
2
-
3
2
  //#region src/vanilla/dropdown/index.d.ts
4
3
  type InitDropdownOptions = {
5
- /** The id of the dropdown to initialize. The trigger element should have a `aria-controls` attribute with the same id. */id: string;
4
+ /** The id of the dropdown to initialize. The trigger element should have a `aria-controls` attribute with the same id. */
5
+ id: string;
6
6
  /**
7
7
  * Placement of the dropdown relative to the trigger.
8
8
  * @default 'bottom'
@@ -45,13 +45,7 @@ type InitDropdownOptions = {
45
45
  * @param options - InitDropdownOptions
46
46
  * @returns A function to programmatically toggle the dropdown.
47
47
  */
48
- declare const initDropdown: ({
49
- id,
50
- disableAutoPlacement,
51
- placement,
52
- positionMiddleware,
53
- padding
54
- }: InitDropdownOptions) => ((open: boolean) => void) | undefined;
48
+ declare const initDropdown: ({ id, disableAutoPlacement, placement, positionMiddleware, padding }: InitDropdownOptions) => ((open: boolean) => void) | undefined;
55
49
  //#endregion
56
50
  export { InitDropdownOptions, initDropdown };
57
51
  //# sourceMappingURL=index.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/dropdown/index.ts"],"sourcesContent":["import type { Middleware, Placement } from '@floating-ui/dom';\nimport { initPopover } from '../popover';\n\nexport type InitDropdownOptions = {\n /** The id of the dropdown to initialize. The trigger element should have a `aria-controls` attribute with the same id. */\n id: string;\n /**\n * Placement of the dropdown relative to the trigger.\n * @default 'bottom'\n */\n placement?: Placement;\n /**\n * Additional middleware to use for positioning the dropdown.\n *\n * @example\n * Prevent the dropdown 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 * The padding used by the `offset` middleware.\n * @default '20'\n */\n padding?: number;\n};\n\n/**\n * Initializes the dropdown.\n * @param options - InitDropdownOptions\n * @returns A function to programmatically toggle the dropdown.\n */\nexport const initDropdown = ({\n id,\n disableAutoPlacement = false,\n placement = 'bottom',\n positionMiddleware = [],\n padding,\n}: InitDropdownOptions) => initPopover({ id, disableAutoPlacement, placement, positionMiddleware, padding });\n"],"mappings":";;;;;;;AAiDA,MAAa,gBAAgB,EAC3B,IACA,uBAAuB,OACvB,YAAY,UACZ,qBAAqB,EAAE,EACvB,cACyB,YAAY;CAAE;CAAI;CAAsB;CAAW;CAAoB;CAAS,CAAC"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/dropdown/index.ts"],"sourcesContent":["import type { Middleware, Placement } from '@floating-ui/dom';\nimport { initPopover } from '../popover';\n\nexport type InitDropdownOptions = {\n /** The id of the dropdown to initialize. The trigger element should have a `aria-controls` attribute with the same id. */\n id: string;\n /**\n * Placement of the dropdown relative to the trigger.\n * @default 'bottom'\n */\n placement?: Placement;\n /**\n * Additional middleware to use for positioning the dropdown.\n *\n * @example\n * Prevent the dropdown 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 * The padding used by the `offset` middleware.\n * @default '20'\n */\n padding?: number;\n};\n\n/**\n * Initializes the dropdown.\n * @param options - InitDropdownOptions\n * @returns A function to programmatically toggle the dropdown.\n */\nexport const initDropdown = ({\n id,\n disableAutoPlacement = false,\n placement = 'bottom',\n positionMiddleware = [],\n padding,\n}: InitDropdownOptions) => initPopover({ id, disableAutoPlacement, placement, positionMiddleware, padding });\n"],"mappings":";;;;;;;AAiDA,MAAa,gBAAgB,EAC3B,IACA,uBAAuB,OACvB,YAAY,UACZ,qBAAqB,CAAC,GACtB,cACyB,YAAY;CAAE;CAAI;CAAsB;CAAW;CAAoB;AAAQ,CAAC"}
@@ -1,4 +1,5 @@
1
1
  import { InitDropdownOptions, initDropdown } from "./dropdown/index.mjs";
2
2
  import { InitPopoverOptions, arrowPseudoElement, initPopover } from "./popover/index.mjs";
3
3
  import { InitSubNavbarOptions, initSubNavbar } from "./sub-navbar/index.mjs";
4
+ import "@digdir/designsystemet-web";
4
5
  export { InitDropdownOptions, InitPopoverOptions, InitSubNavbarOptions, arrowPseudoElement, initDropdown, initPopover, initSubNavbar };
@@ -1,8 +1,8 @@
1
1
  import { Middleware, Placement } from "@floating-ui/dom";
2
-
3
2
  //#region src/vanilla/popover/index.d.ts
4
3
  type InitPopoverOptions = {
5
- /** The id of the popover to initialize. The trigger element should have a `aria-controls` attribute with the same id. */id: string;
4
+ /** The id of the popover to initialize. The trigger element should have a `aria-controls` attribute with the same id. */
5
+ id: string;
6
6
  /**
7
7
  * Placement of the popover relative to the trigger.
8
8
  * @default 'top'
@@ -45,13 +45,7 @@ type InitPopoverOptions = {
45
45
  * @param options - InitPopoverOptions
46
46
  * @returns A function to programmatically toggle the popover.
47
47
  */
48
- declare const initPopover: ({
49
- id,
50
- disableAutoPlacement,
51
- placement,
52
- positionMiddleware,
53
- padding
54
- }: InitPopoverOptions) => ((open: boolean) => void) | undefined;
48
+ declare const initPopover: ({ id, disableAutoPlacement, placement, positionMiddleware, padding }: InitPopoverOptions) => ((open: boolean) => void) | undefined;
55
49
  declare const arrowPseudoElement: Middleware;
56
50
  //#endregion
57
51
  export { InitPopoverOptions, arrowPseudoElement, initPopover };
@@ -68,9 +68,7 @@ const arrowPseudoElement = {
68
68
  case "bottom":
69
69
  arrowY = "0";
70
70
  break;
71
- case "left":
72
- arrowX = "100%";
73
- break;
71
+ case "left": arrowX = "100%";
74
72
  }
75
73
  elements.floating.setAttribute("data-placement", placement.split("-")[0]);
76
74
  elements.floating.style.setProperty("--bic-popover-arrow-x", arrowX);
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/popover/index.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift, hide, size } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\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 * The padding used by the `offset` middleware.\n * @default '20'\n */\n padding?: number;\n};\n\n/**\n * Initializes the popover.\n * @param options - InitPopoverOptions\n * @returns A function to programmatically toggle the popover.\n */\nexport const initPopover = ({\n id,\n disableAutoPlacement = false,\n placement = 'top',\n positionMiddleware = [],\n padding = 20,\n}: InitPopoverOptions) => {\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 ...(popover.dataset.arrow === 'true' ? [arrowPseudoElement] : []),\n size({\n apply({ rects, elements }) {\n elements.floating.style.setProperty('--bic-popover-trigger-width', `${rects.reference.width}px`);\n },\n }),\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 return togglePopover;\n};\n\nexport const arrowPseudoElement: Middleware = {\n name: 'ArrowPseudoElement',\n fn(data) {\n const { elements, rects, placement } = data;\n\n let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;\n let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;\n\n if (rects.reference.width > rects.floating.width) {\n arrowX = `${Math.round(rects.floating.width / 2)}px`;\n }\n\n if (rects.reference.height > rects.floating.height) {\n arrowY = `${Math.round(rects.floating.height / 2)}px`;\n }\n\n switch (placement.split('-')[0]) {\n case 'top':\n arrowY = '100%';\n break;\n case 'right':\n arrowX = '0';\n break;\n case 'bottom':\n arrowY = '0';\n break;\n case 'left':\n arrowX = '100%';\n break;\n }\n\n elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom\n elements.floating.style.setProperty('--bic-popover-arrow-x', arrowX);\n elements.floating.style.setProperty('--bic-popover-arrow-y', arrowY);\n return data;\n },\n};\n"],"mappings":";;;;;;;AAiDA,MAAa,eAAe,EAC1B,IACA,uBAAuB,OACvB,YAAY,OACZ,qBAAqB,EAAE,EACvB,UAAU,SACc;CACxB,IAAI;CACJ,MAAM,UAAU,SAAS,eAAe,GAAG;CAC3C,MAAM,kBAAkB,mBAAmB,GAAG;CAC9C,MAAM,UAAU,SAAS,cAAc,gBAAgB;CAEvD,IAAI,CAAC,WAAW,CAAC,SAAS;CAE1B,MAAM,iBAAiB,SAAkB;EACvC,IAAI,MAAM;GACR,UAAU,WAAW,SAAS,eAAe;IAC3C,gBAAgB,SAAS,SAAS;KAChC,YAAY;MACV,OAAO,QAAQ;MACf,GAAI,uBAAuB,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;MACvE,GAAG;MACH,KAAK,EAAE,SAAS,CAAC;MACjB,GAAI,QAAQ,QAAQ,UAAU,SAAS,CAAC,mBAAmB,GAAG,EAAE;MAChE,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;OACzB,SAAS,SAAS,MAAM,YAAY,+BAA+B,GAAG,MAAM,UAAU,MAAM,IAAI;SAEnG,CAAC;MACH;KACD,UAAU;KACV;KACD,CAAC,CAAC,MAAM,EAAE,GAAG,GAAG,qBAAqB;KACpC,QAAQ,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE;KACtC,QAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;MAC7E;KACF;GACF,QAAQ,aAAa,eAAe,QAAQ;GAC5C,QAAQ,aAAa,iBAAiB,OAAO;SACxC;GACL,WAAW;GACX,QAAQ,aAAa,eAAe,OAAO;GAC3C,QAAQ,aAAa,iBAAiB,QAAQ;;;CAIlD,SAAS,iBACP,UACC,UAAU;EACT,MAAM,KAAK,MAAM;EACjB,MAAM,YAAY,IAAI,UAAU,gBAAgB;EAChD,MAAM,YAAY,CAAC,aAAa,CAAC,QAAQ,SAAS,GAAW;EAC7D,MAAM,SAAS,QAAQ,aAAa,cAAc,KAAK;EAEvD,IAAI,WACF,cAAc,CAAC,OAAO;EAExB,IAAI,aAAa,QACf,cAAc,MAAM;IAGxB,KACD;CAED,OAAO;;AAGT,MAAa,qBAAiC;CAC5C,MAAM;CACN,GAAG,MAAM;EACP,MAAM,EAAE,UAAU,OAAO,cAAc;EAEvC,IAAI,SAAS,GAAG,KAAK,MAAM,MAAM,UAAU,QAAQ,IAAI,MAAM,UAAU,IAAI,KAAK,EAAE,CAAC;EACnF,IAAI,SAAS,GAAG,KAAK,MAAM,MAAM,UAAU,SAAS,IAAI,MAAM,UAAU,IAAI,KAAK,EAAE,CAAC;EAEpF,IAAI,MAAM,UAAU,QAAQ,MAAM,SAAS,OACzC,SAAS,GAAG,KAAK,MAAM,MAAM,SAAS,QAAQ,EAAE,CAAC;EAGnD,IAAI,MAAM,UAAU,SAAS,MAAM,SAAS,QAC1C,SAAS,GAAG,KAAK,MAAM,MAAM,SAAS,SAAS,EAAE,CAAC;EAGpD,QAAQ,UAAU,MAAM,IAAI,CAAC,IAA7B;GACE,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS;IACT;;EAGJ,SAAS,SAAS,aAAa,kBAAkB,UAAU,MAAM,IAAI,CAAC,GAAG;EACzE,SAAS,SAAS,MAAM,YAAY,yBAAyB,OAAO;EACpE,SAAS,SAAS,MAAM,YAAY,yBAAyB,OAAO;EACpE,OAAO;;CAEV"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/popover/index.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift, hide, size } from '@floating-ui/dom';\nimport type { Middleware, Placement } from '@floating-ui/dom';\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 * The padding used by the `offset` middleware.\n * @default '20'\n */\n padding?: number;\n};\n\n/**\n * Initializes the popover.\n * @param options - InitPopoverOptions\n * @returns A function to programmatically toggle the popover.\n */\nexport const initPopover = ({\n id,\n disableAutoPlacement = false,\n placement = 'top',\n positionMiddleware = [],\n padding = 20,\n}: InitPopoverOptions) => {\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 ...(popover.dataset.arrow === 'true' ? [arrowPseudoElement] : []),\n size({\n apply({ rects, elements }) {\n elements.floating.style.setProperty('--bic-popover-trigger-width', `${rects.reference.width}px`);\n },\n }),\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 return togglePopover;\n};\n\nexport const arrowPseudoElement: Middleware = {\n name: 'ArrowPseudoElement',\n fn(data) {\n const { elements, rects, placement } = data;\n\n let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;\n let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;\n\n if (rects.reference.width > rects.floating.width) {\n arrowX = `${Math.round(rects.floating.width / 2)}px`;\n }\n\n if (rects.reference.height > rects.floating.height) {\n arrowY = `${Math.round(rects.floating.height / 2)}px`;\n }\n\n switch (placement.split('-')[0]) {\n case 'top':\n arrowY = '100%';\n break;\n case 'right':\n arrowX = '0';\n break;\n case 'bottom':\n arrowY = '0';\n break;\n case 'left':\n arrowX = '100%';\n break;\n }\n\n elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom\n elements.floating.style.setProperty('--bic-popover-arrow-x', arrowX);\n elements.floating.style.setProperty('--bic-popover-arrow-y', arrowY);\n return data;\n },\n};\n"],"mappings":";;;;;;;AAiDA,MAAa,eAAe,EAC1B,IACA,uBAAuB,OACvB,YAAY,OACZ,qBAAqB,CAAC,GACtB,UAAU,SACc;CACxB,IAAI;CACJ,MAAM,UAAU,SAAS,eAAe,EAAE;CAC1C,MAAM,kBAAkB,mBAAmB,GAAG;CAC9C,MAAM,UAAU,SAAS,cAAc,eAAe;CAEtD,IAAI,CAAC,WAAW,CAAC,SAAS;CAE1B,MAAM,iBAAiB,SAAkB;EACvC,IAAI,MAAM;GACR,UAAU,WAAW,SAAS,eAAe;IAC3C,gBAAgB,SAAS,SAAS;KAChC,YAAY;MACV,OAAO,OAAO;MACd,GAAI,uBAAuB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;MACtE,GAAG;MACH,KAAK,EAAE,QAAQ,CAAC;MAChB,GAAI,QAAQ,QAAQ,UAAU,SAAS,CAAC,kBAAkB,IAAI,CAAC;MAC/D,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;OACzB,SAAS,SAAS,MAAM,YAAY,+BAA+B,GAAG,MAAM,UAAU,MAAM,GAAG;MACjG,EACF,CAAC;KACH;KACA,UAAU;KACV;IACF,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,GAAG,qBAAqB;KACpC,QAAQ,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE;KACtC,QAAQ,MAAM,aAAa,eAAe,MAAM,kBAAkB,WAAW;IAC/E,CAAC;GACH,CAAC;GACD,QAAQ,aAAa,eAAe,OAAO;GAC3C,QAAQ,aAAa,iBAAiB,MAAM;EAC9C,OAAO;GACL,UAAU;GACV,QAAQ,aAAa,eAAe,MAAM;GAC1C,QAAQ,aAAa,iBAAiB,OAAO;EAC/C;CACF;CAEA,SAAS,iBACP,UACC,UAAU;EACT,MAAM,KAAK,MAAM;EACjB,MAAM,YAAY,IAAI,UAAU,eAAe;EAC/C,MAAM,YAAY,CAAC,aAAa,CAAC,QAAQ,SAAS,EAAU;EAC5D,MAAM,SAAS,QAAQ,aAAa,aAAa,MAAM;EAEvD,IAAI,WACF,cAAc,CAAC,MAAM;EAEvB,IAAI,aAAa,QACf,cAAc,KAAK;CAEvB,GACA,IACF;CAEA,OAAO;AACT;AAEA,MAAa,qBAAiC;CAC5C,MAAM;CACN,GAAG,MAAM;EACP,MAAM,EAAE,UAAU,OAAO,cAAc;EAEvC,IAAI,SAAS,GAAG,KAAK,MAAM,MAAM,UAAU,QAAQ,IAAI,MAAM,UAAU,IAAI,KAAK,CAAC,EAAE;EACnF,IAAI,SAAS,GAAG,KAAK,MAAM,MAAM,UAAU,SAAS,IAAI,MAAM,UAAU,IAAI,KAAK,CAAC,EAAE;EAEpF,IAAI,MAAM,UAAU,QAAQ,MAAM,SAAS,OACzC,SAAS,GAAG,KAAK,MAAM,MAAM,SAAS,QAAQ,CAAC,EAAE;EAGnD,IAAI,MAAM,UAAU,SAAS,MAAM,SAAS,QAC1C,SAAS,GAAG,KAAK,MAAM,MAAM,SAAS,SAAS,CAAC,EAAE;EAGpD,QAAQ,UAAU,MAAM,GAAG,CAAC,CAAC,IAA7B;GACE,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS;IACT;GACF,KAAK;IACH,SAAS;IACT;GACF,KAAK,QACH,SAAS;EAEb;EAEA,SAAS,SAAS,aAAa,kBAAkB,UAAU,MAAM,GAAG,CAAC,CAAC,EAAE;EACxE,SAAS,SAAS,MAAM,YAAY,yBAAyB,MAAM;EACnE,SAAS,SAAS,MAAM,YAAY,yBAAyB,MAAM;EACnE,OAAO;CACT;AACF"}
@@ -15,9 +15,7 @@ type InitSubNavbarOptions = {
15
15
  * @param options Configuration options
16
16
  * @returns Cleanup function to remove all event listeners and observers
17
17
  */
18
- declare const initSubNavbar: ({
19
- selector
20
- }?: InitSubNavbarOptions) => () => void;
18
+ declare const initSubNavbar: ({ selector }?: InitSubNavbarOptions) => () => void;
21
19
  //#endregion
22
20
  export { InitSubNavbarOptions, initSubNavbar };
23
21
  //# sourceMappingURL=index.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/sub-navbar/index.ts"],"sourcesContent":["/**\n * Detects the vertical scroll direction of the page.\n * Returns 'up' | 'down' | null. The direction is only updated if the scroll distance\n * exceeds a 5px threshold to prevent sensitivity to minor scroll jitter.\n */\nclass ScrollDirectionTracker {\n private scrollDirection: 'up' | 'down' | null = null;\n private lastScrollY = window.pageYOffset;\n private callbacks = new Set<(direction: 'up' | 'down' | null) => void>();\n\n constructor() {\n this.updateScrollDirection = this.updateScrollDirection.bind(this);\n window.addEventListener('scroll', this.updateScrollDirection);\n }\n\n private updateScrollDirection() {\n const scrollY = window.pageYOffset;\n const direction = scrollY > this.lastScrollY ? 'down' : 'up';\n\n if (direction !== this.scrollDirection && (scrollY - this.lastScrollY > 5 || scrollY - this.lastScrollY < -5)) {\n this.scrollDirection = direction;\n this.callbacks.forEach((callback) => callback(this.scrollDirection));\n }\n\n this.lastScrollY = scrollY > 0 ? scrollY : 0;\n }\n\n subscribe(callback: (direction: 'up' | 'down' | null) => void) {\n this.callbacks.add(callback);\n return () => this.callbacks.delete(callback);\n }\n\n destroy() {\n window.removeEventListener('scroll', this.updateScrollDirection);\n this.callbacks.clear();\n }\n\n getCurrentDirection() {\n return this.scrollDirection;\n }\n}\n\n/**\n * Detects when an element is scrolled past and is no longer in the viewport.\n */\nclass ElementAboveViewportTracker {\n private isAboveViewport = false;\n private observer: IntersectionObserver;\n private callbacks = new Set<(isAbove: boolean) => void>();\n\n constructor(private element: HTMLElement) {\n this.observer = new IntersectionObserver(\n ([entry]) => {\n const newIsAbove = entry.boundingClientRect.y < 0;\n if (newIsAbove !== this.isAboveViewport) {\n this.isAboveViewport = newIsAbove;\n this.callbacks.forEach((callback) => callback(this.isAboveViewport));\n }\n },\n { threshold: [0] },\n );\n\n this.observer.observe(this.element);\n }\n\n subscribe(callback: (isAbove: boolean) => void) {\n this.callbacks.add(callback);\n return () => this.callbacks.delete(callback);\n }\n\n destroy() {\n this.observer.disconnect();\n this.callbacks.clear();\n }\n\n getIsAboveViewport() {\n return this.isAboveViewport;\n }\n}\n\nexport type InitSubNavbarOptions = {\n /**\n * Custom selector to find sub-navbars.\n * @default '.bi-sub-navbar'\n */\n selector?: string;\n};\n\n/**\n * Initializes all sub-navbars on the page to handle scroll-based behavior.\n * This includes:\n * - Setting data-fixed attribute when the navbar is scrolled past\n * - Setting data-scroll-dir attribute based on scroll direction when fixed\n *\n * @param options Configuration options\n * @returns Cleanup function to remove all event listeners and observers\n */\nexport const initSubNavbar = ({ selector = '.bi-sub-navbar' }: InitSubNavbarOptions = {}) => {\n const subNavbars = document.querySelectorAll<HTMLElement>(selector);\n\n if (subNavbars.length === 0) {\n console.warn(`No elements found with selector: ${selector}`);\n return () => {};\n }\n\n const scrollTracker = new ScrollDirectionTracker();\n const cleanupFunctions: (() => void)[] = [];\n\n subNavbars.forEach((navbar) => {\n const wrapper = navbar.closest('.bi-sub-navbar--wrapper') as HTMLElement;\n if (!wrapper) {\n console.warn('Sub-navbar must be wrapped in an element with class \"bi-sub-navbar--wrapper\"');\n return;\n }\n\n // Find or create the reference element (empty div) that acts as the scroll trigger\n let referenceElement = wrapper.querySelector<HTMLElement>('div:first-child');\n if (!referenceElement || referenceElement === navbar) {\n referenceElement = document.createElement('div');\n wrapper.insertBefore(referenceElement, navbar);\n }\n\n const viewportTracker = new ElementAboveViewportTracker(referenceElement);\n\n // Subscribe to viewport changes\n const unsubscribeViewport = viewportTracker.subscribe((isAbove) => {\n navbar.setAttribute('data-fixed', String(isAbove));\n\n // Only set scroll direction when fixed\n if (isAbove) {\n // A sub-navbar can only become fixed by scrolling down past its origin, so default the\n // direction to 'down' until the tracker reports one. Without this, there is a window on\n // the first scroll (it becomes fixed after ~1px, but the direction only registers after\n // the 5px threshold) where data-fixed is set without data-scroll-dir, which drops the\n // sub-navbar to top:0 underneath a fixed, transparent navbar so both are visible at once.\n const currentDirection = scrollTracker.getCurrentDirection() ?? 'down';\n navbar.setAttribute('data-scroll-dir', currentDirection);\n } else {\n navbar.removeAttribute('data-scroll-dir');\n }\n });\n\n // Subscribe to scroll direction changes\n const unsubscribeScroll = scrollTracker.subscribe((direction) => {\n const isFixed = navbar.getAttribute('data-fixed') === 'true';\n if (isFixed && direction) {\n navbar.setAttribute('data-scroll-dir', direction);\n }\n });\n\n cleanupFunctions.push(() => {\n unsubscribeViewport();\n unsubscribeScroll();\n viewportTracker.destroy();\n });\n });\n\n // Return cleanup function\n return () => {\n cleanupFunctions.forEach((cleanup) => cleanup());\n scrollTracker.destroy();\n };\n};\n"],"mappings":";;;;;;AAKA,IAAM,yBAAN,MAA6B;CAC3B,kBAAgD;CAChD,cAAsB,OAAO;CAC7B,4BAAoB,IAAI,KAAgD;CAExE,cAAc;EACZ,KAAK,wBAAwB,KAAK,sBAAsB,KAAK,KAAK;EAClE,OAAO,iBAAiB,UAAU,KAAK,sBAAsB;;CAG/D,wBAAgC;EAC9B,MAAM,UAAU,OAAO;EACvB,MAAM,YAAY,UAAU,KAAK,cAAc,SAAS;EAExD,IAAI,cAAc,KAAK,oBAAoB,UAAU,KAAK,cAAc,KAAK,UAAU,KAAK,cAAc,KAAK;GAC7G,KAAK,kBAAkB;GACvB,KAAK,UAAU,SAAS,aAAa,SAAS,KAAK,gBAAgB,CAAC;;EAGtE,KAAK,cAAc,UAAU,IAAI,UAAU;;CAG7C,UAAU,UAAqD;EAC7D,KAAK,UAAU,IAAI,SAAS;EAC5B,aAAa,KAAK,UAAU,OAAO,SAAS;;CAG9C,UAAU;EACR,OAAO,oBAAoB,UAAU,KAAK,sBAAsB;EAChE,KAAK,UAAU,OAAO;;CAGxB,sBAAsB;EACpB,OAAO,KAAK;;;;;;AAOhB,IAAM,8BAAN,MAAkC;CAKZ;CAJpB,kBAA0B;CAC1B;CACA,4BAAoB,IAAI,KAAiC;CAEzD,YAAY,SAA8B;EAAtB,KAAA,UAAA;EAClB,KAAK,WAAW,IAAI,sBACjB,CAAC,WAAW;GACX,MAAM,aAAa,MAAM,mBAAmB,IAAI;GAChD,IAAI,eAAe,KAAK,iBAAiB;IACvC,KAAK,kBAAkB;IACvB,KAAK,UAAU,SAAS,aAAa,SAAS,KAAK,gBAAgB,CAAC;;KAGxE,EAAE,WAAW,CAAC,EAAE,EAAE,CACnB;EAED,KAAK,SAAS,QAAQ,KAAK,QAAQ;;CAGrC,UAAU,UAAsC;EAC9C,KAAK,UAAU,IAAI,SAAS;EAC5B,aAAa,KAAK,UAAU,OAAO,SAAS;;CAG9C,UAAU;EACR,KAAK,SAAS,YAAY;EAC1B,KAAK,UAAU,OAAO;;CAGxB,qBAAqB;EACnB,OAAO,KAAK;;;;;;;;;;;;AAqBhB,MAAa,iBAAiB,EAAE,WAAW,qBAA2C,EAAE,KAAK;CAC3F,MAAM,aAAa,SAAS,iBAA8B,SAAS;CAEnE,IAAI,WAAW,WAAW,GAAG;EAC3B,QAAQ,KAAK,oCAAoC,WAAW;EAC5D,aAAa;;CAGf,MAAM,gBAAgB,IAAI,wBAAwB;CAClD,MAAM,mBAAmC,EAAE;CAE3C,WAAW,SAAS,WAAW;EAC7B,MAAM,UAAU,OAAO,QAAQ,0BAA0B;EACzD,IAAI,CAAC,SAAS;GACZ,QAAQ,KAAK,iFAA+E;GAC5F;;EAIF,IAAI,mBAAmB,QAAQ,cAA2B,kBAAkB;EAC5E,IAAI,CAAC,oBAAoB,qBAAqB,QAAQ;GACpD,mBAAmB,SAAS,cAAc,MAAM;GAChD,QAAQ,aAAa,kBAAkB,OAAO;;EAGhD,MAAM,kBAAkB,IAAI,4BAA4B,iBAAiB;EAGzE,MAAM,sBAAsB,gBAAgB,WAAW,YAAY;GACjE,OAAO,aAAa,cAAc,OAAO,QAAQ,CAAC;GAGlD,IAAI,SAAS;IAMX,MAAM,mBAAmB,cAAc,qBAAqB,IAAI;IAChE,OAAO,aAAa,mBAAmB,iBAAiB;UAExD,OAAO,gBAAgB,kBAAkB;IAE3C;EAGF,MAAM,oBAAoB,cAAc,WAAW,cAAc;GAE/D,IADgB,OAAO,aAAa,aAAa,KAAK,UACvC,WACb,OAAO,aAAa,mBAAmB,UAAU;IAEnD;EAEF,iBAAiB,WAAW;GAC1B,qBAAqB;GACrB,mBAAmB;GACnB,gBAAgB,SAAS;IACzB;GACF;CAGF,aAAa;EACX,iBAAiB,SAAS,YAAY,SAAS,CAAC;EAChD,cAAc,SAAS"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/sub-navbar/index.ts"],"sourcesContent":["/**\n * Detects the vertical scroll direction of the page.\n * Returns 'up' | 'down' | null. The direction is only updated if the scroll distance\n * exceeds a 5px threshold to prevent sensitivity to minor scroll jitter.\n */\nclass ScrollDirectionTracker {\n private scrollDirection: 'up' | 'down' | null = null;\n private lastScrollY = window.pageYOffset;\n private callbacks = new Set<(direction: 'up' | 'down' | null) => void>();\n\n constructor() {\n this.updateScrollDirection = this.updateScrollDirection.bind(this);\n window.addEventListener('scroll', this.updateScrollDirection);\n }\n\n private updateScrollDirection() {\n const scrollY = window.pageYOffset;\n const direction = scrollY > this.lastScrollY ? 'down' : 'up';\n\n if (direction !== this.scrollDirection && (scrollY - this.lastScrollY > 5 || scrollY - this.lastScrollY < -5)) {\n this.scrollDirection = direction;\n this.callbacks.forEach((callback) => callback(this.scrollDirection));\n }\n\n this.lastScrollY = scrollY > 0 ? scrollY : 0;\n }\n\n subscribe(callback: (direction: 'up' | 'down' | null) => void) {\n this.callbacks.add(callback);\n return () => this.callbacks.delete(callback);\n }\n\n destroy() {\n window.removeEventListener('scroll', this.updateScrollDirection);\n this.callbacks.clear();\n }\n\n getCurrentDirection() {\n return this.scrollDirection;\n }\n}\n\n/**\n * Detects when an element is scrolled past and is no longer in the viewport.\n */\nclass ElementAboveViewportTracker {\n private isAboveViewport = false;\n private observer: IntersectionObserver;\n private callbacks = new Set<(isAbove: boolean) => void>();\n\n constructor(private element: HTMLElement) {\n this.observer = new IntersectionObserver(\n ([entry]) => {\n const newIsAbove = entry.boundingClientRect.y < 0;\n if (newIsAbove !== this.isAboveViewport) {\n this.isAboveViewport = newIsAbove;\n this.callbacks.forEach((callback) => callback(this.isAboveViewport));\n }\n },\n { threshold: [0] },\n );\n\n this.observer.observe(this.element);\n }\n\n subscribe(callback: (isAbove: boolean) => void) {\n this.callbacks.add(callback);\n return () => this.callbacks.delete(callback);\n }\n\n destroy() {\n this.observer.disconnect();\n this.callbacks.clear();\n }\n\n getIsAboveViewport() {\n return this.isAboveViewport;\n }\n}\n\nexport type InitSubNavbarOptions = {\n /**\n * Custom selector to find sub-navbars.\n * @default '.bi-sub-navbar'\n */\n selector?: string;\n};\n\n/**\n * Initializes all sub-navbars on the page to handle scroll-based behavior.\n * This includes:\n * - Setting data-fixed attribute when the navbar is scrolled past\n * - Setting data-scroll-dir attribute based on scroll direction when fixed\n *\n * @param options Configuration options\n * @returns Cleanup function to remove all event listeners and observers\n */\nexport const initSubNavbar = ({ selector = '.bi-sub-navbar' }: InitSubNavbarOptions = {}) => {\n const subNavbars = document.querySelectorAll<HTMLElement>(selector);\n\n if (subNavbars.length === 0) {\n console.warn(`No elements found with selector: ${selector}`);\n return () => {};\n }\n\n const scrollTracker = new ScrollDirectionTracker();\n const cleanupFunctions: (() => void)[] = [];\n\n subNavbars.forEach((navbar) => {\n const wrapper = navbar.closest('.bi-sub-navbar--wrapper') as HTMLElement;\n if (!wrapper) {\n console.warn('Sub-navbar must be wrapped in an element with class \"bi-sub-navbar--wrapper\"');\n return;\n }\n\n // Find or create the reference element (empty div) that acts as the scroll trigger\n let referenceElement = wrapper.querySelector<HTMLElement>('div:first-child');\n if (!referenceElement || referenceElement === navbar) {\n referenceElement = document.createElement('div');\n wrapper.insertBefore(referenceElement, navbar);\n }\n\n const viewportTracker = new ElementAboveViewportTracker(referenceElement);\n\n // Subscribe to viewport changes\n const unsubscribeViewport = viewportTracker.subscribe((isAbove) => {\n navbar.setAttribute('data-fixed', String(isAbove));\n\n // Only set scroll direction when fixed\n if (isAbove) {\n // A sub-navbar can only become fixed by scrolling down past its origin, so default the\n // direction to 'down' until the tracker reports one. Without this, there is a window on\n // the first scroll (it becomes fixed after ~1px, but the direction only registers after\n // the 5px threshold) where data-fixed is set without data-scroll-dir, which drops the\n // sub-navbar to top:0 underneath a fixed, transparent navbar so both are visible at once.\n const currentDirection = scrollTracker.getCurrentDirection() ?? 'down';\n navbar.setAttribute('data-scroll-dir', currentDirection);\n } else {\n navbar.removeAttribute('data-scroll-dir');\n }\n });\n\n // Subscribe to scroll direction changes\n const unsubscribeScroll = scrollTracker.subscribe((direction) => {\n const isFixed = navbar.getAttribute('data-fixed') === 'true';\n if (isFixed && direction) {\n navbar.setAttribute('data-scroll-dir', direction);\n }\n });\n\n cleanupFunctions.push(() => {\n unsubscribeViewport();\n unsubscribeScroll();\n viewportTracker.destroy();\n });\n });\n\n // Return cleanup function\n return () => {\n cleanupFunctions.forEach((cleanup) => cleanup());\n scrollTracker.destroy();\n };\n};\n"],"mappings":";;;;;;AAKA,IAAM,yBAAN,MAA6B;CAC3B,kBAAgD;CAChD,cAAsB,OAAO;CAC7B,4BAAoB,IAAI,IAA+C;CAEvE,cAAc;EACZ,KAAK,wBAAwB,KAAK,sBAAsB,KAAK,IAAI;EACjE,OAAO,iBAAiB,UAAU,KAAK,qBAAqB;CAC9D;CAEA,wBAAgC;EAC9B,MAAM,UAAU,OAAO;EACvB,MAAM,YAAY,UAAU,KAAK,cAAc,SAAS;EAExD,IAAI,cAAc,KAAK,oBAAoB,UAAU,KAAK,cAAc,KAAK,UAAU,KAAK,cAAc,KAAK;GAC7G,KAAK,kBAAkB;GACvB,KAAK,UAAU,SAAS,aAAa,SAAS,KAAK,eAAe,CAAC;EACrE;EAEA,KAAK,cAAc,UAAU,IAAI,UAAU;CAC7C;CAEA,UAAU,UAAqD;EAC7D,KAAK,UAAU,IAAI,QAAQ;EAC3B,aAAa,KAAK,UAAU,OAAO,QAAQ;CAC7C;CAEA,UAAU;EACR,OAAO,oBAAoB,UAAU,KAAK,qBAAqB;EAC/D,KAAK,UAAU,MAAM;CACvB;CAEA,sBAAsB;EACpB,OAAO,KAAK;CACd;AACF;;;;AAKA,IAAM,8BAAN,MAAkC;CAKZ;CAJpB,kBAA0B;CAC1B;CACA,4BAAoB,IAAI,IAAgC;CAExD,YAAY,SAA8B;EAAtB,KAAA,UAAA;EAClB,KAAK,WAAW,IAAI,sBACjB,CAAC,WAAW;GACX,MAAM,aAAa,MAAM,mBAAmB,IAAI;GAChD,IAAI,eAAe,KAAK,iBAAiB;IACvC,KAAK,kBAAkB;IACvB,KAAK,UAAU,SAAS,aAAa,SAAS,KAAK,eAAe,CAAC;GACrE;EACF,GACA,EAAE,WAAW,CAAC,CAAC,EAAE,CACnB;EAEA,KAAK,SAAS,QAAQ,KAAK,OAAO;CACpC;CAEA,UAAU,UAAsC;EAC9C,KAAK,UAAU,IAAI,QAAQ;EAC3B,aAAa,KAAK,UAAU,OAAO,QAAQ;CAC7C;CAEA,UAAU;EACR,KAAK,SAAS,WAAW;EACzB,KAAK,UAAU,MAAM;CACvB;CAEA,qBAAqB;EACnB,OAAO,KAAK;CACd;AACF;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAAE,WAAW,qBAA2C,CAAC,MAAM;CAC3F,MAAM,aAAa,SAAS,iBAA8B,QAAQ;CAElE,IAAI,WAAW,WAAW,GAAG;EAC3B,QAAQ,KAAK,oCAAoC,UAAU;EAC3D,aAAa,CAAC;CAChB;CAEA,MAAM,gBAAgB,IAAI,uBAAuB;CACjD,MAAM,mBAAmC,CAAC;CAE1C,WAAW,SAAS,WAAW;EAC7B,MAAM,UAAU,OAAO,QAAQ,yBAAyB;EACxD,IAAI,CAAC,SAAS;GACZ,QAAQ,KAAK,gFAA8E;GAC3F;EACF;EAGA,IAAI,mBAAmB,QAAQ,cAA2B,iBAAiB;EAC3E,IAAI,CAAC,oBAAoB,qBAAqB,QAAQ;GACpD,mBAAmB,SAAS,cAAc,KAAK;GAC/C,QAAQ,aAAa,kBAAkB,MAAM;EAC/C;EAEA,MAAM,kBAAkB,IAAI,4BAA4B,gBAAgB;EAGxE,MAAM,sBAAsB,gBAAgB,WAAW,YAAY;GACjE,OAAO,aAAa,cAAc,OAAO,OAAO,CAAC;GAGjD,IAAI,SAAS;IAMX,MAAM,mBAAmB,cAAc,oBAAoB,KAAK;IAChE,OAAO,aAAa,mBAAmB,gBAAgB;GACzD,OACE,OAAO,gBAAgB,iBAAiB;EAE5C,CAAC;EAGD,MAAM,oBAAoB,cAAc,WAAW,cAAc;GAE/D,IADgB,OAAO,aAAa,YAAY,MAAM,UACvC,WACb,OAAO,aAAa,mBAAmB,SAAS;EAEpD,CAAC;EAED,iBAAiB,WAAW;GAC1B,oBAAoB;GACpB,kBAAkB;GAClB,gBAAgB,QAAQ;EAC1B,CAAC;CACH,CAAC;CAGD,aAAa;EACX,iBAAiB,SAAS,YAAY,QAAQ,CAAC;EAC/C,cAAc,QAAQ;CACxB;AACF"}
@@ -1 +1 @@
1
- export { };
1
+ import "../../index-CaxrMD1A.mjs";
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/tooltip/index.ts"],"sourcesContent":["import { setTooltipElement } from '@digdir/designsystemet-web';\n\nif (typeof window !== 'undefined') {\n const biTooltip = document.createElement('div');\n biTooltip.className = 'bi-tooltip';\n setTooltipElement(biTooltip);\n}\n"],"mappings":";;AAEA,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,YAAY,SAAS,cAAc,MAAM;CAC/C,UAAU,YAAY;CACtB,kBAAkB,UAAU"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../src/vanilla/tooltip/index.ts"],"sourcesContent":["import { setTooltipElement } from '@digdir/designsystemet-web';\n\nif (typeof window !== 'undefined') {\n const biTooltip = document.createElement('div');\n biTooltip.className = 'bi-tooltip';\n setTooltipElement(biTooltip);\n}\n"],"mappings":";;AAEA,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,YAAY;CACtB,kBAAkB,SAAS;AAC7B"}
@@ -1 +1 @@
1
- export { };
1
+ export {}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/react",
3
3
  "type": "module",
4
- "version": "0.12.2",
4
+ "version": "0.12.4",
5
5
  "description": "React components from BI Digital",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -36,30 +36,30 @@
36
36
  "access": "public"
37
37
  },
38
38
  "dependencies": {
39
- "@digdir/designsystemet-web": "^1.14.0",
40
- "@floating-ui/dom": "^1.7.6",
41
- "@radix-ui/react-slot": "^1.3.0",
42
- "@radix-ui/react-use-controllable-state": "^1.2.2",
43
- "clsx": "^2.1.1",
44
- "@bi-digital/icons": "0.12.2"
39
+ "@digdir/designsystemet-web": "~1.19.0",
40
+ "@floating-ui/dom": "^1.8.0",
41
+ "@radix-ui/react-slot": "^1.3.3",
42
+ "@radix-ui/react-use-controllable-state": "^1.2.6",
43
+ "clsx": "~2.1.1",
44
+ "@bi-digital/icons": "0.12.4"
45
45
  },
46
46
  "devDependencies": {
47
- "@types/react": "^19.2.14",
48
- "@types/react-dom": "^19.2.3",
49
- "@vitest/browser-playwright": "^4.1.4",
50
- "@vitest/coverage-v8": "^4.1.4",
51
- "@vitest/expect": "^4.1.9",
52
- "playwright": "^1.61.0",
53
- "react": "^19.2.0",
54
- "react-dom": "^19.2.0",
55
- "tsdown": "^0.22.0",
56
- "vitest": "^4.1.4",
57
- "vitest-browser-react": "^2.2.0"
47
+ "@types/react": "^19.2.18",
48
+ "@types/react-dom": "^19.2.4",
49
+ "@vitest/browser-playwright": "4.1.10",
50
+ "@vitest/coverage-v8": "4.1.10",
51
+ "@vitest/expect": "4.1.10",
52
+ "playwright": "1.62.0",
53
+ "react": "^19.2.8",
54
+ "react-dom": "^19.2.8",
55
+ "tsdown": "0.22.14",
56
+ "vitest": "4.1.10",
57
+ "vitest-browser-react": "2.2.0"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "react": "^19",
61
61
  "react-dom": "^19",
62
- "@bi-digital/css": "0.12.2"
62
+ "@bi-digital/css": "0.12.4"
63
63
  },
64
64
  "scripts": {
65
65
  "build": "tsdown",
@@ -1 +0,0 @@
1
- export { };
@@ -1 +0,0 @@
1
- export { };