@10x-media/form-builder 0.1.0-beta.0 → 0.1.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +68 -0
- package/README.md +45 -1402
- package/dist/actions/buildActionBlocks.js +19 -0
- package/dist/actions/buildActionBlocks.js.map +1 -0
- package/dist/actions/builtin/confirmation.js +49 -0
- package/dist/actions/builtin/confirmation.js.map +1 -0
- package/dist/actions/builtin/emailTeam.js +46 -0
- package/dist/actions/builtin/emailTeam.js.map +1 -0
- package/dist/actions/builtin/index.d.ts +7 -0
- package/dist/actions/builtin/index.js +13 -0
- package/dist/actions/builtin/index.js.map +1 -0
- package/dist/actions/builtin/signedWebhook.js +49 -0
- package/dist/actions/builtin/signedWebhook.js.map +1 -0
- package/dist/actions/defineAction.d.ts +36 -0
- package/dist/actions/defineAction.js +6 -0
- package/dist/actions/defineAction.js.map +1 -0
- package/dist/actions/dispatch.js +48 -0
- package/dist/actions/dispatch.js.map +1 -0
- package/dist/actions/registry.d.ts +16 -0
- package/dist/actions/registry.js +16 -0
- package/dist/actions/registry.js.map +1 -0
- package/dist/actions/runActions.d.ts +9 -0
- package/dist/actions/runActions.js +34 -0
- package/dist/actions/runActions.js.map +1 -0
- package/dist/actions/sign.d.ts +7 -0
- package/dist/actions/sign.js +9 -0
- package/dist/actions/sign.js.map +1 -0
- package/dist/actions/task.js +82 -0
- package/dist/actions/task.js.map +1 -0
- package/dist/aggregation/aggregateResponses.d.ts +31 -0
- package/dist/aggregation/aggregateResponses.js +86 -0
- package/dist/aggregation/aggregateResponses.js.map +1 -0
- package/dist/aggregation/aggregateRows.d.ts +10 -0
- package/dist/aggregation/aggregateRows.js +64 -0
- package/dist/aggregation/aggregateRows.js.map +1 -0
- package/dist/aggregation/resolveResultsRequest.d.ts +32 -0
- package/dist/aggregation/resolveResultsRequest.js +56 -0
- package/dist/aggregation/resolveResultsRequest.js.map +1 -0
- package/dist/aggregation/types.d.ts +39 -0
- package/dist/calc/computeCalcFields.d.ts +15 -0
- package/dist/calc/computeCalcFields.js +27 -0
- package/dist/calc/computeCalcFields.js.map +1 -0
- package/dist/calc/evaluate.d.ts +8 -0
- package/dist/calc/evaluate.js +59 -0
- package/dist/calc/evaluate.js.map +1 -0
- package/dist/calc/normalizeCalc.d.ts +8 -0
- package/dist/calc/normalizeCalc.js +100 -0
- package/dist/calc/normalizeCalc.js.map +1 -0
- package/dist/calc/types.d.ts +28 -0
- package/dist/client/ConditionBuilder.js +121 -0
- package/dist/client/ConditionBuilder.js.map +1 -0
- package/dist/client/ConditionRow.js +150 -0
- package/dist/client/ConditionRow.js.map +1 -0
- package/dist/client/FlowBuilder.d.ts +15 -0
- package/dist/client/FlowBuilder.js +408 -0
- package/dist/client/FlowBuilder.js.map +1 -0
- package/dist/client/FormConditionField.d.ts +21 -0
- package/dist/client/FormConditionField.js +33 -0
- package/dist/client/FormConditionField.js.map +1 -0
- package/dist/client/synthesizeClientField.js +46 -0
- package/dist/client/synthesizeClientField.js.map +1 -0
- package/dist/collections/formSubmissions.js +157 -0
- package/dist/collections/formSubmissions.js.map +1 -0
- package/dist/collections/forms.js +198 -0
- package/dist/collections/forms.js.map +1 -0
- package/dist/collections/uploads.d.ts +30 -0
- package/dist/collections/uploads.js +55 -0
- package/dist/collections/uploads.js.map +1 -0
- package/dist/conditions/conditionType.js +14 -0
- package/dist/conditions/conditionType.js.map +1 -0
- package/dist/conditions/evaluate.d.ts +17 -0
- package/dist/conditions/evaluate.js +94 -0
- package/dist/conditions/evaluate.js.map +1 -0
- package/dist/conditions/fieldTypes.d.ts +9 -0
- package/dist/{fieldTypes-CzhhJXjg.js → conditions/fieldTypes.js} +2 -2
- package/dist/conditions/fieldTypes.js.map +1 -0
- package/dist/conditions/normalizeConditions.js +47 -0
- package/dist/conditions/normalizeConditions.js.map +1 -0
- package/dist/conditions/types.d.ts +8 -0
- package/dist/consent/buildConsentSourceConfig.js +49 -0
- package/dist/consent/buildConsentSourceConfig.js.map +1 -0
- package/dist/consent/builtin/index.d.ts +7 -0
- package/dist/consent/builtin/index.js +11 -0
- package/dist/consent/builtin/index.js.map +1 -0
- package/dist/consent/builtin/pageReference.js +75 -0
- package/dist/consent/builtin/pageReference.js.map +1 -0
- package/dist/consent/builtin/static.js +44 -0
- package/dist/consent/builtin/static.js.map +1 -0
- package/dist/consent/captureConsent.d.ts +28 -0
- package/dist/consent/captureConsent.js +26 -0
- package/dist/consent/captureConsent.js.map +1 -0
- package/dist/consent/defineConsentSource.d.ts +35 -0
- package/dist/consent/defineConsentSource.js +6 -0
- package/dist/consent/defineConsentSource.js.map +1 -0
- package/dist/consent/registry.d.ts +16 -0
- package/dist/consent/registry.js +16 -0
- package/dist/consent/registry.js.map +1 -0
- package/dist/consent/resolveConsentLinks.d.ts +19 -0
- package/dist/consent/resolveConsentLinks.js +26 -0
- package/dist/consent/resolveConsentLinks.js.map +1 -0
- package/dist/consent/resolvePublishedVersionRef.d.ts +17 -0
- package/dist/consent/resolvePublishedVersionRef.js +27 -0
- package/dist/consent/resolvePublishedVersionRef.js.map +1 -0
- package/dist/events/noopSink.js +6 -0
- package/dist/events/noopSink.js.map +1 -0
- package/dist/events/resolveEventSink.js +8 -0
- package/dist/events/resolveEventSink.js.map +1 -0
- package/dist/events/types.d.ts +31 -0
- package/dist/exports/client.d.ts +3 -21
- package/dist/exports/client.js +3 -319
- package/dist/exports/i18n.d.ts +3 -138
- package/dist/exports/i18n.js +2 -2
- package/dist/exports/react.d.ts +45 -550
- package/dist/exports/react.js +39 -1563
- package/dist/exports/rsc.d.ts +2 -16
- package/dist/exports/rsc.js +1 -54
- package/dist/exports/types.d.ts +28 -5
- package/dist/fields/buildFieldBlocks.js +60 -0
- package/dist/fields/buildFieldBlocks.js.map +1 -0
- package/dist/fields/builtin/calculation.js +24 -0
- package/dist/fields/builtin/calculation.js.map +1 -0
- package/dist/fields/builtin/checkbox.js +13 -0
- package/dist/fields/builtin/checkbox.js.map +1 -0
- package/dist/fields/builtin/consent.js +32 -0
- package/dist/fields/builtin/consent.js.map +1 -0
- package/dist/fields/builtin/email.js +18 -0
- package/dist/fields/builtin/email.js.map +1 -0
- package/dist/fields/builtin/file.js +40 -0
- package/dist/fields/builtin/file.js.map +1 -0
- package/dist/fields/builtin/index.js +27 -0
- package/dist/fields/builtin/index.js.map +1 -0
- package/dist/fields/builtin/number.js +17 -0
- package/dist/fields/builtin/number.js.map +1 -0
- package/dist/fields/builtin/repeater.js +44 -0
- package/dist/fields/builtin/repeater.js.map +1 -0
- package/dist/fields/builtin/select.js +44 -0
- package/dist/fields/builtin/select.js.map +1 -0
- package/dist/fields/builtin/text.js +13 -0
- package/dist/fields/builtin/text.js.map +1 -0
- package/dist/fields/builtin/textarea.js +13 -0
- package/dist/fields/builtin/textarea.js.map +1 -0
- package/dist/fields/defineFormField.d.ts +13 -0
- package/dist/fields/defineFormField.js +12 -0
- package/dist/fields/defineFormField.js.map +1 -0
- package/dist/fields/registry.d.ts +10 -0
- package/dist/fields/registry.js +24 -0
- package/dist/fields/registry.js.map +1 -0
- package/dist/fields/sharedConfig.js +89 -0
- package/dist/fields/sharedConfig.js.map +1 -0
- package/dist/fields/types.d.ts +89 -0
- package/dist/flow/engine.d.ts +17 -0
- package/dist/flow/engine.js +24 -0
- package/dist/flow/engine.js.map +1 -0
- package/dist/flow/normalizeFlow.js +35 -0
- package/dist/flow/normalizeFlow.js.map +1 -0
- package/dist/{types-DsJ_6kGJ.d.ts → flow/types.d.ts} +2 -2
- package/dist/index.d.ts +93 -4
- package/dist/index.js +43 -1890
- package/dist/index.js.map +1 -1
- package/dist/plugin/access.js +12 -0
- package/dist/plugin/access.js.map +1 -0
- package/dist/plugin/collectionOverrides.d.ts +22 -0
- package/dist/plugin/registerCollections.js +68 -0
- package/dist/plugin/registerCollections.js.map +1 -0
- package/dist/plugin/registerTranslations.js +19 -0
- package/dist/plugin/registerTranslations.js.map +1 -0
- package/dist/prefill/valuesFromSearchParams.d.ts +18 -0
- package/dist/prefill/valuesFromSearchParams.js +45 -0
- package/dist/prefill/valuesFromSearchParams.js.map +1 -0
- package/dist/presentations/defaults.d.ts +33 -0
- package/dist/presentations/defaults.js +35 -0
- package/dist/presentations/defaults.js.map +1 -0
- package/dist/presentations/registry.d.ts +15 -0
- package/dist/presentations/registry.js +15 -0
- package/dist/presentations/registry.js.map +1 -0
- package/dist/presentations/types.d.ts +18 -0
- package/dist/react/Form.d.ts +110 -0
- package/dist/react/Form.js +499 -0
- package/dist/react/Form.js.map +1 -0
- package/dist/react/FormContext.d.ts +16 -0
- package/dist/react/FormContext.js +14 -0
- package/dist/react/FormContext.js.map +1 -0
- package/dist/react/FormLayout.d.ts +20 -0
- package/dist/react/FormLayout.js +14 -0
- package/dist/react/FormLayout.js.map +1 -0
- package/dist/react/FormResults.d.ts +25 -0
- package/dist/react/FormResults.js +85 -0
- package/dist/react/FormResults.js.map +1 -0
- package/dist/react/Honeypot.d.ts +22 -0
- package/dist/react/Honeypot.js +38 -0
- package/dist/react/Honeypot.js.map +1 -0
- package/dist/react/Poll.d.ts +32 -0
- package/dist/react/Poll.js +77 -0
- package/dist/react/Poll.js.map +1 -0
- package/dist/react/cn.d.ts +6 -0
- package/dist/react/cn.js +8 -0
- package/dist/react/cn.js.map +1 -0
- package/dist/react/contract.d.ts +32 -0
- package/dist/react/contract.js +7 -0
- package/dist/react/contract.js.map +1 -0
- package/dist/react/events.js +14 -0
- package/dist/react/events.js.map +1 -0
- package/dist/react/fetchResults.d.ts +25 -0
- package/dist/react/fetchResults.js +31 -0
- package/dist/react/fetchResults.js.map +1 -0
- package/dist/react/presentation/Backdrop.d.ts +18 -0
- package/dist/react/presentation/Backdrop.js +14 -0
- package/dist/react/presentation/Backdrop.js.map +1 -0
- package/dist/react/presentation/DialogSurface.d.ts +35 -0
- package/dist/react/presentation/DialogSurface.js +56 -0
- package/dist/react/presentation/DialogSurface.js.map +1 -0
- package/dist/react/presentation/presentations.d.ts +7 -0
- package/dist/react/presentation/presentations.js +32 -0
- package/dist/react/presentation/presentations.js.map +1 -0
- package/dist/react/presentation/registry.d.ts +11 -0
- package/dist/react/presentation/registry.js +12 -0
- package/dist/react/presentation/registry.js.map +1 -0
- package/dist/react/presentation/types.d.ts +19 -0
- package/dist/react/presentation/useDismiss.d.ts +19 -0
- package/dist/react/presentation/useDismiss.js +33 -0
- package/dist/react/presentation/useDismiss.js.map +1 -0
- package/dist/react/presentation/useFocusTrap.d.ts +8 -0
- package/dist/react/presentation/useFocusTrap.js +35 -0
- package/dist/react/presentation/useFocusTrap.js.map +1 -0
- package/dist/react/presentation/useScrollLock.d.ts +6 -0
- package/dist/react/presentation/useScrollLock.js +18 -0
- package/dist/react/presentation/useScrollLock.js.map +1 -0
- package/dist/react/primitives/Checkbox.d.ts +26 -0
- package/dist/react/primitives/Checkbox.js +20 -0
- package/dist/react/primitives/Checkbox.js.map +1 -0
- package/dist/react/primitives/FieldShell.d.ts +31 -0
- package/dist/react/primitives/FieldShell.js +51 -0
- package/dist/react/primitives/FieldShell.js.map +1 -0
- package/dist/react/primitives/Input.d.ts +30 -0
- package/dist/react/primitives/Input.js +21 -0
- package/dist/react/primitives/Input.js.map +1 -0
- package/dist/react/primitives/Select.d.ts +34 -0
- package/dist/react/primitives/Select.js +26 -0
- package/dist/react/primitives/Select.js.map +1 -0
- package/dist/react/primitives/Textarea.d.ts +28 -0
- package/dist/react/primitives/Textarea.js +20 -0
- package/dist/react/primitives/Textarea.js.map +1 -0
- package/dist/react/recall.js +20 -0
- package/dist/react/recall.js.map +1 -0
- package/dist/react/registry.d.ts +16 -0
- package/dist/react/registry.js +16 -0
- package/dist/react/registry.js.map +1 -0
- package/dist/react/renderers/calculation.js +30 -0
- package/dist/react/renderers/calculation.js.map +1 -0
- package/dist/react/renderers/checkbox.js +35 -0
- package/dist/react/renderers/checkbox.js.map +1 -0
- package/dist/react/renderers/consent.js +54 -0
- package/dist/react/renderers/consent.js.map +1 -0
- package/dist/react/renderers/email.js +37 -0
- package/dist/react/renderers/email.js.map +1 -0
- package/dist/react/renderers/file.js +92 -0
- package/dist/react/renderers/file.js.map +1 -0
- package/dist/react/renderers/index.d.ts +8 -0
- package/dist/react/renderers/index.js +28 -0
- package/dist/react/renderers/index.js.map +1 -0
- package/dist/react/renderers/number.js +40 -0
- package/dist/react/renderers/number.js.map +1 -0
- package/dist/react/renderers/repeater.js +113 -0
- package/dist/react/renderers/repeater.js.map +1 -0
- package/dist/react/renderers/select.js +38 -0
- package/dist/react/renderers/select.js.map +1 -0
- package/dist/react/renderers/text.js +37 -0
- package/dist/react/renderers/text.js.map +1 -0
- package/dist/react/renderers/textarea.js +36 -0
- package/dist/react/renderers/textarea.js.map +1 -0
- package/dist/react/resolveForm.js +16 -0
- package/dist/react/resolveForm.js.map +1 -0
- package/dist/react/state.d.ts +15 -0
- package/dist/react/state.js +70 -0
- package/dist/react/state.js.map +1 -0
- package/dist/react/submitForm.d.ts +31 -0
- package/dist/react/submitForm.js +58 -0
- package/dist/react/submitForm.js.map +1 -0
- package/dist/react/toFormDocument.d.ts +24 -0
- package/dist/react/toFormDocument.js +22 -0
- package/dist/react/toFormDocument.js.map +1 -0
- package/dist/react/uploadFile.d.ts +23 -0
- package/dist/react/uploadFile.js +39 -0
- package/dist/react/uploadFile.js.map +1 -0
- package/dist/react/useField.d.ts +14 -0
- package/dist/react/useField.js +49 -0
- package/dist/react/useField.js.map +1 -0
- package/dist/react/useFormState.d.ts +8 -0
- package/dist/react/useFormState.js +9 -0
- package/dist/react/useFormState.js.map +1 -0
- package/dist/react/useFormStep.d.ts +8 -0
- package/dist/react/useFormStep.js +9 -0
- package/dist/react/useFormStep.js.map +1 -0
- package/dist/react/validateField.js +30 -0
- package/dist/react/validateField.js.map +1 -0
- package/dist/recall/interpolate.d.ts +10 -0
- package/dist/recall/interpolate.js +16 -0
- package/dist/recall/interpolate.js.map +1 -0
- package/dist/recall/resolver.d.ts +22 -0
- package/dist/recall/resolver.js +36 -0
- package/dist/recall/resolver.js.map +1 -0
- package/dist/spam/captcha.d.ts +12 -0
- package/dist/spam/captcha.js +11 -0
- package/dist/spam/captcha.js.map +1 -0
- package/dist/spam/constants.d.ts +12 -0
- package/dist/spam/constants.js +15 -0
- package/dist/spam/constants.js.map +1 -0
- package/dist/spam/identify.d.ts +12 -0
- package/dist/spam/identify.js +20 -0
- package/dist/spam/identify.js.map +1 -0
- package/dist/spam/rateLimiter.d.ts +18 -0
- package/dist/spam/rateLimiter.js +41 -0
- package/dist/spam/rateLimiter.js.map +1 -0
- package/dist/spam/reserved.js +30 -0
- package/dist/spam/reserved.js.map +1 -0
- package/dist/spam/resolveSpam.d.ts +12 -0
- package/dist/spam/resolveSpam.js +42 -0
- package/dist/spam/resolveSpam.js.map +1 -0
- package/dist/spam/spamGuard.js +68 -0
- package/dist/spam/spamGuard.js.map +1 -0
- package/dist/spam/types.d.ts +73 -0
- package/dist/spam/uploadHooks.js +33 -0
- package/dist/spam/uploadHooks.js.map +1 -0
- package/dist/submissions/SubmissionAnswers.d.ts +14 -0
- package/dist/submissions/SubmissionAnswers.js +133 -0
- package/dist/submissions/SubmissionAnswers.js.map +1 -0
- package/dist/submissions/SubmissionAnswersClient.js +142 -0
- package/dist/submissions/SubmissionAnswersClient.js.map +1 -0
- package/dist/submissions/runSubmission.js +257 -0
- package/dist/submissions/runSubmission.js.map +1 -0
- package/dist/submissions/types.d.ts +34 -0
- package/dist/submissions/validateSubmission.js +59 -0
- package/dist/submissions/validateSubmission.js.map +1 -0
- package/dist/translations/en.d.ts +12 -0
- package/dist/{translations-edMqq_2e.js → translations/en.js} +29 -23
- package/dist/translations/en.js.map +1 -0
- package/dist/translations/index.d.ts +14 -0
- package/dist/translations/index.js +26 -0
- package/dist/translations/index.js.map +1 -0
- package/dist/translations/keys.d.ts +157 -0
- package/dist/{keys-N5xGiUsh.js → translations/keys.js} +28 -3
- package/dist/translations/keys.js.map +1 -0
- package/dist/translations/makeTranslate.d.ts +11 -0
- package/dist/translations/makeTranslate.js +11 -0
- package/dist/translations/makeTranslate.js.map +1 -0
- package/dist/translations/server.js +25 -0
- package/dist/translations/server.js.map +1 -0
- package/dist/translations/useTranslation.js +12 -0
- package/dist/translations/useTranslation.js.map +1 -0
- package/dist/uploads/captureFileRef.d.ts +27 -0
- package/dist/uploads/captureFileRef.js +34 -0
- package/dist/uploads/captureFileRef.js.map +1 -0
- package/dist/uploads/resolveFileRef.d.ts +26 -0
- package/dist/uploads/resolveFileRef.js +44 -0
- package/dist/uploads/resolveFileRef.js.map +1 -0
- package/dist/uploads/types.d.ts +20 -0
- package/dist/validation/buildRuleBlocks.js +46 -0
- package/dist/validation/buildRuleBlocks.js.map +1 -0
- package/dist/validation/builtin/email.js +19 -0
- package/dist/validation/builtin/email.js.map +1 -0
- package/dist/validation/builtin/index.js +27 -0
- package/dist/validation/builtin/index.js.map +1 -0
- package/dist/validation/builtin/matchesField.js +20 -0
- package/dist/validation/builtin/matchesField.js.map +1 -0
- package/dist/validation/builtin/max.js +21 -0
- package/dist/validation/builtin/max.js.map +1 -0
- package/dist/validation/builtin/maxLength.js +26 -0
- package/dist/validation/builtin/maxLength.js.map +1 -0
- package/dist/validation/builtin/min.js +21 -0
- package/dist/validation/builtin/min.js.map +1 -0
- package/dist/validation/builtin/minLength.js +26 -0
- package/dist/validation/builtin/minLength.js.map +1 -0
- package/dist/validation/builtin/notAlreadySubmitted.js +32 -0
- package/dist/validation/builtin/notAlreadySubmitted.js.map +1 -0
- package/dist/validation/builtin/oneOf.js +34 -0
- package/dist/validation/builtin/oneOf.js.map +1 -0
- package/dist/validation/builtin/pattern.js +41 -0
- package/dist/validation/builtin/pattern.js.map +1 -0
- package/dist/validation/builtin/url.js +22 -0
- package/dist/validation/builtin/url.js.map +1 -0
- package/dist/validation/defineValidationRule.d.ts +12 -0
- package/dist/validation/defineValidationRule.js +11 -0
- package/dist/validation/defineValidationRule.js.map +1 -0
- package/dist/validation/message.js +14 -0
- package/dist/validation/message.js.map +1 -0
- package/dist/validation/registry.d.ts +10 -0
- package/dist/validation/registry.js +20 -0
- package/dist/validation/registry.js.map +1 -0
- package/dist/validation/runValidation.js +111 -0
- package/dist/validation/runValidation.js.map +1 -0
- package/dist/validation/types.d.ts +76 -0
- package/package.json +8 -5
- package/styles/form-builder.css +201 -11
- package/dist/constants-B-BUfetP.d.ts +0 -288
- package/dist/exports/client.js.map +0 -1
- package/dist/exports/react.js.map +0 -1
- package/dist/exports/rsc.js.map +0 -1
- package/dist/fieldTypes-B8jkNRob.d.ts +0 -188
- package/dist/fieldTypes-CzhhJXjg.js.map +0 -1
- package/dist/index-DfFYGbVF.d.ts +0 -481
- package/dist/keys-N5xGiUsh.js.map +0 -1
- package/dist/registry-CoCyhtvB.js +0 -282
- package/dist/registry-CoCyhtvB.js.map +0 -1
- package/dist/resolver-OeQyVH2N.js +0 -665
- package/dist/resolver-OeQyVH2N.js.map +0 -1
- package/dist/translations-edMqq_2e.js.map +0 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { FieldAggregation } from "../aggregation/types.js";
|
|
2
|
+
import { RendererTranslate } from "./contract.js";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/react/FormResults.d.ts
|
|
6
|
+
type FormResultsProps = {
|
|
7
|
+
/** One field aggregation or several (a survey summary), resolved server-side and passed in. */results: FieldAggregation | FieldAggregation[]; /** Localized translator for built-in copy. Defaults to identity (returns the key). */
|
|
8
|
+
t?: RendererTranslate;
|
|
9
|
+
locale?: string; /** Show the raw count beside each option. Default true. */
|
|
10
|
+
showCounts?: boolean;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Presentational results view for polls and survey summaries: per-option bars with percentages. Headless,
|
|
14
|
+
* data resolved server-side via `aggregateFieldResponses`/`aggregateFormResponses` and passed in (it never
|
|
15
|
+
* fetches). The option label, count, and percentage are real text (the accessible content); the bar fill
|
|
16
|
+
* is `aria-hidden` visual sugar sized by inline width.
|
|
17
|
+
*/
|
|
18
|
+
declare const FormResults: ({
|
|
19
|
+
results,
|
|
20
|
+
t,
|
|
21
|
+
showCounts
|
|
22
|
+
}: FormResultsProps) => ReactNode;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { FormResults, FormResultsProps };
|
|
25
|
+
//# sourceMappingURL=FormResults.d.ts.map
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { keys } from "../translations/keys.js";
|
|
3
|
+
import { en } from "../translations/en.js";
|
|
4
|
+
import { makeTranslate } from "../translations/makeTranslate.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/react/FormResults.tsx
|
|
7
|
+
const OneResult = ({ result, t, showCounts }) => {
|
|
8
|
+
if (result.total === 0) return /* @__PURE__ */ jsxs("section", {
|
|
9
|
+
className: "fb-results__field",
|
|
10
|
+
children: [result.label ? /* @__PURE__ */ jsx("h3", {
|
|
11
|
+
className: "fb-results__label",
|
|
12
|
+
children: result.label
|
|
13
|
+
}) : null, /* @__PURE__ */ jsx("p", {
|
|
14
|
+
className: "fb-results__empty",
|
|
15
|
+
children: t(keys.resultsNoResponses)
|
|
16
|
+
})]
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsxs("section", {
|
|
19
|
+
className: "fb-results__field",
|
|
20
|
+
children: [
|
|
21
|
+
result.label ? /* @__PURE__ */ jsx("h3", {
|
|
22
|
+
className: "fb-results__label",
|
|
23
|
+
children: result.label
|
|
24
|
+
}) : null,
|
|
25
|
+
/* @__PURE__ */ jsx("ul", {
|
|
26
|
+
className: "fb-results__list",
|
|
27
|
+
children: result.buckets.map((bucket) => /* @__PURE__ */ jsxs("li", {
|
|
28
|
+
className: "fb-results__row",
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsx("span", {
|
|
31
|
+
className: "fb-results__option",
|
|
32
|
+
children: bucket.label
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ jsx("span", {
|
|
35
|
+
className: "fb-results__bar",
|
|
36
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
37
|
+
className: "fb-results__bar-fill",
|
|
38
|
+
style: { width: `${bucket.percentage}%` },
|
|
39
|
+
"aria-hidden": "true"
|
|
40
|
+
})
|
|
41
|
+
}),
|
|
42
|
+
/* @__PURE__ */ jsxs("span", {
|
|
43
|
+
className: "fb-results__pct",
|
|
44
|
+
children: [bucket.percentage, "%"]
|
|
45
|
+
}),
|
|
46
|
+
showCounts ? /* @__PURE__ */ jsx("span", {
|
|
47
|
+
className: "fb-results__count",
|
|
48
|
+
children: bucket.count
|
|
49
|
+
}) : null
|
|
50
|
+
]
|
|
51
|
+
}, bucket.value))
|
|
52
|
+
}),
|
|
53
|
+
/* @__PURE__ */ jsxs("p", {
|
|
54
|
+
className: "fb-results__total",
|
|
55
|
+
children: [
|
|
56
|
+
result.total,
|
|
57
|
+
" ",
|
|
58
|
+
t(keys.resultsResponses),
|
|
59
|
+
result.truncated ? ` (${t(keys.resultsTruncated)})` : ""
|
|
60
|
+
]
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
/**
|
|
66
|
+
* Presentational results view for polls and survey summaries: per-option bars with percentages. Headless,
|
|
67
|
+
* data resolved server-side via `aggregateFieldResponses`/`aggregateFormResponses` and passed in (it never
|
|
68
|
+
* fetches). The option label, count, and percentage are real text (the accessible content); the bar fill
|
|
69
|
+
* is `aria-hidden` visual sugar sized by inline width.
|
|
70
|
+
*/
|
|
71
|
+
const FormResults = ({ results, t, showCounts = true }) => {
|
|
72
|
+
const translate = t ?? makeTranslate(en);
|
|
73
|
+
return /* @__PURE__ */ jsx("div", {
|
|
74
|
+
className: "fb-results",
|
|
75
|
+
children: (Array.isArray(results) ? results : [results]).map((result) => /* @__PURE__ */ jsx(OneResult, {
|
|
76
|
+
result,
|
|
77
|
+
t: translate,
|
|
78
|
+
showCounts
|
|
79
|
+
}, result.field))
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
//#endregion
|
|
83
|
+
export { FormResults };
|
|
84
|
+
|
|
85
|
+
//# sourceMappingURL=FormResults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormResults.js","names":[],"sources":["../../src/react/FormResults.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport type { FieldAggregation } from '../aggregation/types'\nimport { en } from '../translations/en'\nimport { keys } from '../translations/keys'\nimport { makeTranslate } from '../translations/makeTranslate'\nimport type { RendererTranslate } from './contract'\n\nexport type FormResultsProps = {\n\t/** One field aggregation or several (a survey summary), resolved server-side and passed in. */\n\tresults: FieldAggregation | FieldAggregation[]\n\t/** Localized translator for built-in copy. Defaults to identity (returns the key). */\n\tt?: RendererTranslate\n\tlocale?: string\n\t/** Show the raw count beside each option. Default true. */\n\tshowCounts?: boolean\n}\n\nconst OneResult = ({\n\tresult,\n\tt,\n\tshowCounts,\n}: {\n\tresult: FieldAggregation\n\tt: RendererTranslate\n\tshowCounts: boolean\n}): ReactNode => {\n\tif (result.total === 0) {\n\t\treturn (\n\t\t\t<section className=\"fb-results__field\">\n\t\t\t\t{result.label ? <h3 className=\"fb-results__label\">{result.label}</h3> : null}\n\t\t\t\t<p className=\"fb-results__empty\">{t(keys.resultsNoResponses)}</p>\n\t\t\t</section>\n\t\t)\n\t}\n\treturn (\n\t\t<section className=\"fb-results__field\">\n\t\t\t{result.label ? <h3 className=\"fb-results__label\">{result.label}</h3> : null}\n\t\t\t<ul className=\"fb-results__list\">\n\t\t\t\t{result.buckets.map((bucket) => (\n\t\t\t\t\t<li key={bucket.value} className=\"fb-results__row\">\n\t\t\t\t\t\t<span className=\"fb-results__option\">{bucket.label}</span>\n\t\t\t\t\t\t<span className=\"fb-results__bar\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName=\"fb-results__bar-fill\"\n\t\t\t\t\t\t\t\tstyle={{ width: `${bucket.percentage}%` }}\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className=\"fb-results__pct\">{bucket.percentage}%</span>\n\t\t\t\t\t\t{showCounts ? <span className=\"fb-results__count\">{bucket.count}</span> : null}\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t\t<p className=\"fb-results__total\">\n\t\t\t\t{result.total} {t(keys.resultsResponses)}\n\t\t\t\t{result.truncated ? ` (${t(keys.resultsTruncated)})` : ''}\n\t\t\t</p>\n\t\t</section>\n\t)\n}\n\n/**\n * Presentational results view for polls and survey summaries: per-option bars with percentages. Headless,\n * data resolved server-side via `aggregateFieldResponses`/`aggregateFormResponses` and passed in (it never\n * fetches). The option label, count, and percentage are real text (the accessible content); the bar fill\n * is `aria-hidden` visual sugar sized by inline width.\n */\nexport const FormResults = ({ results, t, showCounts = true }: FormResultsProps): ReactNode => {\n\tconst translate: RendererTranslate = t ?? makeTranslate(en)\n\tconst list = Array.isArray(results) ? results : [results]\n\treturn (\n\t\t<div className=\"fb-results\">\n\t\t\t{list.map((result) => (\n\t\t\t\t<OneResult key={result.field} result={result} t={translate} showCounts={showCounts} />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;AAmBA,MAAM,aAAa,EAClB,QACA,GACA,iBAKgB;CAChB,IAAI,OAAO,UAAU,GACpB,OACC,qBAAC,WAAD;EAAS,WAAU;YAAnB,CACE,OAAO,QAAQ,oBAAC,MAAD;GAAI,WAAU;aAAqB,OAAO;EAAU,CAAA,IAAI,MACxE,oBAAC,KAAD;GAAG,WAAU;aAAqB,EAAE,KAAK,kBAAkB;EAAK,CAAA,CACxD;;CAGX,OACC,qBAAC,WAAD;EAAS,WAAU;YAAnB;GACE,OAAO,QAAQ,oBAAC,MAAD;IAAI,WAAU;cAAqB,OAAO;GAAU,CAAA,IAAI;GACxE,oBAAC,MAAD;IAAI,WAAU;cACZ,OAAO,QAAQ,KAAK,WACpB,qBAAC,MAAD;KAAuB,WAAU;eAAjC;MACC,oBAAC,QAAD;OAAM,WAAU;iBAAsB,OAAO;MAAY,CAAA;MACzD,oBAAC,QAAD;OAAM,WAAU;iBACf,oBAAC,QAAD;QACC,WAAU;QACV,OAAO,EAAE,OAAO,GAAG,OAAO,WAAW,GAAG;QACxC,eAAY;OACZ,CAAA;MACI,CAAA;MACN,qBAAC,QAAD;OAAM,WAAU;iBAAhB,CAAmC,OAAO,YAAW,GAAO;;MAC3D,aAAa,oBAAC,QAAD;OAAM,WAAU;iBAAqB,OAAO;MAAY,CAAA,IAAI;KACvE;OAXK,OAAO,KAWZ,CACJ;GACE,CAAA;GACJ,qBAAC,KAAD;IAAG,WAAU;cAAb;KACE,OAAO;KAAM;KAAE,EAAE,KAAK,gBAAgB;KACtC,OAAO,YAAY,KAAK,EAAE,KAAK,gBAAgB,EAAE,KAAK;IACrD;;EACK;;AAEX;;;;;;;AAQA,MAAa,eAAe,EAAE,SAAS,GAAG,aAAa,WAAwC;CAC9F,MAAM,YAA+B,KAAK,cAAc,EAAE;CAE1D,OACC,oBAAC,OAAD;EAAK,WAAU;aAFH,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,GAGhD,KAAK,WACV,oBAAC,WAAD;GAAsC;GAAQ,GAAG;GAAuB;EAAa,GAArE,OAAO,KAA8D,CACrF;CACG,CAAA;AAEP"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Ref } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/react/Honeypot.d.ts
|
|
4
|
+
type HoneypotProps = {
|
|
5
|
+
name: string;
|
|
6
|
+
inputRef?: Ref<HTMLInputElement>;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* A visually hidden honeypot decoy. Real users never see or tab to it; bots that fill every input
|
|
10
|
+
* trip it, and the server rejects the submission.
|
|
11
|
+
*
|
|
12
|
+
* `autoComplete="new-password"` is used instead of `"off"` because Chrome frequently ignores `"off"`
|
|
13
|
+
* but reliably respects `"new-password"` to prevent autofill. The field name is intentionally generic
|
|
14
|
+
* (no "email" token) to avoid Chrome's email-address heuristic.
|
|
15
|
+
*/
|
|
16
|
+
declare const Honeypot: ({
|
|
17
|
+
name,
|
|
18
|
+
inputRef
|
|
19
|
+
}: HoneypotProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Honeypot, HoneypotProps };
|
|
22
|
+
//# sourceMappingURL=Honeypot.d.ts.map
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region src/react/Honeypot.tsx
|
|
4
|
+
const HIDDEN = {
|
|
5
|
+
position: "absolute",
|
|
6
|
+
width: 1,
|
|
7
|
+
height: 1,
|
|
8
|
+
padding: 0,
|
|
9
|
+
margin: -1,
|
|
10
|
+
overflow: "hidden",
|
|
11
|
+
clip: "rect(0, 0, 0, 0)",
|
|
12
|
+
whiteSpace: "nowrap",
|
|
13
|
+
border: 0
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* A visually hidden honeypot decoy. Real users never see or tab to it; bots that fill every input
|
|
17
|
+
* trip it, and the server rejects the submission.
|
|
18
|
+
*
|
|
19
|
+
* `autoComplete="new-password"` is used instead of `"off"` because Chrome frequently ignores `"off"`
|
|
20
|
+
* but reliably respects `"new-password"` to prevent autofill. The field name is intentionally generic
|
|
21
|
+
* (no "email" token) to avoid Chrome's email-address heuristic.
|
|
22
|
+
*/
|
|
23
|
+
const Honeypot = ({ name, inputRef }) => /* @__PURE__ */ jsx("div", {
|
|
24
|
+
"aria-hidden": "true",
|
|
25
|
+
style: HIDDEN,
|
|
26
|
+
children: /* @__PURE__ */ jsxs("label", { children: ["Leave this field empty", /* @__PURE__ */ jsx("input", {
|
|
27
|
+
ref: inputRef,
|
|
28
|
+
type: "text",
|
|
29
|
+
name,
|
|
30
|
+
tabIndex: -1,
|
|
31
|
+
autoComplete: "new-password",
|
|
32
|
+
defaultValue: ""
|
|
33
|
+
})] })
|
|
34
|
+
});
|
|
35
|
+
//#endregion
|
|
36
|
+
export { Honeypot };
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=Honeypot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Honeypot.js","names":[],"sources":["../../src/react/Honeypot.tsx"],"sourcesContent":["'use client'\n\nimport type { CSSProperties, Ref } from 'react'\n\nconst HIDDEN: CSSProperties = {\n\tposition: 'absolute',\n\twidth: 1,\n\theight: 1,\n\tpadding: 0,\n\tmargin: -1,\n\toverflow: 'hidden',\n\tclip: 'rect(0, 0, 0, 0)',\n\twhiteSpace: 'nowrap',\n\tborder: 0,\n}\n\nexport type HoneypotProps = {\n\tname: string\n\tinputRef?: Ref<HTMLInputElement>\n}\n\n/**\n * A visually hidden honeypot decoy. Real users never see or tab to it; bots that fill every input\n * trip it, and the server rejects the submission.\n *\n * `autoComplete=\"new-password\"` is used instead of `\"off\"` because Chrome frequently ignores `\"off\"`\n * but reliably respects `\"new-password\"` to prevent autofill. The field name is intentionally generic\n * (no \"email\" token) to avoid Chrome's email-address heuristic.\n */\nexport const Honeypot = ({ name, inputRef }: HoneypotProps) => (\n\t<div aria-hidden=\"true\" style={HIDDEN}>\n\t\t<label>\n\t\t\tLeave this field empty\n\t\t\t<input\n\t\t\t\tref={inputRef}\n\t\t\t\ttype=\"text\"\n\t\t\t\tname={name}\n\t\t\t\ttabIndex={-1}\n\t\t\t\tautoComplete=\"new-password\"\n\t\t\t\tdefaultValue=\"\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n)\n"],"mappings":";;;AAIA,MAAM,SAAwB;CAC7B,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;CACZ,QAAQ;AACT;;;;;;;;;AAeA,MAAa,YAAY,EAAE,MAAM,eAChC,oBAAC,OAAD;CAAK,eAAY;CAAO,OAAO;WAC9B,qBAAC,SAAD,EAAA,UAAA,CAAO,0BAEN,oBAAC,SAAD;EACC,KAAK;EACL,MAAK;EACC;EACN,UAAU;EACV,cAAa;EACb,cAAa;CACb,CAAA,CACK,EAAA,CAAA;AACH,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { FormProps } from "./Form.js";
|
|
2
|
+
import { fetchFormResults } from "./fetchResults.js";
|
|
3
|
+
|
|
4
|
+
//#region src/react/Poll.d.ts
|
|
5
|
+
type PollProps = FormProps & {
|
|
6
|
+
/** The choice field whose results are shown after voting (should match the form's public `resultsField`). */resultsField: string; /** localStorage key for the per-browser voted guard. Default `fb-poll-{form.id}`. */
|
|
7
|
+
storageKey?: string; /** Force the voted state (controlled). Omit to use the localStorage guard. */
|
|
8
|
+
hasVoted?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Injectable results fetch (testing); defaults to `fetchFormResults`. Pass a stable reference (module
|
|
11
|
+
* scope, `useCallback`, or `useMemo`): an inline function re-runs the load effect and double-fetches.
|
|
12
|
+
*/
|
|
13
|
+
fetchResultsImpl?: typeof fetchFormResults;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* A poll: renders `<Form>` until the visitor votes, then fetches the aggregate results and shows
|
|
17
|
+
* `<FormResults>`. A per-browser localStorage flag (`storageKey`) skips straight to results on revisit. The
|
|
18
|
+
* guard is UX, not integrity (bypassable): server-enforced one-per-identity dedup composes via `req.user`
|
|
19
|
+
* (authed forms) or a `notAlreadySubmitted` rule, with cookie/IP identity deferred to the spam phase.
|
|
20
|
+
*/
|
|
21
|
+
declare const Poll: ({
|
|
22
|
+
resultsField,
|
|
23
|
+
storageKey,
|
|
24
|
+
hasVoted,
|
|
25
|
+
fetchResultsImpl,
|
|
26
|
+
apiRoute,
|
|
27
|
+
onSuccess,
|
|
28
|
+
...formProps
|
|
29
|
+
}: PollProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
30
|
+
//#endregion
|
|
31
|
+
export { Poll, PollProps };
|
|
32
|
+
//# sourceMappingURL=Poll.d.ts.map
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Form } from "./Form.js";
|
|
3
|
+
import { FormResults } from "./FormResults.js";
|
|
4
|
+
import { fetchFormResults } from "./fetchResults.js";
|
|
5
|
+
import { useCallback, useEffect, useState } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
//#region src/react/Poll.tsx
|
|
8
|
+
const readVoted = (key) => {
|
|
9
|
+
try {
|
|
10
|
+
return window.localStorage.getItem(key) != null;
|
|
11
|
+
} catch {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const writeVoted = (key) => {
|
|
16
|
+
try {
|
|
17
|
+
window.localStorage.setItem(key, "1");
|
|
18
|
+
} catch {}
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* A poll: renders `<Form>` until the visitor votes, then fetches the aggregate results and shows
|
|
22
|
+
* `<FormResults>`. A per-browser localStorage flag (`storageKey`) skips straight to results on revisit. The
|
|
23
|
+
* guard is UX, not integrity (bypassable): server-enforced one-per-identity dedup composes via `req.user`
|
|
24
|
+
* (authed forms) or a `notAlreadySubmitted` rule, with cookie/IP identity deferred to the spam phase.
|
|
25
|
+
*/
|
|
26
|
+
const Poll = ({ resultsField, storageKey, hasVoted, fetchResultsImpl = fetchFormResults, apiRoute, onSuccess, ...formProps }) => {
|
|
27
|
+
const key = storageKey ?? `fb-poll-${formProps.form.id}`;
|
|
28
|
+
const [voted, setVoted] = useState(false);
|
|
29
|
+
const [results, setResults] = useState(null);
|
|
30
|
+
const loadResults = useCallback(async () => {
|
|
31
|
+
const result = await fetchResultsImpl({
|
|
32
|
+
formId: formProps.form.id,
|
|
33
|
+
field: resultsField,
|
|
34
|
+
apiRoute
|
|
35
|
+
});
|
|
36
|
+
setResults(result.ok ? result.results : []);
|
|
37
|
+
}, [
|
|
38
|
+
fetchResultsImpl,
|
|
39
|
+
formProps.form.id,
|
|
40
|
+
resultsField,
|
|
41
|
+
apiRoute
|
|
42
|
+
]);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (hasVoted ?? readVoted(key)) {
|
|
45
|
+
setVoted(true);
|
|
46
|
+
loadResults();
|
|
47
|
+
}
|
|
48
|
+
}, [
|
|
49
|
+
hasVoted,
|
|
50
|
+
key,
|
|
51
|
+
loadResults
|
|
52
|
+
]);
|
|
53
|
+
const handleSuccess = useCallback((submissionId) => {
|
|
54
|
+
writeVoted(key);
|
|
55
|
+
setVoted(true);
|
|
56
|
+
loadResults();
|
|
57
|
+
onSuccess?.(submissionId);
|
|
58
|
+
}, [
|
|
59
|
+
key,
|
|
60
|
+
loadResults,
|
|
61
|
+
onSuccess
|
|
62
|
+
]);
|
|
63
|
+
if (voted) return results ? /* @__PURE__ */ jsx(FormResults, {
|
|
64
|
+
results,
|
|
65
|
+
t: formProps.t,
|
|
66
|
+
locale: formProps.locale
|
|
67
|
+
}) : null;
|
|
68
|
+
return /* @__PURE__ */ jsx(Form, {
|
|
69
|
+
...formProps,
|
|
70
|
+
apiRoute,
|
|
71
|
+
onSuccess: handleSuccess
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
//#endregion
|
|
75
|
+
export { Poll };
|
|
76
|
+
|
|
77
|
+
//# sourceMappingURL=Poll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Poll.js","names":[],"sources":["../../src/react/Poll.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { FieldAggregation } from '../aggregation/types'\nimport { Form, type FormProps } from './Form'\nimport { FormResults } from './FormResults'\nimport { type FetchResultsResult, fetchFormResults } from './fetchResults'\n\nexport type PollProps = FormProps & {\n\t/** The choice field whose results are shown after voting (should match the form's public `resultsField`). */\n\tresultsField: string\n\t/** localStorage key for the per-browser voted guard. Default `fb-poll-{form.id}`. */\n\tstorageKey?: string\n\t/** Force the voted state (controlled). Omit to use the localStorage guard. */\n\thasVoted?: boolean\n\t/**\n\t * Injectable results fetch (testing); defaults to `fetchFormResults`. Pass a stable reference (module\n\t * scope, `useCallback`, or `useMemo`): an inline function re-runs the load effect and double-fetches.\n\t */\n\tfetchResultsImpl?: typeof fetchFormResults\n}\n\nconst readVoted = (key: string): boolean => {\n\ttry {\n\t\treturn window.localStorage.getItem(key) != null\n\t} catch {\n\t\treturn false\n\t}\n}\n\nconst writeVoted = (key: string): void => {\n\ttry {\n\t\twindow.localStorage.setItem(key, '1')\n\t} catch {\n\t\t// Private mode / storage disabled: the guard is best-effort UX, never integrity.\n\t}\n}\n\n/**\n * A poll: renders `<Form>` until the visitor votes, then fetches the aggregate results and shows\n * `<FormResults>`. A per-browser localStorage flag (`storageKey`) skips straight to results on revisit. The\n * guard is UX, not integrity (bypassable): server-enforced one-per-identity dedup composes via `req.user`\n * (authed forms) or a `notAlreadySubmitted` rule, with cookie/IP identity deferred to the spam phase.\n */\nexport const Poll = ({\n\tresultsField,\n\tstorageKey,\n\thasVoted,\n\tfetchResultsImpl = fetchFormResults,\n\tapiRoute,\n\tonSuccess,\n\t...formProps\n}: PollProps) => {\n\tconst key = storageKey ?? `fb-poll-${formProps.form.id}`\n\tconst [voted, setVoted] = useState(false)\n\tconst [results, setResults] = useState<FieldAggregation[] | null>(null)\n\n\tconst loadResults = useCallback(async () => {\n\t\tconst result: FetchResultsResult = await fetchResultsImpl({\n\t\t\tformId: formProps.form.id,\n\t\t\tfield: resultsField,\n\t\t\tapiRoute,\n\t\t})\n\t\tsetResults(result.ok ? result.results : [])\n\t}, [fetchResultsImpl, formProps.form.id, resultsField, apiRoute])\n\n\tuseEffect(() => {\n\t\tconst already = hasVoted ?? readVoted(key)\n\t\tif (already) {\n\t\t\tsetVoted(true)\n\t\t\tvoid loadResults()\n\t\t}\n\t}, [hasVoted, key, loadResults])\n\n\tconst handleSuccess = useCallback(\n\t\t(submissionId?: string) => {\n\t\t\twriteVoted(key)\n\t\t\tsetVoted(true)\n\t\t\tvoid loadResults()\n\t\t\tonSuccess?.(submissionId)\n\t\t},\n\t\t[key, loadResults, onSuccess]\n\t)\n\n\tif (voted) {\n\t\treturn results ? (\n\t\t\t<FormResults results={results} t={formProps.t} locale={formProps.locale} />\n\t\t) : null\n\t}\n\n\treturn <Form {...formProps} apiRoute={apiRoute} onSuccess={handleSuccess} />\n}\n"],"mappings":";;;;;;;AAsBA,MAAM,aAAa,QAAyB;CAC3C,IAAI;EACH,OAAO,OAAO,aAAa,QAAQ,GAAG,KAAK;CAC5C,QAAQ;EACP,OAAO;CACR;AACD;AAEA,MAAM,cAAc,QAAsB;CACzC,IAAI;EACH,OAAO,aAAa,QAAQ,KAAK,GAAG;CACrC,QAAQ,CAER;AACD;;;;;;;AAQA,MAAa,QAAQ,EACpB,cACA,YACA,UACA,mBAAmB,kBACnB,UACA,WACA,GAAG,gBACa;CAChB,MAAM,MAAM,cAAc,WAAW,UAAU,KAAK;CACpD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,SAAS,cAAc,SAAoC,IAAI;CAEtE,MAAM,cAAc,YAAY,YAAY;EAC3C,MAAM,SAA6B,MAAM,iBAAiB;GACzD,QAAQ,UAAU,KAAK;GACvB,OAAO;GACP;EACD,CAAC;EACD,WAAW,OAAO,KAAK,OAAO,UAAU,CAAC,CAAC;CAC3C,GAAG;EAAC;EAAkB,UAAU,KAAK;EAAI;EAAc;CAAQ,CAAC;CAEhE,gBAAgB;EAEf,IADgB,YAAY,UAAU,GAAG,GAC5B;GACZ,SAAS,IAAI;GACb,YAAiB;EAClB;CACD,GAAG;EAAC;EAAU;EAAK;CAAW,CAAC;CAE/B,MAAM,gBAAgB,aACpB,iBAA0B;EAC1B,WAAW,GAAG;EACd,SAAS,IAAI;EACb,YAAiB;EACjB,YAAY,YAAY;CACzB,GACA;EAAC;EAAK;EAAa;CAAS,CAC7B;CAEA,IAAI,OACH,OAAO,UACN,oBAAC,aAAD;EAAsB;EAAS,GAAG,UAAU;EAAG,QAAQ,UAAU;CAAS,CAAA,IACvE;CAGL,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAqB;EAAU,WAAW;CAAgB,CAAA;AAC5E"}
|
package/dist/react/cn.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cn.js","names":[],"sources":["../../src/react/cn.ts"],"sourcesContent":["'use client'\n\n/** Joins class names, filtering out falsy values. */\nexport const cn = (...classes: (string | undefined | null | false)[]): string =>\n\tclasses.filter(Boolean).join(' ')\n"],"mappings":";;;AAGA,MAAa,MAAM,GAAG,YACrB,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { FormFieldInstance } from "../submissions/types.js";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/react/contract.d.ts
|
|
5
|
+
/** A localized translator the renderer uses for built-in copy. `(key) => string`; unknown keys return the key. */
|
|
6
|
+
type RendererTranslate = (key: string) => string;
|
|
7
|
+
/**
|
|
8
|
+
* The props every field renderer receives. The renderer turns one field instance plus its current value
|
|
9
|
+
* into an accessible control. Supplied by `<Form>` or directly in tests. Generic over the
|
|
10
|
+
* value type so custom renderers can narrow it.
|
|
11
|
+
*/
|
|
12
|
+
type FieldRendererProps<TValue = unknown> = {
|
|
13
|
+
/** The stored field instance (name, label, blockType, required, placeholder, description, options, ...). */field: FormFieldInstance; /** The control's stable id, for label/aria wiring. */
|
|
14
|
+
id: string; /** The field machine name (form value key). */
|
|
15
|
+
name: string;
|
|
16
|
+
value: TValue | undefined;
|
|
17
|
+
onChange: (value: TValue) => void;
|
|
18
|
+
onBlur: () => void; /** Blocking error messages for this field (already filtered to error severity). */
|
|
19
|
+
errors: string[]; /** Advisory messages (warning severity). */
|
|
20
|
+
warnings?: string[];
|
|
21
|
+
required: boolean;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
locale: string;
|
|
24
|
+
t: RendererTranslate;
|
|
25
|
+
};
|
|
26
|
+
/** A field renderer: maps `FieldRendererProps` to React output. */
|
|
27
|
+
type FieldRenderer<TValue = unknown> = (props: FieldRendererProps<TValue>) => ReactNode;
|
|
28
|
+
/** Identity helper that pins a renderer to the `FieldRenderer` type so authors get prop inference. */
|
|
29
|
+
declare const defineFieldRenderer: <TValue = unknown>(renderer: FieldRenderer<TValue>) => FieldRenderer<TValue>;
|
|
30
|
+
//#endregion
|
|
31
|
+
export { FieldRenderer, FieldRendererProps, RendererTranslate, defineFieldRenderer };
|
|
32
|
+
//# sourceMappingURL=contract.d.ts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
//#region src/react/contract.ts
|
|
2
|
+
/** Identity helper that pins a renderer to the `FieldRenderer` type so authors get prop inference. */
|
|
3
|
+
const defineFieldRenderer = (renderer) => renderer;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { defineFieldRenderer };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=contract.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contract.js","names":[],"sources":["../../src/react/contract.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { FormFieldInstance } from '../submissions/types'\n\n/** A localized translator the renderer uses for built-in copy. `(key) => string`; unknown keys return the key. */\nexport type RendererTranslate = (key: string) => string\n\n/**\n * The props every field renderer receives. The renderer turns one field instance plus its current value\n * into an accessible control. Supplied by `<Form>` or directly in tests. Generic over the\n * value type so custom renderers can narrow it.\n */\nexport type FieldRendererProps<TValue = unknown> = {\n\t/** The stored field instance (name, label, blockType, required, placeholder, description, options, ...). */\n\tfield: FormFieldInstance\n\t/** The control's stable id, for label/aria wiring. */\n\tid: string\n\t/** The field machine name (form value key). */\n\tname: string\n\tvalue: TValue | undefined\n\tonChange: (value: TValue) => void\n\tonBlur: () => void\n\t/** Blocking error messages for this field (already filtered to error severity). */\n\terrors: string[]\n\t/** Advisory messages (warning severity). */\n\twarnings?: string[]\n\trequired: boolean\n\tdisabled?: boolean\n\tlocale: string\n\tt: RendererTranslate\n}\n\n/** A field renderer: maps `FieldRendererProps` to React output. */\nexport type FieldRenderer<TValue = unknown> = (props: FieldRendererProps<TValue>) => ReactNode\n\n/** Identity helper that pins a renderer to the `FieldRenderer` type so authors get prop inference. */\nexport const defineFieldRenderer = <TValue = unknown>(\n\trenderer: FieldRenderer<TValue>\n): FieldRenderer<TValue> => renderer\n"],"mappings":";;AAmCA,MAAa,uBACZ,aAC2B"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region src/react/events.ts
|
|
3
|
+
/** Emit a lifecycle event through the sink, stamping `formId` + an ISO `at`. */
|
|
4
|
+
const emitFormEvent = (sink, formId, event) => {
|
|
5
|
+
sink.emit({
|
|
6
|
+
...event,
|
|
7
|
+
formId,
|
|
8
|
+
at: (/* @__PURE__ */ new Date()).toISOString()
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { emitFormEvent };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=events.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.js","names":[],"sources":["../../src/react/events.ts"],"sourcesContent":["'use client'\n\nimport type { FormEvent, FormEventSink } from '../events/types'\n\n/** Distribute `Omit` across the event union so each variant keeps its discriminated extras. */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never\n\n/** Emit a lifecycle event through the sink, stamping `formId` + an ISO `at`. */\nexport const emitFormEvent = (\n\tsink: FormEventSink,\n\tformId: string,\n\tevent: DistributiveOmit<FormEvent, 'formId' | 'at'>\n): void => {\n\tvoid sink.emit({ ...event, formId, at: new Date().toISOString() } as FormEvent)\n}\n"],"mappings":";;;AAQA,MAAa,iBACZ,MACA,QACA,UACU;CACV,KAAU,KAAK;EAAE,GAAG;EAAO;EAAQ,qBAAI,IAAI,KAAK,GAAE,YAAY;CAAE,CAAc;AAC/E"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { FieldAggregation } from "../aggregation/types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/react/fetchResults.d.ts
|
|
4
|
+
type FetchResultsInput = {
|
|
5
|
+
formId: number | string; /** Restrict to one field. Omit to get every public/enumerable field. */
|
|
6
|
+
field?: string; /** Payload API route prefix; defaults to `/api`. */
|
|
7
|
+
apiRoute?: string; /** Injectable for testing; defaults to global `fetch`. */
|
|
8
|
+
fetchImpl?: typeof fetch;
|
|
9
|
+
};
|
|
10
|
+
type FetchResultsResult = {
|
|
11
|
+
ok: true;
|
|
12
|
+
results: FieldAggregation[];
|
|
13
|
+
} | {
|
|
14
|
+
ok: false;
|
|
15
|
+
message?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Fetch aggregate poll/survey results from the form-builder results endpoint
|
|
19
|
+
* (`GET {apiRoute}/forms/:id/results`). Returns the server-resolved aggregations; the endpoint gates public
|
|
20
|
+
* access by the form's `showResults` opt-in. Pure: inject `fetchImpl` in tests.
|
|
21
|
+
*/
|
|
22
|
+
declare const fetchFormResults: (input: FetchResultsInput) => Promise<FetchResultsResult>;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { FetchResultsInput, FetchResultsResult, fetchFormResults };
|
|
25
|
+
//# sourceMappingURL=fetchResults.d.ts.map
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
//#region src/react/fetchResults.ts
|
|
2
|
+
/**
|
|
3
|
+
* Fetch aggregate poll/survey results from the form-builder results endpoint
|
|
4
|
+
* (`GET {apiRoute}/forms/:id/results`). Returns the server-resolved aggregations; the endpoint gates public
|
|
5
|
+
* access by the form's `showResults` opt-in. Pure: inject `fetchImpl` in tests.
|
|
6
|
+
*/
|
|
7
|
+
const fetchFormResults = async (input) => {
|
|
8
|
+
const { formId, field, apiRoute = "/api", fetchImpl = fetch } = input;
|
|
9
|
+
const query = field ? `?field=${encodeURIComponent(field)}` : "";
|
|
10
|
+
let response;
|
|
11
|
+
try {
|
|
12
|
+
response = await fetchImpl(`${apiRoute}/forms/${formId}/results${query}`, { method: "GET" });
|
|
13
|
+
} catch (error) {
|
|
14
|
+
return {
|
|
15
|
+
ok: false,
|
|
16
|
+
message: error instanceof Error ? error.message : "Network error"
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
if (!response.ok) return {
|
|
20
|
+
ok: false,
|
|
21
|
+
message: `Request failed (${response.status})`
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
ok: true,
|
|
25
|
+
results: (await response.json().catch(() => ({}))).results ?? []
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
export { fetchFormResults };
|
|
30
|
+
|
|
31
|
+
//# sourceMappingURL=fetchResults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fetchResults.js","names":[],"sources":["../../src/react/fetchResults.ts"],"sourcesContent":["import type { FieldAggregation } from '../aggregation/types'\n\nexport type FetchResultsInput = {\n\tformId: number | string\n\t/** Restrict to one field. Omit to get every public/enumerable field. */\n\tfield?: string\n\t/** Payload API route prefix; defaults to `/api`. */\n\tapiRoute?: string\n\t/** Injectable for testing; defaults to global `fetch`. */\n\tfetchImpl?: typeof fetch\n}\n\nexport type FetchResultsResult =\n\t| { ok: true; results: FieldAggregation[] }\n\t| { ok: false; message?: string }\n\n/**\n * Fetch aggregate poll/survey results from the form-builder results endpoint\n * (`GET {apiRoute}/forms/:id/results`). Returns the server-resolved aggregations; the endpoint gates public\n * access by the form's `showResults` opt-in. Pure: inject `fetchImpl` in tests.\n */\nexport const fetchFormResults = async (input: FetchResultsInput): Promise<FetchResultsResult> => {\n\tconst { formId, field, apiRoute = '/api', fetchImpl = fetch } = input\n\tconst query = field ? `?field=${encodeURIComponent(field)}` : ''\n\tlet response: Response\n\ttry {\n\t\tresponse = await fetchImpl(`${apiRoute}/forms/${formId}/results${query}`, { method: 'GET' })\n\t} catch (error) {\n\t\treturn { ok: false, message: error instanceof Error ? error.message : 'Network error' }\n\t}\n\tif (!response.ok) {\n\t\treturn { ok: false, message: `Request failed (${response.status})` }\n\t}\n\tconst body = (await response.json().catch(() => ({}))) as { results?: FieldAggregation[] }\n\treturn { ok: true, results: body.results ?? [] }\n}\n"],"mappings":";;;;;;AAqBA,MAAa,mBAAmB,OAAO,UAA0D;CAChG,MAAM,EAAE,QAAQ,OAAO,WAAW,QAAQ,YAAY,UAAU;CAChE,MAAM,QAAQ,QAAQ,UAAU,mBAAmB,KAAK,MAAM;CAC9D,IAAI;CACJ,IAAI;EACH,WAAW,MAAM,UAAU,GAAG,SAAS,SAAS,OAAO,UAAU,SAAS,EAAE,QAAQ,MAAM,CAAC;CAC5F,SAAS,OAAO;EACf,OAAO;GAAE,IAAI;GAAO,SAAS,iBAAiB,QAAQ,MAAM,UAAU;EAAgB;CACvF;CACA,IAAI,CAAC,SAAS,IACb,OAAO;EAAE,IAAI;EAAO,SAAS,mBAAmB,SAAS,OAAO;CAAG;CAGpE,OAAO;EAAE,IAAI;EAAM,UAAS,MADR,SAAS,KAAK,EAAE,aAAa,CAAC,EAAE,GACnB,WAAW,CAAC;CAAE;AAChD"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/react/presentation/Backdrop.d.ts
|
|
2
|
+
type BackdropProps = {
|
|
3
|
+
onClick?: () => void;
|
|
4
|
+
className?: string;
|
|
5
|
+
};
|
|
6
|
+
/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */
|
|
7
|
+
declare const Backdrop: ({
|
|
8
|
+
onClick,
|
|
9
|
+
className
|
|
10
|
+
}: BackdropProps) => import("react").DetailedReactHTMLElement<{
|
|
11
|
+
'data-fb-backdrop': string;
|
|
12
|
+
className: string | undefined;
|
|
13
|
+
onClick: (() => void) | undefined;
|
|
14
|
+
'aria-hidden': true;
|
|
15
|
+
}, HTMLElement>;
|
|
16
|
+
//#endregion
|
|
17
|
+
export { Backdrop, BackdropProps };
|
|
18
|
+
//# sourceMappingURL=Backdrop.d.ts.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
//#region src/react/presentation/Backdrop.tsx
|
|
4
|
+
/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */
|
|
5
|
+
const Backdrop = ({ onClick, className }) => createElement("div", {
|
|
6
|
+
"data-fb-backdrop": "",
|
|
7
|
+
className,
|
|
8
|
+
onClick,
|
|
9
|
+
"aria-hidden": true
|
|
10
|
+
});
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Backdrop };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=Backdrop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Backdrop.js","names":[],"sources":["../../../src/react/presentation/Backdrop.tsx"],"sourcesContent":["'use client'\n\nimport { createElement } from 'react'\n\nexport type BackdropProps = {\n\tonClick?: () => void\n\tclassName?: string\n}\n\n/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */\nexport const Backdrop = ({ onClick, className }: BackdropProps) =>\n\tcreateElement('div', { 'data-fb-backdrop': '', className, onClick, 'aria-hidden': true })\n"],"mappings":";;;;AAUA,MAAa,YAAY,EAAE,SAAS,gBACnC,cAAc,OAAO;CAAE,oBAAoB;CAAI;CAAW;CAAS,eAAe;AAAK,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/react/presentation/DialogSurface.d.ts
|
|
4
|
+
type DialogSurfaceProps = {
|
|
5
|
+
open: boolean;
|
|
6
|
+
onClose: () => void; /** Accessible name; pass either label or labelledBy. */
|
|
7
|
+
label?: string;
|
|
8
|
+
labelledBy?: string; /** CSS data hook, e.g. 'modal' | 'drawer'. */
|
|
9
|
+
surface?: string;
|
|
10
|
+
closeLabel?: string;
|
|
11
|
+
closeOnEscape?: boolean;
|
|
12
|
+
closeOnOutsideClick?: boolean;
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,
|
|
17
|
+
* scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the
|
|
18
|
+
* exported primitives so a consumer can rebuild it from the same parts.
|
|
19
|
+
*/
|
|
20
|
+
declare const DialogSurface: ({
|
|
21
|
+
open,
|
|
22
|
+
onClose,
|
|
23
|
+
label,
|
|
24
|
+
labelledBy,
|
|
25
|
+
surface,
|
|
26
|
+
closeLabel,
|
|
27
|
+
closeOnEscape,
|
|
28
|
+
closeOnOutsideClick,
|
|
29
|
+
children
|
|
30
|
+
}: DialogSurfaceProps) => import("react").ReactElement<{
|
|
31
|
+
'data-fb-overlay': string;
|
|
32
|
+
}, string | import("react").JSXElementConstructor<any>> | null;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { DialogSurface, DialogSurfaceProps };
|
|
35
|
+
//# sourceMappingURL=DialogSurface.d.ts.map
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Backdrop } from "./Backdrop.js";
|
|
3
|
+
import { useDismiss } from "./useDismiss.js";
|
|
4
|
+
import { useFocusTrap } from "./useFocusTrap.js";
|
|
5
|
+
import { useScrollLock } from "./useScrollLock.js";
|
|
6
|
+
import { createElement, useEffect, useRef } from "react";
|
|
7
|
+
//#region src/react/presentation/DialogSurface.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,
|
|
10
|
+
* scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the
|
|
11
|
+
* exported primitives so a consumer can rebuild it from the same parts.
|
|
12
|
+
*/
|
|
13
|
+
const DialogSurface = ({ open, onClose, label, labelledBy, surface, closeLabel = "Close", closeOnEscape, closeOnOutsideClick, children }) => {
|
|
14
|
+
const ref = useRef(null);
|
|
15
|
+
const restoreRef = useRef(null);
|
|
16
|
+
useScrollLock(open);
|
|
17
|
+
useFocusTrap(ref, open);
|
|
18
|
+
useDismiss({
|
|
19
|
+
active: open,
|
|
20
|
+
onDismiss: onClose,
|
|
21
|
+
closeOnEscape,
|
|
22
|
+
closeOnOutsideClick
|
|
23
|
+
}, ref);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (!open) return;
|
|
26
|
+
restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
27
|
+
ref.current?.focus();
|
|
28
|
+
return () => {
|
|
29
|
+
restoreRef.current?.focus();
|
|
30
|
+
};
|
|
31
|
+
}, [open]);
|
|
32
|
+
if (!open) return null;
|
|
33
|
+
return createElement("div", { "data-fb-overlay": surface ?? "" }, [createElement(Backdrop, {
|
|
34
|
+
key: "backdrop",
|
|
35
|
+
onClick: onClose
|
|
36
|
+
}), createElement("div", {
|
|
37
|
+
key: "surface",
|
|
38
|
+
ref,
|
|
39
|
+
role: "dialog",
|
|
40
|
+
"aria-modal": true,
|
|
41
|
+
"aria-label": labelledBy ? void 0 : label,
|
|
42
|
+
"aria-labelledby": labelledBy,
|
|
43
|
+
"data-fb-dialog": surface ?? "",
|
|
44
|
+
tabIndex: -1
|
|
45
|
+
}, [createElement("button", {
|
|
46
|
+
key: "close",
|
|
47
|
+
type: "button",
|
|
48
|
+
"data-fb-dialog-close": "",
|
|
49
|
+
"aria-label": closeLabel,
|
|
50
|
+
onClick: onClose
|
|
51
|
+
}, "×"), createElement("div", { key: "body" }, children)])]);
|
|
52
|
+
};
|
|
53
|
+
//#endregion
|
|
54
|
+
export { DialogSurface };
|
|
55
|
+
|
|
56
|
+
//# sourceMappingURL=DialogSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogSurface.js","names":[],"sources":["../../../src/react/presentation/DialogSurface.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type ReactNode, useEffect, useRef } from 'react'\nimport { Backdrop } from './Backdrop'\nimport { useDismiss } from './useDismiss'\nimport { useFocusTrap } from './useFocusTrap'\nimport { useScrollLock } from './useScrollLock'\n\nexport type DialogSurfaceProps = {\n\topen: boolean\n\tonClose: () => void\n\t/** Accessible name; pass either label or labelledBy. */\n\tlabel?: string\n\tlabelledBy?: string\n\t/** CSS data hook, e.g. 'modal' | 'drawer'. */\n\tsurface?: string\n\tcloseLabel?: string\n\tcloseOnEscape?: boolean\n\tcloseOnOutsideClick?: boolean\n\tchildren?: ReactNode\n}\n\n/**\n * Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,\n * scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the\n * exported primitives so a consumer can rebuild it from the same parts.\n */\nexport const DialogSurface = ({\n\topen,\n\tonClose,\n\tlabel,\n\tlabelledBy,\n\tsurface,\n\tcloseLabel = 'Close',\n\tcloseOnEscape,\n\tcloseOnOutsideClick,\n\tchildren,\n}: DialogSurfaceProps) => {\n\tconst ref = useRef<HTMLDivElement>(null)\n\tconst restoreRef = useRef<HTMLElement | null>(null)\n\n\tuseScrollLock(open)\n\tuseFocusTrap(ref, open)\n\tuseDismiss({ active: open, onDismiss: onClose, closeOnEscape, closeOnOutsideClick }, ref)\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn\n\t\t}\n\t\trestoreRef.current =\n\t\t\tdocument.activeElement instanceof HTMLElement ? document.activeElement : null\n\t\tref.current?.focus()\n\t\treturn () => {\n\t\t\trestoreRef.current?.focus()\n\t\t}\n\t}, [open])\n\n\tif (!open) {\n\t\treturn null\n\t}\n\n\treturn createElement('div', { 'data-fb-overlay': surface ?? '' }, [\n\t\tcreateElement(Backdrop, { key: 'backdrop', onClick: onClose }),\n\t\tcreateElement(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\tkey: 'surface',\n\t\t\t\tref,\n\t\t\t\trole: 'dialog',\n\t\t\t\t'aria-modal': true,\n\t\t\t\t'aria-label': labelledBy ? undefined : label,\n\t\t\t\t'aria-labelledby': labelledBy,\n\t\t\t\t'data-fb-dialog': surface ?? '',\n\t\t\t\ttabIndex: -1,\n\t\t\t},\n\t\t\t[\n\t\t\t\tcreateElement(\n\t\t\t\t\t'button',\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'close',\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t'data-fb-dialog-close': '',\n\t\t\t\t\t\t'aria-label': closeLabel,\n\t\t\t\t\t\tonClick: onClose,\n\t\t\t\t\t},\n\t\t\t\t\t'\\xd7'\n\t\t\t\t),\n\t\t\t\tcreateElement('div', { key: 'body' }, children),\n\t\t\t]\n\t\t),\n\t])\n}\n"],"mappings":";;;;;;;;;;;;AA2BA,MAAa,iBAAiB,EAC7B,MACA,SACA,OACA,YACA,SACA,aAAa,SACb,eACA,qBACA,eACyB;CACzB,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,OAA2B,IAAI;CAElD,cAAc,IAAI;CAClB,aAAa,KAAK,IAAI;CACtB,WAAW;EAAE,QAAQ;EAAM,WAAW;EAAS;EAAe;CAAoB,GAAG,GAAG;CAExF,gBAAgB;EACf,IAAI,CAAC,MACJ;EAED,WAAW,UACV,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EAC1E,IAAI,SAAS,MAAM;EACnB,aAAa;GACZ,WAAW,SAAS,MAAM;EAC3B;CACD,GAAG,CAAC,IAAI,CAAC;CAET,IAAI,CAAC,MACJ,OAAO;CAGR,OAAO,cAAc,OAAO,EAAE,mBAAmB,WAAW,GAAG,GAAG,CACjE,cAAc,UAAU;EAAE,KAAK;EAAY,SAAS;CAAQ,CAAC,GAC7D,cACC,OACA;EACC,KAAK;EACL;EACA,MAAM;EACN,cAAc;EACd,cAAc,aAAa,KAAA,IAAY;EACvC,mBAAmB;EACnB,kBAAkB,WAAW;EAC7B,UAAU;CACX,GACA,CACC,cACC,UACA;EACC,KAAK;EACL,MAAM;EACN,wBAAwB;EACxB,cAAc;EACd,SAAS;CACV,GACA,GACD,GACA,cAAc,OAAO,EAAE,KAAK,OAAO,GAAG,QAAQ,CAC/C,CACD,CACD,CAAC;AACF"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FormPresentation } from "./types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/react/presentation/presentations.d.ts
|
|
4
|
+
declare const defaultPresentations: Record<string, FormPresentation>;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { defaultPresentations };
|
|
7
|
+
//# sourceMappingURL=presentations.d.ts.map
|