@reykjavik/hanna-react 0.10.109 → 0.10.110

package/CHANGELOG.md

@@ -4,6 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.110
+
+_2023-11-10_
+
+- `Modal`
+  - feat: Add prop `wrapperProps`
+  - feat: Add prop `stable`, deprecate `fickle` instead
+  - feat: Add prop `noCloseButton`
+  - refactor: Rewritten and modernized
+- feat: Add prop `stacked` to `.CheckboxButtonsGroup` and `.RadioButtonsGroup`
+- feat: Add property `group` to `MultiselectOption` type, for grouping options
+- fix: Apply `wrapperProps.className` to `Heading`'s wrapper element
+- fix: Non-sensical `Gallery` close button label
+
 ## 0.10.109
 
 _2023-10-25_

package/CheckboxButtonsGroup.d.ts

@@ -2,6 +2,8 @@ import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_T
 export type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
     value?: Array<string>;
     defaultValue?: Array<string>;
+    /** Display the buttons in a single column */
+    stacked?: boolean;
     /** @deprecated (Will be removed in v0.11) */
     columns?: '2col' | '3col';
     /** @deprecated (Will be removed in v0.11) */

package/CheckboxButtonsGroup.js

@@ -12,7 +12,7 @@ const CheckboxButtonsGroup = (props) => {
     if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
-    return (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton_js_1.default })));
+    return (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", modifier: props.stacked && 'stacked', Toggler: CheckboxButton_js_1.default })));
 };
 exports.CheckboxButtonsGroup = CheckboxButtonsGroup;
 exports.default = exports.CheckboxButtonsGroup;

package/FormField.d.ts

@@ -86,7 +86,7 @@ export declare const getFormFieldWrapperProps: (props: (FormFieldGroupWrappingPr
 }) => RequireExplicitUndefined<FormFieldGroupWrappingProps> & {
     small: boolean | undefined;
 };
-export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default">, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag">) & {
+export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default", {}>, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag">) & {
     small?: boolean | undefined;
 }>(props: T) => Omit<T, "label" | "small" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag"> & {
     fieldWrapperProps: ReturnType<typeof getFormFieldWrapperProps>;

package/Gallery/_GalleryModal.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_transition_group_1 = require("react-transition-group");
 const object_1 = require("@hugsmidjan/qj/object");
-const CarouselPaging_1 = tslib_1.__importDefault(require("@hugsmidjan/react/CarouselPaging"));
-const Modal_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Modal"));
+const _AbstractModal_js_1 = require("../_abstract/_AbstractModal.js");
+const _CarouselPaging_js_1 = tslib_1.__importDefault(require("../_abstract/_CarouselPaging.js"));
 const _GalleryModalContext_js_1 = require("./_GalleryModalContext.js");
 const _GalleryModalItem_js_1 = require("./_GalleryModalItem.js");
 const GalleryModal = (props) => {
@@ -42,17 +42,16 @@ const GalleryModal = (props) => {
     // FIXME: This if weirdly inefficient. Either memoize,
     // or do a simpler single-property comparison.
     (0, object_1.objectIsSame)((0, object_1.objectClean)(image), (0, object_1.objectClean)(item)));
-    return (react_1.default.createElement(Modal_1.default, { open: true, onClosed: () => {
+    return (react_1.default.createElement(_AbstractModal_js_1.AbstractModal, { open: true, onClosed: () => {
             setCurrentImage(undefined);
         }, startOpen: false, bem: "GalleryModal", texts: { closeButton: texts.modalCloseLabel } },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_transition_group_1.CSSTransition, { in: animated, timeout: 200, onEntered: () => {
-                    setAnimated(!animated);
-                }, classNames: "GalleryModalItem--" },
-                react_1.default.createElement(_GalleryModalItem_js_1.GalleryModalItem, Object.assign({}, image))),
-            react_1.default.createElement(CarouselPaging_1.default, { bem: "GalleryModalPager", itemCount: items.length, current: imageIndex, setCurrent: updateImage, texts: {
-                    next: texts.modalNextLabel,
-                    prev: texts.modalPrevLabel,
-                } }))));
+        react_1.default.createElement(react_transition_group_1.CSSTransition, { in: animated, timeout: 200, onEntered: () => {
+                setAnimated(!animated);
+            }, classNames: "GalleryModalItem--" },
+            react_1.default.createElement(_GalleryModalItem_js_1.GalleryModalItem, Object.assign({}, image))),
+        react_1.default.createElement(_CarouselPaging_js_1.default, { bem: "GalleryModalPager", itemCount: items.length, current: imageIndex, setCurrent: updateImage, texts: {
+                next: texts.modalNextLabel,
+                prev: texts.modalPrevLabel,
+            } })));
 };
 exports.GalleryModal = GalleryModal;

