@reykjavik/hanna-react 0.10.53 → 0.10.56

package/SiteSearchInput.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { FormFieldWrappingProps } from './FormField';
+declare type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit'>;
+declare type WrappingProps = Pick<FormFieldWrappingProps, 'id' | 'label'>;
+export declare type SiteSearchInputProps = {
+    /** Triggered when user hits ENTER key with the focus inside the input field
+     *
+     * Return `true` to **allow** the browser's default submit hehavior
+     */
+    onSubmit?: () => boolean | void;
+    /** Custom action to perform when the user clicks the search button
+     *
+     * Return `true` to **allow** the browser's default submit hehavior
+     *
+     * Defaults to `onSearch`
+     */
+    onButtonClick?: () => boolean | void;
+    buttonText?: string;
+    children?: undefined;
+    ssr?: SSRSupport;
+} & WrappingProps & InputElmProps;
+declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "title" | "id" | "ssr" | "form" | "label" | "slot" | "style" | "pattern" | "children" | "hidden" | "onClick" | "dir" | "is" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "alt" | "multiple" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
+export default SiteSearchInput;

package/SiteSearchInput.jsx

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const FormField_1 = __importDefault(require("./FormField"));
+// ---------------------------------------------------------------------------
+const SiteSearchInput = react_1.default.forwardRef((props, ref) => {
+    var _a;
+    const { label, id, onChange, placeholder = typeof label === 'string' ? label : undefined, buttonText = 'Leita', onSubmit, onButtonClick = onSubmit, onKeyDown, ssr } = props, inputElementProps = __rest(props, ["label", "id", "onChange", "placeholder", "buttonText", "onSubmit", "onButtonClick", "onKeyDown", "ssr"]);
+    const { value, defaultValue } = inputElementProps;
+    const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            setHasValue(!!e.target.value);
+            onChange && onChange(e);
+        };
+    return (<FormField_1.default className="SiteSearchInput" ssr={ssr} label={label} empty={empty} filled={filled} id={id} renderInput={(className, inputProps, addFocusProps) => (<div className={className.input} {...addFocusProps()}>
+            <input className="SiteSearchInput__input" onChange={_onChange} {...inputProps} placeholder={placeholder} onKeyDown={onSubmit
+                ? (e) => {
+                    if (e.key === 'Enter' && onSubmit() !== true) {
+                        e.preventDefault();
+                    }
+                    onKeyDown && onKeyDown(e);
+                }
+                : onKeyDown} {...inputElementProps} ref={ref}/>{' '}
+            <button className="SiteSearchInput__button" type="submit" onClick={onButtonClick && ((e) => !onButtonClick() && e.preventDefault())} title={buttonText}>
+              {buttonText}
+            </button>
+          </div>)}/>);
+});
+exports.default = SiteSearchInput;

