@reykjavik/hanna-react 0.10.83 → 0.10.85

package/esm/index.d.ts

@@ -0,0 +1,97 @@
+/// <reference path="./AccordionList.d.tsx" />
+/// <reference path="./ActionCards.d.tsx" />
+/// <reference path="./Alert.d.tsx" />
+/// <reference path="./ArticleCards.d.tsx" />
+/// <reference path="./ArticleCarousel.d.tsx" />
+/// <reference path="./ArticleMeta.d.tsx" />
+/// <reference path="./assets.d.ts" />
+/// <reference path="./Attention.d.tsx" />
+/// <reference path="./BasicTable.d.tsx" />
+/// <reference path="./BgBox.d.tsx" />
+/// <reference path="./Bling.d.tsx" />
+/// <reference path="./BlockBreak.d.tsx" />
+/// <reference path="./BlockQuote.d.tsx" />
+/// <reference path="./BreadCrumbs.d.tsx" />
+/// <reference path="./ButtonBack.d.tsx" />
+/// <reference path="./ButtonBar.d.tsx" />
+/// <reference path="./ButtonPrimary.d.tsx" />
+/// <reference path="./ButtonSecondary.d.tsx" />
+/// <reference path="./ButtonTertiary.d.tsx" />
+/// <reference path="./Carousel.d.tsx" />
+/// <reference path="./CarouselStepper.d.tsx" />
+/// <reference path="./CenterColumn.d.tsx" />
+/// <reference path="./Checkbox.d.tsx" />
+/// <reference path="./CheckboxButton.d.tsx" />
+/// <reference path="./CheckboxButtonsGroup.d.tsx" />
+/// <reference path="./CheckboxGroup.d.tsx" />
+/// <reference path="./CityBlock.d.tsx" />
+/// <reference path="./constants.d.ts" />
+/// <reference path="./ContactBubble.d.tsx" />
+/// <reference path="./ContentArticle.d.tsx" />
+/// <reference path="./ContentImage.d.tsx" />
+/// <reference path="./Datepicker.d.tsx" />
+/// <reference path="./ExtraLinks.d.tsx" />
+/// <reference path="./FeatureList.d.tsx" />
+/// <reference path="./FieldGroup.d.tsx" />
+/// <reference path="./FileInput.d.tsx" />
+/// <reference path="./focus-visible.d.ts" />
+/// <reference path="./Foonote.d.tsx" />
+/// <reference path="./FooterBadges.d.tsx" />
+/// <reference path="./FooterInfo.d.tsx" />
+/// <reference path="./Footnote.d.tsx" />
+/// <reference path="./Form.d.tsx" />
+/// <reference path="./FormField.d.tsx" />
+/// <reference path="./Gallery.d.tsx" />
+/// <reference path="./GridBlocks.d.tsx" />
+/// <reference path="./Heading.d.tsx" />
+/// <reference path="./HeroBlock.d.tsx" />
+/// <reference path="./IframeBlock.d.tsx" />
+/// <reference path="./Illustration.d.tsx" />
+/// <reference path="./ImageCards.d.tsx" />
+/// <reference path="./InfoBlock.d.tsx" />
+/// <reference path="./InfoHero.d.tsx" />
+/// <reference path="./IslandBlock.d.tsx" />
+/// <reference path="./IslandPageBlock.d.tsx" />
+/// <reference path="./LabeledTextBlock.d.tsx" />
+/// <reference path="./Layout.d.tsx" />
+/// <reference path="./MainMenu.d.tsx" />
+/// <reference path="./MiniMetrics.d.tsx" />
+/// <reference path="./Modal.d.tsx" />
+/// <reference path="./NameCard.d.tsx" />
+/// <reference path="./NameCards.d.tsx" />
+/// <reference path="./NewsHero.d.tsx" />
+/// <reference path="./PageFilter.d.tsx" />
+/// <reference path="./PageHeading.d.tsx" />
+/// <reference path="./Picture.d.tsx" />
+/// <reference path="./ProcessOverview.d.tsx" />
+/// <reference path="./PullQuote.d.tsx" />
+/// <reference path="./RadioButtonsGroup.d.tsx" />
+/// <reference path="./RadioGroup.d.tsx" />
+/// <reference path="./RelatedLinks.d.tsx" />
+/// <reference path="./RowBlock.d.tsx" />
+/// <reference path="./RowBlockColumn.d.tsx" />
+/// <reference path="./SearchInput.d.tsx" />
+/// <reference path="./SearchResults.d.tsx" />
+/// <reference path="./SeenEffect.d.tsx" />
+/// <reference path="./Selectbox.d.tsx" />
+/// <reference path="./ShareButtons.d.tsx" />
+/// <reference path="./Sharpie.d.tsx" />
+/// <reference path="./SiteSearchAutocomplete.d.tsx" />
+/// <reference path="./SiteSearchCurtain.d.tsx" />
+/// <reference path="./SiteSearchInput.d.tsx" />
+/// <reference path="./Skeleton.d.tsx" />
+/// <reference path="./SubHeading.d.tsx" />
+/// <reference path="./Tabs.d.tsx" />
+/// <reference path="./TagPill.d.tsx" />
+/// <reference path="./TextBlock.d.tsx" />
+/// <reference path="./TextButton.d.tsx" />
+/// <reference path="./TextInput.d.tsx" />
+/// <reference path="./Tooltip.d.tsx" />
+/// <reference path="./utils.d.ts" />
+/// <reference path="./VerticalTabsTOC.d.tsx" />
+/// <reference path="./VSpacer.d.tsx" />
+/// <reference path="./WizardLayout.d.tsx" />
+/// <reference path="./WizardLayoutClose.d.tsx" />
+/// <reference path="./WizardStepper.d.tsx" />
+
+export {};