package/Gallery.js

@@ -9,20 +9,20 @@ const _GalleryItem_js_1 = require("./Gallery/_GalleryItem.js");
 const _GalleryModal_js_1 = require("./Gallery/_GalleryModal.js");
 const _GalleryModalContext_js_1 = require("./Gallery/_GalleryModalContext.js");
 const defaultTexts = {
-    en: {
-        modalNextLabel: 'Next image',
-        modalPrevLabel: 'Previous image',
-        modalCloseLabel: 'Back to article',
-    },
     is: {
         modalNextLabel: 'Næsta mynd',
         modalPrevLabel: 'Fyrri mynd',
-        modalCloseLabel: 'Til baka í grein',
+        modalCloseLabel: 'Loka mynd',
+    },
+    en: {
+        modalNextLabel: 'Next image',
+        modalPrevLabel: 'Previous image',
+        modalCloseLabel: 'Close image',
     },
     pl: {
         modalNextLabel: 'Następne zdjęcie',
         modalPrevLabel: 'Poprzednie zdjęcie',
-        modalCloseLabel: 'Powrót do artykułu',
+        modalCloseLabel: 'Zamknij zdjęcie',
     },
 };
 const Gallery = (props) => {

package/Heading.js

@@ -18,6 +18,7 @@ const Heading = (props) => {
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
+            (wrapperProps || {}).className,
         ]) }), children));
 };
 exports.Heading = Heading;

package/Modal.d.ts

@@ -1,9 +1,13 @@
 import { ReactElement } from 'react';
-import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
-import { MissingWrapperElmProps } from './utils.js';
-export type ModalProps = Omit<_ModalProps, 'bem' | 'bodyWrap' | 'modifier'> & {
+import { type AbstractModalProps } from './_abstract/_AbstractModal.js';
+export declare const defaultModalTexts: import("@reykjavik/hanna-utils/i18n.js").DefaultTexts<{
+    closeButton: string;
+    closeButtonLabel?: string | undefined;
+}>;
+export type ModalProps = AbstractModalProps & {
+    /** Modal width modifier */
     modifier?: 'w6' | 'w8' | 'w10';
-    bling?: ReactElement;
-} & MissingWrapperElmProps;
+    bling?: ReactElement | (() => ReactElement);
+};
 export declare const Modal: (props: ModalProps) => JSX.Element;
 export default Modal;

