@uva-glass/component-library 3.20.0 → 3.21.1

package/dist/components/PageOverlay/PageOverlay.js.map

@@ -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                  <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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"}
+{"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  /** The content background color of the dialog. Default grey-300*/\n  contentBackgroundColor?: 'grey' | 'white';\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  contentBackgroundColor = 'grey',\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(\n                    styles['page-overlay__content'],\n                    styles[`page-overlay__content--${contentBackgroundColor}`],\n                    {\n                      [styles['page-overlay--content-with-buttons']]: buttons,\n                    }\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","contentBackgroundColor","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/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { fn as t } from "../../index-BCvy9BiK.js";
+import { fn as t } from "../../index-Dwqes6RH.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as a } from "../../index-BCvy9BiK.js";
+import { fn as a } from "../../index-Dwqes6RH.js";
 import { RadioGroup as o } from "./RadioGroup.js";
 const l = `
   <RadioGroup label={label} options={options} 

package/dist/components/RadioTabSelector/RadioTabSelector.d.ts

@@ -0,0 +1,25 @@
+type ButtonProps = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export interface RadioTabSelectorProps {
+    /** array with objects with label, value, disablestate */
+    buttons: ButtonProps[];
+    /** name of the radiogroup */
+    radioGroupName: string;
+    /** innitial value */
+    defaultValue?: string;
+    /** label takst */
+    label?: string;
+    /** 'top' | 'left' */
+    labelPosition?: 'top' | 'left';
+    /** show red star */
+    required?: boolean;
+    /** error text to display if set */
+    notValidatedText?: string;
+    /** The callback function that is invoked when the radio tab selector changes value. */
+    onSetValue: (value: string | null) => void;
+}
+export declare const RadioTabSelector: ({ buttons, radioGroupName, defaultValue, label, labelPosition, required, notValidatedText, onSetValue, }: RadioTabSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioTabSelector/RadioTabSelector.js

@@ -0,0 +1,89 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { c as b } from "../../clsx-OuTLNxxd.js";
+import { useState as h } from "react";
+import "../Buttons/Button.js";
+import "../Buttons/LinkButton.js";
+import "@react-aria/button";
+import "../Checkbox/Checkbox.js";
+import { Label as v } from "../Label/Label.js";
+import { FeedbackBox as g } from "../FeedbackBox/FeedbackBox.js";
+import { ControlsButton as k } from "../ControlsButton/ControlsButton.js";
+import "@react-aria/dialog";
+import "@react-aria/focus";
+import "@react-aria/overlays";
+import "../OverlayCloseButton/OverlayCloseButton.js";
+import "../GridRow/GridRow.js";
+import "../IconButton/IconButton.js";
+import "../Input/Input.js";
+import "../InputField/InputField.js";
+import "react-router";
+import "../../TablePlugin-hxs9O_ox.js";
+import "../RteEditor/Providers/LanguageProvider.js";
+import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
+import "../RteEditor/hooks/components/Flyout.js";
+import "../../index-DllfJcv4.js";
+import "../SelectListbox/SelectListbox.js";
+import "../SelectListbox/SelectProvider.js";
+import "../Sortable/components/SortableItem.js";
+import "../../SortableProvider-B3_u0pKv.js";
+import '../../assets/RadioTabSelector.css';const t = {
+  "radio-tab-selector-button-bar__container": "_radio-tab-selector-button-bar__container_a4wnc_1",
+  "radio-tab-selector-button-bar__container--label-left": "_radio-tab-selector-button-bar__container--label-left_a4wnc_6",
+  "radio-tab-selector-button-bar__container--label-top": "_radio-tab-selector-button-bar__container--label-top_a4wnc_12",
+  "radio-tab-selector-button-bar__row-container": "_radio-tab-selector-button-bar__row-container_a4wnc_18",
+  "radio-tab-selector-button-bar__row": "_radio-tab-selector-button-bar__row_a4wnc_18",
+  "radio-tab-selector-button-bar__row--not-validated": "_radio-tab-selector-button-bar__row--not-validated_a4wnc_35"
+}, X = ({
+  buttons: l,
+  radioGroupName: c,
+  defaultValue: _,
+  label: i,
+  labelPosition: m = "top",
+  required: s = !1,
+  notValidatedText: a = "",
+  onSetValue: p
+}) => {
+  const [d, u] = h(_ || null), w = (r) => {
+    u(r.target.value), p(r.target.value);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: b(
+        t["radio-tab-selector-button-bar__container"],
+        t[`radio-tab-selector-button-bar__container--label-${m}`]
+      ),
+      children: [
+        i && /* @__PURE__ */ o(v, { htmlFor: "", required: s, children: i }),
+        /* @__PURE__ */ n("div", { className: t["radio-tab-selector-button-bar__row-container"], children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: b(t["radio-tab-selector-button-bar__row"], {
+                [t["radio-tab-selector-button-bar__row--not-validated"]]: a
+              }),
+              children: l.map(({ label: r, value: e, disabled: f }) => /* @__PURE__ */ o(
+                k,
+                {
+                  type: "radio",
+                  name: c,
+                  label: r,
+                  value: e,
+                  checked: d === e,
+                  disabled: f,
+                  onSetValue: w
+                },
+                `${e}`
+              ))
+            }
+          ),
+          a !== "" && /* @__PURE__ */ o(g, { level: "error", feedback: a })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  X as RadioTabSelector
+};
+//# sourceMappingURL=RadioTabSelector.js.map

package/dist/components/RadioTabSelector/RadioTabSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioTabSelector.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\r\nimport { useState } from 'react';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './RadioTabSelector.module.css';\r\n\r\nimport { ControlsButton, FeedbackBox, Label } from 'components';\r\n\r\ntype ButtonProps = {\r\n  label: string;\r\n  value: string;\r\n  disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n  /** array with objects with label, value, disablestate */\r\n  buttons: ButtonProps[];\r\n  /** name of the radiogroup */\r\n  radioGroupName: string;\r\n  /** innitial value */\r\n  defaultValue?: string;\r\n  /** label takst */\r\n  label?: string;\r\n  /** 'top' | 'left' */\r\n  labelPosition?: 'top' | 'left';\r\n  /** show red star */\r\n  required?: boolean;\r\n  /** error text to display if set */\r\n  notValidatedText?: string;\r\n  /** The callback function that is invoked when the radio tab selector changes value. */\r\n  onSetValue: (value: string | null) => void;\r\n}\r\n\r\nexport const RadioTabSelector = ({\r\n  buttons,\r\n  radioGroupName,\r\n  defaultValue,\r\n  label,\r\n  labelPosition = 'top',\r\n  required = false,\r\n  notValidatedText = '',\r\n  onSetValue,\r\n}: RadioTabSelectorProps) => {\r\n  const [currentValue, setCurrentValue] = useState<string | null>(defaultValue || null);\r\n\r\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n    setCurrentValue(event.target.value);\r\n    onSetValue(event.target.value);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={clsx(\r\n        styles['radio-tab-selector-button-bar__container'],\r\n        styles[`radio-tab-selector-button-bar__container--label-${labelPosition}`]\r\n      )}\r\n    >\r\n      {label && (\r\n        <Label htmlFor=\"\" required={required}>\r\n          {label}\r\n        </Label>\r\n      )}\r\n      <div className={styles['radio-tab-selector-button-bar__row-container']}>\r\n        <div\r\n          className={clsx(styles['radio-tab-selector-button-bar__row'], {\r\n            [styles['radio-tab-selector-button-bar__row--not-validated']]: notValidatedText,\r\n          })}\r\n        >\r\n          {buttons.map(({ label, value, disabled }) => (\r\n            <ControlsButton\r\n              type=\"radio\"\r\n              name={radioGroupName}\r\n              key={`${value}`}\r\n              label={label}\r\n              value={value}\r\n              checked={currentValue === value}\r\n              disabled={disabled}\r\n              onSetValue={handleChange}\r\n            />\r\n          ))}\r\n        </div>\r\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["RadioTabSelector","buttons","radioGroupName","defaultValue","label","labelPosition","required","notValidatedText","onSetValue","currentValue","setCurrentValue","useState","handleChange","event","jsxs","clsx","styles","jsx","Label","value","disabled","ControlsButton","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCaA,IAAmB,CAAC;AAAA,EAC/B,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,YAAAC;AACF,MAA6B;AAC3B,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwBR,KAAgB,IAAI,GAE9ES,IAAe,CAACC,MAAyC;AAC7C,IAAAH,EAAAG,EAAM,OAAO,KAAK,GACvBL,EAAAK,EAAM,OAAO,KAAK;AAAA,EAC/B;AAGE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,0CAA0C;AAAA,QACjDA,EAAO,mDAAmDX,CAAa,EAAE;AAAA,MAC3E;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAa,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAZ,GACf,UACHF,GAAA;AAAA,QAED,gBAAAU,EAAA,OAAA,EAAI,WAAWE,EAAO,8CAA8C,GACnE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,oCAAoC,GAAG;AAAA,gBAC5D,CAACA,EAAO,mDAAmD,CAAC,GAAGT;AAAA,cAAA,CAChE;AAAA,cAEA,UAAAN,EAAQ,IAAI,CAAC,EAAE,OAAAG,GAAO,OAAAe,GAAO,UAAAC,QAC5B,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAMnB;AAAA,kBAEN,OAAOE;AAAAA,kBACP,OAAAe;AAAA,kBACA,SAASV,MAAiBU;AAAA,kBAC1B,UAAAC;AAAA,kBACA,YAAYR;AAAA,gBAAA;AAAA,gBALP,GAAGO,CAAK;AAAA,cAOhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCZ,MAAqB,MAAM,gBAAAU,EAACK,KAAY,OAAM,SAAQ,UAAUf,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { RadioTabSelectorProps } from './RadioTabSelector';
+declare const _default: Meta<RadioTabSelectorProps>;
+export default _default;
+export declare const RadioTabSelectorExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, RadioTabSelectorProps>;

package/dist/components/RadioTabSelector/RadioTabSelector.stories.js

@@ -0,0 +1,60 @@
+import { jsx as a } from "react/jsx-runtime";
+import { fn as o } from "../../index-Dwqes6RH.js";
+import { RadioTabSelector as e } from "./RadioTabSelector.js";
+const l = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", u = {
+  title: "Molecules/RadioTabSelector",
+  component: e,
+  argTypes: {
+    radioButtons: {
+      table: {
+        disable: !0
+      }
+    },
+    defaultValue: {
+      table: {
+        disable: !0
+      }
+    },
+    label: {
+      control: "text"
+    },
+    labelPosition: {
+      control: "radio",
+      options: ["top", "left"]
+    },
+    required: {
+      control: "boolean"
+    },
+    notValidatedText: {
+      control: "text"
+    },
+    onSetValue: {
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: e,
+    codeString: l
+  }
+}, i = (t) => /* @__PURE__ */ a(e, { ...t }), r = i.bind({});
+r.args = {
+  buttons: [
+    { label: "Digitaal", value: "digitaal" },
+    { label: "Schriftelijk", value: "schriftelijk" },
+    { label: "Presentatie", value: "presentatie" }
+  ],
+  defaultValue: "digitaal",
+  radioGroupName: "radio-group",
+  label: "Toetsvorm",
+  labelPosition: "top",
+  required: !0,
+  notValidatedText: "",
+  onSetValue: o()
+};
+export {
+  r as RadioTabSelectorExample,
+  u as default
+};
+//# sourceMappingURL=RadioTabSelector.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioTabSelector.stories.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { RadioTabSelectorProps } from './RadioTabSelector'; // Already imported above\r\n\r\nimport { RadioTabSelector } from './RadioTabSelector';\r\n\r\nconst codeString =\r\n  '<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/RadioTabSelector',\r\n  component: RadioTabSelector,\r\n  argTypes: {\r\n    radioButtons: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    defaultValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    labelPosition: {\r\n      control: 'radio',\r\n      options: ['top', 'left'],\r\n    },\r\n    required: {\r\n      control: 'boolean',\r\n    },\r\n    notValidatedText: {\r\n      control: 'text',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: RadioTabSelector,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<RadioTabSelectorProps>;\r\n\r\nconst Template: StoryFn<RadioTabSelectorProps> = (args) => <RadioTabSelector {...args} />;\r\n\r\nexport const RadioTabSelectorExample = Template.bind({});\r\nRadioTabSelectorExample.args = {\r\n  buttons: [\r\n    { label: 'Digitaal', value: 'digitaal' },\r\n    { label: 'Schriftelijk', value: 'schriftelijk' },\r\n    { label: 'Presentatie', value: 'presentatie' },\r\n  ],\r\n  defaultValue: 'digitaal',\r\n  radioGroupName: 'radio-group',\r\n  label: 'Toetsvorm',\r\n  labelPosition: 'top',\r\n  required: true,\r\n  notValidatedText: '',\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","RadioTabSelector_stories","RadioTabSelector","Template","args","jsx","RadioTabSelectorExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,gIAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA2C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAkB,GAAGE,GAAM,GAE1EE,IAA0BH,EAAS,KAAK,CAAE,CAAA;AACvDG,EAAwB,OAAO;AAAA,EAC7B,SAAS;AAAA,IACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,IACvC,EAAE,OAAO,gBAAgB,OAAO,eAAe;AAAA,IAC/C,EAAE,OAAO,eAAe,OAAO,cAAc;AAAA,EAC/C;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAYC,EAAG;AACjB;"}

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

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

package/dist/components/RadioTabSelector/index.js

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

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

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

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { fn as i } from "../../index-BCvy9BiK.js";
+import { fn as i } from "../../index-Dwqes6RH.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const d = ({

package/dist/components/Sortable/Sortable.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { fn as s } from "../../index-BCvy9BiK.js";
+import { fn as s } from "../../index-Dwqes6RH.js";
 import { Sortable as o } from "./Sortable.js";
 import { InputField as c } from "../InputField/InputField.js";
 import { Icon as d } from "../Icon/Icon.js";

package/dist/components/TextArea/TextArea.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as r } from "../../index-BCvy9BiK.js";
+import { fn as r } from "../../index-Dwqes6RH.js";
 import { TextArea as e } from "./TextArea.js";
 const o = `
   <TextArea label={label} maxCharacters={maxCharacters} /> `, x = {

package/dist/components/TextArea/TextArea.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "../../index-BqLi4tOb.js";
 import { r as n, s as t, f as r } from "../../react.esm-CsMDid07.js";
-import { userEvent as s } from "../../index-BCvy9BiK.js";
+import { userEvent as s } from "../../index-Dwqes6RH.js";
 import { TextArea as o } from "./TextArea.js";
 describe("TextArea", () => {
   it("should render correctly with label", () => {

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { fn as l } from "../../index-BCvy9BiK.js";
+import { fn as l } from "../../index-Dwqes6RH.js";
 import { ToggleSwitch as e } from "./ToggleSwitch.js";
 const n = `
 // Has all InputHTMLAttributes props available except "className" and "style" 

package/dist/components/VarIndicator/VarIndicator.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { fn as n } from "../../index-BCvy9BiK.js";
+import { fn as n } from "../../index-Dwqes6RH.js";
 import { VarIndicator as t } from "./VarIndicator.js";
 const o = {
   DRAFT: "Concept",

package/dist/components/index.d.ts

@@ -8,10 +8,10 @@ export * from './ButtonGroup';
 export * from './Buttons';
 export * from './Card';
 export * from './Checkbox';
-export * from './CheckboxButton';
 export * from './CheckboxButtonBar';
 export * from './CheckboxTree';
 export * from './Chip';
+export * from './ControlsButton';
 export * from './Drawer';
 export * from './EmptyStateDataDisplay';
 export * from './FeedbackBar';
@@ -41,6 +41,7 @@ export * from './PeriodSelector';
 export * from './ProgrammeCard';
 export * from './RadioButton';
 export * from './RadioGroup';
+export * from './RadioTabSelector';
 export * from './Repeater';
 export * from './RteEditor';
 export * from './SectionNotification';

package/dist/components/index.js

@@ -7,13 +7,13 @@ import { Backdrop as c } from "./Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
 import { Button as s } from "./Buttons/Button.js";
 import { LinkButton as b } from "./Buttons/LinkButton.js";
-import { MenuButton as C } from "./Buttons/MenuButton.js";
+import { MenuButton as k } from "./Buttons/MenuButton.js";
 import { Card as M } from "./Card/Card.js";
 import { Checkbox as I } from "./Checkbox/Checkbox.js";
-import { CheckboxButton as h } from "./CheckboxButton/CheckboxButton.js";
-import { CheckboxButtonBar as P } from "./CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as y } from "./CheckboxTree/CheckboxTree.js";
-import { Chip as v } from "./Chip/Chip.js";
+import { CheckboxButtonBar as R } from "./CheckboxButtonBar/CheckboxButtonBar.js";
+import { CheckboxTree as P } from "./CheckboxTree/CheckboxTree.js";
+import { Chip as y } from "./Chip/Chip.js";
+import { ControlsButton as T } from "./ControlsButton/ControlsButton.js";
 import { Drawer as w } from "./Drawer/Drawer.js";
 import { EmptyStateDataDisplay as O } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
 import { FeedbackBar as H } from "./FeedbackBar/FeedbackBar.js";
@@ -33,29 +33,30 @@ import { Label as no } from "./Label/Label.js";
 import { MenuLink as co } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Bo } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as So } from "./ModalDialog/ModalDialog.js";