package/esm/index.js

@@ -0,0 +1 @@
+export {};

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/esm/utils/HannaUIState.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type HannaUIStateProps = {
+    closeHamburgerMenu: () => void;
+    isHamburgerMenuOpen: boolean | undefined;
+};
+export declare const HannaUIState: import("react").Provider<HannaUIStateProps>;
+export declare const useHannaUIState: () => HannaUIStateProps;
+export {};

package/esm/utils/HannaUIState.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const _HannaUIContext = createContext({
+    closeHamburgerMenu: () => undefined,
+    isHamburgerMenuOpen: undefined,
+});
+export const HannaUIState = _HannaUIContext.Provider;
+export const useHannaUIState = () => useContext(_HannaUIContext);

package/esm/utils/browserSide.d.ts

@@ -0,0 +1 @@
+export { useIsBrowserSide, useIsServerSide } from '@hugsmidjan/react/hooks';

package/esm/utils/browserSide.js

@@ -0,0 +1 @@
+export { useIsBrowserSide, useIsServerSide } from '@hugsmidjan/react/hooks';

package/esm/utils/config.d.ts

@@ -0,0 +1,4 @@
+export type { LinkRenderer } from '../_abstract/_Link.js';
+export { setLinkRenderer } from '../_abstract/_Link.js';
+export type { SSRSupport } from '@hugsmidjan/react/hooks';
+export { setDefaultSSR } from '@hugsmidjan/react/hooks';

package/esm/utils/config.js

@@ -0,0 +1,2 @@
+export { setLinkRenderer } from '../_abstract/_Link.js';
+export { setDefaultSSR } from '@hugsmidjan/react/hooks';

package/esm/utils/env.d.ts

@@ -0,0 +1 @@
+export declare const isPreact: true | undefined;

package/esm/utils/env.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const isPreact = 
+// imported from 'preact'
+'h' in React ||
+    // imported from 'preact/compat' (has all of `react-dom` bundled)
+    ('hydrate' in React && 'render' in React) ||
+    // `undefined` instead of `false` for nicer prop usage
+    undefined;

package/esm/utils/seenEffect.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+export declare const DATA_ATTR_NAME = "is-seen";
+export declare const getObserver: {
+    (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
+    DATA_ATTR_NAME: string;
+};
+declare const effects: {
+    readonly fadein: 1;
+    readonly fadeup: 1;
+    readonly fadeleft: 1;
+};
+export type SeenEffectType = keyof typeof effects;
+export type EffectProp = {
+    /** Should the component appear instantly, and not transition-in once seen */
+    effectType?: SeenEffectType | 'none';
+};
+/** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
+export declare const ensureEffectType: (maybeType?: string) => SeenEffectType | undefined;
+export declare const getEffectAttr: (maybeType?: string) => {
+    'data-seen-effect': string | undefined;
+};
+export type SeenProp = {
+    /** Should the component appear instantly, and not transition-in once seen */
+    startSeen?: boolean;
+};
+export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
+export {};

