@reykjavik/hanna-react 0.10.103 → 0.10.104

package/AccordionList.js

@@ -4,12 +4,12 @@ exports.AccordionList = 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 useDomid_js_1 = require("./utils/useDomid.js");
 const utils_js_1 = require("./utils.js");
 const AccordionListItem = (props) => {
     const { title, content, id, disabled = false, ssr, open, onToggle } = props;
     const defaultOpen = (0, react_1.useRef)(props.defaultOpen);
-    const domid = (0, hooks_1.useDomid)();
+    const domid = (0, useDomid_js_1.useDomid)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const itemDisabled = (isBrowser && disabled) || !content;
     return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },

package/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/Alert.js

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

package/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/AutosuggestSearch.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutosuggestSearch = exports.defaultAutosuggestSearchTexts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_autosuggest_1 = tslib_1.__importDefault(require("react-autosuggest"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const SearchInput_js_1 = tslib_1.__importDefault(require("./SearchInput.js"));
+exports.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',
+    },
+};
+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_js_1.default, renderInputField, wrapperProps, } = props;
+    const [value, setValue] = (0, react_1.useState)('');
+    const inputRef = (0, react_1.createRef)();
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultAutosuggestSearchTexts);
+    return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
+            container: 'AutosuggestSearch',
+            containerOpen: 'AutosuggestSearch--open',
+            suggestionsContainer: 'AutosuggestSearch__container',
+            suggestionsContainerOpen: 'AutosuggestSearch__container--open',
+            suggestionsList: (0, classUtils_1.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_1.default.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 = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
+                return (react_1.default.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)) })));
+            } }));
+};
+exports.AutosuggestSearch = AutosuggestSearch;

package/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/BasicTable.js