package/Skeleton.jsx

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const range_1 = __importDefault(require("@hugsmidjan/qj/range"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const makeRenderSkeleton = (props) => (key) => (<span key={key} className={(0, getBemClass_1.default)('Skeleton', [
+        props.text && 'text',
+        props.height && 'height--' + props.height,
+        props.gap && 'gap--' + props.gap,
+    ])}/>);
+const minmax = (num = 0, max = 100, min = 1) => {
+    num = Math.min(Math.max(Math.round(num), min), max);
+    return num > min ? num : undefined;
+};
+const Skeleton = (props) => {
+    const height = minmax(props.height, 40);
+    const renderSkeleton = makeRenderSkeleton({
+        height,
+        text: props.text,
+        gap: minmax(props.gap, 5, 0),
+    });
+    const items = minmax(props.items, 20) || 1;
+    if (items > 1) {
+        return <>{(0, range_1.default)(1, items).map(renderSkeleton)}</>;
+    }
+    return renderSkeleton();
+};
+exports.default = Skeleton;
+/** Returns a single `<Skeleton height={X}/>` element of branded type `SkeletonBlock` */
+Skeleton.block = (height) => (<Skeleton height={height}/>);
+/** Returns a single `<Skeleton text height={X}/>` element of branded type `SkeletonText` */
+Skeleton.text = (height) => (<Skeleton text height={height}/>);

package/SubHeading.jsx

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const SubHeading = (props) => {
+    const { small, Tag = 'h2', children, align, wide, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<Tag className={(0, getBemClass_1.default)('SubHeading', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])} ref={ref}>
+      {children}
+    </Tag>);
+};
+exports.default = SubHeading;

package/Tabs.jsx

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const frag_1 = require("@hugsmidjan/qj/frag");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const navKeyEffects = {
+    ArrowUp: -1,
+    ArrowLeft: -1,
+    ArrowDown: 1,
+    ArrowRight: 1,
+};
+// eslint-disable-next-line complexity
+const renderTab = (tabProps, index, listProps) => {
+    const { label, badge, href, type, longLabel } = tabProps;
+    const { activeIdx, activateTab, focusedIdx, setFocusedIdx, tabRole, listAriaControls, isBrowser, } = listProps;
+    const handleClick = isBrowser &&
+        ((e) => {
+            e.preventDefault();
+            activateTab(index);
+            e.currentTarget.focus();
+        });
+    const handleFocus = isBrowser && (() => setFocusedIdx(index));
+    const isActive = activeIdx === index || undefined;
+    const Tag = href && !tabRole ? 'a' : 'button';
+    const tagProps = Tag === 'button'
+        ? {
+            role: tabRole,
+            type: type || 'button',
+            // 'aria-selected': tabRole && isActive,
+            tabIndex: tabRole ? (focusedIdx === index ? 0 : -1) : undefined,
+            'aria-controls': tabProps['aria-controls'] || (tabRole && (0, frag_1.getFrag)(href)) || listAriaControls,
+        }
+        : { href };
+    return [
+        <Tag key={index} className="Tabs__tab" data-active={isActive} {...tagProps} onClick={handleClick} onFocus={handleFocus} aria-label={longLabel} title={longLabel} // make custom aria-labels visible
+        >
+      {label} {badge != null && <small className="Tabs__tab__badge">({badge})</small>}
+    </Tag>,
+        ' ',
+    ];
+};
+// NOTE: This isBrowser tablist behavior is based on
+// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
+const Tabs = (props) => {
+    var _a, _b;
+    const { tabs, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-controls': listAriaControls, id, activeIdx, onSetActive, activateOnFocus, ssr, startSeen, vertical, subTabs, } = props;
+    const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
+    const [focusedIdx, setFocusedIdx] = (0, react_1.useState)(activeIdx || 0);
+    const tabRole = isBrowser && role === 'tablist' ? 'tab' : undefined;
+    const activateTab = (index) => {
+        const tab = tabs[index];
+        if (index === activeIdx || !tab) {
+            return;
+        }
+        const ret = tab.onActivated && tab.onActivated.call(null);
+        if (onSetActive && ret !== false) {
+            onSetActive(index, tab);
+        }
+    };
+    const handleKeydown = tabRole &&
+        ((e) => {
+            var _a;
+            const delta = navKeyEffects[e.key];
+            if (delta) {
+                // prevent scolling +
+                // prevent bubbling to parent Tabs container
+                e.stopPropagation();
+                let nextIdx = (focusedIdx || 0) + delta;
+                const maxIdx = tabs.length - 1;
+                nextIdx = nextIdx < 0 ? maxIdx : nextIdx > maxIdx ? 0 : nextIdx;
+                (_a = e.currentTarget.querySelectorAll('.Tabs__tab')[nextIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+                activateOnFocus && activateTab(nextIdx);
+            }
+        });
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const listProps = {
+        activeIdx,
+        activateTab,
+        focusedIdx,
+        setFocusedIdx,
+        tabRole,
+        listAriaControls,
+        isBrowser,
+    };
+    return (<div className={(0, getBemClass_1.default)('Tabs', vertical && 'vertical')} role={tabRole && role} id={id} 
+    // aria-owns={tabIdList.join(' ')}
+    aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} onKeyDown={handleKeydown} data-sprinkled={isBrowser} ref={ref}>
+      {tabs.map((tabProps, index) => renderTab(tabProps, index, listProps))}
+      {subTabs && (<Tabs {...subTabs} role={'role' in subTabs ? subTabs.role : role} activateOnFocus={(_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus} ssr={(_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr} startSeen 
+        // just to be sure
+        vertical={undefined} subTabs={undefined}/>)}
+    </div>);
+};
+exports.default = Tabs;

package/TagPill.jsx

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const Button_1 = __importDefault(require("./_abstract/Button"));
+const colors = {
+    normal: '',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    orange: 'color--orange',
+    red: 'color--red',
+};
+const TagPill = (props) => {
+    const { modifier, large, removable, onRemove, children, color = 'normal', label = children, removeLabel = 'x', removeLabelLong = removeLabel } = props, buttonProps = __rest(props, ["modifier", "large", "removable", "onRemove", "children", "color", "label", "removeLabel", "removeLabelLong"]);
+    const isStatic = !('href' in props || 'type' in props || props.onClick);
+    process.env.NODE_ENV !== 'production' &&
+        removable &&
+        isStatic &&
+        !onRemove &&
+        console.warn('static (non-button) `TagPill`s must not be removable');
+    const modifiers = [modifier, large && 'large', colors[color]];
+    const removeBtn = removable && (<button className="TagPill__remove" onClick={onRemove && (() => onRemove())} aria-label={removeLabelLong} type="button">
+      {removeLabel}
+    </button>);
+    return isStatic ? (<span className={(0, getBemClass_1.default)('TagPill', modifiers)}>
+      {label} {removeBtn}
+    </span>) : onRemove ? (<span className={(0, getBemClass_1.default)('TagPill', modifiers)}>
+      <Button_1.default bem="TagPill__button" {...buttonProps}>
+        {label}
+      </Button_1.default>{' '}
+      {removeBtn}
+    </span>) : (<Button_1.default bem="TagPill" {...buttonProps} modifier={modifiers}>
+      {label}{' '}
+      {removable && (<span className="TagPill__remove" aria-label={removeLabelLong}>
+          {removeLabel}
+        </span>)}
+    </Button_1.default>);
+};
+exports.default = TagPill;

package/TextBlock.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const TextBlock = (props) => {
+    const { children, align, labelled, wide, small, startSeen } = props;
+    const rightAligned = align === 'right' || labelled;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('TextBlock', [
+            labelled && 'labelled',
+            rightAligned && 'align--right',
+            wide && !rightAligned && 'wide',
+            small && !labelled && 'small',
+        ])} ref={ref}>
+      {children}
+    </div>);
+};
+exports.default = TextBlock;

package/TextButton.jsx

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("./_abstract/Button"));
+const TextButton = (props) => {
+    if ('disabled' in props) {
+        props = Object.assign(Object.assign({}, props), { disabled: undefined });
+    }
+    return <Button_1.default bem="TextButton" {...props}/>;
+};
+exports.default = TextButton;

package/TextInput.jsx

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const FormField_1 = __importDefault(require("./FormField"));
+const TextInput = (props) => {
+    var _a;
+    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
+    const { value, defaultValue, placeholder } = inputElementProps;
+    const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const multiline = type === 'textarea';
+    const modifiers = [multiline && 'multiline'];
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            setHasValue(!!e.target.value);
+            onChange &&
+                onChange(
+                // TypeScript is silly sometimes.
+                e);
+        };
+    return (<FormField_1.default className={(0, getBemClass_1.default)('TextInput', modifiers, className)} ssr={ssr} small={small} label={label} empty={empty} filled={filled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => multiline ? (<textarea className={className.input} onChange={_onChange} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>) : (<input className={className.input} onChange={_onChange} type={type} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>)}/>);
+};
+exports.default = TextInput;

package/VSpacer.jsx

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const sizes = {
+    none: 'none',
+    small: 'small',
+    default: '',
+    medium: '',
+    large: 'large',
+    xlarge: 'xlarge',
+};
+const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
+const VSpacer = (props) => {
+    const { size, top, bottom, children } = props;
+    const isWrapper = hasChildren(children);
+    let topVal = normalizeProp(isWrapper && top);
+    let bottomVal = normalizeProp(isWrapper && bottom);
+    let sizeVal = !(topVal && bottomVal) && normalizeProp(size, 'none');
+    // collapse effectively-duplicate class modifiers
+    if (!sizeVal && topVal === bottomVal && topVal !== 'none') {
+        sizeVal = topVal;
+        topVal = bottomVal = undefined;
+    }
+    else if (sizeVal) {
+        if (sizeVal === topVal) {
+            sizeVal = topVal;
+            topVal = undefined;
+        }
+        if (sizeVal === bottomVal) {
+            sizeVal = bottomVal;
+            bottomVal = undefined;
+        }
+    }
+    const className = (0, getBemClass_1.default)('VSpacer', [
+        sizeVal,
+        topVal && 'top--' + topVal,
+        bottomVal && 'bottom--' + bottomVal,
+    ]);
+    return isWrapper ? (<div className={className}>{children}</div>) : (<hr className={className}/>);
+};
+exports.default = VSpacer;

package/VerticalTabsTOC.jsx

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const frag_1 = require("@hugsmidjan/qj/frag");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const Tabs_1 = __importDefault(require("./Tabs"));
+const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+    const updatedItems = items.map((item) => {
+        return Object.assign(Object.assign({}, item), { 'aria-controls': item['aria-controls'] || domid });
+    });
+    const itemsById = {};
+    updatedItems.forEach((topItem, activeIdx) => {
+        const subItems = topItem.items;
+        if (!subItems) {
+            const itemId = getItemId(topItem);
+            itemsById[itemId] = { activeIdx };
+            return;
+        }
+        subItems.forEach((subItem, idx) => {
+            itemsById[getItemId(subItem)] = {
+                activeIdx,
+                subTabs: {
+                    activeIdx: idx,
+                    'aria-label': topItem.longLabel || topItem.label,
+                    id: topItem['aria-controls'],
+                    tabs: subItems,
+                    onSetActive: (_, item) => {
+                        const newId = getItemId(item);
+                        (0, frag_1.setFrag)(newId);
+                    },
+                },
+            };
+            if (idx === 0) {
+                topItem.href = topItem.href || '#' + getItemId(subItem);
+            }
+        });
+    });
+    return { itemsById, updatedItems };
+};
+const VerticalTabsTOC = (props) => {
+    const { onItemSelect, items } = props;
+    const _domid = (0, hooks_1.useDomid)();
+    const domid = props.id || _domid;
+    const { itemsById, updatedItems } = (0, react_1.useMemo)(() => mapToItemsById(items, domid), [items, domid]);
+    const [state, setState] = (0, react_1.useState)(() => {
+        const initialId = typeof location !== 'undefined' ? getId(location.hash) : '';
+        return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+    });
+    (0, react_1.useEffect)(() => {
+        const handleHash = () => {
+            const newId = getId(location.href);
+            const newState = itemsById[newId];
+            if (newState) {
+                setState(newState);
+                onItemSelect(newId);
+            }
+        };
+        window.addEventListener('hashchange', handleHash);
+        return () => window.removeEventListener('hashchange', handleHash);
+    }, [itemsById, onItemSelect]);
+    return (<Tabs_1.default id={domid} vertical aria-label={props['aria-label']} onSetActive={(_, item) => {
+            var _a;
+            const itemId = getItemId(item);
+            const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
+            (0, frag_1.setFrag)(newId);
+        }} tabs={updatedItems} role="tablist" activeIdx={state.activeIdx} subTabs={state.subTabs}/>);
+};
+exports.default = VerticalTabsTOC;