package/Modal.js

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
+exports.Modal = exports.defaultModalTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const Modal_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Modal"));
+const _AbstractModal_js_1 = require("./_abstract/_AbstractModal.js");
+exports.defaultModalTexts = _AbstractModal_js_1.defaultAbstractModalTexts;
 const Modal = (props) => {
-    const { closeDelay = 500, texts = {
-        closeButton: 'Loka ',
-    }, bling, children, render = () => children, } = props;
-    return (react_1.default.createElement(Modal_1.default, Object.assign({}, props, { bodyWrap: false, bem: "Modal", closeDelay: closeDelay, texts: texts, render: (args) => bling ? (react_1.default.createElement(react_1.default.Fragment, null,
-            render(args),
-            react_1.default.createElement("div", { className: "Modal__blings" },
-                react_1.default.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (render(args)), 
-        // eslint-disable-next-line react/no-children-prop
+    const { bling, render, children } = props;
+    return (react_1.default.createElement(_AbstractModal_js_1.AbstractModal, Object.assign({}, props, { bem: "modal", render: (renderProps) => {
+            const _children = render ? render(renderProps) : children;
+            return bling ? (react_1.default.createElement(react_1.default.Fragment, null,
+                _children,
+                react_1.default.createElement("div", { className: "Modal__blings" },
+                    react_1.default.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (_children);
+        }, 
+        // Required since props might contain children
         children: undefined })));
 };
 exports.Modal = Modal;

package/Multiselect/_Multiselect.search.d.ts

@@ -16,4 +16,4 @@ queryWords: Array<string>,
 rawQuery: string) => number;
 export declare const defaultSearchScoring: SearchScoringfn;
 /** Returns a normalized, filtered list of options */
-export declare const filterItems: (options: TogglerGroupOptions<string>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string>;
+export declare const filterItems: <Extras = {}>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string, Extras>;

package/Multiselect/_Multiselect.search.js

@@ -62,19 +62,31 @@ const defaultSearchScoring = (item, queryWords) => {
 };
 exports.defaultSearchScoring = defaultSearchScoring;
 // ---------------------------------------------------------------------------
+// banana emoji
+const SEP = '🍌';
 /** Returns a normalized, filtered list of options */
 const filterItems = (options, searchQuery, searchScoringFn = exports.defaultSearchScoring) => {
     if (!searchQuery.trim()) {
-        return [...options];
+        return options;
     }
+    const found = new Set();
     const queryWords = searchQuery.toLowerCase().trim().split(/\s+/);
-    return options
+    return (options
         .map((item) => ({
         item,
         score: searchScoringFn(item, queryWords, searchQuery),
     }))
         .filter(({ score }) => score > 0)
         .sort((a, b) => (a.score === b.score ? 0 : a.score < b.score ? 1 : -1))
-        .map(({ item }) => item);
+        .map(({ item }) => item)
+        // remove duplicates
+        .filter((item) => {
+        const key = item.value + SEP + item.label;
+        if (found.has(key)) {
+            return false;
+        }
+        found.add(key);
+        return true;
+    }));
 };
 exports.filterItems = filterItems;

package/Multiselect.d.ts

@@ -10,7 +10,9 @@ export type MultiselectI18n = {
 export type MultiselectOption = Exclude<MultiselectProps['options'][number], string>;
 /** @deprecated This type-name has a typo, import `MultiselectOption` instead  (Will be removed in v0.11) */
 export type MultiSelectOption = MultiselectOption;
-export type MultiselectProps = TogglerGroupFieldProps<string> & {
+export type MultiselectProps = TogglerGroupFieldProps<string, {
+    group?: string;
+}> & {
     value?: Array<string>;
     defaultValue?: Array<string>;
     placeholder?: string;

package/Multiselect.js

@@ -98,6 +98,7 @@ const Multiselect = (props) => {
     const showCurrentValues = values.length > 0 &&
         (props.forceSummary || !isOpen || options.length >= summaryLimit);
     const filteredOptions = (0, react_1.useMemo)(() => (0, _Multiselect_search_js_1.filterItems)(options, searchQuery, props.searchScoring), [searchQuery, options, props.searchScoring]);
+    const isFiltered = options !== filteredOptions;
     const handleCheckboxSelection = (0, react_1.useCallback)((selectedItem) => {
         const selValue = selectedItem.value;
         const isAdding = values.indexOf(selValue) === -1;
@@ -229,11 +230,17 @@ const Multiselect = (props) => {
                                 ? item.disabled
                                 : disableds && disableds.includes(idx);
                             const isChecked = values.includes(item.value);
-                            return (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, classUtils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
+                            const insertGroupSeparator = !isFiltered &&
+                                item.group !== (filteredOptions[idx - 1] || {}).group &&
+                                (idx > 0 || !!item.group);
+                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, classUtils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
                                     onMouseEnter: () => setActiveItemIndex(idx),
                                 } })));
+                            return insertGroupSeparator ? (react_1.default.createElement(react_1.Fragment, { key: idx },
+                                react_1.default.createElement("li", { className: (0, classUtils_1.modifiedClass)('Multiselect__optionSeparator', !item.group && 'empty'), "aria-label": item.group ? undefined : '—' }, item.group || false),
+                                checkbox)) : (checkbox);
                         })) : searchQuery ? (react_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
-                        react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
+                        isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
         } })));
 };
 exports.Multiselect = Multiselect;

package/RadioButtonsGroup.d.ts

@@ -2,6 +2,8 @@ import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_T
 export type RadioButtonsGroupProps = TogglerGroupFieldProps & {
     value?: string;
     defaultValue?: string;
+    /** Display the buttons in a single column */
+    stacked?: boolean;
     /** @deprecated (Will be removed in v0.11) */
     columns?: '2col' | '3col';
     /** @deprecated (Will be removed in v0.11) */

package/RadioButtonsGroup.js

@@ -13,7 +13,7 @@ const RadioButtonsGroup = (props) => {
     if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
     }
-    return (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", Toggler: RadioButton, isRadio: true })));
+    return (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", modifier: props.stacked && 'stacked', Toggler: RadioButton, isRadio: true })));
 };
 exports.RadioButtonsGroup = RadioButtonsGroup;
 exports.default = exports.RadioButtonsGroup;

package/_abstract/_AbstractModal.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { SSRSupportProps, WrapperElmProps } from '../utils.js';
+import { BemProps } from '../utils/types.js';
+type AbstractModalI18n = {
+    closeButton: string;
+    closeButtonLabel?: string;
+};
+export declare const defaultAbstractModalTexts: DefaultTexts<AbstractModalI18n>;
+export type AbstractModalProps = {
+    /**
+     * The transition delay until closing the modal triggers `onClosed()`
+     *
+     * Default: `500`
+     */
+    closeDelay?: number;
+    /**
+     * Indicates if teh Modal should be open or closed. To trigger opening or closing, simply flip this flag.
+     *
+     * Default: `true`
+     */
+    open?: boolean;
+    /**
+     * Set this to `true` for Modals that should render as if they always existed and had already been opened.
+     *
+     * A Modal that "starts open" will not CSS transition in, and will not trigger its `onOpen` callback on mount.
+     *
+     * Default: `false`
+     */
+    startOpen?: boolean;
+    /**
+     * By default all modals close on ESC and outside clicks.
+     * Set thtis to `true` to disable this behaviour.
+     */
+    stable?: boolean;
+    /** Hides the (x) close button */
+    noCloseButton?: boolean;
+    /**
+     * @deprecated  Use `stable` prop instead  (Will be removed in v0.11)
+     *
+     * Default: `true`
+     *
+     * The inverse of the `stable` prop. If both `fickle` and `stable` are
+     * defined then `stable` takes precedence.
+     */
+    fickle?: boolean;
+    /** Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+     *
+     * However, the initial `onOpen` is skipped  `startOpen` is set to `true`.
+     */
+    onOpen?: () => void;
+    /**
+     * Convenience callback that runs as soon as the `open` flag flips to `false`
+     */
+    onClose?: () => void;
+    /**
+     * Callback that runs when the modal closes – **after** `closeDelay` has elaped.
+     */
+    onClosed: () => void;
+    /**
+     * Default:
+     * ```
+     * {
+     *   closeButton: 'Close',
+     *   closeButtonLabel: 'Close this window',
+     * }
+     * ```
+     */
+    texts?: Readonly<{
+        closeButton: string;
+        closeButtonLabel?: string;
+    }>;
+    lang?: string;
+    /**
+     * Should the modal be mounted in a Portal component `<div/>`
+     * located outside the ReactDOM.render root element?
+     *
+     * Default: `true`
+     */
+    portal?: boolean;
+} & EitherObj<{
+    /** Render function that receives a `closeModal` action dispatcher. */
+    render: (props: {
+        closeModal(): void;
+    }) => ReactNode;
+}, {
+    children: ReactNode;
+}> & WrapperElmProps<'div', 'hidden' | 'role'> & SSRSupportProps;
+type AbstractModalProps_private = AbstractModalProps & BemProps<true>;
+export declare const AbstractModal: (props: AbstractModalProps_private) => JSX.Element;
+export {};

package/_abstract/_AbstractModal.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbstractModal = exports.defaultAbstractModalTexts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const focusElm_1 = require("@hugsmidjan/qj/focusElm");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const utils_js_1 = require("../utils.js");
+const useCallbackOnEsc_js_1 = require("../utils/useCallbackOnEsc.js");
+const _FocusTrap_js_1 = require("./_FocusTrap.js");
+const _Portal_js_1 = require("./_Portal.js");
+const MODAL_OPEN_CLASS = 'modal-open';
+// ---------------------------------------------------------------------------
+// Methods to manage the modalStack and the setting/unsetting modalOpenClass
+//
+const win = typeof window !== 'undefined'
+    ? window
+    : undefined;
+const modalStack = win ? win.$$modalStack || (win.$$modalStack = []) : [];
+const addToModalStack = (domid) => {
+    document.documentElement.classList.add(MODAL_OPEN_CLASS); // Always set this, even on startOpen === true
+    modalStack.unshift(domid);
+};
+const removeFromModalStack = (domid) => {
+    const stackPos = modalStack.indexOf(domid);
+    if (stackPos > -1) {
+        modalStack.splice(stackPos, 1);
+    }
+    if (modalStack.length <= 0) {
+        document.documentElement.classList.remove(MODAL_OPEN_CLASS);
+    }
+};
+exports.defaultAbstractModalTexts = {
+    is: {
+        closeButton: 'Loka',
+        closeButtonLabel: 'Loka þessum glugga',
+    },
+    en: {
+        closeButton: 'Close',
+        closeButtonLabel: 'Close this window',
+    },
+    pl: {
+        closeButton: 'Zamknij',
+        closeButtonLabel: 'Zamknij to okno',
+    },
+};
+// eslint-disable-next-line complexity
+const AbstractModal = (props) => {
+    var _a;
+    const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr } = props;
+    const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultAbstractModalTexts);
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
+    const privateDomId = (0, utils_js_1.useDomid)();
+    const domid = wrapperProps.id || privateDomId;
+    const modalElmRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_1.useState)(() => !!props.startOpen && props.open !== false);
+    const openModal = () => {
+        if (!open) {
+            addToModalStack(privateDomId);
+            setTimeout(() => {
+                setOpen(true);
+                props.onOpen && props.onOpen();
+                (0, focusElm_1.focusElm)(modalElmRef.current);
+            }, 100);
+        }
+    };
+    const closeModal = () => {
+        if (open) {
+            setOpen(false);
+            removeFromModalStack(privateDomId);
+            props.onClose && props.onClose();
+            setTimeout(props.onClosed, closeDelay);
+        }
+    };
+    const lastPropsOpen = (0, react_1.useRef)(props.open);
+    // Update state when props.open changes. Icky but simple.
+    if (props.open !== lastPropsOpen.current && props.open !== open) {
+        lastPropsOpen.current = props.open;
+        props.open ? openModal() : closeModal();
+    }
+    const closeOnCurtainClick = isFickle &&
+        ((e) => {
+            if (e.target === e.currentTarget) {
+                closeModal();
+            }
+        });
+    (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(isFickle &&
+        (() => {
+            if (modalStack[0] === domid) {
+                closeModal();
+            }
+        }));
+    // On initial mount (and final unmount)
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            // The modal did `startOpen` so we need to add it to the "modal-stack".
+            addToModalStack(privateDomId);
+        }
+        else if (props.open) {
+            // The modal should transition to open.
+            openModal();
+        }
+        return () => removeFromModalStack(privateDomId);
+    }, [] // eslint-disable-line react-hooks/exhaustive-deps
+    );
+    const PortalOrFragment = props.portal !== false ? _Portal_js_1.Portal : react_1.Fragment;
+    const children = props.render ? props.render({ closeModal }) : props.children;
+    const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
+    const { onClick, className } = wrapperProps;
+    return (react_1.default.createElement(PortalOrFragment, null,
+        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
+                ? (e) => {
+                    closeOnCurtainClick(e);
+                    onClick(e);
+                }
+                : closeOnCurtainClick || onClick, id: domid }),
+            isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { atTop: true }),
+            react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
+                children,
+                isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
+            isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { atTop: true }))));
+};
+exports.AbstractModal = AbstractModal;