package/esm/utils/seenEffect.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef, useState } from 'react';
+export const DATA_ATTR_NAME = 'is-seen';
+const STACKING_DELAY = 400; // ms
+const dataAttr = 'data-' + DATA_ATTR_NAME;
+const inTargetSourceOrder = (a, b) => a.target.compareDocumentPosition(b.target) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+const options = {
+    // root: window
+    rootMargin: '-100px 0px 0px 0px',
+    threshold: 0, // 0
+};
+let observer;
+export const getObserver = (target, callback) => {
+    if (target.hasAttribute(dataAttr)) {
+        return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!observer) {
+        observer = new IntersectionObserver((entries, observer) => entries
+            .filter((e) => e.isIntersecting)
+            .sort(inTargetSourceOrder)
+            .forEach(({ target }, i) => {
+            setTimeout(() => {
+                target.setAttribute(dataAttr, 'true');
+                callback && callback(target);
+                observer.unobserve(target);
+            }, STACKING_DELAY * i);
+        }), options);
+    }
+    if (target.matches('[' + dataAttr + '] *')) {
+        // opt out if target is contained by another "seen-effect" element
+        target.setAttribute(dataAttr, '');
+        return;
+    }
+    target.setAttribute(dataAttr, 'false');
+    observer.observe(target);
+    // return teardown/unmount effect
+    return () => observer.unobserve(target);
+};
+getObserver.DATA_ATTR_NAME = DATA_ATTR_NAME;
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+const effects = {
+    fadein: 1,
+    fadeup: 1,
+    fadeleft: 1,
+};
+/** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
+export const ensureEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
+export const getEffectAttr = (maybeType) => ({
+    'data-seen-effect': maybeType === 'none' ? undefined : ensureEffectType(maybeType) || '',
+});
+export const useSeenEffect = (
+/** Should the component appear instantly, and not transition-in once seen */
+startSeen, 
+/** Bring Your Own RefObject */
+customRef) => {
+    const _startSeen = startSeen || undefined; // normalize
+    const [isSeen, setSeen] = useState(_startSeen);
+    const localRef = useRef(null);
+    const ref = customRef || localRef;
+    useEffect(() => {
+        setSeen(_startSeen);
+        const refElm = ref.current;
+        if (refElm) {
+            if (_startSeen) {
+                refElm.setAttribute(dataAttr, '');
+            }
+            else {
+                refElm.removeAttribute(dataAttr);
+                return getObserver(refElm, () => setSeen(true));
+            }
+        }
+    }, [_startSeen, ref]);
+    return [ref, isSeen];
+};

package/esm/utils/useDidChange.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Reports if value changed since last time the hook was called.
+ *
+ * Returns an `{ lastValue }` shaped object, when change is detected.
+ * Returns `undefined` otherwise
+ *
+ * Common usage is if you want an component which is effectively uncontrolled,
+ * but resets/changes its internal state whenever a certain prop value changes.
+ *
+ * ```tsx
+ * import { useDidChange } from './utils.js';
+ * // import { useDidChange } from '@reykjavik/hanna-react/utils';
+ *
+ * // inside your component/hook
+ * const [visible, setVisible] = useState(props.visible);
+ * if (useDidChange(props.visible)) {
+ *   setVisible(props.visible);
+ * }
+ * ```
+ *
+ * Another use case might be to capture not only IF but HOW a prop value changed
+ * in a controlled component
+ *
+ * ```tsx
+ * const [trend, setTrend] = useState(null);
+ * const countChanged = useDidChange(props.count);
+ * if (countChanged) {
+ *   setTrend(props.count > countChanged.lastValue ? 'increasing' : 'decreasing');
+ * }
+ * ```
+ *
+ * **NOTE:** This hook should be handled with care, as its overuse can easily lead
+ * to poorly structured and buggy component behavior.
+ */
+export declare const useDidChange: <T>(value: T) => {
+    lastValue: T;
+} | undefined;

package/esm/utils/useDidChange.js