-import { M as ko } from "../TablePlugin-hxs9O_ox.js";
+import { M as Co } from "../TablePlugin-hxs9O_ox.js";
 import { MultiSelectBox as Fo } from "./MultiSelectBox/MultiSelectBox.js";
 import { OverlayCloseButton as go } from "./OverlayCloseButton/OverlayCloseButton.js";
 import { OverlayStepBar as Lo } from "./OverlayStepBar/OverlayStepBar.js";
 import { PageOverlay as Ao } from "./PageOverlay/PageOverlay.js";
-import { Periods as Ro } from "./Periods/Periods.js";
+import { Periods as ho } from "./Periods/Periods.js";
 import { PeriodSelector as Do } from "./PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as To } from "./ProgrammeCard/ProgrammeCard.js";
+import { ProgrammeCard as vo } from "./ProgrammeCard/ProgrammeCard.js";
 import { RadioButton as Go } from "./RadioButton/RadioButton.js";
 import { RadioGroup as Eo } from "./RadioGroup/RadioGroup.js";
-import { Repeater as zo } from "./Repeater/Repeater.js";
-import { Rte as Vo, RteEditor as jo } from "./RteEditor/RteEditor.js";
-import { SectionNotification as Jo } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Qo } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as Wo, useSelect as Xo } from "./SelectListbox/SelectProvider.js";
-import { Sortable as Zo } from "./Sortable/Sortable.js";
-import { Spinner as $o } from "./Spinner/Spinner.js";
-import { StatusBadge as rr } from "./StatusBadge/StatusBage.js";
-import { StatusPill as er } from "./StatusPill/StatusPill.js";
-import { TextArea as xr } from "./TextArea/TextArea.js";
-import { ToggleSwitch as fr } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as ir } from "./Tooltip/Tooltip.js";
-import { VarIndicator as lr } from "./VarIndicator/VarIndicator.js";
+import { RadioTabSelector as zo } from "./RadioTabSelector/RadioTabSelector.js";
+import { Repeater as Vo } from "./Repeater/Repeater.js";
+import { Rte as qo, RteEditor as Jo } from "./RteEditor/RteEditor.js";
+import { SectionNotification as Qo } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as Wo } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as Yo, useSelect as Zo } from "./SelectListbox/SelectProvider.js";
+import { Sortable as $o } from "./Sortable/Sortable.js";
+import { Spinner as rr } from "./Spinner/Spinner.js";
+import { StatusBadge as er } from "./StatusBadge/StatusBage.js";
+import { StatusPill as xr } from "./StatusPill/StatusPill.js";
+import { TextArea as fr } from "./TextArea/TextArea.js";
+import { ToggleSwitch as ir } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as lr } from "./Tooltip/Tooltip.js";
+import { VarIndicator as dr } from "./VarIndicator/VarIndicator.js";
 export {
   t as Accordion,
   p as AccordionCard,
@@ -67,10 +68,10 @@ export {
   u as ButtonGroup,
   M as Card,
   I as Checkbox,
-  h as CheckboxButton,
-  P as CheckboxButtonBar,
-  y as CheckboxTree,
-  v as Chip,
+  R as CheckboxButtonBar,
+  P as CheckboxTree,
+  y as Chip,
+  T as ControlsButton,
   w as Drawer,
   O as EmptyStateDataDisplay,
   H as FeedbackBar,
@@ -88,34 +89,35 @@ export {
   ao as InputField,
   no as Label,
   b as LinkButton,
-  C as MenuButton,
+  k as MenuButton,
   co as MenuLink,
   Bo as MetaDataList,
   So as ModalDialog,
-  ko as MultiSelect,
+  Co as MultiSelect,
   Fo as MultiSelectBox,
   go as OverlayCloseButton,
   Lo as OverlayStepBar,
   Ao as PageOverlay,
   Do as PeriodSelector,
-  Ro as Periods,
-  To as ProgrammeCard,
+  ho as Periods,
+  vo as ProgrammeCard,
   Go as RadioButton,
   Eo as RadioGroup,
-  zo as Repeater,
-  Vo as Rte,
-  jo as RteEditor,
-  Jo as SectionNotification,
-  Qo as SelectListbox,
-  Wo as SelectProvider,
-  Zo as Sortable,
-  $o as Spinner,
-  rr as StatusBadge,
-  er as StatusPill,
-  xr as TextArea,
-  fr as ToggleSwitch,
-  ir as Tooltip,
-  lr as VarIndicator,
-  Xo as useSelect
+  zo as RadioTabSelector,
+  Vo as Repeater,
+  qo as Rte,
+  Jo as RteEditor,
+  Qo as SectionNotification,
+  Wo as SelectListbox,
+  Yo as SelectProvider,
+  $o as Sortable,
+  rr as Spinner,
+  er as StatusBadge,
+  xr as StatusPill,
+  fr as TextArea,
+  ir as ToggleSwitch,
+  lr as Tooltip,
+  dr as VarIndicator,
+  Zo 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/{index-BCvy9BiK.js → index-Dwqes6RH.js}

@@ -14654,7 +14654,10 @@ var { buildQueries: z$, configure: G$, createEvent: W$, fireEvent: K$, findAllBy
     let a = rM(e);
     return r && a.mockName(r), a;
   }
-  if (Array.isArray(e)) return t++, e.map((a) => Zl(a, t));
+  if (Array.isArray(e)) {
+    t++;
+    for (let a = 0; a < e.length; a++) e[a] = Zl(e[a], t);
+  }
   if (typeof e == "object" && e.constructor === Object) {
     t++;
     for (let [a, o] of Object.entries(e)) (n = Object.getOwnPropertyDescriptor(e, a)) != null && n.writable && (e[a] = Zl(o, t, a));
@@ -14752,4 +14755,4 @@ export {
   l2 as waitForElementToBeRemoved,
   $$ as within
 };
-//# sourceMappingURL=index-BCvy9BiK.js.map
+//# sourceMappingURL=index-Dwqes6RH.js.map