@uva-glass/component-library 1.18.0 → 1.20.0

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,76 @@
+import { jsxs as M, jsx as R } from "react/jsx-runtime";
+import { useRef as y, useState as E, useCallback as b, useEffect as p } from "react";
+import '../../assets/Tooltip.css';const j = "_tooltip_small_g4g5w_8", I = "_tooltip_medium_g4g5w_9", N = "_tooltip_large_g4g5w_10", f = {
+  "tooltip-container": "_tooltip-container_g4g5w_1",
+  tooltip_small: j,
+  tooltip_medium: I,
+  tooltip_large: N,
+  "tooltip_under-trigger": "_tooltip_under-trigger_g4g5w_64"
+};
+function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s = !1 }) {
+  const l = y(null), c = y(null), [i, o] = E(!1), [d, x] = E({ top: 0, left: 0 }), g = n === "small" && 20 || n === "large" && 35 || 27, m = n === "small" && 25 || n === "large" && 70 || 47, e = b(() => {
+    if (l.current && c.current) {
+      const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(), a = window.scrollY, O = window.scrollX;
+      let r = t.top + a + g - h.height;
+      const B = t.left + O + m + (t.width - h.width) / 2;
+      r -= a, r < 0 && (r = t.bottom + a), x({ top: r, left: B });
+    }
+  }, [m, g]), u = b(
+    (t) => {
+      t.key === "Escape" && o(!1);
+    },
+    [o]
+  );
+  function w() {
+    o(!0);
+  }
+  function v() {
+    o(!1);
+  }
+  function C() {
+    o(!i);
+  }
+  return p(() => {
+    if (!l.current)
+      return;
+    const t = l.current;
+    return t.addEventListener("keyup", u, !0), () => {
+      t.removeEventListener("keyup", u, !0);
+    };
+  }, [u]), p(() => (e(), window.addEventListener("resize", e), () => {
+    window.removeEventListener("resize", e);
+  }), [e]), p(() => {
+    i && !s && e();
+  }, [i, s, e]), /* @__PURE__ */ M(
+    "div",
+    {
+      className: f["tooltip-container"],
+      onBlur: v,
+      onFocus: w,
+      onMouseEnter: w,
+      onMouseLeave: v,
+      onMouseUp: C,
+      ref: l,
+      role: "button",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children: L }),
+        i && /* @__PURE__ */ R(
+          "span",
+          {
+            ref: c,
+            className: s ? f["tooltip_under-trigger"] : f[`tooltip_${n}`],
+            id: _,
+            role: "tooltip",
+            style: s ? {} : { top: d.top, left: d.left },
+            children: k
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Y as Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n  element: ReactNode;\n  id: string;\n  text: string;\n  size?: 'small' | 'medium' | 'large';\n  openUnderTrigger?: boolean;\n}\n\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  /* eslint-disable @typescript-eslint/no-magic-numbers */\n  const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n  const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n  /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n  const calculatePosition = useCallback(() => {\n    if (containerRef.current && tooltipRef.current) {\n      const triggerRect = containerRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const scrollY = window.scrollY;\n      const scrollX = window.scrollX;\n      let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n      // Adjust top position to account for page scrolling\n      top -= scrollY;\n\n      // Position tooltip below if it would be above the viewport\n      if (top < 0) {\n        top = triggerRect.bottom + scrollY;\n      }\n\n      setPosition({ top, left });\n    }\n  }, [leftOffset, topOffset]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  function show() {\n    setIsOpen(true);\n  }\n\n  function hide() {\n    setIsOpen(false);\n  }\n\n  function toggle() {\n    if (isOpen) setIsOpen(false);\n    else setIsOpen(true);\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const tooltipContainerRef = containerRef.current;\n\n    tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n    return () => {\n      tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n    };\n  }, [onKeyUp]);\n\n  useEffect(() => {\n    calculatePosition();\n    window.addEventListener('resize', calculatePosition);\n    return () => {\n      window.removeEventListener('resize', calculatePosition);\n    };\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    // Recalculate position when isOpen changes\n    if (isOpen && !openUnderTrigger) {\n      calculatePosition();\n    }\n  }, [isOpen, openUnderTrigger, calculatePosition]);\n\n  return (\n    <div\n      className={styles['tooltip-container']}\n      onBlur={hide}\n      onFocus={show}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onMouseUp={toggle}\n      ref={containerRef}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n      {isOpen && (\n        <span\n          ref={tooltipRef}\n          className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n          id={id}\n          role=\"tooltip\"\n          style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n        >\n          {text}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Tooltip","element","id","text","size","openUnderTrigger","containerRef","useRef","tooltipRef","isOpen","setIsOpen","useState","position","setPosition","topOffset","leftOffset","calculatePosition","useCallback","triggerRect","tooltipRect","scrollY","scrollX","top","left","onKeyUp","event","show","hide","toggle","useEffect","tooltipContainerRef","jsxs","styles","jsx"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from './Tooltip';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, TooltipProps>;
+export default _default;
+export declare const TooltipExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TooltipProps>;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Tooltip as e } from "./Tooltip.js";
+import { Container as r } from "../storyComponents/Container/Container.js";
+const s = {
+  title: "Atoms/Tooltip",
+  component: e,
+  argTypes: {
+    element: {
+      control: "text"
+    },
+    // Disable openUnderTrigger controls as this as this is a Lens specific prop that we should not use in other places.
+    // This is still needed until Lens structure is reworked.
+    openUnderTrigger: {
+      table: {
+        disable: !0
+      }
+    }
+  }
+}, i = (o) => /* @__PURE__ */ t(r, { centerContent: !0, children: /* @__PURE__ */ t(e, { ...o }) }), n = i.bind({});
+n.args = {
+  element: "Tooltip Trigger",
+  id: "52fcc9e9",
+  text: "Here is your Tooltip"
+};
+export {
+  n as TooltipExample,
+  s as default
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/components/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TooltipProps } from './Tooltip';\n\nimport { Tooltip } from './Tooltip';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Tooltip',\n  component: Tooltip,\n  argTypes: {\n    element: {\n      control: 'text',\n    },\n    // Disable openUnderTrigger controls as this as this is a Lens specific prop that we should not use in other places.\n    // This is still needed until Lens structure is reworked.\n    openUnderTrigger: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<TooltipProps>;\n\nconst Template: StoryFn<TooltipProps> = (args) => (\n  <Container centerContent>\n    <Tooltip {...args} />\n  </Container>\n);\n\nexport const TooltipExample = Template.bind({});\nTooltipExample.args = {\n  element: 'Tooltip Trigger',\n  id: '52fcc9e9',\n  text: 'Here is your Tooltip',\n};\n"],"names":["Tooltip_stories","Tooltip","Template","args","jsx","Container","TooltipExample"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAkC,CAACC,MACtC,gBAAAC,EAAAC,GAAA,EAAU,eAAa,IACtB,UAAC,gBAAAD,EAAAH,GAAA,EAAS,GAAGE,EAAM,CAAA,EACrB,CAAA,GAGWG,IAAiBJ,EAAS,KAAK,EAAE;AAC9CI,EAAe,OAAO;AAAA,EACpB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AACR;"}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,5 @@
+import { Tooltip as r } from "./Tooltip.js";
+export {
+  r as Tooltip
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/index.d.ts

@@ -11,9 +11,11 @@ export * from './InputField';
 export * from './Label';
 export * from './MenuLink';
 export * from './MetaDataList';
+export * from './ModalDialog';
 export * from './OverlayCloseButton';
 export * from './RadioButton';
 export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';
 export * from './Spinner';
+export * from './Tooltip';

package/dist/components/index.js

@@ -1,42 +1,46 @@
 import { AppStatusBar as t } from "./AppStatusBar/AppStatusBar.js";
 import { Backdrop as p } from "./Backdrop/Backdrop.js";
 import { Button as x } from "./Button/Button.js";
-import { Card as n } from "./Card/Card.js";
+import { Card as a } from "./Card/Card.js";
 import { FieldHint as i } from "./FieldHint/FieldHint.js";
-import { Icon as c } from "./Icon/Icon.js";
-import { IconButton as s } from "./IconButton/IconButton.js";
+import { Icon as s } from "./Icon/Icon.js";
+import { IconButton as c } from "./IconButton/IconButton.js";
 import { InfoMessage as B } from "./InfoMessage/InfoMessage.js";
-import { Input as I } from "./Input/Input.js";
-import { InputField as M } from "./InputField/InputField.js";
-import { Label as k } from "./Label/Label.js";
-import { M as C } from "../MenuLink-DDAin3rf.js";
-import { MetaDataList as g } from "./MetaDataList/MetaDataList.js";
-import { OverlayCloseButton as A } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { RadioButton as H } from "./RadioButton/RadioButton.js";
-import { SectionNotification as O } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as R } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as j, useSelect as q } from "./SelectListbox/SelectProvider.js";
-import { Spinner as z } from "./Spinner/Spinner.js";
+import { Input as S } from "./Input/Input.js";
+import { InputField as L } from "./InputField/InputField.js";
+import { Label as g } from "./Label/Label.js";
+import { M as v } from "../MenuLink-CLEqkVVh.js";
+import { MetaDataList as D } from "./MetaDataList/MetaDataList.js";
+import { M as y } from "../ModalDialog-yEr_JLht.js";
+import { OverlayCloseButton as H } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { RadioButton as O } from "./RadioButton/RadioButton.js";
+import { SectionNotification as R } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as h } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as q, useSelect as w } from "./SelectListbox/SelectProvider.js";
+import { Spinner as E } from "./Spinner/Spinner.js";
+import { Tooltip as J } from "./Tooltip/Tooltip.js";
 export {
   t as AppStatusBar,
   p as Backdrop,
   x as Button,
-  n as Card,
+  a as Card,
   i as FieldHint,
-  c as Icon,
-  s as IconButton,
+  s as Icon,
+  c as IconButton,
   B as InfoMessage,
-  I as Input,
-  M as InputField,
-  k as Label,
-  C as MenuLink,
-  g as MetaDataList,
-  A as OverlayCloseButton,
-  H as RadioButton,
-  O as SectionNotification,
-  R as SelectListbox,
-  j as SelectProvider,
-  z as Spinner,
-  q as useSelect
+  S as Input,
+  L as InputField,
+  g as Label,
+  v as MenuLink,
+  D as MetaDataList,
+  y as ModalDialog,
+  H as OverlayCloseButton,
+  O as RadioButton,
+  R as SectionNotification,
+  h as SelectListbox,
+  q as SelectProvider,
+  E as Spinner,
+  J as Tooltip,
+  w as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/storyComponents/Container/Container.d.ts

@@ -3,6 +3,8 @@ import { PropsWithChildren } from 'react';
 interface ContainerProps {
     size?: 'small' | 'medium' | 'large';
     visible?: boolean;
+    centerContent?: boolean;
+    padded?: boolean;
 }
-export declare const Container: ({ children, size, visible }: PropsWithChildren<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, size, centerContent, visible, padded, }: PropsWithChildren<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/storyComponents/Container/Container.js

@@ -1,28 +1,38 @@
-import { jsxs as t, Fragment as o, jsx as r } from "react/jsx-runtime";
-import { c } from "../../../clsx-DB4S2d7J.js";
-import '../../../assets/Container.css';const d = "_container_u74kd_1", n = {
-  container: d,
-  "container--small": "_container--small_u74kd_8",
-  "container--medium": "_container--medium_u74kd_13",
-  "container--large": "_container--large_u74kd_18",
-  "container--hidden": "_container--hidden_u74kd_23"
-}, _ = ({ children: a, size: e = "medium", visible: i = !0 }) => /* @__PURE__ */ t(o, { children: [
-  /* @__PURE__ */ r("label", { htmlFor: "container", children: "Storybook container with 1rem padding" }),
+import { jsxs as i, Fragment as m, jsx as r } from "react/jsx-runtime";
+import { c as d } from "../../../clsx-DB4S2d7J.js";
+import '../../../assets/Container.css';const l = "_container_11my7_1", n = {
+  container: l,
+  "container--padded": "_container--padded_11my7_7",
+  "container--small": "_container--small_11my7_11",
+  "container--medium": "_container--medium_11my7_16",
+  "container--large": "_container--large_11my7_21",
+  "container--hidden": "_container--hidden_11my7_26",
+  "container--centered-content": "_container--centered-content_11my7_30"
+}, u = ({
+  children: a,
+  size: e = "medium",
+  centerContent: o = !1,
+  visible: c = !0,
+  padded: t = !0
+}) => /* @__PURE__ */ i(m, { children: [
+  /* @__PURE__ */ r("label", { htmlFor: "container", children: t ? "Storybook container with 1rem padding" : "Storybook container" }),
   /* @__PURE__ */ r(
     "div",
     {
       id: "container",
-      className: c(n.container, {
+      className: d(n.container, {
         [n["container--small"]]: e === "small",
         [n["container--medium"]]: e === "medium",
         [n["container--large"]]: e === "large",
-        [n["container--hidden"]]: !i
+        [n["container--padded"]]: t,
+        [n["container--centered-content"]]: o,
+        [n["container--hidden"]]: !c
       }),
       children: a
     }
   )
 ] });
 export {
-  _ as Container
+  u as Container
 };
 //# sourceMappingURL=Container.js.map

package/dist/components/storyComponents/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/storyComponents/Container/Container.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large';\n  visible?: boolean;\n}\n\nexport const Container = ({ children, size = 'medium', visible = true }: PropsWithChildren<ContainerProps>) => {\n  return (\n    <>\n      <label htmlFor=\"container\">Storybook container with 1rem padding</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["Container","children","size","visible","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;;;;GAWaA,IAAY,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,IAAU,SAG3D,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAA,SAAA,EAAM,SAAQ,aAAY,UAAqC,yCAAA;AAAA,EAChE,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAWC,EAAKC,EAAO,WAAc;AAAA,QACnC,CAACA,EAAO,kBAAkB,CAAC,GAAGN,MAAS;AAAA,QACvC,CAACM,EAAO,mBAAmB,CAAC,GAAGN,MAAS;AAAA,QACxC,CAACM,EAAO,kBAAkB,CAAC,GAAGN,MAAS;AAAA,QACvC,CAACM,EAAO,mBAAmB,CAAC,GAAG,CAACL;AAAA,MAAA,CACjC;AAAA,MAEA,UAAAF;AAAA,IAAA;AAAA,EACH;AACF,EAAA,CAAA;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/storyComponents/Container/Container.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large';\n  visible?: boolean;\n  centerContent?: boolean;\n  padded?: boolean;\n}\n\nexport const Container = ({\n  children,\n  size = 'medium',\n  centerContent = false,\n  visible = true,\n  padded = true,\n}: PropsWithChildren<ContainerProps>) => {\n  const label = padded ? 'Storybook container with 1rem padding' : 'Storybook container';\n\n  return (\n    <>\n      <label htmlFor=\"container\">{label}</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--padded']]: padded,\n          [styles['container--centered-content']]: centerContent,\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["Container","children","size","centerContent","visible","padded","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;;;;;;GAaaA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAAA,EAChB,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AACX,MAKM,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAA,SAAA,EAAM,SAAQ,aAAa,UAJlBH,IAAS,0CAA0C,uBAI3B;AAAA,EAClC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAWC,EAAKC,EAAO,WAAc;AAAA,QACnC,CAACA,EAAO,kBAAkB,CAAC,GAAGR,MAAS;AAAA,QACvC,CAACQ,EAAO,mBAAmB,CAAC,GAAGR,MAAS;AAAA,QACxC,CAACQ,EAAO,kBAAkB,CAAC,GAAGR,MAAS;AAAA,QACvC,CAACQ,EAAO,mBAAmB,CAAC,GAAGL;AAAA,QAC/B,CAACK,EAAO,6BAA6B,CAAC,GAAGP;AAAA,QACzC,CAACO,EAAO,mBAAmB,CAAC,GAAG,CAACN;AAAA,MAAA,CACjC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EACH;AACF,EAAA,CAAA;"}