@@ -0,0 +1,43 @@
+import { useRef } from 'react';
+/**
+ * Reports if value changed since last time the hook was called.
+ *
+ * Returns an `{ lastValue }` shaped object, when change is detected.
+ * Returns `undefined` otherwise
+ *
+ * Common usage is if you want an component which is effectively uncontrolled,
+ * but resets/changes its internal state whenever a certain prop value changes.
+ *
+ * ```tsx
+ * import { useDidChange } from './utils.js';
+ * // import { useDidChange } from '@reykjavik/hanna-react/utils';
+ *
+ * // inside your component/hook
+ * const [visible, setVisible] = useState(props.visible);
+ * if (useDidChange(props.visible)) {
+ *   setVisible(props.visible);
+ * }
+ * ```
+ *
+ * Another use case might be to capture not only IF but HOW a prop value changed
+ * in a controlled component
+ *
+ * ```tsx
+ * const [trend, setTrend] = useState(null);
+ * const countChanged = useDidChange(props.count);
+ * if (countChanged) {
+ *   setTrend(props.count > countChanged.lastValue ? 'increasing' : 'decreasing');
+ * }
+ * ```
+ *
+ * **NOTE:** This hook should be handled with care, as its overuse can easily lead
+ * to poorly structured and buggy component behavior.
+ */
+export const useDidChange = (value) => {
+    const lastValueRef = useRef(value);
+    const lastValue = lastValueRef.current;
+    if (value !== lastValue) {
+        lastValueRef.current = value;
+        return { lastValue };
+    }
+};

package/esm/utils/useFormatMonitor.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Pass a callback that gets called whenever the browser window
+ * resizes past one of the preconfigured "media-format" breakpoints.
+ *
+ * Exmple use:
+ *
+ * ```ts
+ * useFormatMonitor((media) => {
+ *   if (media.is === 'phone') {
+ *     // do something clever because the window
+ *     // just became "phone" sized.
+ *   }
+ *   if (media.was === 'phone') {
+ *     // do something clever because the window
+ *     // just stopped being "phone" sized.
+ *   }
+ * })
+ * ```
+ *
+ * The `media` argument has the following properties:
+ *
+ * ```ts
+ *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
+ *  media.is //: Format
+ *  media.was //?: Format
+ *  // Category/mode boolean flags
+ *  // (Hamburger refers to the "mobile menu" mode)
+ *  media.isTopmenu
+ *  media.isHamburger
+ *  media.wasTopmenu
+ *  media.wasHamburger
+ *  media.becameTopmenu
+ *  media.becameHamburger
+ *  media.leftTopmenu
+ *  media.leftHamburger
+ * ```
+ */
+export declare const useFormatMonitor: (callback: ((media: import("formatchange").BaseMedia & Record<"isHamburger" | "isTopmenu" | "wasHamburger" | "wasTopmenu" | "becameHamburger" | "becameTopmenu" | "leftHamburger" | "leftTopmenu", boolean>) => void) | undefined) => void;

package/esm/utils/useFormatMonitor.js

@@ -0,0 +1,41 @@
+import { getFormatMonitor } from '@reykjavik/hanna-utils';
+import { makeFormatMonitorHook } from 'formatchange/react';
+// ==================================================
+/**
+ * Pass a callback that gets called whenever the browser window
+ * resizes past one of the preconfigured "media-format" breakpoints.
+ *
+ * Exmple use:
+ *
+ * ```ts
+ * useFormatMonitor((media) => {
+ *   if (media.is === 'phone') {
+ *     // do something clever because the window
+ *     // just became "phone" sized.
+ *   }
+ *   if (media.was === 'phone') {
+ *     // do something clever because the window
+ *     // just stopped being "phone" sized.
+ *   }
+ * })
+ * ```
+ *
+ * The `media` argument has the following properties:
+ *
+ * ```ts
+ *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
+ *  media.is //: Format
+ *  media.was //?: Format
+ *  // Category/mode boolean flags
+ *  // (Hamburger refers to the "mobile menu" mode)
+ *  media.isTopmenu
+ *  media.isHamburger
+ *  media.wasTopmenu
+ *  media.wasHamburger
+ *  media.becameTopmenu
+ *  media.becameHamburger
+ *  media.leftTopmenu
+ *  media.leftHamburger
+ * ```
+ */
+export const useFormatMonitor = makeFormatMonitorHook(getFormatMonitor);

package/esm/utils/useGetSVGtext.d.ts