package/_abstract/_CarouselPaging.d.ts

@@ -0,0 +1,14 @@
+import { BemProps } from '../utils/types.js';
+export type CarouselPagingProps = {
+    current: number;
+    itemCount: number;
+    setCurrent: (idx: number) => void;
+    'aria-controls'?: string;
+    texts: Readonly<{
+        next: string;
+        prev: string;
+        unit?: string;
+    }>;
+} & BemProps;
+declare const CarouselPaging: (props: CarouselPagingProps) => JSX.Element;
+export default CarouselPaging;

package/_abstract/_CarouselPaging.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const CarouselPaging = (props) => {
+    const { bem = 'CarouselPaging', modifier, current, itemCount, setCurrent } = props;
+    const { next, prev, unit = '' } = props.texts;
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier) },
+        react_1.default.createElement("button", { className: `${bem}__button ${bem}__button--next`, type: "button", disabled: current >= itemCount - 1, onClick: () => setCurrent(current + 1), "aria-controls": props['aria-controls'], "aria-label": `${next} ${unit}`, title: `${next} ${unit}` }, next),
+        ' ',
+        react_1.default.createElement("button", { className: `${bem}__button ${bem}__button--prev`, type: "button", disabled: current === 0, onClick: () => setCurrent(current - 1), "aria-controls": props['aria-controls'], "aria-label": `${prev} ${unit}`, title: `${prev} ${unit}` }, prev)));
+};
+exports.default = CarouselPaging;

