@uva-glass/component-library 3.15.1 → 3.15.2

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.
@@ -1 +1 @@
1
- ._page-overlay__container_13hmc_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_13hmc_1{background:var(--color-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_13hmc_19{width:100vw}._page-overlay--with-gutters_13hmc_23{max-width:87.5rem;width:100%}._page-overlay__content_13hmc_28{background-color:var(--color-grey-100);display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__children_13hmc_40{padding-bottom:1rem}._page-overlay__title_13hmc_44{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_13hmc_51{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_13hmc_51:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_13hmc_77:before{opacity:1}._page-overlay__close_13hmc_81{position:relative;right:1rem;bottom:2.625rem}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_13hmc_23{margin:0 .75rem}}
1
+ ._page-overlay__container_1dv9m_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_1dv9m_1{background:var(--color-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_1dv9m_18{width:100vw}._page-overlay--with-gutters_1dv9m_22{max-width:87.5rem;width:100%}._page-overlay__content_1dv9m_27{background-color:var(--color-grey-100);display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__children_1dv9m_39{padding-bottom:1rem}._page-overlay__title-wrapper_1dv9m_43{position:relative}._page-overlay__title_1dv9m_43{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_1dv9m_54{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_1dv9m_54:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_1dv9m_80:before{opacity:1}._page-overlay__close_1dv9m_85{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_1dv9m_22{margin:0 .75rem}}
@@ -1,94 +1,95 @@
1
- import { jsx as e, Fragment as d, jsxs as _ } from "react/jsx-runtime";
1
+ import { jsx as o, Fragment as j, jsxs as c } from "react/jsx-runtime";
2
2
  import { useDialog as A } from "@react-aria/dialog";
3
3
  import { FocusScope as C } from "@react-aria/focus";
4
4
  import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
5
5
  import { c as i } from "../../clsx-OuTLNxxd.js";
6
- import { useRef as h, useState as f, useEffect as $ } from "react";
6
+ import { useRef as y, useState as f, useEffect as $ } from "react";
7
7
  import { OverlayCloseButton as q } from "../OverlayCloseButton/OverlayCloseButton.js";
8
8
  import { Spinner as G } from "../Spinner/Spinner.js";
9
9
  import { Backdrop as J } from "../Backdrop/Backdrop.js";
10
- import '../../assets/PageOverlay.css';const o = {
11
- "page-overlay__container": "_page-overlay__container_13hmc_1",
12
- "page-overlay": "_page-overlay_13hmc_1",
13
- "page-overlay--full-screen": "_page-overlay--full-screen_13hmc_19",
14
- "page-overlay--with-gutters": "_page-overlay--with-gutters_13hmc_23",
15
- "page-overlay__content": "_page-overlay__content_13hmc_28",
16
- "page-overlay__children": "_page-overlay__children_13hmc_40",
17
- "page-overlay__title": "_page-overlay__title_13hmc_44",
18
- "page-overlay__buttons-bar": "_page-overlay__buttons-bar_13hmc_51",
19
- "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_13hmc_77",
20
- "page-overlay__close": "_page-overlay__close_13hmc_81"
10
+ import '../../assets/PageOverlay.css';const e = {
11
+ "page-overlay__container": "_page-overlay__container_1dv9m_1",
12
+ "page-overlay": "_page-overlay_1dv9m_1",
13
+ "page-overlay--full-screen": "_page-overlay--full-screen_1dv9m_18",
14
+ "page-overlay--with-gutters": "_page-overlay--with-gutters_1dv9m_22",
15
+ "page-overlay__content": "_page-overlay__content_1dv9m_27",
16
+ "page-overlay__children": "_page-overlay__children_1dv9m_39",
17
+ "page-overlay__title-wrapper": "_page-overlay__title-wrapper_1dv9m_43",
18
+ "page-overlay__title": "_page-overlay__title_1dv9m_43",
19
+ "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1dv9m_54",
20
+ "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1dv9m_80",
21
+ "page-overlay__close": "_page-overlay__close_1dv9m_85"
21
22
  };
22
- function le({
23
+ function ae({
23
24
  buttons: t,
24
- children: b,
25
- isLoading: w,
26
- spinnerAriaValueText: S = "Loading",
27
- closeButtonAriaValueText: P = "Close",
28
- isOpen: l,
25
+ children: h,
26
+ isLoading: b,
27
+ spinnerAriaValueText: w = "Loading",
28
+ closeButtonAriaValueText: S = "Close",
29
+ isOpen: a,
29
30
  noValidate: N = !1,
30
31
  onClose: p,
31
- onSubmit: T,
32
+ onSubmit: P,
32
33
  title: s,
33
- headerContent: c,
34
- variant: m = "full-screen"
34
+ headerContent: n,
35
+ variant: v = "full-screen"
35
36
  }) {
36
- const n = h(null), v = h(null), [E, x] = f(!1), [L, B] = f(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, n), { modalProps: k } = K({ isDisabled: !l }), { overlayProps: z, underlayProps: D } = M({ isOpen: l, onClose: p }, n);
37
- U({ isDisabled: !l }), $(() => {
38
- const r = v.current;
37
+ const _ = y(null), m = y(null), [T, E] = f(!1), [x, L] = f(!1), { dialogProps: B, titleProps: F } = A({ role: "dialog" }, _), { modalProps: H } = K({ isDisabled: !a }), { overlayProps: k, underlayProps: z } = M({ isOpen: a, onClose: p }, _);
38
+ U({ isDisabled: !a }), $(() => {
39
+ const r = m.current;
39
40
  if (!r) return;
40
- function g() {
41
- const u = r.scrollHeight, y = r.clientHeight, j = r.scrollTop;
42
- x(u > y), B(j + y >= u);
41
+ function d() {
42
+ const g = r.scrollHeight, u = r.clientHeight, R = r.scrollTop;
43
+ E(g > u), L(R + u >= g);
43
44
  }
44
- function a() {
45
- g();
45
+ function l() {
46
+ d();
46
47
  }
47
- r.addEventListener("scroll", a), window.addEventListener("resize", a);
48
- const R = setTimeout(() => {
49
- g();
48
+ r.addEventListener("scroll", l), window.addEventListener("resize", l);
49
+ const I = setTimeout(() => {
50
+ d();
50
51
  }, 0);
51
52
  return () => {
52
- r.removeEventListener("scroll", a), window.removeEventListener("resize", a), clearTimeout(R);
53
+ r.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(I);
53
54
  };
54
- }, [l, c]);
55
- function I(r) {
55
+ }, [a, n]);
56
+ function D(r) {
56
57
  r.stopPropagation();
57
58
  }
58
- return l ? /* @__PURE__ */ e(V, { className: o["page-overlay__container"], children: /* @__PURE__ */ e(J, { ...D, children: w ? /* @__PURE__ */ e(G, { ariaValueText: S }) : /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
59
+ return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(J, { ...z, children: b ? /* @__PURE__ */ o(G, { ariaValueText: w }) : /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
59
60
  "div",
60
61
  {
61
- ...F,
62
+ ...B,
63
+ ...H,
62
64
  ...k,
63
- ...z,
64
- className: i(o["page-overlay"], {
65
- [o[`page-overlay--${m}`]]: m
65
+ className: i(e["page-overlay"], {
66
+ [e[`page-overlay--${v}`]]: v
66
67
  }),
67
- onKeyUp: I,
68
+ onKeyUp: D,
68
69
  role: "presentation",
69
- ref: n,
70
+ ref: _,
70
71
  children: [
71
- (s || c) && /* @__PURE__ */ _(d, { children: [
72
- s && /* @__PURE__ */ e("h1", { ...H, className: o["page-overlay__title"], children: s }),
73
- c,
74
- /* @__PURE__ */ e("span", { className: o["page-overlay__close"], children: /* @__PURE__ */ e(q, { "aria-label": P, onClick: p }) })
72
+ (s || n) && /* @__PURE__ */ c("div", { className: e["page-overlay__title-wrapper"], children: [
73
+ s && /* @__PURE__ */ o("h1", { ...F, className: e["page-overlay__title"], children: s }),
74
+ n,
75
+ /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(q, { "aria-label": S, onClick: p }) })
75
76
  ] }),
76
- /* @__PURE__ */ _(
77
+ /* @__PURE__ */ c(
77
78
  "form",
78
79
  {
79
- className: i(o["page-overlay__content"], {
80
- [o["page-overlay--content-with-buttons"]]: t
80
+ className: i(e["page-overlay__content"], {
81
+ [e["page-overlay--content-with-buttons"]]: t
81
82
  }),
82
- onSubmit: T,
83
+ onSubmit: P,
83
84
  noValidate: N,
84
- ref: v,
85
+ ref: m,
85
86
  children: [
86
- /* @__PURE__ */ e("div", { className: o["page-overlay__children"], children: b }),
87
- t && /* @__PURE__ */ e(
87
+ /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: h }),
88
+ t && /* @__PURE__ */ o(
88
89
  "div",
89
90
  {
90
- className: i(o["page-overlay__buttons-bar"], {
91
- [o["page-overlay__buttons-bar--shadow"]]: E && !L
91
+ className: i(e["page-overlay__buttons-bar"], {
92
+ [e["page-overlay__buttons-bar--shadow"]]: T && !x
92
93
  }),
93
94
  children: t
94
95
  }
@@ -101,6 +102,6 @@ function le({
101
102
  ) }) }) }) }) : null;
102
103
  }
103
104
  export {
104
- le as PageOverlay
105
+ ae as PageOverlay
105
106
  };
106
107
  //# sourceMappingURL=PageOverlay.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames, { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\nimport { Backdrop } from 'components/Backdrop';\n\nexport interface PageOverlayProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant styling of the dialog. */\n variant?: 'full-screen' | 'with-gutters';\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n buttons,\n children,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n title,\n headerContent,\n variant = 'full-screen',\n}: PropsWithChildren<PageOverlayProps>) {\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n if (!formElement) return;\n\n function checkScrollable() {\n const scrollHeight = formElement!.scrollHeight;\n const clientHeight = formElement!.clientHeight;\n const scrollTop = formElement!.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer className={styles['page-overlay__container']}>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={clsx(styles['page-overlay'], {\n [styles[`page-overlay--${variant}`]]: variant,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['page-overlay__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {\n <span className={styles['page-overlay__close']}>\n <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onClose} />\n </span>\n }\n </>\n )}\n <form\n className={classNames(styles['page-overlay__content'], {\n [styles['page-overlay--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={styles['page-overlay__children']}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['page-overlay__buttons-bar'], {\n [styles['page-overlay__buttons-bar--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["PageOverlay","buttons","children","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","title","headerContent","variant","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","styles","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","OverlayCloseButton","classNames"],"mappings":"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"}
1
+ {"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames, { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\nimport { Backdrop } from 'components/Backdrop';\n\nexport interface PageOverlayProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant styling of the dialog. */\n variant?: 'full-screen' | 'with-gutters';\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n buttons,\n children,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n title,\n headerContent,\n variant = 'full-screen',\n}: PropsWithChildren<PageOverlayProps>) {\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n if (!formElement) return;\n\n function checkScrollable() {\n const scrollHeight = formElement!.scrollHeight;\n const clientHeight = formElement!.clientHeight;\n const scrollTop = formElement!.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer className={styles['page-overlay__container']}>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={clsx(styles['page-overlay'], {\n [styles[`page-overlay--${variant}`]]: variant,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && (\n <div className={styles['page-overlay__title-wrapper']}>\n {title && (\n <h1 {...titleProps} className={styles['page-overlay__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {\n <span className={styles['page-overlay__close']}>\n <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onClose} />\n </span>\n }\n </div>\n )}\n <form\n className={classNames(styles['page-overlay__content'], {\n [styles['page-overlay--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={styles['page-overlay__children']}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['page-overlay__buttons-bar'], {\n [styles['page-overlay__buttons-bar--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["PageOverlay","buttons","children","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","title","headerContent","variant","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","styles","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","OverlayCloseButton","classNames"],"mappings":"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"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "3.15.1",
5
+ "version": "3.15.2",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",