@@ -0,0 +1,10 @@
+type SVGMeta = {
+    imageSrc: string;
+    code: string;
+};
+/**
+ * Fetches a remote SVG image and returns its XML/source
+ * string for inlining, or further processing
+ */
+export declare const useGetSVGtext: (imageSrc: string | undefined) => SVGMeta | undefined;
+export {};

package/esm/utils/useGetSVGtext.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from 'react';
+import { getSVGtext } from '@reykjavik/hanna-utils';
+/**
+ * Fetches a remote SVG image and returns its XML/source
+ * string for inlining, or further processing
+ */
+export const useGetSVGtext = (imageSrc) => {
+    const [inlineSvg, setInlineSvg] = useState();
+    const srcRef = useRef(imageSrc);
+    useEffect(() => {
+        if (imageSrc) {
+            getSVGtext(imageSrc).then((code) => {
+                if (imageSrc === srcRef.current) {
+                    setInlineSvg({ imageSrc, code });
+                }
+            });
+        }
+        srcRef.current = imageSrc;
+        setInlineSvg(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [imageSrc]);
+    return inlineSvg;
+};

package/esm/utils/useMenuToggling.d.ts

@@ -0,0 +1,8 @@
+type MenuTogglingState = {
+    isMenuActive: true | undefined;
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    closeMenu: () => void;
+};
+export declare const useMenuToggling: (doInitialize?: boolean) => MenuTogglingState;
+export {};

package/esm/utils/useMenuToggling.js

@@ -0,0 +1,62 @@
+import { useRef, useState } from 'react';
+import { focusElement } from '@reykjavik/hanna-utils';
+import { useFormatMonitor } from './useFormatMonitor.js';
+const htmlClass = (className, add) => {
+    document.documentElement.classList[add ? 'add' : 'remove'](className);
+};
+const noop = () => undefined;
+// ---------------------------------------------------------------------------
+export const useMenuToggling = (doInitialize = true) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isMenuActive, setIsMenuActive] = useState();
+    const _state = { isMenuOpen, isMenuActive };
+    const stateRef = useRef(_state);
+    stateRef.current = _state;
+    const _openMenu = () => {
+        if (!stateRef.current.isMenuOpen) {
+            setIsMenuOpen(true);
+            htmlClass('menu-is-open', true);
+            htmlClass('menu-is-closed', false);
+            focusElement('#pagenav');
+        }
+    };
+    const _closeMenu = () => {
+        if (stateRef.current.isMenuOpen) {
+            setIsMenuOpen(false);
+            htmlClass('menu-is-closed', true);
+            htmlClass('menu-is-open', false);
+            focusElement('.Layout__header__skiplink');
+        }
+    };
+    useFormatMonitor(doInitialize
+        ? (media) => {
+            if (media.becameHamburger) {
+                setIsMenuActive(true);
+                htmlClass('menu-is-active', true);
+                htmlClass('menu-is-closed', true);
+            }
+            if (media.leftHamburger) {
+                _closeMenu();
+                setIsMenuActive(undefined);
+                htmlClass('menu-is-active', false);
+                htmlClass('menu-is-closed', false);
+            }
+        }
+        : noop);
+    const { toggleMenu, closeMenu } = useRef(doInitialize
+        ? {
+            toggleMenu: () => {
+                if (stateRef.current.isMenuActive) {
+                    stateRef.current.isMenuOpen ? _closeMenu() : _openMenu();
+                }
+            },
+            closeMenu: _closeMenu,
+        }
+        : { toggleMenu: noop, closeMenu: noop }).current;
+    return {
+        isMenuActive,
+        isMenuOpen,
+        toggleMenu,
+        closeMenu,
+    };
+};

package/esm/utils/useMixedControlState.d.ts