@@ -4,29 +4,30 @@ exports.BasicTable = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const Table_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Table"));
-const TableWrapper_1 = tslib_1.__importDefault(require("@hugsmidjan/react/TableWrapper"));
+const _ScrollWrapper_js_1 = require("./_abstract/_ScrollWrapper.js");
+const _Table_js_1 = require("./_abstract/_Table.js");
+const tableTypes = {
+    text: '',
+    number: 'data--number',
+};
 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_1.default.createElement(TableWrapper_1.default, { modifier: [
+    // eslint-disable-next-line deprecation/deprecation
+    const { align, fullWidth, type, tbody, tbodies, modifier } = props;
+    return (react_1.default.createElement(_ScrollWrapper_js_1.ScrollWrapper, { bem: "TableWrapper", modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
-            fullWidth && 'BasicTable--fullwidth',
-            align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ] },
-        react_1.default.createElement(Table_1.default, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [
+            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_1.default.createElement(_Table_js_1.Table, Object.assign({ className: (0, classUtils_1.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 }))));
 };
 exports.BasicTable = BasicTable;
 exports.default = exports.BasicTable;

package/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/CHANGELOG.md

@@ -4,6 +4,40 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.104
+
+_2023-09-13_
+
+- feat: Make all translated components respect `DEFAULT_LANG` from hanna-utils
+- `BasicTable`:
+  - feat: Add props `wrapperProps`
+  - feat: Add prop `rowProps`
+  - feat: Export `Table*` types (`TableCell`, `TableRow`, etc.)
+  - feat: Allow `key` prop as part of `TableCellData`
+- feat: Add component `AutosuggestSearch`
+- `SiteSearchAutocomplete`:
+  - feat: Mark this component as deprecated, in favor of `AutosuggestSearch`
+  - fix: Add translation prop `buttonText` — (optional, but logs warning in
+    dev if missing.)
+  - fix: Spread `wrapperProps` on the wrapping `<div/>` element not the
+    contained `FormField`
+- `SearchInput`:
+  - feat: Add prop `onSubmit` firing on `Enter` keypress
+  - feat: `onButtonClick` receives `value` as an argument
+  - feat: Use `onSubmit` as fallback for `onButtonClick`
+  - feat: Add prop `button` to toggle the button, ueses`onSubmit` as fallback
+  - fix: Minor prop and attribute assignment cleanup
+- `SiteSearchInput`:
+  - feat: `onButtonClick` and `onSubmit` receive `value` as their argument
+  - feat: Add prop `button` to toggle the button, ueses`onSubmit` as fallback
+  - fix: Minor prop and attribute assignment cleanup
+- `Datepicker`:
+  - feat: Add prop `lang`, deprecate `localeCode`
+  - feat: Add support for `hrefLang` values on `MainMenuItem` and
+    `MegaMenuItem`
+  - fix: Fix minor mistakes in aria-label translations
+- feat: Add `useDomid` to `utils`
+
 ## 0.10.103
 
 _2023-09-13_

package/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/ContactBubble.js

@@ -5,24 +5,27 @@ 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 hooks_1 = require("@hugsmidjan/react/hooks");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
+const useDomid_js_1 = require("./utils/useDomid.js");
 const utils_js_1 = require("./utils.js");
 exports.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 = {
@@ -43,7 +46,7 @@ const ContactBubble = (props) => {
     const [localOpen, setLocalOpen] = (0, react_1.useState)(false);
     const open = useLocalState ? localOpen : props.open;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
-    const domid = (0, hooks_1.useDomid)();
+    const domid = (0, useDomid_js_1.useDomid)();
     const _wrapperRef = (0, react_1.useRef)(null);
     const wrapperRef = wrapperProps.ref || _wrapperRef;
     const { openBubble, closeBubble } = (0, react_1.useMemo)(() => ({

package/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;
 };

package/Datepicker.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
 const index_js_2 = tslib_1.__importDefault(require("date-fns/locale/pl/index.js"));
 const ReactDatepicker_js_1 = require("./_mixed_export_resolution_/ReactDatepicker.js"); // Docs: https://reactdatepicker.com/
+const useDomid_js_1 = require("./utils/useDomid.js");
 const FormField_js_1 = require("./FormField.js");
 const utils_js_1 = require("./utils.js");
 (0, ReactDatepicker_js_1.registerLocale)('is', index_js_1.default);
@@ -22,8 +23,9 @@ const getDateDiff = (refDate, dayOffset) => {
     return newDate;
 };
 exports.getDateDiff = getDateDiff;
-const i18n = {
+const defaultDatepickerTexts = {
     is: {
+        ariaLabelClose: 'Loka',
         nextMonthAriaLabel: 'Næsti mánuður',
         nextMonthButtonLabel: 'Næsti mánuður',
         nextYearAriaLabel: 'Næsta ár',
@@ -32,14 +34,34 @@ const i18n = {
         previousMonthButtonLabel: 'Fyrri mánuður',
         previousYearAriaLabel: 'Fyrra ár',
         previousYearButtonLabel: 'Fyrra ár',
-        timeInputLabel: 'Tími: ',
-        weekAriaLabelPrefix: 'Vika: ',
+        timeInputLabel: 'Tími:',
+        weekAriaLabelPrefix: 'Vika:',
         weekLabel: 'Vika',
-        ariaLabelPrefix: 'Mánuður:',
+        monthAriaLabelPrefix: 'Mánuður:',
         chooseDayAriaLabelPrefix: 'Veldu:',
-        disabledDayAriaLabelPrefix: 'Dagsetning ekki í boði',
+        disabledDayAriaLabelPrefix: 'Ekki í boði:',
+    },
+    // React-datepicker has its own (default) English translation built in.
+    // No need to repeat all of it here.
+    en: {
+        // ariaLabelClose: 'Close',
+        // nextMonthAriaLabel: 'Next month',
+        // nextMonthButtonLabel: 'Next month',
+        // nextYearAriaLabel: 'Next year',
+        // nextYearButtonLabel: 'Next year',
+        // previousMonthAriaLabel: 'Previous month',
+        // previousMonthButtonLabel: 'Previous month',
+        // previousYearAriaLabel: 'Previous year',
+        // previousYearButtonLabel: 'Previous year',
+        // timeInputLabel: 'Time:',
+        // weekAriaLabelPrefix: 'Week:',
+        // weekLabel: 'Week',
+        monthAriaLabelPrefix: 'Month:',
+        chooseDayAriaLabelPrefix: 'Choose:',
+        disabledDayAriaLabelPrefix: 'Not available:',
     },
     pl: {
+        ariaLabelClose: 'Zamknij',
         nextMonthAriaLabel: 'Następny miesiącu',
         nextMonthButtonLabel: 'Następny miesiącu',
         nextYearAriaLabel: 'Następny rok',
@@ -48,12 +70,12 @@ const i18n = {
         previousMonthButtonLabel: 'Poprzedni miesiac',
         previousYearAriaLabel: 'Poprzedni rok',
         previousYearButtonLabel: 'Poprzedni rok',
-        timeInputLabel: 'Czas: ',
-        weekAriaLabelPrefix: 'Tydzień: ',
+        timeInputLabel: 'Czas:',
+        weekAriaLabelPrefix: 'Tydzień:',
         weekLabel: 'Tydzień',
-        ariaLabelPrefix: 'Miesiąc:',
+        monthAriaLabelPrefix: 'Miesiąc:',
         chooseDayAriaLabelPrefix: 'Wybierać:',
-        disabledDayAriaLabelPrefix: 'Data niedostępna',
+        disabledDayAriaLabelPrefix: 'Niedostępna:',
     },
 };
 /**
@@ -62,7 +84,7 @@ const i18n = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 const Datepicker = (props) => {
-    const { placeholder, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
+    const { placeholder, dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
     const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
     props.defaultValue, 'value');
     /*
@@ -70,8 +92,8 @@ const Datepicker = (props) => {
       and `props.initialDate` is removed:
     */
     // const [value, setValue] = useMixedControlState(props, 'value');
-    const domid = (0, hooks_1.useDomid)(props.id);
-    const txts = i18n[localeCode] || {};
+    const domid = (0, useDomid_js_1.useDomid)(props.id);
+    const txts = (0, i18n_1.getTexts)({ texts, lang }, defaultDatepickerTexts);
     const filled = !!value;
     const empty = !filled && !placeholder;
     return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
@@ -82,7 +104,7 @@ const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: localeCode, dateFormat: 
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: 
                     // NOTE: Force all dateFormat values into Array<string> to temporarily work around
                     // a bug in the current version of react-datepicker where invalid `string` values
                     // are re-parsed with `new Date()`, causing surprising (weird) false positives

package/FileInput.d.ts

@@ -1,3 +1,4 @@
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { FileListProps } from './FileInput/_FileInputFileList.js';
 import { FormFieldWrappingProps } from './FormField.js';
 export type FileInputProps = FormFieldWrappingProps & {
@@ -15,7 +16,7 @@ export type FileInputProps = FormFieldWrappingProps & {
     accept?: string | Array<string>;
     dropzoneText: string | JSX.Element;
     removeFileText?: string;
-    lang?: string;
+    lang?: HannaLang;
     showFileSize?: boolean;
     showImagePreviews?: boolean;
     FileList?: false | ((props: FileListProps) => JSX.Element | null);

package/FileInput.js

@@ -4,11 +4,11 @@ exports.FileInput = 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 i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const ReactDropzone_js_1 = require("./_mixed_export_resolution_/ReactDropzone.js");
 const _FileInput_utils_js_1 = require("./FileInput/_FileInput.utils.js");
 const _FileInputFileList_js_1 = require("./FileInput/_FileInputFileList.js");
+const useDomid_js_1 = require("./utils/useDomid.js");
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const defaultRemoveFileText = {
     is: 'Fjarlægja',
@@ -37,7 +37,7 @@ const FileInput = (props) => {
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
     dropzoneText, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
-    const domid = (0, hooks_1.useDomid)(props.id);
+    const domid = (0, useDomid_js_1.useDomid)(props.id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
     const files = value;

package/FormField.js

@@ -4,8 +4,8 @@ exports.groupFormFieldWrapperProps = exports.getFormFieldWrapperProps = exports.
 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 env_js_1 = require("./utils/env.js");
+const useDomid_js_1 = require("./utils/useDomid.js");
 const utils_js_1 = require("./utils.js");
 const inputClassNames = {
     bem: 'FormField',
@@ -20,7 +20,7 @@ const FormField = (props) => {
     renderInput, id, ssr, wrapperProps, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const isInvalid = invalid || !!errorMessage || undefined;
-    const domid = (0, hooks_1.useDomid)(id);
+    const domid = (0, useDomid_js_1.useDomid)(id);
     const [focused, setFocused] = (0, react_1.useState)(false);
     // @ts-expect-error  (Duck knows why this errors?!)
     const addFocusProps = (0, react_1.useCallback)((ownProps) => {

package/Gallery.d.ts

@@ -1,3 +1,4 @@
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { GalleryItemProps } from './Gallery/_GalleryItem.js';
 import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
@@ -10,7 +11,7 @@ export type GalleryI18n = {
 export type GalleryProps = {
     items: Array<GalleryItemProps>;
     texts?: GalleryI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps & DeprecatedSeenProp;
 export declare const Gallery: (props: GalleryProps) => JSX.Element;
 export default Gallery;

package/Gallery.js

@@ -19,6 +19,11 @@ const defaultTexts = {
         modalPrevLabel: 'Fyrri mynd',
         modalCloseLabel: 'Til baka í grein',
     },
+    pl: {
+        modalNextLabel: 'Następne zdjęcie',
+        modalPrevLabel: 'Poprzednie zdjęcie',
+        modalCloseLabel: 'Powrót do artykułu',
+    },
 };
 const Gallery = (props) => {
     const { items, ssr } = props;

package/Layout.d.ts

@@ -1,14 +1,15 @@
 import { ReactNode } from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { BemModifierProps } from './utils/types.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type LayoutI18n = {
-    lang?: string;
     skipLinkLabel: string;
     closeMenuLabel: string;
     closeMenuLabelLong?: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    lang?: string;
 };
 export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
 type LayoutProps = {
@@ -19,7 +20,7 @@ type LayoutProps = {
     logoLink?: string;
     siteName?: string;
     texts?: LayoutI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {