@escapenavigator/hooks 2.2.9 → 2.2.10

package/dist/lead-form/lead-field.js

@@ -81,11 +81,16 @@ const ChoiceIcon = ({ id }) => {
  * Радио и чекбоксы площадки — кнопками-вариантами: один тап вместо попадания
  * в кружок, и форма читается как выбор, а не как анкета.
  */
-const ChoiceGroup = ({ label, options, isSelected, onToggle, hint, error, }) => {
-    const tiled = options.length >= TILES_FROM;
+const ChoiceGroup = ({ presentation, label, options, isSelected, onToggle, hint, error, }) => {
+    const tiled = presentation === 'cards' ||
+        ((!presentation || presentation === 'auto') && options.length >= TILES_FROM);
     return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
         react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', weight: 'medium', color: 'primary' }, label),
-        react_1.default.createElement("div", { role: 'group', "aria-label": label, className: tiled ? index_module_css_1.default.choiceTiles : index_module_css_1.default.choicePills }, options.map((option) => {
+        react_1.default.createElement("div", { role: 'group', "aria-label": label, className: presentation === 'list'
+                ? index_module_css_1.default.choiceList
+                : tiled
+                    ? index_module_css_1.default.choiceTiles
+                    : index_module_css_1.default.choicePills }, options.map((option) => {
             const selected = isSelected(option.id);
             return (react_1.default.createElement("button", { key: option.id, type: 'button', "aria-pressed": selected, className: index_module_css_1.default.choice, "data-selected": selected, "data-invalid": !!error, onClick: () => onToggle(option.id) },
                 tiled && react_1.default.createElement(ChoiceIcon, { id: option.id }),
@@ -260,10 +265,10 @@ const LeadField = ({ field, value, error, language, profileCountry, questrooms,
                     content: (0, lib_1.optionLabel)(option, language, option.id),
                 })), selected: String(value || ''), error: error, onChange: ({ selected }) => onChange(selected === null || selected === void 0 ? void 0 : selected.key) }));
         case lead_field_type_enum_1.LeadFieldTypeEnum.RADIO:
-            return (react_1.default.createElement(ChoiceGroup, { label: label, options: choiceOptions, isSelected: (id) => value === id, onToggle: (id) => onChange(id), hint: hint, error: error }));
+            return (react_1.default.createElement(ChoiceGroup, { presentation: field.presentation, label: label, options: choiceOptions, isSelected: (id) => value === id, onToggle: (id) => onChange(id), hint: hint, error: error }));
         case lead_field_type_enum_1.LeadFieldTypeEnum.CHECKBOX: {
             const selected = Array.isArray(value) ? value : [];
-            return (react_1.default.createElement(ChoiceGroup, { label: label, options: choiceOptions, isSelected: (id) => selected.includes(id), onToggle: (id) => onChange(selected.includes(id)
+            return (react_1.default.createElement(ChoiceGroup, { presentation: field.presentation, label: label, options: choiceOptions, isSelected: (id) => selected.includes(id), onToggle: (id) => onChange(selected.includes(id)
                     ? selected.filter((item) => item !== id)
                     : [...selected, id]), hint: hint, error: error }));
         }

package/dist/lead-form/lead-form.d.ts

@@ -47,8 +47,9 @@ type Props = {
     /** Документ согласия на обработку ПДн (галочка есть только в РФ). */
     pdConsentUrl?: string;
     /** Модалка управляет шагом, чтобы использовать свою кнопку «Назад». */
-    currentStep?: 1 | 2;
-    onStepChange?: (step: 1 | 2) => void;
+    currentStep?: number;
+    preview?: boolean;
+    onStepChange?: (step: number) => void;
     showBackButton?: boolean;
 };
 export declare const LeadForm: React.FC<Props>;

package/dist/lead-form/lead-form.js

@@ -49,6 +49,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LeadForm = void 0;
 const ui_1 = require("@alphakits/ui");
 const lead_field_type_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-type.enum");
+const lead_form_layout_1 = require("@escapenavigator/types/dist/lead/lead-form-layout");
 const react_1 = __importStar(require("react"));
 const personal_data_consent_1 = require("../personal-data-consent");
 const index_module_css_1 = __importDefault(require("./index.module.css"));
@@ -77,17 +78,18 @@ const CONTACT_FIELD_ORDER = {
     [lead_field_type_enum_1.LeadFieldTypeEnum.EMAIL]: 6,
     [lead_field_type_enum_1.LeadFieldTypeEnum.CONSENT]: 7,
 };
-const LeadForm = ({ form, source, language, profileCountry, submit, prefill, contextNote, withHeader = true, onDone, doneLabel, onSuccess, policyUrl, pdConsentUrl, currentStep, onStepChange, showBackButton = true, }) => {
+const LeadForm = ({ form, source, language, profileCountry, submit, prefill, contextNote, withHeader = true, onDone, doneLabel, onSuccess, policyUrl, pdConsentUrl, currentStep, onStepChange, showBackButton = true, preview = false, }) => {
+    var _a, _b;
     const t = (0, use_lead_t_1.useLeadT)();
     const consentRequired = (0, personal_data_consent_1.requiresPersonalDataConsent)(profileCountry);
     const [consent, setConsent] = (0, react_1.useState)(false);
     const [showConsentError, setShowConsentError] = (0, react_1.useState)(false);
     const [internalStep, setInternalStep] = (0, react_1.useState)(1);
-    const step = currentStep !== null && currentStep !== void 0 ? currentStep : internalStep;
-    const setStep = (nextStep) => {
+    const requestedStep = currentStep !== null && currentStep !== void 0 ? currentStep : internalStep;
+    const setStep = (0, react_1.useCallback)((nextStep) => {
         setInternalStep(nextStep);
         onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(nextStep);
-    };
+    }, [onStepChange]);
     const [values, setValues] = (0, react_1.useState)(() => (0, lib_1.buildInitialValues)(form, prefill));
     const [errors, setErrors] = (0, react_1.useState)({});
     const [formError, setFormError] = (0, react_1.useState)();
@@ -101,7 +103,7 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         setErrors((prev) => (prev[fieldId] ? Object.assign(Object.assign({}, prev), { [fieldId]: '' }) : prev));
         setFormError(undefined);
     };
-    const visibleFields = form.fields.filter((field) => (0, lib_1.isVisible)(field, values));
+    const visibleFields = form.fields.filter((field) => (0, lib_1.isVisible)(field, values, form.fields));
     const planningFields = visibleFields.filter((field) => PLANNING_FIELD_IDS.has(field.id) || PLANNING_FIELD_TYPES.has(field.type));
     const contactFields = visibleFields
         .filter((field) => !PLANNING_FIELD_IDS.has(field.id) && !PLANNING_FIELD_TYPES.has(field.type))
@@ -110,10 +112,36 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         return ((_a = CONTACT_FIELD_ORDER[left.type]) !== null && _a !== void 0 ? _a : 10) - ((_b = CONTACT_FIELD_ORDER[right.type]) !== null && _b !== void 0 ? _b : 10) ||
             left.order - right.order;
     });
-    const hasTwoSteps = planningFields.length > 0 && contactFields.length > 0;
-    const activeFields = !hasTwoSteps ? visibleFields : step === 1 ? planningFields : contactFields;
+    const layout = (0, lead_form_layout_1.normalizeLeadLayout)(form.layout, form.fields);
+    const configuredSteps = (layout === null || layout === void 0 ? void 0 : layout.mode) === 'steps'
+        ? layout.steps
+            .map((item) => (Object.assign(Object.assign({}, item), { fields: item.fieldIds
+                .map((id) => visibleFields.find((field) => field.id === id))
+                .filter(Boolean) })))
+            .filter((item) => item.fields.length)
+        : [];
+    const legacyTwoSteps = !layout && planningFields.length > 0 && contactFields.length > 0;
+    const stepCount = layout ? Math.max(1, configuredSteps.length) : legacyTwoSteps ? 2 : 1;
+    const step = Math.min(Math.max(1, requestedStep), stepCount);
+    (0, react_1.useEffect)(() => {
+        if (requestedStep !== step)
+            setStep(step);
+    }, [requestedStep, step, setStep]);
+    const hasTwoSteps = stepCount > 1;
+    const activeFields = layout
+        ? layout.mode === 'single'
+            ? visibleFields
+            : ((_a = configuredSteps[step - 1]) === null || _a === void 0 ? void 0 : _a.fields) || []
+        : !hasTwoSteps
+            ? visibleFields
+            : step === 1
+                ? planningFields
+                : contactFields;
     const planningFieldIds = new Set(planningFields.map((field) => field.id));
-    const planningSummary = planningFields
+    const summaryFields = layout
+        ? configuredSteps.slice(0, -1).flatMap((item) => item.fields)
+        : planningFields;
+    const planningSummary = summaryFields
         .map((field) => {
         var _a, _b, _c;
         const value = values[field.id];
@@ -151,7 +179,7 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
             values,
             phoneValid,
             t,
-            fieldIds: planningFieldIds,
+            fieldIds: new Set(activeFields.map((field) => field.id)),
             requireContact: false,
         });
         if (Object.keys(result.errors).length) {
@@ -160,7 +188,7 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         }
         setErrors({});
         setFormError(undefined);
-        setStep(2);
+        setStep(step + 1);
     };
     const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
@@ -172,11 +200,23 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         if (Object.keys(result.errors).length || result.formError || consentMissing) {
             setErrors(result.errors);
             setFormError(result.formError);
-            if (Object.keys(result.errors).some((fieldId) => planningFieldIds.has(fieldId))) {
+            const invalidStep = configuredSteps.findIndex((item) => item.fields.some((field) => result.errors[field.id]));
+            if (layout && invalidStep >= 0)
+                setStep(invalidStep + 1);
+            if (!layout &&
+                Object.keys(result.errors).some((fieldId) => planningFieldIds.has(fieldId))) {
                 setStep(1);
             }
             return;
         }
+        if (preview) {
+            setSuccess({
+                success: true,
+                successTitle: form.successTitle,
+                successDescription: form.successDescription,
+            });
+            return;
+        }
         setSending(true);
         setFormError(undefined);
         const response = yield submit({
@@ -207,30 +247,33 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
             !!onDone && (react_1.default.createElement("div", { className: index_module_css_1.default.successActions },
                 react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, onClick: onDone }, doneLabel || t('lead.close'))))));
     }
-    const title = (0, lib_1.localized)(form.clientTitle, language) || t('lead.title');
+    const title = (0, lib_1.localized)((_b = configuredSteps[step - 1]) === null || _b === void 0 ? void 0 : _b.title, language) ||
+        (0, lib_1.localized)(form.clientTitle, language) ||
+        t('lead.title');
     const description = (0, lib_1.localized)(form.description, language);
     const stepLabel = step === 1 ? t('lead.stepPlanning') : t('lead.stepContacts');
-    const showHeaderCopy = !hasTwoSteps || step === 1;
+    const showHeaderCopy = !!layout || !hasTwoSteps || step === 1;
     const dateField = activeFields.find((field) => field.type === lead_field_type_enum_1.LeadFieldTypeEnum.DATE);
     const timeField = activeFields.find((field) => field.type === lead_field_type_enum_1.LeadFieldTypeEnum.TIME);
     return (react_1.default.createElement("div", { className: index_module_css_1.default.form },
         withHeader && (react_1.default.createElement("div", { className: index_module_css_1.default.header },
             hasTwoSteps ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: index_module_css_1.default.stepMeta },
-                    step === 2 && showBackButton ? (react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.backButton, onClick: () => setStep(1) },
+                    step > 1 && showBackButton ? (react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.backButton, onClick: () => setStep(step - 1) },
                         react_1.default.createElement(ArrowLeft, null),
                         t('lead.back'))) : (react_1.default.createElement("span", null)),
-                    react_1.default.createElement("span", null, t('lead.stepCounter', {
+                    react_1.default.createElement("span", null, t(layout ? 'lead.customStepCounter' : 'lead.stepCounter', {
+                        total: stepCount,
                         current: step,
                         label: stepLabel,
                     }))),
                 react_1.default.createElement("div", { className: index_module_css_1.default.progress, "aria-hidden": 'true' },
-                    react_1.default.createElement("span", { "data-step": step })))) : (react_1.default.createElement("span", { className: index_module_css_1.default.headerAccent, "aria-hidden": 'true' })),
+                    react_1.default.createElement("span", { "data-step": step, style: { width: `${(step / stepCount) * 100}%` } })))) : (react_1.default.createElement("span", { className: index_module_css_1.default.headerAccent, "aria-hidden": 'true' })),
             showHeaderCopy && (react_1.default.createElement("div", { className: index_module_css_1.default.headerCopy },
                 react_1.default.createElement(ui_1.Typography.Title, { tag: 'h1', view: 'small', weight: 'bold' }, title),
                 !!description && (react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', color: 'secondary' }, description)))))),
         !!formError && react_1.default.createElement(ui_1.ToastPlate, { view: 'negative' }, formError),
-        hasTwoSteps && step === 2 && !!planningSummary.length && (react_1.default.createElement("div", { className: index_module_css_1.default.selectionSummary },
+        hasTwoSteps && step === stepCount && !!planningSummary.length && (react_1.default.createElement("div", { className: index_module_css_1.default.selectionSummary },
             react_1.default.createElement("div", null,
                 react_1.default.createElement("span", { className: index_module_css_1.default.summaryIcon, "aria-hidden": 'true' },
                     react_1.default.createElement("svg", { viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' },
@@ -248,7 +291,7 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
                         : undefined, onChange: (value) => setValue(field.id, value), onPhoneValidChange: setPhoneValid })));
         })),
         react_1.default.createElement("input", { className: index_module_css_1.default.trap, tabIndex: -1, autoComplete: 'off', "aria-hidden": 'true', value: trap, onChange: (event) => setTrap(event.target.value) }),
-        react_1.default.createElement("div", { className: index_module_css_1.default.footer, "data-step": hasTwoSteps ? step : 1 }, hasTwoSteps && step === 1 ? (react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, rightAddons: react_1.default.createElement(ArrowRight, null), onClick: handleNext }, t('lead.next'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: index_module_css_1.default.footer, "data-step": hasTwoSteps ? step : 1 }, step < stepCount ? (react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, rightAddons: react_1.default.createElement(ArrowRight, null), onClick: handleNext }, t(layout ? 'lead.continue' : 'lead.next'))) : (react_1.default.createElement(react_1.default.Fragment, null,
             (consentRequired || !!policyUrl) && (react_1.default.createElement(personal_data_consent_1.PersonalDataConsent, { required: consentRequired, consentUrl: pdConsentUrl || '', policyUrl: policyUrl || '', checked: consent, showError: showConsentError, onChange: (checked) => {
                     setConsent(checked);
                     if (checked)

package/dist/lead-form/lib.d.ts

@@ -23,7 +23,7 @@ export declare const isMultiple: (type: LeadFieldTypeEnum) => boolean;
  * поле не валидируется и не попадает в ответы — иначе обязательная
  * «уточните какой квест» блокировала бы отправку у всех остальных.
  */
-export declare const isVisible: (field: LeadFormField, values: LeadFormValues) => boolean;
+export declare const isVisible: (field: LeadFormField, values: LeadFormValues, fields?: LeadFormField[]) => boolean;
 /**
  * Предзаполнение по смысловой роли поля, а не по его id: форма настраивается
  * площадкой, и id полей у каждой свои. Роль (`mapsTo`) стабильна — по ней

package/dist/lead-form/lib.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildAnswers = exports.validate = exports.buildInitialValues = exports.isVisible = exports.isMultiple = exports.optionLabel = exports.fieldText = exports.fieldTitle = exports.localized = void 0;
 const lead_field_mapping_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-mapping.enum");
 const lead_field_type_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-type.enum");
+const lead_form_layout_1 = require("@escapenavigator/types/dist/lead/lead-form-layout");
 const languages_enum_1 = require("@escapenavigator/types/dist/shared/enum/languages.enum");
 /**
  * Текст на языке виджета. Площадка могла не перевести форму на все языки —
@@ -45,24 +46,9 @@ exports.isMultiple = isMultiple;
  * поле не валидируется и не попадает в ответы — иначе обязательная
  * «уточните какой квест» блокировала бы отправку у всех остальных.
  */
-const isVisible = (field, values) => {
+const isVisible = (field, values, fields) => {
     var _a;
-    const condition = field.conditional;
-    if (!(condition === null || condition === void 0 ? void 0 : condition.fieldId))
-        return true;
-    const parentValue = values[condition.fieldId];
-    const optionIds = ((_a = condition.optionIds) === null || _a === void 0 ? void 0 : _a.length)
-        ? condition.optionIds
-        : condition.optionId
-            ? [condition.optionId]
-            : [];
-    if (!optionIds.length) {
-        return Array.isArray(parentValue) ? parentValue.length > 0 : !!parentValue;
-    }
-    if (Array.isArray(parentValue)) {
-        return parentValue.some((value) => optionIds.includes(value));
-    }
-    return typeof parentValue === 'string' && optionIds.includes(parentValue);
+    return (0, lead_form_layout_1.isLeadFieldVisible)(field, fields || [field, { id: (_a = field.conditional) === null || _a === void 0 ? void 0 : _a.fieldId }], (id) => values[id]);
 };
 exports.isVisible = isVisible;
 const buildInitialValues = (form, prefill) => {
@@ -114,7 +100,7 @@ const validate = ({ form, values, phoneValid, t, fieldIds, requireContact = true
     for (const field of form.fields) {
         if (fieldIds && !fieldIds.has(field.id))
             continue;
-        if (!(0, exports.isVisible)(field, values))
+        if (!(0, exports.isVisible)(field, values, form.fields))
             continue;
         const value = values[field.id];
         const empty = isEmpty(value);
@@ -153,9 +139,9 @@ exports.validate = validate;
  * такого поля может не быть, а менеджеру этот контекст нужен в карточке.
  */
 const buildAnswers = (form, values, contextNote) => {
-    const commentField = form.fields.find((field) => field.mapsTo === lead_field_mapping_enum_1.LeadFieldMappingEnum.COMMENT && (0, exports.isVisible)(field, values));
+    const commentField = form.fields.find((field) => field.mapsTo === lead_field_mapping_enum_1.LeadFieldMappingEnum.COMMENT && (0, exports.isVisible)(field, values, form.fields));
     return form.fields
-        .filter((field) => (0, exports.isVisible)(field, values))
+        .filter((field) => (0, exports.isVisible)(field, values, form.fields))
         .map((field) => {
         const value = normalizeValue(values[field.id]);
         if (!contextNote || field.id !== (commentField === null || commentField === void 0 ? void 0 : commentField.id)) {

package/dist/lead-form/lib.spec.js

@@ -67,3 +67,21 @@ describe('lead form step validation', () => {
         expect((0, lib_1.buildInitialValues)(guestsForm)).toEqual({ guests: '' });
     });
 });
+describe('conditional chains', () => {
+    it('excludes a required descendant when its parent is hidden despite stale answers', () => {
+        const fields = [
+            Object.assign(Object.assign({}, form.fields[0]), { id: 'audience', required: false }),
+            Object.assign(Object.assign({}, form.fields[0]), { id: 'interest', required: false, conditional: { fieldId: 'audience', optionId: 'children' } }),
+            Object.assign(Object.assign({}, form.fields[0]), { id: 'detail', conditional: { fieldId: 'interest', optionId: 'magic' } }),
+        ];
+        const values = { audience: 'adults', interest: 'magic', detail: '' };
+        expect((0, lib_1.isVisible)(fields[2], values, fields)).toBe(false);
+        expect((0, lib_1.validate)({
+            form: Object.assign(Object.assign({}, form), { fields }),
+            values,
+            phoneValid: false,
+            t: (key) => key,
+            requireContact: false,
+        }).errors).toEqual({});
+    });
+});

package/dist/lead-form/use-lead-t.js

@@ -10,6 +10,8 @@ const react_i18next_1 = require("react-i18next");
  * в витрине пакетов (`use-package-t`).
  */
 const DEFAULTS = {
+    'lead.customStepCounter': 'Step {{current}} of {{total}}',
+    'lead.continue': 'Continue',
     'lead.title': 'Leave a request',
     'lead.hint': 'Tell us what you need and we will call you back.',
     'lead.submit': 'Send',
@@ -56,6 +58,8 @@ const DEFAULTS = {
 };
 /** Новые ключи, которых ещё нет в сервисе: русский аудитории показываем сразу. */
 const RU_DEFAULTS = {
+    'lead.customStepCounter': 'Шаг {{current}} из {{total}}',
+    'lead.continue': 'Далее',
     'lead.footnote': 'Менеджер свяжется с вами и предложит варианты. Заявка пока не бронирует игру.',
     'lead.timeUndecided': 'Пока не определился со временем',
     'lead.guestsUnknown': 'Не знаю',
@@ -78,7 +82,7 @@ const RU_DEFAULTS = {
 };
 const useLeadT = () => {
     var _a;
-    const { t, i18n } = (0, react_i18next_1.useTranslation)();
+    const { t, i18n } = (0, react_i18next_1.useTranslation)('widgets');
     const isRuLang = (_a = i18n.language) === null || _a === void 0 ? void 0 : _a.startsWith('ru');
     return (0, react_1.useCallback)((key, options) => t(key, Object.assign({ defaultValue: (isRuLang && RU_DEFAULTS[key]) || DEFAULTS[key] || key }, options)), [t, isRuLang]);
 };

package/dist/use-localstore-state/index.d.ts

@@ -1,2 +1,4 @@
 export type LocalstoreSetValue<T> = T | undefined | ((prev: T | undefined) => T | undefined);
+export declare function readFromLocalstore<T>(token: string, defaultValue?: T): T | undefined;
+export declare function writeToLocalstore<T>(token: string, value: T | undefined): void;
 export declare function useLocalstoreState<T>(token: string, defaultValue?: T): [T | undefined, (update: LocalstoreSetValue<T>) => void];

package/dist/use-localstore-state/index.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.readFromLocalstore = readFromLocalstore;
+exports.writeToLocalstore = writeToLocalstore;
 exports.useLocalstoreState = useLocalstoreState;
 const react_1 = require("react");
 function readFromLocalstore(token, defaultValue) {
+    var _a;
     if (typeof window === 'undefined') {
         return defaultValue;
     }
@@ -12,11 +15,32 @@ function readFromLocalstore(token, defaultValue) {
             return JSON.parse(prev);
         }
     }
-    catch (_a) {
-        localStorage.removeItem(token);
+    catch (_b) {
+        try {
+            (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.removeItem(token);
+        }
+        catch (_c) {
+            // Storage itself can be blocked, not just contain invalid JSON.
+        }
     }
     return defaultValue;
 }
+function writeToLocalstore(token, value) {
+    var _a, _b;
+    if (typeof window === 'undefined')
+        return;
+    try {
+        if (value) {
+            (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(token, JSON.stringify(value));
+        }
+        else {
+            (_b = window.localStorage) === null || _b === void 0 ? void 0 : _b.removeItem(token);
+        }
+    }
+    catch (_c) {
+        // Keep React state usable when storage is unavailable or its quota is full.
+    }
+}
 function useLocalstoreState(token, defaultValue) {
     // We track defaultValue via ref so token changes don't pull in stale closures
     // while also avoiding extra effect runs when consumers pass an inline default.
@@ -41,12 +65,7 @@ function useLocalstoreState(token, defaultValue) {
             if (next === prev) {
                 return prev;
             }
-            if (next) {
-                localStorage.setItem(token, JSON.stringify(next));
-            }
-            else {
-                localStorage.removeItem(token);
-            }
+            writeToLocalstore(token, next);
             return next;
         });
     }, [token]);

package/dist/use-localstore-state/index.spec.d.ts

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

package/dist/use-localstore-state/index.spec.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+describe('unavailable local storage', () => {
+    afterEach(() => {
+        delete globalThis.window;
+        delete globalThis.localStorage;
+    });
+    it.each(['null', 'blocked'])('returns a default and allows writes with %s storage', (mode) => {
+        const getStorage = () => {
+            if (mode === 'blocked')
+                throw new Error('Access denied');
+            return null;
+        };
+        const browser = {};
+        Object.defineProperty(browser, 'localStorage', { get: getStorage });
+        globalThis.window = browser;
+        Object.defineProperty(globalThis, 'localStorage', { get: getStorage, configurable: true });
+        expect((0, index_1.readFromLocalstore)('client', 'default')).toBe('default');
+        expect(() => (0, index_1.writeToLocalstore)('client', undefined)).not.toThrow();
+        expect(() => (0, index_1.writeToLocalstore)('client', 'new value')).not.toThrow();
+    });
+    it('still removes malformed JSON when storage works', () => {
+        const storage = { getItem: () => '{', removeItem: jest.fn() };
+        globalThis.window = { localStorage: storage };
+        globalThis.localStorage = storage;
+        expect((0, index_1.readFromLocalstore)('client', 'default')).toBe('default');
+        expect(storage.removeItem).toHaveBeenCalledWith('client');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^2.2.8",
-    "@escapenavigator/types": "^2.2.7",
-    "@escapenavigator/utils": "^2.2.7",
+    "@escapenavigator/services": "^2.2.9",
+    "@escapenavigator/types": "^2.2.8",
+    "@escapenavigator/utils": "^2.2.8",
     "libphonenumber-js": "^1.12.24",
     "react": "19.2.6",
     "react-phone-input-2": "^2.15.1"
@@ -32,5 +32,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "8331e15dfa6ac28921249548f4df2c702669de37"
+  "gitHead": "30230db507f7483ba425b0811f31d980d3b0a684"
 }