@@ -0,0 +1,137 @@
+import { Dispatch, SetStateAction } from 'react';
+type CtrlMode = 'controlled' | 'uncontrolled' | undefined;
+type RetArray<R> = [value: R, setValue: Dispatch<SetStateAction<R>>, mode: CtrlMode];
+type DefaultProp<N extends string> = `default${Capitalize<N>}`;
+type PropPair<N extends string> = N | DefaultProp<N>;
+type StrictKeys<P extends Record<string, unknown>, N extends string> = PropPair<N> extends keyof P ? P : {
+    [Key in PropPair<N>]: P[Key];
+};
+/**
+ * State hook to simplify dealing with a the complexities of supporting a mixture
+ * of "controlled" and "uncontrolled" component state.
+ *
+ * The returned value and dispatcher/setter function return the controlled
+ * `value`, but gracefully handle changes in defaultValue in uncontrolled mode,
+ * and handles (unexpected) "mode-changes" in a predictable manner.
+ *
+ * It assumes (by default) that the calling component has
+ * a pair of props following the naming convention `foo` and `defaultFoo` —
+ * similar to React's own `<input/>` and `<select/>` HTML components warn about
+ * their `value` and `defaultValue` props being misused.
+ *
+ * NOTE: This hook also exposes a slightly lower-level helper hook
+ * `useMixedControlState.raw(value, defaultValue)`, for cases where you don't
+ * have a neatly-shaped props object as described above, or you need to do
+ * some sort of pre-processing of either prop value.
+ *
+ * ```tsx
+ * import React, { FC, ReactNode } from 'react';
+ * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
+ *
+ * type FooBarProps = {
+ *   visible?: boolean;
+ *   onChange?: (newVisible: boolean) => void;
+ *   defaultVisible?: boolean;
+ * };
+ *
+ * export const FooBar: FC<FooBarProps> = (props) => {
+ *   const [visible, setVisible] = useMixedControlState(props, 'visible', true);
+ *
+ *   const handleToggle = () => {
+ *     props.onChange?.(!visible);
+ *     setVisible(!visible);
+ *   };
+ *   return (
+ *     <div>
+ *       <button onClick={handleToggle}>Toggle</button>
+ *       <div hidden={!visible}>{props.children}</div>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare function useMixedControlState<N extends string, P extends {
+    [x in PropPair<N>]?: unknown;
+}, D extends Exclude<V, undefined>, V = P[DefaultProp<N>] | P[N]>(
+/** The props object of your component  */
+props: StrictKeys<P, N>, // StrictKeys give nicer error messages to users.
+/** Name of the prop for the controlled value */
+name: N, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue: D): RetArray<Exclude<V, undefined>>;
+export declare function useMixedControlState<N extends string, P extends {
+    [x in PropPair<N>]?: unknown;
+}, D extends Exclude<V, undefined>, V = P[DefaultProp<N>] | P[N]>(
+/** The props object of your component  */
+props: StrictKeys<P, N>, // StrictKeys give nicer error messages to users.
+/** Name of the prop for the controlled value */
+name: N, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue?: D): RetArray<V>;
+export declare namespace useMixedControlState {
+    var $warningLogger: ((message: string) => void) | undefined;
+    var raw: typeof useRaw;
+}
+/**
+ * A slightly lower-level hook alternative to
+ * `useMixedControlState(props, name)`, for cases where you don't
+ * have a neatly-/conventionally-shaped props object, or if you need to do
+ * some sort of pre-processing of either prop value.
+ *
+ * ```tsx
+ * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
+ *
+ * declare const props: { visible?: boolean; defaultVisible?: boolean };
+ *
+ * const [vislble, setVisible] = useMixedControlState.raw(
+ *    props.vislble,
+ *    props.defaultVisible,
+ *    'visible'
+ * );
+ * // has the same effect as this:
+ * const [visible, setVisible] = useMixedControlState(props, 'visible');
+ * ```
+ */
+declare function useRaw<C, U, D extends Exclude<C | U, undefined>>(
+/** Controlled value. */
+value: C, 
+/** Default/initial value for uncontrolled use. */
+defaultValue: U, 
+/**
+ * Prop name to display more meaningful warnings about when value
+ * and defaultValue are both defined, or if the component switches
+ * between modes mid-stream.
+ *
+ * If left undefined, the hook emits more generic/vague warnings
+ */
+warningPropName: string | undefined, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue: D): RetArray<Exclude<C | U, undefined>>;
+declare function useRaw<C, U, D extends C | U>(
+/** Controlled value. */
+value: C, 
+/** Default/initial value for uncontrolled use. */
+defaultValue: U, 
+/**
+ * Prop name to display more meaningful warnings about when value
+ * and defaultValue are both defined, or if the component switches
+ * between modes mid-stream.
+ *
+ * If left undefined, the hook emits more generic/vague warnings
+ */
+warningPropName?: string, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue?: D): RetArray<C | U>;
+export {};