@reykjavik/hanna-react 0.10.103 → 0.10.104

package/SiteSearchInput.js

@@ -5,9 +5,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 // ---------------------------------------------------------------------------
-exports.SiteSearchInput = react_1.default.forwardRef((props, ref) => {
+const SiteSearchInput = (props) => {
     var _a;
-    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "buttonText", "onSubmit", "onButtonClick", "onKeyDown", "placeholder", "fieldWrapperProps"]);
+    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, button, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "buttonText", "onSubmit", "onButtonClick", "button", "onKeyDown", "placeholder", "fieldWrapperProps"]);
     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);
@@ -18,16 +18,19 @@ exports.SiteSearchInput = react_1.default.forwardRef((props, ref) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
+    const showButton = button !== false;
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: "SiteSearchInput", empty: empty, filled: filled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
             react_1.default.createElement("input", Object.assign({ className: "SiteSearchInput__input", onChange: _onChange }, inputProps, { placeholder: placeholder, onKeyDown: onSubmit
                     ? (e) => {
-                        if (e.key === 'Enter' && onSubmit() !== true) {
+                        if (e.key === 'Enter' && onSubmit(e.currentTarget.value) !== true) {
                             e.preventDefault();
                         }
                         onKeyDown && onKeyDown(e);
                     }
-                    : onKeyDown }, inputElementProps, { ref: ref })),
+                    : onKeyDown }, inputElementProps)),
             ' ',
-            react_1.default.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick && ((e) => !onButtonClick() && e.preventDefault()), title: buttonText }, buttonText))) })));
-});
+            showButton && (react_1.default.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick &&
+                    ((e) => onButtonClick(e.currentTarget.value) !== true && e.preventDefault()), title: buttonText }, buttonText)))) })));
+};
+exports.SiteSearchInput = SiteSearchInput;
 exports.default = exports.SiteSearchInput;

package/Tooltip.js

@@ -5,12 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("@floating-ui/react");
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const hooks_1 = require("@hugsmidjan/react/hooks");
+const useCallbackOnEsc_js_1 = require("./utils/useCallbackOnEsc.js");
+const useLaggedState_js_1 = require("./utils/useLaggedState.js");
 const getSide = (placement) => placement.split('-')[0];
 const Tooltip = (props) => {
     const { text, label, iconOnly, wrapperProps = {} } = props;
     const arrowRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, hooks_1.useLaggedState)(false, 300);
+    const [isOpen, setIsOpen] = (0, useLaggedState_js_1.useLaggedState)(false, 300);
     const { x, y, refs, middlewareData, placement } = (0, react_2.useFloating)({
         placement: 'top',
         middleware: [(0, react_2.offset)(10), (0, react_2.flip)(), (0, react_2.shift)(), (0, react_2.arrow)({ element: arrowRef })],
@@ -19,7 +20,7 @@ const Tooltip = (props) => {
     const { arrow } = middlewareData;
     const arrowX = arrow === null || arrow === void 0 ? void 0 : arrow.x;
     const arrowY = arrow === null || arrow === void 0 ? void 0 : arrow.y;
-    (0, hooks_1.useCallbackOnEsc)(() => {
+    (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(() => {
         setIsOpen(false);
     });
     return (react_1.default.createElement("details", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('Tooltip', getSide(placement), wrapperProps.className), open: isOpen, onMouseEnter: (e) => {

package/VerticalTabsTOC.js

@@ -4,7 +4,7 @@ exports.VerticalTabsTOC = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const frag_1 = require("@hugsmidjan/qj/frag");
-const hooks_1 = require("@hugsmidjan/react/hooks");
+const useDomid_js_1 = require("./utils/useDomid.js");
 const Tabs_js_1 = tslib_1.__importDefault(require("./Tabs.js"));
 const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
 const getItemId = (item) => getId(item && item.href);
@@ -43,7 +43,7 @@ const mapToItemsById = (items, domid) => {
 };
 const VerticalTabsTOC = (props) => {
     const { onItemSelect, items } = props;
-    const _domid = (0, hooks_1.useDomid)();
+    const _domid = (0, useDomid_js_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)(() => {

package/_abstract/_ScrollWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WrapperElmProps } from '../utils.js';
+import { BemProps } from '../utils/types.js';
+type ScrollWrapperProps = {
+    children: React.ReactNode;
+} & BemProps & WrapperElmProps;
+export declare const ScrollWrapper: (props: ScrollWrapperProps & {
+    innerWrap?: true;
+}) => JSX.Element;
+export {};

package/_abstract/_ScrollWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollWrapper = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const utils_js_1 = require("../utils.js");
+const useScrollEdgeDetect_js_1 = require("../utils/useScrollEdgeDetect.js");
+const scrollOptions = {
+    axis: 'horizontal',
+};
+const ScrollWrapper = (props) => {
+    const { innerWrap, children, modifier, bem = 'ScrollWrapper', wrapperProps = {}, } = props;
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)();
+    const [scrollerRef, scrollAt] = (0, useScrollEdgeDetect_js_1.useScrollEdgeDetect)(scrollOptions, wrapperProps.ref);
+    const modifiers = isBrowser
+        ? [modifier, 'at', scrollAt.start && 'at--start', scrollAt.end && 'at--end']
+        : modifier;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifiers, wrapperProps.className), ref: !innerWrap ? scrollerRef : undefined }), isBrowser && innerWrap ? (react_1.default.createElement("div", { className: `${bem}__scroller`, ref: scrollerRef }, children)) : (children)));
+};
+exports.ScrollWrapper = ScrollWrapper;

package/_abstract/_Table.d.ts

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { HTMLProps, WrapperElmProps } from '../utils.js';
+type SectionTag = 'thead' | 'tfoot' | 'tbody';
+type RowPropsFunction = (rowIdx: number, section: SectionTag) => HTMLProps<'tr'> | undefined;
+export type TableCellMeta = {
+    className?: string;
+    number?: false;
+    tel?: false;
+    text?: false;
+} | {
+    className?: string;
+    number: true | 'pos' | 'neg';
+    tel?: false;
+    text?: false;
+} | {
+    className?: string;
+    tel: true;
+    number?: false;
+    text?: false;
+} | {
+    className?: string;
+    text: true | 'right' | 'center';
+    number?: false;
+    tel?: false;
+};
+export type TableCellData = {
+    value: ReactNode | ((rowIdx: number) => ReactNode);
+    colSpan?: number;
+    key?: string | number;
+} & TableCellMeta;
+type RowData = {
+    cells: Array<TableCellData>;
+    key: string | number | undefined;
+};
+export type TableCols = Array<TableCellMeta | null>;
+export type TableCell = string | TableCellData;
+export type TableRow = Array<TableCell> | {
+    cells: Array<TableCell>;
+    /** Manual `key` prop for stable re-renders */
+    key?: string | number;
+};
+type TableSection = Array<TableRow>;
+export type TableBody = TableSection;
+export type TableHead = TableSection;
+export type TableFoot = TableSection;
+export type TableData = {
+    caption?: ReactNode;
+    thead: TableHead;
+    tfoot?: TableFoot;
+} & ({
+    tbody: TableBody;
+    tbodies?: undefined;
+} | {
+    tbody?: undefined;
+    tbodies: Array<TableBody>;
+});
+type TableSectionProps = {
+    section: Array<RowData>;
+    cols?: TableCols;
+    Tag: SectionTag;
+    getRowProps: RowPropsFunction;
+};
+declare const TableSection: ({ section, cols, Tag, getRowProps }: TableSectionProps) => JSX.Element | null;
+export type TableProps = TableData & {
+    cols?: TableCols;
+    rowProps?: HTMLProps<'tr'> | RowPropsFunction;
+} & WrapperElmProps<'table'>;
+export declare const Table: React.MemoExoticComponent<(props: TableProps & {
+    className?: string;
+}) => JSX.Element>;
+export {};

package/_abstract/_Table.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const TableCell = (props) => {
+    const { data, meta = {}, rowIdx, rowScope } = props;
+    const Tag = props.th ? 'th' : 'td';
+    const { className = meta.className || '', number = meta.number, text = meta.text, tel = meta.tel, value, colSpan, } = data;
+    const numberClass = !number
+        ? ''
+        : number === true
+            ? 'Cell--number'
+            : 'Cell--number Cell--number--' + number;
+    const textClass = !text
+        ? ''
+        : text === true
+            ? 'Cell--text'
+            : 'Cell--text Cell--text--' + text;
+    const telClass = tel ? 'Cell--tel' : '';
+    return (react_1.default.createElement(Tag, { className: (0, classUtils_1.classes)(numberClass || telClass || textClass, className), colSpan: colSpan && colSpan > 1 ? colSpan : undefined, scope: rowScope ? 'row' : undefined }, typeof value === 'function' ? value(rowIdx) : value));
+};
+const TableSection = ({ section, cols = [], Tag, getRowProps }) => section.length ? (react_1.default.createElement(Tag, null, section.map(({ key, cells }, rowIdx) => {
+    let colIdx = 0;
+    return (react_1.default.createElement("tr", Object.assign({}, getRowProps(rowIdx, Tag), { key: key != null ? key : rowIdx }), cells.map((cell, i) => {
+        const rowScope = i === 0;
+        const meta = cols[colIdx];
+        colIdx += cell.colSpan || 1;
+        return (react_1.default.createElement(TableCell, { key: cell.key || i, th: Tag === 'thead' || rowScope, data: cell, meta: meta || undefined, rowIdx: rowIdx, rowScope: rowScope }));
+    })));
+}))) : null;
+// ===========================================================================
+const normalizeTableSectData = (rows) => !rows.length
+    ? undefined
+    : rows.map((row) => {
+        const cells = 'cells' in row ? row.cells : row;
+        return {
+            cells: cells.map((data) => (typeof data === 'string' ? { value: data } : data)),
+            key: 'key' in row ? row.key : undefined,
+        };
+    });
+exports.Table = (0, react_1.memo)((props) => {
+    const { caption, cols, className, rowProps, wrapperProps } = props;
+    const getRowProps = typeof rowProps === 'function' ? rowProps : () => rowProps;
+    const thead = (0, react_1.useMemo)(() => normalizeTableSectData(props.thead), [props.thead]);
+    const tfoot = (0, react_1.useMemo)(() => props.tfoot && normalizeTableSectData(props.tfoot), [props.tfoot]);
+    const tbodies = (0, react_1.useMemo)(() => (props.tbodies || [props.tbody]).map(normalizeTableSectData).filter(hanna_utils_1.notNully), [props.tbody, props.tbodies]);
+    return (react_1.default.createElement("table", Object.assign({}, wrapperProps, { className: (0, classUtils_1.classes)(className, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className) }),
+        caption && react_1.default.createElement("caption", null, caption),
+        thead && (react_1.default.createElement(TableSection, { section: thead, cols: cols, Tag: "thead", getRowProps: getRowProps })),
+        tfoot && (react_1.default.createElement(TableSection, { section: tfoot, cols: cols, Tag: "tfoot", getRowProps: getRowProps })),
+        tbodies.map((section, i) => (react_1.default.createElement(TableSection, { key: i, section: section, cols: cols, Tag: "tbody", getRowProps: getRowProps })))));
+});

package/_abstract/_TogglerGroup.js

@@ -4,14 +4,14 @@ exports.TogglerGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const utils_js_1 = require("../utils.js");
+const useDomid_js_1 = require("../utils/useDomid.js");
 const TogglerGroup = (props) => {
     const { 
     // id,
     className, bem, disabled, readOnly, Toggler, onSelected, isRadio, inputProps = {}, } = props;
     const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
-    const name = (0, hooks_1.useDomid)(props.name);
+    const name = (0, useDomid_js_1.useDomid)(props.name);
     const options = (0, react_1.useMemo)(() => {
         const _options = props.options;
         return typeof _options[0] === 'string'

package/_abstract/_TogglerInput.js

@@ -4,10 +4,10 @@ exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const hooks_1 = require("@hugsmidjan/react/hooks");
+const useDomid_js_1 = require("../utils/useDomid.js");
 const TogglerInput = (props) => {
     const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
-    const domid = (0, hooks_1.useDomid)(id);
+    const domid = (0, useDomid_js_1.useDomid)(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
         // FIXME: add mo-better i18n thinking

package/_mixed_export_resolution_/ReactDatepicker.d.ts

@@ -4,3 +4,6 @@ export declare const registerLocale: typeof reactDropzonePkg.registerLocale;
 export declare const setDefaultLocale: typeof reactDropzonePkg.setDefaultLocale;
 export declare const getDefaultLocale: typeof reactDropzonePkg.getDefaultLocale;
 export declare const CalendarContainer: typeof reactDropzonePkg.CalendarContainer;
+export type CalendarContainerProps = reactDropzonePkg.CalendarContainerProps;
+export type ReactDatePickerCustomHeaderProps = reactDropzonePkg.ReactDatePickerCustomHeaderProps;
+export type ReactDatePickerProps = reactDropzonePkg.ReactDatePickerProps;

package/esm/AccordionList.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import { useDomid } from '@hugsmidjan/react/hooks';
+import { useDomid } from './utils/useDomid.js';
 import { useIsBrowserSide, useMixedControlState, } from './utils.js';
 const AccordionListItem = (props) => {
     const { title, content, id, disabled = false, ssr, open, onToggle } = props;

package/esm/Alert.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AlertI18n = {
     closeLabel: string;
@@ -23,7 +23,7 @@ export type AlertProps = {
     /** server-side anchor href */
     closeUrl?: string;
     texts?: AlertI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & SSRSupportProps & EitherObj<{
     /** Seconds until the Alert auto-closes.
      *

package/esm/Alert.js

@@ -34,6 +34,7 @@ const useAutoClosing = (autoClose, props) => {
 export const defaultAlertTexts = {
     en: { closeLabel: 'Hide' },
     is: { closeLabel: 'Fela' },
+    pl: { closeLabel: 'Ukryj' },
 };
 export const alertTypes = {
     info: 1,

package/esm/AutosuggestSearch.d.ts

@@ -0,0 +1,40 @@
+import { RenderInputComponentProps } from 'react-autosuggest';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
+import { SearchInputProps } from './SearchInput.js';
+import { SiteSearchInputProps } from './SiteSearchInput.js';
+import { WrapperElmProps } from './utils.js';
+export type AutosuggestSearchI18n = {
+    /** Label for the autocomplete's combobox container div */
+    label: string;
+    /** Label for the text input */
+    inputLabel: string;
+    /** Label for the search button */
+    buttonText: string;
+    /** Placeholder text for the text input */
+    placeholder?: string;
+    /** Label for the suggestions item list container */
+    suggestionsLabel: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    lang?: string;
+};
+export declare const defaultAutosuggestSearchTexts: DefaultTexts<AutosuggestSearchI18n>;
+export type AutosuggestSearchProps<T extends string | object> = {
+    options: Array<T>;
+    onInput: (value: string) => void;
+    onSelected: (payload: {
+        value: string;
+        option: T;
+    }) => void;
+    onClearOptions: () => void;
+    getOptionValue?: (option: T) => string;
+    renderSuggestion?: (option: T, context: {
+        query: string;
+        isHighlighted: boolean;
+    }) => JSX.Element | string;
+    itemActionIcon?: 'search' | 'go';
+    InputComponent?: (props: SiteSearchInputProps & SearchInputProps) => JSX.Element;
+    renderInputField?: (inputProps: RenderInputComponentProps, texts: AutosuggestSearchI18n) => JSX.Element;
+    texts?: AutosuggestSearchI18n;
+    lang?: HannaLang;
+} & Pick<SearchInputProps, 'onSubmit' | 'onButtonClick' | 'button'> & WrapperElmProps;
+export declare const AutosuggestSearch: <T extends string | object>(props: AutosuggestSearchProps<T>) => JSX.Element;

package/esm/AutosuggestSearch.js

@@ -0,0 +1,66 @@
+import { __rest } from "tslib";
+import React, { createRef, useState } from 'react';
+import Autosuggest from 'react-autosuggest';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import SearchInput from './SearchInput.js';
+export const defaultAutosuggestSearchTexts = {
+    is: {
+        label: 'Leit á vefnum',
+        inputLabel: 'Leitarorð',
+        buttonText: 'Leita',
+        placeholder: 'Sláðu inn leitarorð',
+        suggestionsLabel: 'Tillögur',
+    },
+    en: {
+        label: 'Site search',
+        inputLabel: 'Search terms',
+        buttonText: 'Search',
+        placeholder: 'Enter search terms',
+        suggestionsLabel: 'Suggestions',
+    },
+    pl: {
+        label: 'Wyszukiwanie na stronie',
+        inputLabel: 'Wyszukaj frazę',
+        buttonText: 'Szukaj',
+        placeholder: 'Wpisz frazę',
+        suggestionsLabel: 'Sugestie',
+    },
+};
+export const AutosuggestSearch = (props) => {
+    const { options, itemActionIcon, onInput, onSelected, onClearOptions, onSubmit, onButtonClick = onSubmit, button, getOptionValue = (opt) => typeof opt !== 'object' || !('value' in opt)
+        ? opt.toString()
+        : opt.value != null
+            ? opt.value.toString()
+            : '', renderSuggestion = (opt) => typeof opt === 'object' && 'label' in opt && opt.label != null
+        ? opt.label.toString()
+        : getOptionValue(opt), InputComponent = SearchInput, renderInputField, wrapperProps, } = props;
+    const [value, setValue] = useState('');
+    const inputRef = createRef();
+    const txt = getTexts(props, defaultAutosuggestSearchTexts);
+    return (React.createElement(Autosuggest, { theme: {
+            container: 'AutosuggestSearch',
+            containerOpen: 'AutosuggestSearch--open',
+            suggestionsContainer: 'AutosuggestSearch__container',
+            suggestionsContainerOpen: 'AutosuggestSearch__container--open',
+            suggestionsList: modifiedClass('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
+            suggestion: 'AutosuggestSearch__item',
+            suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
+        }, focusInputOnSuggestionClick: true, suggestions: options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: getOptionValue, onSuggestionSelected: (_event, data) => {
+            onSelected({ value: data.suggestionValue, option: data.suggestion });
+        }, 
+        // onSuggestionHighlighted={onSuggestionHighlighted}
+        renderSuggestion: renderSuggestion, containerProps: Object.assign(Object.assign({}, wrapperProps), { 'aria-label': txt.label }), renderSuggestionsContainer: ({ containerProps, children }) => (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), children)), inputProps: {
+            ref: inputRef,
+            value: value,
+            onChange: (_, { newValue }) => {
+                setValue(newValue);
+            },
+        }, renderInputComponent: renderInputField
+            ? (inputProps) => renderInputField(inputProps, txt)
+            : (inputProps) => {
+                /* prettier-ignore */
+                const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
+                return (React.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+            } }));
+};

package/esm/BasicTable.d.ts

@@ -1,15 +1,35 @@
-import { TableProps } from '@hugsmidjan/react/Table';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { TableProps } from './_abstract/_Table.js';
 import { DeprecatedSeenProp } from './utils/seenEffect.js';
-import { MissingWrapperElmProps } from './utils.js';
+import { HTMLProps, WrapperElmProps } from './utils.js';
+type TableType = 'text' | 'number';
+export type { TableBody, TableCell, TableCellData, TableCellMeta, TableCols, TableFoot, TableHead, TableRow, } from './_abstract/_Table.js';
 export type BasicTableProps = {
     compact?: boolean;
-    type?: 'text' | 'number';
+    /**
+     * The main/default cell-data type of the table
+     *
+     * Defaults to 'text'
+     */
+    type?: TableType;
+    /**
+     * Custom HTML attributes for the component's `<table/>` element.
+     *
+     * Note, however, that some props may be intentionally
+     * excluded from the list.
+     *
+     * __WARNING:__
+     * In some cases props added this way can break the component, og hurt its
+     * accessibility.  Also, some props may get ignored, or over-ridden by the
+     * component. User discretion is advised.
+     */
+    tableProps?: HTMLProps<'table'>;
+    /** @deprecated Use `wrapperProps={{ className }}` and `tableProps={{ className }}` instead (Will be removed in v0.11) */
     modifier?: string;
 } & EitherObj<{
     fullWidth?: boolean;
 }, {
     align?: 'right';
-}> & MissingWrapperElmProps & DeprecatedSeenProp & Omit<TableProps, 'className' | 'children'>;
+}> & WrapperElmProps & DeprecatedSeenProp & TableProps;
 export declare const BasicTable: (props: BasicTableProps) => JSX.Element;
 export default BasicTable;

package/esm/BasicTable.js

@@ -1,27 +1,28 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import Table from '@hugsmidjan/react/Table';
-import TableWrapper from '@hugsmidjan/react/TableWrapper';
+import { ScrollWrapper } from './_abstract/_ScrollWrapper.js';
+import { Table } from './_abstract/_Table.js';
+const tableTypes = {
+    text: '',
+    number: 'data--number',
+};
 export const BasicTable = (props) => {
-    const { cols, caption, thead, tfoot, align, fullWidth } = props;
-    const tbodyProps = props.tbodies
-        ? { tbodies: props.tbodies }
-        : { tbody: props.tbody || [] };
-    const modifier = props.modifier;
-    return (React.createElement(TableWrapper, { modifier: [
+    // eslint-disable-next-line deprecation/deprecation
+    const { align, fullWidth, type, tbody, tbodies, modifier } = props;
+    return (React.createElement(ScrollWrapper, { bem: "TableWrapper", modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
-            fullWidth && 'BasicTable--fullwidth',
-            align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ] },
+            fullWidth
+                ? 'BasicTable--fullwidth'
+                : align === 'right'
+                    ? 'BasicTable--align--' + align
+                    : undefined,
+        ], wrapperProps: props.wrapperProps, innerWrap // TODO: Remove this once the CSS style-server has been updated
+        : true },
         React.createElement(Table, Object.assign({ className: modifiedClass('BasicTable', [
                 props.compact && 'compact',
-                modifier && modifier,
-            ]) }, {
-            cols,
-            caption,
-            thead,
-            tfoot,
-        }, tbodyProps))));
+                type && tableTypes[type],
+                modifier,
+            ]), cols: props.cols, caption: props.caption, thead: props.thead, tfoot: props.tfoot }, (tbody ? { tbody } : { tbodies }), { wrapperProps: props.tableProps }))));
 };
 export default BasicTable;

package/esm/BreadCrumbs.d.ts

@@ -1,4 +1,4 @@
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { WrapperElmProps } from './utils.js';
 export type BreadCrumb = {
     href?: string;
@@ -10,7 +10,7 @@ export declare const defaultBreadCrumbsTexts: DefaultTexts<{
 }>;
 export type BreadCrumbsProps = {
     title?: string;
-    lang?: string;
+    lang?: HannaLang;
     trail: BreadCrumbTrail;
 } & WrapperElmProps<null, 'aria-label'>;
 export declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element | null;

package/esm/ContactBubble.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ContactBubbleI18n = {
-    lang?: string;
     openBtn: string;
     openBtnLong?: string;
     closeBtn: string;
     closeBtnLong?: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    lang?: string;
 };
 export declare const defaultTexts: DefaultTexts<ContactBubbleI18n>;
 declare const icons: {
@@ -46,7 +47,7 @@ export type ContactBubbleProps = {
      */
     alwaysShow?: boolean;
     texts?: ContactBubbleI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps & ({
     open?: boolean;
     onToggle: (isOpen: boolean) => void;

package/esm/ContactBubble.js

@@ -1,24 +1,27 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
-import { useDomid } from '@hugsmidjan/react/hooks';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
+import { useDomid } from './utils/useDomid.js';
 import { useIsBrowserSide } from './utils.js';
 export const defaultTexts = {
     is: {
-        lang: 'is',
         openBtn: 'Hafa samband',
         closeBtn: 'Loka',
         closeBtnLong: 'Loka valmynd',
     },
     en: {
-        lang: 'en',
         openBtn: 'Contact us',
         closeBtn: 'Close',
         closeBtnLong: 'Close bubble',
     },
+    pl: {
+        openBtn: 'Skontaktuj się z nami',
+        closeBtn: 'Zamknąć',
+        closeBtnLong: 'Zamknąć pęcherzyk',
+    },
 };
 // ---------------------------------------------------------------------------
 const icons = {

package/esm/Datepicker.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { FormFieldWrappingProps } from './FormField.js';
 export type DatepickerProps = {
     small?: boolean;
@@ -28,14 +29,17 @@ export type DatepickerProps = {
      * NOTE: This will be the default mode in v0.11.
      */
     isoMode?: boolean;
-    localeCode?: 'is' | 'en' | 'pl';
+    texts?: DatepickerLocaleProps;
+    lang?: HannaLang;
     dateFormat?: string | Array<string>;
     isStartDate?: boolean;
     isEndDate?: boolean;
     inputRef?: RefObject<HTMLInputElement>;
     onChange?: (date?: Date) => void;
     datepickerExtraProps?: Record<string, unknown>;
-    /** @deprecated  Use `value` or `defaultValue` instead.  (Will be removed in v0.11) */
+    /** @deprecated Use `lang` instead  (Will be removed in v0.11) */
+    localeCode?: HannaLang;
+    /** @deprecated Use `value` or `defaultValue` instead.  (Will be removed in v0.11) */
     initialDate?: Date;
 } & FormFieldWrappingProps;
 /**
@@ -44,6 +48,7 @@ export type DatepickerProps = {
  */
 export declare const getDateDiff: (refDate: Date, dayOffset: number) => Date;
 export type DatepickerLocaleProps = {
+    ariaLabelClose: string;
     nextMonthAriaLabel: string;
     nextMonthButtonLabel: string;
     nextYearAriaLabel: string;
@@ -54,8 +59,8 @@ export type DatepickerLocaleProps = {
     previousYearButtonLabel: string;
     timeInputLabel: string;
     weekAriaLabelPrefix: string;
+    monthAriaLabelPrefix: string;
     weekLabel: string;
-    ariaLabelPrefix: string;
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
 };