package/_abstract/_FocusTrap.js

@@ -9,7 +9,7 @@ const FocusTrap = (props) => {
     return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
             var _a;
             let container = e.currentTarget;
-            let depth = Math.max(props.depth || 0, 1);
+            let depth = Math.max(props.depth || 1, 1);
             while (depth-- && container) {
                 container = container.parentElement;
             }

package/_abstract/_Portal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type PortalProps = {
+    getRoot?: () => Element;
+    children: ReactNode;
+};
+export declare const Portal: ({ getRoot, children }: PortalProps) => import("react").ReactPortal | null;
+export {};

package/_abstract/_Portal.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = void 0;
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const defaultGetRoot = () => {
+    const rootElm = document.createElement('div');
+    document.body.appendChild(rootElm);
+    return rootElm;
+};
+const Portal = ({ getRoot, children }) => {
+    const [rootElm, setRootElm] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const newRoot = (getRoot || defaultGetRoot)();
+        setRootElm(newRoot);
+        return () => newRoot.remove();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return rootElm && (0, react_dom_1.createPortal)(children, rootElm);
+};
+exports.Portal = Portal;

package/_abstract/_TogglerGroup.d.ts

@@ -1,16 +1,16 @@
 import { FormFieldInputProps } from '../FormField.js';
 import { HTMLProps } from '../utils.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupOption<T = 'default'> = {
+export type TogglerGroupOption<T = 'default', Extras = {}> = {
     value: string;
     label?: T extends 'default' ? string | JSX.Element : T;
     disabled?: boolean;
     id?: string;
-};
-export type TogglerGroupOptions<T = 'default'> = Array<TogglerGroupOption<T>>;
+} & Partial<Extras>;
+export type TogglerGroupOptions<T = 'default', Extras = {}> = Array<TogglerGroupOption<T, Extras>>;
 type RestrictedInputProps = Omit<HTMLProps<'input'>, 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'className' | 'id' | 'name' | 'children'>;
-export type TogglerGroupProps<T = 'default'> = {
-    options: Array<string> | TogglerGroupOptions<T>;
+export type TogglerGroupProps<T = 'default', Extras = {}> = {
+    options: Array<string> | TogglerGroupOptions<T, Extras>;
     className?: string;
     name?: string;
     disabled?: boolean | ReadonlyArray<number>;
@@ -21,7 +21,7 @@ export type TogglerGroupProps<T = 'default'> = {
         /** The new checked state of the selected value */
         checked: boolean;
         /** The option object being selected */
-        option: TogglerGroupOption<T>;
+        option: TogglerGroupOption<T, Extras>;
         /** The updated value array */
         selectedValues: Array<string>;
     }) => void;

package/_abstract/_TogglerGroupField.d.ts

@@ -3,9 +3,9 @@ import { FormFieldGroupWrappingProps } from '../FormField.js';
 import { BemModifierProps } from '../utils/types.js';
 import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupFieldProps<T = 'default'> = {
+export type TogglerGroupFieldProps<T = 'default', Extras = {}> = {
     className?: string;
-} & Omit<FormFieldGroupWrappingProps, 'disabled'> & TogglerGroupProps<T>;
+} & Omit<FormFieldGroupWrappingProps, 'disabled'> & TogglerGroupProps<T, Extras>;
 type _TogglerGroupFieldProps = {
     Toggler: (props: TogglerInputProps) => ReactElement;
     isRadio?: true;

package/esm/CheckboxButtonsGroup.d.ts

@@ -2,6 +2,8 @@ import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_T
 export type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
     value?: Array<string>;
     defaultValue?: Array<string>;
+    /** Display the buttons in a single column */
+    stacked?: boolean;
     /** @deprecated (Will be removed in v0.11) */
     columns?: '2col' | '3col';
     /** @deprecated (Will be removed in v0.11) */

package/esm/CheckboxButtonsGroup.js

@@ -8,6 +8,6 @@ export const CheckboxButtonsGroup = (props) => {
     if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
-    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", modifier: props.stacked && 'stacked', Toggler: CheckboxButton })));
 };
 export default CheckboxButtonsGroup;