@ahrowe/ui 0.34.0 → 0.35.0
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/README.md +101 -40
- package/dist/esm/common/accordion/accordion.mjs +1 -1
- package/dist/esm/common/accordion/accordion.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.module.mjs +1 -1
- package/dist/esm/common/accordion/accordion.module.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.plain.module.mjs +1 -1
- package/dist/esm/common/accordion/accordion.plain.module.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.primary.module.mjs +1 -1
- package/dist/esm/common/accordion/accordion.primary.module.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.types.mjs +1 -1
- package/dist/esm/common/accordion/accordion.types.mjs.map +1 -1
- package/dist/esm/common/actionButtons/actionButtons.mjs +1 -1
- package/dist/esm/common/actionButtons/actionButtons.mjs.map +1 -1
- package/dist/esm/common/actionButtons/actionButtons.module.mjs +1 -1
- package/dist/esm/common/actionIcon/actionIcon.mjs +1 -1
- package/dist/esm/common/actionIcon/actionIcon.mjs.map +1 -1
- package/dist/esm/common/actionIcon/actionIcon.module.mjs +1 -1
- package/dist/esm/common/alert/alert.mjs +1 -1
- package/dist/esm/common/alert/alert.mjs.map +1 -1
- package/dist/esm/common/alert/alert.module.mjs +1 -1
- package/dist/esm/common/alert/alert.types.mjs +1 -1
- package/dist/esm/common/alert/alert.types.mjs.map +1 -1
- package/dist/esm/common/animatedIcon/animatedIcon.mjs +1 -1
- package/dist/esm/common/animatedIcon/animatedIcon.mjs.map +1 -1
- package/dist/esm/common/animatedIcon/animatedIcon.module.mjs +1 -1
- package/dist/esm/common/animatedLogo/animatedLogo.mjs +1 -1
- package/dist/esm/common/animatedLogo/animatedLogo.mjs.map +1 -1
- package/dist/esm/common/animatedLogo/animatedLogo.module.mjs +1 -1
- package/dist/esm/common/animatedText/animatedText.mjs +1 -1
- package/dist/esm/common/animatedText/animatedText.mjs.map +1 -1
- package/dist/esm/common/animatedText/animatedText.module.mjs +1 -1
- package/dist/esm/common/animatedText/animatedText.types.mjs +1 -1
- package/dist/esm/common/animatedText/animatedText.types.mjs.map +1 -1
- package/dist/esm/common/avatar/avatar.mjs +1 -1
- package/dist/esm/common/avatar/avatar.mjs.map +1 -1
- package/dist/esm/common/avatar/avatar.module.mjs +1 -1
- package/dist/esm/common/avatar/avatarGroup.mjs +1 -1
- package/dist/esm/common/avatar/avatarGroup.mjs.map +1 -1
- package/dist/esm/common/badge/badge.mjs +1 -1
- package/dist/esm/common/badge/badge.mjs.map +1 -1
- package/dist/esm/common/badge/badge.module.mjs +1 -1
- package/dist/esm/common/badge/badge.types.mjs +1 -1
- package/dist/esm/common/badge/badge.types.mjs.map +1 -1
- package/dist/esm/common/bodyEnd/bodyEnd.mjs +1 -1
- package/dist/esm/common/bodyEnd/bodyEnd.mjs.map +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs.map +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.module.mjs +1 -1
- package/dist/esm/common/button/button.mjs +1 -1
- package/dist/esm/common/button/button.mjs.map +1 -1
- package/dist/esm/common/button/button.module.mjs +1 -1
- package/dist/esm/common/button/button.types.mjs +1 -1
- package/dist/esm/common/button/button.types.mjs.map +1 -1
- package/dist/esm/common/buttonGroup/buttonGroup.mjs +1 -1
- package/dist/esm/common/buttonGroup/buttonGroup.mjs.map +1 -1
- package/dist/esm/common/buttonGroup/buttonGroup.module.mjs +1 -1
- package/dist/esm/common/buttonGroup/buttonGroup.types.mjs +1 -1
- package/dist/esm/common/buttonGroup/buttonGroup.types.mjs.map +1 -1
- package/dist/esm/common/card/Card.mjs +1 -1
- package/dist/esm/common/card/Card.mjs.map +1 -1
- package/dist/esm/common/card/CardActions.mjs +1 -1
- package/dist/esm/common/card/CardActions.mjs.map +1 -1
- package/dist/esm/common/card/CardContent.mjs +1 -1
- package/dist/esm/common/card/CardContent.mjs.map +1 -1
- package/dist/esm/common/card/CardHeader.mjs +1 -1
- package/dist/esm/common/card/CardHeader.mjs.map +1 -1
- package/dist/esm/common/card/CardMedia.mjs +1 -1
- package/dist/esm/common/card/CardMedia.mjs.map +1 -1
- package/dist/esm/common/card/card.module.mjs +1 -1
- package/dist/esm/common/card/card.module.mjs.map +1 -1
- package/dist/esm/common/card/card.types.mjs +1 -1
- package/dist/esm/common/card/card.types.mjs.map +1 -1
- package/dist/esm/common/carousel/carousel.mjs +1 -1
- package/dist/esm/common/carousel/carousel.mjs.map +1 -1
- package/dist/esm/common/carousel/carousel.module.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs.map +1 -1
- package/dist/esm/common/checkbox/checkbox.module.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.module.mjs.map +1 -1
- package/dist/esm/common/chip/chip.mjs +1 -1
- package/dist/esm/common/chip/chip.mjs.map +1 -1
- package/dist/esm/common/chip/chip.module.mjs +1 -1
- package/dist/esm/common/chip/chip.types.mjs +1 -1
- package/dist/esm/common/chip/chip.types.mjs.map +1 -1
- package/dist/esm/common/chip/chipContainer.mjs +1 -1
- package/dist/esm/common/chip/chipContainer.mjs.map +1 -1
- package/dist/esm/common/colorPicker/colorPicker.mjs +1 -1
- package/dist/esm/common/colorPicker/colorPicker.mjs.map +1 -1
- package/dist/esm/common/colorPicker/colorPicker.module.mjs +1 -1
- package/dist/esm/common/colorPicker/colorPicker.module.mjs.map +1 -1
- package/dist/esm/common/colorPicker/toHex.mjs +1 -1
- package/dist/esm/common/colorPicker/toHex.mjs.map +1 -1
- package/dist/esm/common/configProvider/configProvider.mjs +1 -1
- package/dist/esm/common/configProvider/configProvider.mjs.map +1 -1
- package/dist/esm/common/configProvider/presentation.types.mjs +1 -1
- package/dist/esm/common/configProvider/presentation.types.mjs.map +1 -1
- package/dist/esm/common/configProvider/useComponentDefaults.mjs +1 -1
- package/dist/esm/common/configProvider/useComponentDefaults.mjs.map +1 -1
- package/dist/esm/common/configProvider/useLabels.mjs +1 -1
- package/dist/esm/common/configProvider/useLabels.mjs.map +1 -1
- package/dist/esm/common/configProvider/usePresentationDefault.mjs +1 -1
- package/dist/esm/common/configProvider/usePresentationDefault.mjs.map +1 -1
- package/dist/esm/common/confirmModal/confirmModal.mjs +1 -1
- package/dist/esm/common/confirmModal/confirmModal.mjs.map +1 -1
- package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs +1 -1
- package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs.map +1 -1
- package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.module.mjs +1 -1
- package/dist/esm/common/datePicker/dateFunctions.mjs +1 -1
- package/dist/esm/common/datePicker/dateFunctions.mjs.map +1 -1
- package/dist/esm/common/datePicker/datePicker.mjs +1 -1
- package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
- package/dist/esm/common/datePicker/datePicker.module.mjs +1 -1
- package/dist/esm/common/divider/divider.mjs +1 -1
- package/dist/esm/common/divider/divider.mjs.map +1 -1
- package/dist/esm/common/divider/divider.module.mjs +1 -1
- package/dist/esm/common/divider/divider.types.mjs +1 -1
- package/dist/esm/common/divider/divider.types.mjs.map +1 -1
- package/dist/esm/common/drawer/drawer.mjs +1 -1
- package/dist/esm/common/drawer/drawer.mjs.map +1 -1
- package/dist/esm/common/drawer/drawer.module.mjs +1 -1
- package/dist/esm/common/dropZone/dropZone.mjs +1 -1
- package/dist/esm/common/dropZone/dropZone.mjs.map +1 -1
- package/dist/esm/common/dropZone/dropZone.module.mjs +1 -1
- package/dist/esm/common/dropZone/dropZone.types.mjs +1 -1
- package/dist/esm/common/dropZone/dropZone.types.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs.map +1 -1
- package/dist/esm/common/emptyState/emptyState.module.mjs +1 -1
- package/dist/esm/common/errorBoundary/errorBoundary.mjs +1 -1
- package/dist/esm/common/errorBoundary/errorBoundary.mjs.map +1 -1
- package/dist/esm/common/errorBoundary/errorBoundary.module.mjs +1 -1
- package/dist/esm/common/fab/components/fabBase/fabBase.mjs +1 -1
- package/dist/esm/common/fab/components/fabBase/fabBase.mjs.map +1 -1
- package/dist/esm/common/fab/components/fabBase/fabBase.module.mjs +1 -1
- package/dist/esm/common/fab/fab.mjs +1 -1
- package/dist/esm/common/fab/fab.mjs.map +1 -1
- package/dist/esm/common/fab/fab.module.mjs +1 -1
- package/dist/esm/common/fab/fab.module.mjs.map +1 -1
- package/dist/esm/common/flip/flip.mjs +1 -1
- package/dist/esm/common/flip/flip.mjs.map +1 -1
- package/dist/esm/common/flip/flip.module.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.faces.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.faces.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.geometry.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.geometry.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.graph.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.graph.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.hit.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.hit.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.json.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.json.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.mesh.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.mesh.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.path.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.path.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.plan.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.plan.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.rooms.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.rooms.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.snap.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.snap.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.triangulate.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.triangulate.mjs.map +1 -1
- package/dist/esm/common/floorPlan/floorPlan.types.mjs +1 -1
- package/dist/esm/common/floorPlan/floorPlan.types.mjs.map +1 -1
- package/dist/esm/common/floorPlan/legacySvg.mjs +1 -1
- package/dist/esm/common/floorPlan/legacySvg.mjs.map +1 -1
- package/dist/esm/common/hooks/useAnchorTracking.mjs +1 -1
- package/dist/esm/common/hooks/useAnchorTracking.mjs.map +1 -1
- package/dist/esm/common/hooks/useCoarsePointer.mjs +1 -1
- package/dist/esm/common/hooks/useCoarsePointer.mjs.map +1 -1
- package/dist/esm/common/hooks/useFocusBoundary.mjs +1 -1
- package/dist/esm/common/hooks/useFocusBoundary.mjs.map +1 -1
- package/dist/esm/common/hooks/useMediaQuery.mjs +1 -1
- package/dist/esm/common/hooks/useMediaQuery.mjs.map +1 -1
- package/dist/esm/common/hooks/useOverlay.mjs +1 -1
- package/dist/esm/common/hooks/useOverlay.mjs.map +1 -1
- package/dist/esm/common/hooks/useSheet.mjs +1 -1
- package/dist/esm/common/hooks/useSheet.mjs.map +1 -1
- package/dist/esm/common/hooks/useSwipeDismiss.mjs +1 -1
- package/dist/esm/common/hooks/useSwipeDismiss.mjs.map +1 -1
- package/dist/esm/common/hooks/useVisualViewportSize.mjs +1 -1
- package/dist/esm/common/hooks/useVisualViewportSize.mjs.map +1 -1
- package/dist/esm/common/iconPicker/iconPicker.mjs +1 -1
- package/dist/esm/common/iconPicker/iconPicker.mjs.map +1 -1
- package/dist/esm/common/iconPicker/iconPicker.module.mjs +1 -1
- package/dist/esm/common/idleManager/idleManager.mjs +1 -1
- package/dist/esm/common/idleManager/idleManager.mjs.map +1 -1
- package/dist/esm/common/infiniteBlock/infiniteBlock.mjs +1 -1
- package/dist/esm/common/infiniteBlock/infiniteBlock.mjs.map +1 -1
- package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs +1 -1
- package/dist/esm/common/input/input.mjs +1 -1
- package/dist/esm/common/input/input.mjs.map +1 -1
- package/dist/esm/common/input/input.module.mjs +1 -1
- package/dist/esm/common/input/input.module.mjs.map +1 -1
- package/dist/esm/common/input/input.types.mjs +1 -1
- package/dist/esm/common/input/input.types.mjs.map +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.mjs +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.mjs.map +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.module.mjs +1 -1
- package/dist/esm/common/interactableDiv/index.mjs +1 -1
- package/dist/esm/common/interactableDiv/index.mjs.map +1 -1
- package/dist/esm/common/interactableDiv/interactableDiv.mjs +1 -1
- package/dist/esm/common/interactableDiv/interactableDiv.mjs.map +1 -1
- package/dist/esm/common/interactableDiv/interactableDiv.module.mjs +1 -1
- package/dist/esm/common/kanbanBoard/KanbanBoard.mjs +1 -1
- package/dist/esm/common/kanbanBoard/KanbanBoard.mjs.map +1 -1
- package/dist/esm/common/kanbanBoard/KanbanColumn.mjs +1 -1
- package/dist/esm/common/kanbanBoard/KanbanColumn.mjs.map +1 -1
- package/dist/esm/common/kanbanBoard/KanbanItem.mjs +1 -1
- package/dist/esm/common/kanbanBoard/KanbanItem.mjs.map +1 -1
- package/dist/esm/common/kanbanBoard/kanbanBoard.module.mjs +1 -1
- package/dist/esm/common/kanbanBoard/kanbanBoard.utils.mjs +1 -1
- package/dist/esm/common/kanbanBoard/kanbanBoard.utils.mjs.map +1 -1
- package/dist/esm/common/klipyPicker/components/gifPreview/gifPreview.mjs +1 -1
- package/dist/esm/common/klipyPicker/components/gifPreview/gifPreview.mjs.map +1 -1
- package/dist/esm/common/klipyPicker/components/gifPreview/gifPreview.module.mjs +1 -1
- package/dist/esm/common/klipyPicker/components/gifView/gifView.mjs +1 -1
- package/dist/esm/common/klipyPicker/components/gifView/gifView.mjs.map +1 -1
- package/dist/esm/common/klipyPicker/components/gifView/gifView.module.mjs +1 -1
- package/dist/esm/common/klipyPicker/klipyPicker.mjs +1 -1
- package/dist/esm/common/klipyPicker/klipyPicker.mjs.map +1 -1
- package/dist/esm/common/klipyPicker/klipyPicker.module.mjs +1 -1
- package/dist/esm/common/loading/iconLoading/iconLoading.mjs +1 -1
- package/dist/esm/common/loading/iconLoading/iconLoading.mjs.map +1 -1
- package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs +1 -1
- package/dist/esm/common/loading/iconLoading/index.mjs +1 -1
- package/dist/esm/common/loading/iconLoading/index.mjs.map +1 -1
- package/dist/esm/common/loading/spinnerLoading/index.mjs +1 -1
- package/dist/esm/common/loading/spinnerLoading/index.mjs.map +1 -1
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs +1 -1
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs.map +1 -1
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs +1 -1
- package/dist/esm/common/menu/menu.mjs +1 -1
- package/dist/esm/common/menu/menu.mjs.map +1 -1
- package/dist/esm/common/menu/menu.module.mjs +1 -1
- package/dist/esm/common/menu/menu.types.mjs +1 -1
- package/dist/esm/common/menu/menu.types.mjs.map +1 -1
- package/dist/esm/common/modal/modal.mjs +1 -1
- package/dist/esm/common/modal/modal.mjs.map +1 -1
- package/dist/esm/common/modal/modal.module.mjs +1 -1
- package/dist/esm/common/modal/modal.module.mjs.map +1 -1
- package/dist/esm/common/multiSelect/multiSelect.mjs +1 -1
- package/dist/esm/common/multiSelect/multiSelect.mjs.map +1 -1
- package/dist/esm/common/multiSelect/multiSelect.module.mjs +1 -1
- package/dist/esm/common/multiSelect/multiSelect.module.mjs.map +1 -1
- package/dist/esm/common/numberInput/index.mjs +1 -1
- package/dist/esm/common/numberInput/index.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.module.mjs +1 -1
- package/dist/esm/common/numberInput/useStepRepeat.mjs +1 -1
- package/dist/esm/common/numberInput/useStepRepeat.mjs.map +1 -1
- package/dist/esm/common/optionPicker/optionPicker.mjs +1 -1
- package/dist/esm/common/optionPicker/optionPicker.mjs.map +1 -1
- package/dist/esm/common/optionPicker/optionPicker.module.mjs +1 -1
- package/dist/esm/common/otpInput/otpInput.mjs +1 -1
- package/dist/esm/common/otpInput/otpInput.mjs.map +1 -1
- package/dist/esm/common/otpInput/otpInput.module.mjs +1 -1
- package/dist/esm/common/otpInput/otpInput.types.mjs +1 -1
- package/dist/esm/common/otpInput/otpInput.types.mjs.map +1 -1
- package/dist/esm/common/overscroll/overscroll.mjs +1 -1
- package/dist/esm/common/overscroll/overscroll.mjs.map +1 -1
- package/dist/esm/common/overscroll/overscroll.module.mjs +1 -1
- package/dist/esm/common/pagination/pagination.mjs +1 -1
- package/dist/esm/common/pagination/pagination.mjs.map +1 -1
- package/dist/esm/common/pagination/pagination.module.mjs +1 -1
- package/dist/esm/common/planCanvas/planCanvas.mjs +1 -1
- package/dist/esm/common/planCanvas/planCanvas.mjs.map +1 -1
- package/dist/esm/common/planCanvas/planCanvas.module.mjs +1 -1
- package/dist/esm/common/popover/popover.mjs +1 -1
- package/dist/esm/common/popover/popover.mjs.map +1 -1
- package/dist/esm/common/popover/popover.module.mjs +1 -1
- package/dist/esm/common/popover/popover.types.mjs +1 -1
- package/dist/esm/common/popover/popover.types.mjs.map +1 -1
- package/dist/esm/common/popover/usePopoverPosition.mjs +1 -1
- package/dist/esm/common/popover/usePopoverPosition.mjs.map +1 -1
- package/dist/esm/common/progressBar/progressBar.mjs +1 -1
- package/dist/esm/common/progressBar/progressBar.mjs.map +1 -1
- package/dist/esm/common/progressBar/progressBar.module.mjs +1 -1
- package/dist/esm/common/progressBar/progressBar.module.mjs.map +1 -1
- package/dist/esm/common/radioGroup/radioGroup.mjs +1 -1
- package/dist/esm/common/radioGroup/radioGroup.mjs.map +1 -1
- package/dist/esm/common/radioGroup/radioGroup.module.mjs +1 -1
- package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -1
- package/dist/esm/common/radioGroup/radioGroup.types.mjs +1 -1
- package/dist/esm/common/radioGroup/radioGroup.types.mjs.map +1 -1
- package/dist/esm/common/rating/rating.mjs +1 -1
- package/dist/esm/common/rating/rating.mjs.map +1 -1
- package/dist/esm/common/rating/rating.module.mjs +1 -1
- package/dist/esm/common/revealLens/revealLens.mjs +1 -1
- package/dist/esm/common/revealLens/revealLens.mjs.map +1 -1
- package/dist/esm/common/revealLens/revealLens.module.mjs +1 -1
- package/dist/esm/common/ripple/ripple.mjs +1 -1
- package/dist/esm/common/ripple/ripple.mjs.map +1 -1
- package/dist/esm/common/ripple/ripple.module.mjs +1 -1
- package/dist/esm/common/ripple/ripple.module.mjs.map +1 -1
- package/dist/esm/common/roomDrawer/roomDrawer.mjs +1 -1
- package/dist/esm/common/roomDrawer/roomDrawer.mjs.map +1 -1
- package/dist/esm/common/roomDrawer/roomDrawer.module.mjs +1 -1
- package/dist/esm/common/roomDrawer/usePlanHistory.mjs +1 -1
- package/dist/esm/common/roomDrawer/usePlanHistory.mjs.map +1 -1
- package/dist/esm/common/roomViewer/roomViewer.mjs +1 -1
- package/dist/esm/common/roomViewer/roomViewer.mjs.map +1 -1
- package/dist/esm/common/roomViewer/roomViewer.module.mjs +1 -1
- package/dist/esm/common/scrollbarProvider/index.mjs +1 -1
- package/dist/esm/common/scrollbarProvider/index.mjs.map +1 -1
- package/dist/esm/common/scrollbarProvider/scrollbarProvider.mjs +1 -1
- package/dist/esm/common/scrollbarProvider/scrollbarProvider.mjs.map +1 -1
- package/dist/esm/common/scrollbarProvider/scrollbarProvider.module.mjs +1 -1
- package/dist/esm/common/searchInput/searchInput.mjs +1 -1
- package/dist/esm/common/searchInput/searchInput.mjs.map +1 -1
- package/dist/esm/common/searchInput/searchInput.module.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.module.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.types.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.types.mjs.map +1 -1
- package/dist/esm/common/sheetBackdrop/sheetBackdrop.mjs +1 -1
- package/dist/esm/common/sheetBackdrop/sheetBackdrop.mjs.map +1 -1
- package/dist/esm/common/skeleton/skeleton.mjs +1 -1
- package/dist/esm/common/skeleton/skeleton.mjs.map +1 -1
- package/dist/esm/common/skeleton/skeleton.module.mjs +1 -1
- package/dist/esm/common/skeleton/skeleton.types.mjs +1 -1
- package/dist/esm/common/skeleton/skeleton.types.mjs.map +1 -1
- package/dist/esm/common/slider/slider.mjs +1 -1
- package/dist/esm/common/slider/slider.mjs.map +1 -1
- package/dist/esm/common/slider/slider.module.mjs +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs.map +1 -1
- package/dist/esm/common/splitButton/splitButton.module.mjs +1 -1
- package/dist/esm/common/stepper/stepper.mjs +1 -1
- package/dist/esm/common/stepper/stepper.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.module.mjs +1 -1
- package/dist/esm/common/stepper/stepper.types.mjs +1 -1
- package/dist/esm/common/stepper/stepper.types.mjs.map +1 -1
- package/dist/esm/common/sticky/sticky.mjs +1 -1
- package/dist/esm/common/sticky/sticky.mjs.map +1 -1
- package/dist/esm/common/sticky/sticky.module.mjs +1 -1
- package/dist/esm/common/sticky/stickyStack.mjs +1 -1
- package/dist/esm/common/sticky/stickyStack.mjs.map +1 -1
- package/dist/esm/common/styles/sheet.module.mjs +1 -1
- package/dist/esm/common/styles/sheet.module.mjs.map +1 -1
- package/dist/esm/common/switch/switch.mjs +1 -1
- package/dist/esm/common/switch/switch.mjs.map +1 -1
- package/dist/esm/common/switch/switch.module.mjs +1 -1
- package/dist/esm/common/switch/switch.module.mjs.map +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs.map +1 -1
- package/dist/esm/common/tabHeader/tabHeader.module.mjs +1 -1
- package/dist/esm/common/textarea/textarea.mjs +1 -1
- package/dist/esm/common/textarea/textarea.mjs.map +1 -1
- package/dist/esm/common/themeProvider/defaultTheme.mjs +1 -1
- package/dist/esm/common/themeProvider/defaultTheme.mjs.map +1 -1
- package/dist/esm/common/themeProvider/lightTheme.mjs +2 -0
- package/dist/esm/common/themeProvider/lightTheme.mjs.map +1 -0
- package/dist/esm/common/themeProvider/theme.module.mjs +1 -1
- package/dist/esm/common/themeProvider/themeProvider.mjs +1 -1
- package/dist/esm/common/themeProvider/themeProvider.mjs.map +1 -1
- package/dist/esm/common/themeProvider/themeVariablesContext.mjs +1 -1
- package/dist/esm/common/themeProvider/themeVariablesContext.mjs.map +1 -1
- package/dist/esm/common/themeProvider/useTheme.mjs +1 -1
- package/dist/esm/common/themeProvider/useTheme.mjs.map +1 -1
- package/dist/esm/common/tilt/tilt.mjs +1 -1
- package/dist/esm/common/tilt/tilt.mjs.map +1 -1
- package/dist/esm/common/tilt/tilt.module.mjs +1 -1
- package/dist/esm/common/tilt/tiltMath.mjs +1 -1
- package/dist/esm/common/tilt/tiltMath.mjs.map +1 -1
- package/dist/esm/common/tiltGroup/tiltGroup.mjs +1 -1
- package/dist/esm/common/tiltGroup/tiltGroup.mjs.map +1 -1
- package/dist/esm/common/timeInput/components/clockDial/clockDial.mjs +1 -1
- package/dist/esm/common/timeInput/components/clockDial/clockDial.mjs.map +1 -1
- package/dist/esm/common/timeInput/components/clockDial/clockDial.module.mjs +1 -1
- package/dist/esm/common/timeInput/timeFunctions.mjs +1 -1
- package/dist/esm/common/timeInput/timeFunctions.mjs.map +1 -1
- package/dist/esm/common/timeInput/timeInput.mjs +1 -1
- package/dist/esm/common/timeInput/timeInput.mjs.map +1 -1
- package/dist/esm/common/timeInput/timeInput.module.mjs +1 -1
- package/dist/esm/common/timeline/timeline.mjs +1 -1
- package/dist/esm/common/timeline/timeline.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.module.mjs +1 -1
- package/dist/esm/common/timeline/timeline.types.mjs +1 -1
- package/dist/esm/common/timeline/timeline.types.mjs.map +1 -1
- package/dist/esm/common/timer/timer.chime.mjs +1 -1
- package/dist/esm/common/timer/timer.chime.mjs.map +1 -1
- package/dist/esm/common/timer/timer.mjs +1 -1
- package/dist/esm/common/timer/timer.mjs.map +1 -1
- package/dist/esm/common/timer/timer.module.mjs +1 -1
- package/dist/esm/common/toast/toast.mjs +1 -1
- package/dist/esm/common/toast/toast.mjs.map +1 -1
- package/dist/esm/common/toast/toast.module.mjs +1 -1
- package/dist/esm/common/toast/toast.module.mjs.map +1 -1
- package/dist/esm/common/toast/toastProvider.mjs +1 -1
- package/dist/esm/common/toast/toastProvider.mjs.map +1 -1
- package/dist/esm/common/toast/toastService.mjs +1 -1
- package/dist/esm/common/toast/toastService.mjs.map +1 -1
- package/dist/esm/common/tooltip/tooltip.mjs +1 -1
- package/dist/esm/common/tooltip/tooltip.mjs.map +1 -1
- package/dist/esm/common/tooltip/tooltip.module.mjs +1 -1
- package/dist/esm/common/tree/flattenTree.mjs +1 -1
- package/dist/esm/common/tree/flattenTree.mjs.map +1 -1
- package/dist/esm/common/tree/tree.mjs +1 -1
- package/dist/esm/common/tree/tree.mjs.map +1 -1
- package/dist/esm/common/tree/tree.module.mjs +1 -1
- package/dist/esm/common/tree/tree.module.mjs.map +1 -1
- package/dist/esm/common/utils/activationKey.mjs +1 -1
- package/dist/esm/common/utils/activationKey.mjs.map +1 -1
- package/dist/esm/common/utils/mergeRefs.mjs +2 -0
- package/dist/esm/common/utils/mergeRefs.mjs.map +1 -0
- package/dist/esm/common/utils/renderIcon.mjs +1 -1
- package/dist/esm/common/utils/renderIcon.mjs.map +1 -1
- package/dist/esm/common/utils/scrollAncestors.mjs +1 -1
- package/dist/esm/common/utils/scrollAncestors.mjs.map +1 -1
- package/dist/esm/common/utils/visualViewport.mjs +1 -1
- package/dist/esm/common/utils/visualViewport.mjs.map +1 -1
- package/dist/esm/common/virtualList/useColumnResize.mjs +1 -1
- package/dist/esm/common/virtualList/useColumnResize.mjs.map +1 -1
- package/dist/esm/common/virtualList/useColumns.mjs +1 -1
- package/dist/esm/common/virtualList/useColumns.mjs.map +1 -1
- package/dist/esm/common/virtualList/useHeaderNavigation.mjs +1 -1
- package/dist/esm/common/virtualList/useHeaderNavigation.mjs.map +1 -1
- package/dist/esm/common/virtualList/useRowDrag.mjs +1 -1
- package/dist/esm/common/virtualList/useRowDrag.mjs.map +1 -1
- package/dist/esm/common/virtualList/useRowNavigation.mjs +1 -1
- package/dist/esm/common/virtualList/useRowNavigation.mjs.map +1 -1
- package/dist/esm/common/virtualList/useSelection.mjs +1 -1
- package/dist/esm/common/virtualList/useSelection.mjs.map +1 -1
- package/dist/esm/common/virtualList/useSorting.mjs +1 -1
- package/dist/esm/common/virtualList/useSorting.mjs.map +1 -1
- package/dist/esm/common/virtualList/useVirtualWindow.mjs +1 -1
- package/dist/esm/common/virtualList/useVirtualWindow.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualList.module.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.utils.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.utils.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualListHeader.mjs +1 -1
- package/dist/esm/common/virtualList/virtualListHeader.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualRow.mjs +1 -1
- package/dist/esm/common/virtualList/virtualRow.mjs.map +1 -1
- package/dist/esm/common/wizard/wizard.mjs +1 -1
- package/dist/esm/common/wizard/wizard.mjs.map +1 -1
- package/dist/esm/common/wizard/wizard.module.mjs +1 -1
- package/dist/esm/hooks/useWindowSize.mjs +1 -1
- package/dist/esm/hooks/useWindowSize.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/services/formValidation/FormValidatorGroupWithForm.mjs +1 -1
- package/dist/esm/services/formValidation/FormValidatorGroupWithForm.mjs.map +1 -1
- package/dist/esm/services/formValidation/index.mjs +1 -1
- package/dist/esm/services/formValidation/useFormValidatorGroup.mjs +1 -1
- package/dist/esm/services/formValidation/useFormValidatorGroup.mjs.map +1 -1
- package/dist/esm/services/formValidation/validatableComponent.mjs +1 -1
- package/dist/esm/services/formValidation/validatableComponent.mjs.map +1 -1
- package/dist/esm/services/klipy.mjs +1 -1
- package/dist/esm/services/klipy.mjs.map +1 -1
- package/dist/esm/services/localization.mjs +1 -1
- package/dist/esm/services/localization.mjs.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/mcp.js +21096 -5
- package/dist/style.css +1 -1
- package/dist/types/common/actionIcon/actionIcon.types.d.ts +3 -1
- package/dist/types/common/card/card.types.d.ts +3 -1
- package/dist/types/common/checkbox/checkbox.types.d.ts +3 -1
- package/dist/types/common/colorPicker/colorPicker.types.d.ts +4 -0
- package/dist/types/common/configProvider/configProvider.types.d.ts +4 -0
- package/dist/types/common/flip/flip.d.ts +2 -2
- package/dist/types/common/flip/flip.types.d.ts +3 -1
- package/dist/types/common/input/input.types.d.ts +5 -0
- package/dist/types/common/interactableDiv/interactableDiv.d.ts +3 -2
- package/dist/types/common/loading/spinnerLoading/spinnerLoading.d.ts +0 -5
- package/dist/types/common/numberInput/numberInput.types.d.ts +2 -0
- package/dist/types/common/otpInput/otpInput.types.d.ts +2 -0
- package/dist/types/common/planCanvas/planCanvas.d.ts +1 -1
- package/dist/types/common/planCanvas/planCanvas.types.d.ts +3 -1
- package/dist/types/common/ripple/ripple.d.ts +1 -1
- package/dist/types/common/ripple/ripple.types.d.ts +1 -0
- package/dist/types/common/roomDrawer/roomDrawer.d.ts +2 -2
- package/dist/types/common/roomDrawer/roomDrawer.types.d.ts +3 -1
- package/dist/types/common/roomViewer/roomViewer.d.ts +2 -2
- package/dist/types/common/roomViewer/roomViewer.types.d.ts +3 -1
- package/dist/types/common/searchInput/searchInput.d.ts +1 -1
- package/dist/types/common/searchInput/searchInput.types.d.ts +3 -0
- package/dist/types/common/switch/switch.types.d.ts +3 -1
- package/dist/types/common/themeProvider/index.d.ts +1 -0
- package/dist/types/common/themeProvider/lightTheme.d.ts +13 -0
- package/dist/types/common/tilt/tilt.d.ts +2 -2
- package/dist/types/common/tilt/tilt.types.d.ts +3 -1
- package/dist/types/common/timer/timer.d.ts +2 -2
- package/dist/types/common/timer/timer.types.d.ts +3 -1
- package/dist/types/common/tooltip/tooltip.d.ts +1 -1
- package/dist/types/common/tooltip/tooltip.types.d.ts +7 -0
- package/dist/types/common/types/baseProps.types.d.ts +6 -0
- package/dist/types/common/utils/mergeRefs.d.ts +12 -0
- package/dist/types/common/virtualList/virtualList.d.ts +2 -4
- package/dist/types/common/virtualList/virtualList.types.d.ts +3 -1
- package/docs/Accordion.md +9 -0
- package/docs/ActionIcon.md +1 -0
- package/docs/CLAUDE.md +37 -0
- package/docs/Card.md +1 -0
- package/docs/Checkbox.md +1 -0
- package/docs/ColorPicker.md +12 -2
- package/docs/Input.md +1 -0
- package/docs/KlipyPicker.md +1 -1
- package/docs/NumberInput.md +1 -0
- package/docs/OtpInput.md +1 -0
- package/docs/SearchInput.md +1 -0
- package/docs/Switch.md +1 -0
- package/docs/Textarea.md +1 -0
- package/docs/ThemeProvider.md +30 -1
- package/docs/Tooltip.md +23 -1
- package/package.json +8 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"planCanvas.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.tsx"],"sourcesContent":["import { forwardRef, useMemo, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport {\n OpeningKind,\n buildWallPaths,\n openingGeometry,\n type DerivedRoom,\n type PlanOpening,\n type PlanPoint,\n type PlanSelection,\n} from '../floorPlan';\nimport type { PlanCanvasProps } from './planCanvas.types';\nimport styles from './planCanvas.module.pcss';\n\n/**\n * The read-only renderer shared by RoomDrawer and RoomViewer.\n *\n * It owns the projection, the layer stack, and the accessible room shapes. It owns no\n * editing state: the drawer supplies its handles and previews through `overlay`. Having\n * one renderer is the point, so that a plan cannot look different in the editor than it\n * does in the viewer.\n *\n * The viewport is a TRANSFORM on a group, not an SVG `viewBox`. That is what lets the\n * screen-space layer draw labels and handles at a fixed pixel size while the drawing\n * itself scales.\n */\n\nconst DEFAULT_OUTLINE_PX = 1;\n\n/** Stable identity, so a default-valued `selection` prop does not re-run memos. */\nconst EMPTY_SELECTION: readonly PlanSelection[] = [];\n\nfunction formatAreaDefault(areaMm2: number): string {\n const m2 = areaMm2 / 1_000_000;\n return `${m2.toFixed(m2 < 10 ? 1 : 0)} m²`;\n}\n\nfunction ringToPath(ring: PlanPoint[]): string {\n if (ring.length === 0) return '';\n return `${ring.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')} Z`;\n}\n\n/** Outer ring plus holes as one path; `fill-rule: evenodd` punches the holes out. */\nfunction faceToPath(face: DerivedRoom): string {\n return [ringToPath(face.outer), ...face.holes.map(ringToPath)].filter(Boolean).join(' ');\n}\n\n/**\n * The ref lands on the `<svg>` itself, which is what a consumer wants for measuring or\n * screenshotting. Both the drawer and the viewer expose it as `getSvgElement()`.\n */\nconst PlanCanvas = forwardRef<SVGSVGElement, PlanCanvasProps>(function PlanCanvas(props, ref) {\n const {\n floor,\n underlay,\n rooms,\n view,\n selection = EMPTY_SELECTION,\n hovered = null,\n interactiveRooms = false,\n interactiveOpenings = false,\n showGrid = false,\n gridSize = 100,\n showRoomLabels = true,\n showOpeningSymbols = true,\n getRoomColor,\n renderRoomLabel,\n getRoomLabel,\n formatArea = formatAreaDefault,\n onRoomActivate,\n onOpeningActivate,\n onBackgroundActivate,\n onHoverChange,\n overlay,\n worldOverlay,\n size,\n className,\n style,\n classNames,\n styles: slotStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const pxToWorld = view.zoom > 0 ? 1 / view.zoom : 1;\n const outlineWidth = DEFAULT_OUTLINE_PX * pxToWorld;\n\n const wallPaths = useMemo(() => buildWallPaths(floor), [floor]);\n\n /**\n * Centrelines only, at one stroke width. The underlay is there to line walls up\n * against, so it wants to read as a tracing rather than compete with the floor being\n * drawn; the two-pass thick-wall treatment would give it equal weight.\n */\n const underlayLines = useMemo(() => {\n if (!underlay) return [];\n return Object.values(underlay.walls).flatMap((wall) => {\n const a = underlay.nodes[wall.a];\n const b = underlay.nodes[wall.b];\n return a && b ? [{ id: wall.id, x1: a.x, y1: a.y, x2: b.x, y2: b.y }] : [];\n });\n }, [underlay]);\n\n /** World point to screen point, for the untransformed layer. */\n const toScreen = (p: PlanPoint) => ({\n x: (p.x - view.x) * view.zoom,\n y: (p.y - view.y) * view.zoom,\n });\n\n // Grid lines are generated for the visible rect only. Deliberately not an SVG\n // <pattern>: a pattern needs an id, and two canvases on one page then collide.\n const gridLines = useMemo(() => {\n if (!showGrid || gridSize <= 0) return null;\n const worldW = size.width * pxToWorld;\n const worldH = size.height * pxToWorld;\n // Keep the line count sane when zoomed far out.\n const step = gridSize * Math.max(1, Math.pow(10, Math.ceil(Math.log10(worldW / gridSize / 60))));\n const startX = Math.floor(view.x / step) * step;\n const startY = Math.floor(view.y / step) * step;\n const verticals: number[] = [];\n const horizontals: number[] = [];\n for (let x = startX; x <= view.x + worldW; x += step) verticals.push(x);\n for (let y = startY; y <= view.y + worldH; y += step) horizontals.push(y);\n return { verticals, horizontals, step, worldW, worldH };\n }, [showGrid, gridSize, size.width, size.height, pxToWorld, view.x, view.y]);\n\n const isSelected = (type: string, id: string) => selection.some((entry) => entry.type === type && entry.id === id);\n const isHovered = (type: string, id: string) => hovered?.type === type && hovered.id === id;\n\n /**\n * The walls bounding the selected rooms. A SELECTED room is marked by colouring its\n * boundary rather than by flooding its floor, which would bury its doors and its label;\n * hover keeps the faint floor tint instead, since the two say different things.\n */\n const highlightedWalls = useMemo(() => {\n const selectedRooms = new Set(selection.filter((entry) => entry.type === 'room').map((entry) => entry.id));\n const ids = new Set<string>();\n for (const room of rooms) {\n if (room.roomId && selectedRooms.has(room.roomId)) {\n // A wall shared by two selected rooms belongs to both; the set draws it once.\n for (const id of room.wallIds) ids.add(id);\n }\n }\n return ids;\n }, [rooms, selection]);\n\n const roomEdge = useMemo(\n () => (highlightedWalls.size > 0 ? buildWallPaths(floor, { wallIds: highlightedWalls }) : { groups: [], caps: [] }),\n [floor, highlightedWalls],\n );\n\n function renderOpening(opening: PlanOpening) {\n const geo = openingGeometry(floor, opening);\n if (!geo) return null;\n const wall = floor.walls[opening.wallId];\n const half = wall ? wall.thickness / 2 : 50;\n const { p1, p2, normal, dir, centre } = geo;\n\n const selected = isSelected('opening', opening.id);\n const hoveredNow = isHovered('opening', opening.id);\n const width = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n\n const parts: ReactElement[] = [];\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Door) {\n // Leaf plus swing arc, drawn on the wall's left side.\n const hingeAtStart = opening.swing !== 'endLeft' && opening.swing !== 'endRight';\n const hinge = hingeAtStart ? p1 : p2;\n const sweepDir = hingeAtStart ? 1 : -1;\n const leafEnd = { x: hinge.x + normal.x * width, y: hinge.y + normal.y * width };\n const arcEnd = {\n x: hinge.x + dir.x * width * sweepDir,\n y: hinge.y + dir.y * width * sweepDir,\n };\n parts.push(\n <path\n key='leaf'\n className={styles.planCanvasDoorLeaf}\n d={`M ${hinge.x},${hinge.y} L ${leafEnd.x},${leafEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n <path\n key='swing'\n className={styles.planCanvasDoorSwing}\n d={`M ${leafEnd.x},${leafEnd.y} A ${width},${width} 0 0,${hingeAtStart ? 0 : 1} ${arcEnd.x},${arcEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n );\n }\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Window) {\n // A pane line down the middle of the wall's thickness.\n parts.push(\n <path\n key='pane'\n className={styles.planCanvasWindowPane}\n d={`M ${p1.x},${p1.y} L ${p2.x},${p2.y}`}\n strokeWidth={outlineWidth * 2}\n />,\n );\n }\n\n const hitPath = `M ${p1.x + normal.x * half},${p1.y + normal.y * half} L ${\n p2.x + normal.x * half\n },${p2.y + normal.y * half} L ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${\n p1.x - normal.x * half\n },${p1.y - normal.y * half} Z`;\n\n return (\n <g\n key={opening.id}\n className={cx(\n selected && styles.planCanvasOpeningSelected,\n hoveredNow && styles.planCanvasOpeningHovered,\n classNames?.opening,\n )}\n style={slotStyles?.opening}\n data-opening-kind={opening.kind}\n >\n {parts}\n <path\n className={cx(styles.planCanvasOpeningHit, interactiveOpenings && styles.planCanvasOpeningHitInteractive)}\n d={hitPath}\n onClick={\n interactiveOpenings && onOpeningActivate\n ? (e) => {\n e.stopPropagation();\n onOpeningActivate(opening.id);\n }\n : undefined\n }\n onPointerEnter={onHoverChange ? () => onHoverChange({ type: 'opening', id: opening.id }) : undefined}\n >\n {interactiveOpenings && <title>{opening.kind}</title>}\n </path>\n {(selected || hoveredNow) && (\n <path className={styles.planCanvasOpeningOutline} d={hitPath} vectorEffect='non-scaling-stroke' />\n )}\n {/* The jamb faces, so an opening reads as a hole with sides rather than a blank. */}\n <path\n className={cx(\n styles.planCanvasJamb,\n // The jamb face belongs to the wall it is cut into, so it follows that wall\n // into the highlight rather than staying white against it.\n highlightedWalls.has(opening.wallId) && styles.planCanvasJambHighlighted,\n )}\n d={`M ${p1.x - normal.x * half},${p1.y - normal.y * half} L ${p1.x + normal.x * half},${\n p1.y + normal.y * half\n } M ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${p2.x + normal.x * half},${\n p2.y + normal.y * half\n }`}\n strokeWidth={outlineWidth}\n />\n {centre && null}\n </g>\n );\n }\n\n return (\n <svg\n ref={ref}\n className={cx(styles.planCanvas, className, classNames?.canvas)}\n style={{ ...style, ...slotStyles?.canvas }}\n viewBox={`0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`}\n width={size.width}\n height={size.height}\n role='img'\n aria-label={ariaLabel}\n onClick={onBackgroundActivate ? () => onBackgroundActivate() : undefined}\n onPointerLeave={onHoverChange ? () => onHoverChange(null) : undefined}\n >\n <g transform={`translate(${-view.x * view.zoom} ${-view.y * view.zoom}) scale(${view.zoom})`}>\n {/* 1. Grid */}\n {gridLines && (\n <g className={cx(styles.planCanvasGrid, classNames?.grid)} style={slotStyles?.grid} aria-hidden='true'>\n {gridLines.verticals.map((x) => (\n <line key={`v${x}`} x1={x} y1={view.y} x2={x} y2={view.y + gridLines.worldH} strokeWidth={pxToWorld} />\n ))}\n {gridLines.horizontals.map((y) => (\n <line key={`h${y}`} x1={view.x} y1={y} x2={view.x + gridLines.worldW} y2={y} strokeWidth={pxToWorld} />\n ))}\n </g>\n )}\n\n {/* 1b. The storey below, traced */}\n {underlayLines.length > 0 && (\n <g\n className={cx(styles.planCanvasUnderlay, classNames?.underlay)}\n style={slotStyles?.underlay}\n aria-hidden='true'\n >\n {/* Screen units: the rule sets vector-effect: non-scaling-stroke, so the width\n is read in screen pixels rather than world millimetres. */}\n {underlayLines.map((line) => (\n <line key={line.id} x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} strokeWidth={1.5} />\n ))}\n </g>\n )}\n\n {/* 2. Room fills — the only hit target for room selection */}\n <g className={cx(styles.planCanvasRooms, classNames?.rooms)} style={slotStyles?.rooms}>\n {rooms.map((room) => {\n const selected = room.roomId ? isSelected('room', room.roomId) : false;\n const hoveredNow = room.roomId ? isHovered('room', room.roomId) : false;\n const colour = room.meta ? getRoomColor?.(room.meta, room.area) : undefined;\n const label =\n getRoomLabel?.(room.meta, { area: room.area }) ??\n `${room.meta?.name ?? 'Unnamed room'}, ${formatArea(room.area)}`;\n\n return (\n <path\n key={room.id}\n className={cx(\n styles.planCanvasRoomFill,\n hoveredNow && styles.planCanvasRoomFillHovered,\n interactiveRooms && styles.planCanvasRoomFillInteractive,\n classNames?.roomFill,\n )}\n data-state={selected ? 'selected' : hoveredNow ? 'hovered' : undefined}\n style={{ ...slotStyles?.roomFill, ...(colour ? { fill: colour } : null) }}\n d={faceToPath(room)}\n fillRule='evenodd'\n tabIndex={interactiveRooms ? 0 : undefined}\n role={interactiveRooms ? 'button' : undefined}\n aria-pressed={interactiveRooms ? selected : undefined}\n onClick={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n e.stopPropagation();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onKeyDown={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onPointerEnter={\n onHoverChange && room.roomId ? () => onHoverChange({ type: 'room', id: room.roomId! }) : undefined\n }\n >\n {/* Both a <title> and the aria-label: aria-label on SVG shapes is\n unreliable in older Safari/VoiceOver, and <title> doubles as the\n native tooltip. */}\n {interactiveRooms && <title>{label}</title>}\n </path>\n );\n })}\n </g>\n\n {/* 3. Wall bodies — outline pass, then fill pass. Never interleaved: the visible\n outline is what is left of the first pass after the second covers its middle. */}\n <g className={cx(styles.planCanvasWalls, classNames?.walls)} style={slotStyles?.walls} aria-hidden='true'>\n <g className={styles.planCanvasWallOutline}>\n {wallPaths.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={classNames?.wallBody}\n style={slotStyles?.wallBody}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n </g>\n <g className={styles.planCanvasWallFill}>\n {wallPaths.groups.map((group) => {\n const fillWidth = group.thickness - 2 * outlineWidth;\n // Zoomed far out the fill would invert; walls collapsing to solid lines is\n // the right look at that scale.\n if (fillWidth <= 0) return null;\n return <path key={`f${group.thickness}`} d={group.d} strokeWidth={fillWidth} />;\n })}\n </g>\n <g className={styles.planCanvasRoomEdgeSelected}>\n {/* The same two passes the walls themselves use, on the same path data: an\n outline at full thickness, then a fill inside it. Recolouring only the body\n left the wall edged in its normal colour, so it did not read as one object. */}\n {roomEdge.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={styles.planCanvasRoomEdgeOutline}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n {roomEdge.groups.map((group) => {\n const fillWidth = group.thickness - 2 * outlineWidth;\n if (fillWidth <= 0) return null;\n return (\n <path\n key={`f${group.thickness}`}\n className={styles.planCanvasRoomEdgeFill}\n d={group.d}\n strokeWidth={fillWidth}\n />\n );\n })}\n </g>\n\n <g className={styles.planCanvasWallCaps}>\n {/* A highlighted wall's caps are drawn below in the highlight colour. Skipped\n here rather than painted over: an antialiased hairline is never fully\n covered, and the two would blend into a pale seam. */}\n {wallPaths.caps\n .filter((cap) => !highlightedWalls.has(cap.wallId))\n .map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n <g className={styles.planCanvasRoomEdgeCaps}>\n {roomEdge.caps.map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n </g>\n\n {/* 4. Openings */}\n <g className={cx(styles.planCanvasOpenings, classNames?.openings)} style={slotStyles?.openings}>\n {Object.values(floor.openings).map(renderOpening)}\n </g>\n\n {/* 5. Selection / hover outlines for walls and nodes */}\n <g className={styles.planCanvasSelection} aria-hidden='true'>\n {selection\n .filter((entry) => entry.type === 'wall')\n .map((entry) => {\n const wall = floor.walls[entry.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) return null;\n return (\n <line\n key={entry.id}\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallSelected}\n />\n );\n })}\n {hovered?.type === 'wall' &&\n !isSelected('wall', hovered.id) &&\n (() => {\n const wall = floor.walls[hovered.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) return null;\n return (\n <line\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallHovered}\n />\n );\n })()}\n </g>\n\n {worldOverlay}\n </g>\n\n {/* Screen space: sized in pixels, so labels and handles stay constant under zoom */}\n <g className={cx(styles.planCanvasScreen, classNames?.overlay)} style={slotStyles?.overlay}>\n {showRoomLabels &&\n rooms.map((room) => {\n const at = toScreen(room.anchor);\n if (at.x < -200 || at.y < -200 || at.x > size.width + 200 || at.y > size.height + 200) {\n return null;\n }\n const custom = renderRoomLabel?.(room.meta, { area: room.area, faceId: room.id });\n if (custom === null) return null;\n\n return (\n <g\n key={room.id}\n className={cx(styles.planCanvasRoomLabel, classNames?.roomLabel)}\n style={slotStyles?.roomLabel}\n transform={`translate(${at.x} ${at.y})`}\n aria-hidden='true'\n >\n {custom !== undefined ? (\n custom\n ) : (\n <>\n <text className={styles.planCanvasRoomName} textAnchor='middle'>\n {room.meta?.name ?? ''}\n </text>\n <text className={styles.planCanvasRoomArea} textAnchor='middle' dy='1.2em'>\n {formatArea(room.area)}\n </text>\n </>\n )}\n </g>\n );\n })}\n {overlay}\n </g>\n </svg>\n );\n});\n\nexport default PlanCanvas;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"planCanvas.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.tsx"],"sourcesContent":["import { useMemo, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport {\n OpeningKind,\n buildWallPaths,\n openingGeometry,\n type DerivedRoom,\n type PlanOpening,\n type PlanPoint,\n type PlanSelection,\n} from '../floorPlan';\nimport type { PlanCanvasProps } from './planCanvas.types';\nimport styles from './planCanvas.module.pcss';\n\n/**\n * The read-only renderer shared by RoomDrawer and RoomViewer.\n *\n * It owns the projection, the layer stack, and the accessible room shapes. It owns no\n * editing state: the drawer supplies its handles and previews through `overlay`. Having\n * one renderer is the point, so that a plan cannot look different in the editor than it\n * does in the viewer.\n *\n * The viewport is a TRANSFORM on a group, not an SVG `viewBox`. That is what lets the\n * screen-space layer draw labels and handles at a fixed pixel size while the drawing\n * itself scales.\n */\n\nconst DEFAULT_OUTLINE_PX = 1;\n\n/** Stable identity, so a default-valued `selection` prop does not re-run memos. */\nconst EMPTY_SELECTION: readonly PlanSelection[] = [];\n\nfunction formatAreaDefault(areaMm2: number): string {\n const m2 = areaMm2 / 1_000_000;\n return `${m2.toFixed(m2 < 10 ? 1 : 0)} m²`;\n}\n\nfunction ringToPath(ring: PlanPoint[]): string {\n if (ring.length === 0) return '';\n return `${ring.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')} Z`;\n}\n\n/** Outer ring plus holes as one path; `fill-rule: evenodd` punches the holes out. */\nfunction faceToPath(face: DerivedRoom): string {\n return [ringToPath(face.outer), ...face.holes.map(ringToPath)].filter(Boolean).join(' ');\n}\n\n/**\n * The ref lands on the `<svg>` itself, which is what a consumer wants for measuring or\n * screenshotting. Both the drawer and the viewer expose it as `getSvgElement()`.\n */\nfunction PlanCanvas(props: PlanCanvasProps) {\n const {\n ref,\n floor,\n underlay,\n rooms,\n view,\n selection = EMPTY_SELECTION,\n hovered = null,\n interactiveRooms = false,\n interactiveOpenings = false,\n showGrid = false,\n gridSize = 100,\n showRoomLabels = true,\n showOpeningSymbols = true,\n getRoomColor,\n renderRoomLabel,\n getRoomLabel,\n formatArea = formatAreaDefault,\n onRoomActivate,\n onOpeningActivate,\n onBackgroundActivate,\n onHoverChange,\n overlay,\n worldOverlay,\n size,\n className,\n style,\n classNames,\n styles: slotStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const pxToWorld = view.zoom > 0 ? 1 / view.zoom : 1;\n const outlineWidth = DEFAULT_OUTLINE_PX * pxToWorld;\n\n const wallPaths = useMemo(() => buildWallPaths(floor), [floor]);\n\n /**\n * Centrelines only, at one stroke width. The underlay is there to line walls up\n * against, so it wants to read as a tracing rather than compete with the floor being\n * drawn; the two-pass thick-wall treatment would give it equal weight.\n */\n const underlayLines = useMemo(() => {\n if (!underlay) return [];\n return Object.values(underlay.walls).flatMap((wall) => {\n const a = underlay.nodes[wall.a];\n const b = underlay.nodes[wall.b];\n return a && b ? [{ id: wall.id, x1: a.x, y1: a.y, x2: b.x, y2: b.y }] : [];\n });\n }, [underlay]);\n\n /** World point to screen point, for the untransformed layer. */\n const toScreen = (p: PlanPoint) => ({\n x: (p.x - view.x) * view.zoom,\n y: (p.y - view.y) * view.zoom,\n });\n\n // Grid lines are generated for the visible rect only. Deliberately not an SVG\n // <pattern>: a pattern needs an id, and two canvases on one page then collide.\n const gridLines = useMemo(() => {\n if (!showGrid || gridSize <= 0) return null;\n const worldW = size.width * pxToWorld;\n const worldH = size.height * pxToWorld;\n // Keep the line count sane when zoomed far out.\n const step = gridSize * Math.max(1, Math.pow(10, Math.ceil(Math.log10(worldW / gridSize / 60))));\n const startX = Math.floor(view.x / step) * step;\n const startY = Math.floor(view.y / step) * step;\n const verticals: number[] = [];\n const horizontals: number[] = [];\n for (let x = startX; x <= view.x + worldW; x += step) verticals.push(x);\n for (let y = startY; y <= view.y + worldH; y += step) horizontals.push(y);\n return { verticals, horizontals, step, worldW, worldH };\n }, [showGrid, gridSize, size.width, size.height, pxToWorld, view.x, view.y]);\n\n const isSelected = (type: string, id: string) => selection.some((entry) => entry.type === type && entry.id === id);\n const isHovered = (type: string, id: string) => hovered?.type === type && hovered.id === id;\n\n /**\n * The walls bounding the selected rooms. A SELECTED room is marked by colouring its\n * boundary rather than by flooding its floor, which would bury its doors and its label;\n * hover keeps the faint floor tint instead, since the two say different things.\n */\n const highlightedWalls = useMemo(() => {\n const selectedRooms = new Set(selection.filter((entry) => entry.type === 'room').map((entry) => entry.id));\n const ids = new Set<string>();\n for (const room of rooms) {\n if (room.roomId && selectedRooms.has(room.roomId)) {\n // A wall shared by two selected rooms belongs to both; the set draws it once.\n for (const id of room.wallIds) ids.add(id);\n }\n }\n return ids;\n }, [rooms, selection]);\n\n const roomEdge = useMemo(\n () => (highlightedWalls.size > 0 ? buildWallPaths(floor, { wallIds: highlightedWalls }) : { groups: [], caps: [] }),\n [floor, highlightedWalls],\n );\n\n function renderOpening(opening: PlanOpening) {\n const geo = openingGeometry(floor, opening);\n if (!geo) return null;\n const wall = floor.walls[opening.wallId];\n const half = wall ? wall.thickness / 2 : 50;\n const { p1, p2, normal, dir, centre } = geo;\n\n const selected = isSelected('opening', opening.id);\n const hoveredNow = isHovered('opening', opening.id);\n const width = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n\n const parts: ReactElement[] = [];\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Door) {\n // Leaf plus swing arc, drawn on the wall's left side.\n const hingeAtStart = opening.swing !== 'endLeft' && opening.swing !== 'endRight';\n const hinge = hingeAtStart ? p1 : p2;\n const sweepDir = hingeAtStart ? 1 : -1;\n const leafEnd = { x: hinge.x + normal.x * width, y: hinge.y + normal.y * width };\n const arcEnd = {\n x: hinge.x + dir.x * width * sweepDir,\n y: hinge.y + dir.y * width * sweepDir,\n };\n parts.push(\n <path\n key='leaf'\n className={styles.planCanvasDoorLeaf}\n d={`M ${hinge.x},${hinge.y} L ${leafEnd.x},${leafEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n <path\n key='swing'\n className={styles.planCanvasDoorSwing}\n d={`M ${leafEnd.x},${leafEnd.y} A ${width},${width} 0 0,${hingeAtStart ? 0 : 1} ${arcEnd.x},${arcEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n );\n }\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Window) {\n // A pane line down the middle of the wall's thickness.\n parts.push(\n <path\n key='pane'\n className={styles.planCanvasWindowPane}\n d={`M ${p1.x},${p1.y} L ${p2.x},${p2.y}`}\n strokeWidth={outlineWidth * 2}\n />,\n );\n }\n\n const hitPath = `M ${p1.x + normal.x * half},${p1.y + normal.y * half} L ${\n p2.x + normal.x * half\n },${p2.y + normal.y * half} L ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${\n p1.x - normal.x * half\n },${p1.y - normal.y * half} Z`;\n\n return (\n <g\n key={opening.id}\n className={cx(\n selected && styles.planCanvasOpeningSelected,\n hoveredNow && styles.planCanvasOpeningHovered,\n classNames?.opening,\n )}\n style={slotStyles?.opening}\n data-opening-kind={opening.kind}\n >\n {parts}\n <path\n className={cx(styles.planCanvasOpeningHit, interactiveOpenings && styles.planCanvasOpeningHitInteractive)}\n d={hitPath}\n onClick={\n interactiveOpenings && onOpeningActivate\n ? (e) => {\n e.stopPropagation();\n onOpeningActivate(opening.id);\n }\n : undefined\n }\n onPointerEnter={onHoverChange ? () => onHoverChange({ type: 'opening', id: opening.id }) : undefined}\n >\n {interactiveOpenings && <title>{opening.kind}</title>}\n </path>\n {(selected || hoveredNow) && (\n <path className={styles.planCanvasOpeningOutline} d={hitPath} vectorEffect='non-scaling-stroke' />\n )}\n {/* The jamb faces, so an opening reads as a hole with sides rather than a blank. */}\n <path\n className={cx(\n styles.planCanvasJamb,\n // The jamb face belongs to the wall it is cut into, so it follows that wall\n // into the highlight rather than staying white against it.\n highlightedWalls.has(opening.wallId) && styles.planCanvasJambHighlighted,\n )}\n d={`M ${p1.x - normal.x * half},${p1.y - normal.y * half} L ${p1.x + normal.x * half},${\n p1.y + normal.y * half\n } M ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${p2.x + normal.x * half},${\n p2.y + normal.y * half\n }`}\n strokeWidth={outlineWidth}\n />\n {centre && null}\n </g>\n );\n }\n\n return (\n <svg\n ref={ref}\n className={cx(styles.planCanvas, className, classNames?.canvas)}\n style={{ ...style, ...slotStyles?.canvas }}\n viewBox={`0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`}\n width={size.width}\n height={size.height}\n role='img'\n aria-label={ariaLabel}\n onClick={onBackgroundActivate ? () => onBackgroundActivate() : undefined}\n onPointerLeave={onHoverChange ? () => onHoverChange(null) : undefined}\n >\n <g transform={`translate(${-view.x * view.zoom} ${-view.y * view.zoom}) scale(${view.zoom})`}>\n {/* 1. Grid */}\n {gridLines && (\n <g className={cx(styles.planCanvasGrid, classNames?.grid)} style={slotStyles?.grid} aria-hidden='true'>\n {gridLines.verticals.map((x) => (\n <line key={`v${x}`} x1={x} y1={view.y} x2={x} y2={view.y + gridLines.worldH} strokeWidth={pxToWorld} />\n ))}\n {gridLines.horizontals.map((y) => (\n <line key={`h${y}`} x1={view.x} y1={y} x2={view.x + gridLines.worldW} y2={y} strokeWidth={pxToWorld} />\n ))}\n </g>\n )}\n\n {/* 1b. The storey below, traced */}\n {underlayLines.length > 0 && (\n <g\n className={cx(styles.planCanvasUnderlay, classNames?.underlay)}\n style={slotStyles?.underlay}\n aria-hidden='true'\n >\n {/* Screen units: the rule sets vector-effect: non-scaling-stroke, so the width\n is read in screen pixels rather than world millimetres. */}\n {underlayLines.map((line) => (\n <line key={line.id} x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} strokeWidth={1.5} />\n ))}\n </g>\n )}\n\n {/* 2. Room fills — the only hit target for room selection */}\n <g className={cx(styles.planCanvasRooms, classNames?.rooms)} style={slotStyles?.rooms}>\n {rooms.map((room) => {\n const selected = room.roomId ? isSelected('room', room.roomId) : false;\n const hoveredNow = room.roomId ? isHovered('room', room.roomId) : false;\n const colour = room.meta ? getRoomColor?.(room.meta, room.area) : undefined;\n const label =\n getRoomLabel?.(room.meta, { area: room.area }) ??\n `${room.meta?.name ?? 'Unnamed room'}, ${formatArea(room.area)}`;\n\n return (\n <path\n key={room.id}\n className={cx(\n styles.planCanvasRoomFill,\n hoveredNow && styles.planCanvasRoomFillHovered,\n interactiveRooms && styles.planCanvasRoomFillInteractive,\n classNames?.roomFill,\n )}\n data-state={selected ? 'selected' : hoveredNow ? 'hovered' : undefined}\n style={{ ...slotStyles?.roomFill, ...(colour ? { fill: colour } : null) }}\n d={faceToPath(room)}\n fillRule='evenodd'\n tabIndex={interactiveRooms ? 0 : undefined}\n role={interactiveRooms ? 'button' : undefined}\n aria-pressed={interactiveRooms ? selected : undefined}\n onClick={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n e.stopPropagation();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onKeyDown={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onPointerEnter={\n onHoverChange && room.roomId ? () => onHoverChange({ type: 'room', id: room.roomId! }) : undefined\n }\n >\n {/* Both a <title> and the aria-label: aria-label on SVG shapes is\n unreliable in older Safari/VoiceOver, and <title> doubles as the\n native tooltip. */}\n {interactiveRooms && <title>{label}</title>}\n </path>\n );\n })}\n </g>\n\n {/* 3. Wall bodies — outline pass, then fill pass. Never interleaved: the visible\n outline is what is left of the first pass after the second covers its middle. */}\n <g className={cx(styles.planCanvasWalls, classNames?.walls)} style={slotStyles?.walls} aria-hidden='true'>\n <g className={styles.planCanvasWallOutline}>\n {wallPaths.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={classNames?.wallBody}\n style={slotStyles?.wallBody}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n </g>\n <g className={styles.planCanvasWallFill}>\n {wallPaths.groups.map((group) => {\n const fillWidth = group.thickness - 2 * outlineWidth;\n // Zoomed far out the fill would invert; walls collapsing to solid lines is\n // the right look at that scale.\n if (fillWidth <= 0) return null;\n return <path key={`f${group.thickness}`} d={group.d} strokeWidth={fillWidth} />;\n })}\n </g>\n <g className={styles.planCanvasRoomEdgeSelected}>\n {/* The same two passes the walls themselves use, on the same path data: an\n outline at full thickness, then a fill inside it. Recolouring only the body\n left the wall edged in its normal colour, so it did not read as one object. */}\n {roomEdge.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={styles.planCanvasRoomEdgeOutline}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n {roomEdge.groups.map((group) => {\n const fillWidth = group.thickness - 2 * outlineWidth;\n if (fillWidth <= 0) return null;\n return (\n <path\n key={`f${group.thickness}`}\n className={styles.planCanvasRoomEdgeFill}\n d={group.d}\n strokeWidth={fillWidth}\n />\n );\n })}\n </g>\n\n <g className={styles.planCanvasWallCaps}>\n {/* A highlighted wall's caps are drawn below in the highlight colour. Skipped\n here rather than painted over: an antialiased hairline is never fully\n covered, and the two would blend into a pale seam. */}\n {wallPaths.caps\n .filter((cap) => !highlightedWalls.has(cap.wallId))\n .map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n <g className={styles.planCanvasRoomEdgeCaps}>\n {roomEdge.caps.map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n </g>\n\n {/* 4. Openings */}\n <g className={cx(styles.planCanvasOpenings, classNames?.openings)} style={slotStyles?.openings}>\n {Object.values(floor.openings).map(renderOpening)}\n </g>\n\n {/* 5. Selection / hover outlines for walls and nodes */}\n <g className={styles.planCanvasSelection} aria-hidden='true'>\n {selection\n .filter((entry) => entry.type === 'wall')\n .map((entry) => {\n const wall = floor.walls[entry.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) return null;\n return (\n <line\n key={entry.id}\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallSelected}\n />\n );\n })}\n {hovered?.type === 'wall' &&\n !isSelected('wall', hovered.id) &&\n (() => {\n const wall = floor.walls[hovered.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) return null;\n return (\n <line\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallHovered}\n />\n );\n })()}\n </g>\n\n {worldOverlay}\n </g>\n\n {/* Screen space: sized in pixels, so labels and handles stay constant under zoom */}\n <g className={cx(styles.planCanvasScreen, classNames?.overlay)} style={slotStyles?.overlay}>\n {showRoomLabels &&\n rooms.map((room) => {\n const at = toScreen(room.anchor);\n if (at.x < -200 || at.y < -200 || at.x > size.width + 200 || at.y > size.height + 200) {\n return null;\n }\n const custom = renderRoomLabel?.(room.meta, { area: room.area, faceId: room.id });\n if (custom === null) return null;\n\n return (\n <g\n key={room.id}\n className={cx(styles.planCanvasRoomLabel, classNames?.roomLabel)}\n style={slotStyles?.roomLabel}\n transform={`translate(${at.x} ${at.y})`}\n aria-hidden='true'\n >\n {custom !== undefined ? (\n custom\n ) : (\n <>\n <text className={styles.planCanvasRoomName} textAnchor='middle'>\n {room.meta?.name ?? ''}\n </text>\n <text className={styles.planCanvasRoomArea} textAnchor='middle' dy='1.2em'>\n {formatArea(room.area)}\n </text>\n </>\n )}\n </g>\n );\n })}\n {overlay}\n </g>\n </svg>\n );\n}\n\nexport default PlanCanvas;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`planCanvas_7XTdG`,t=`planCanvas-screen_lk83X`,n=`planCanvas-underlay_rpzSl`,r=`planCanvas-grid_49CmH`,i=`planCanvas-rooms_UyjEC`,a=`planCanvas-roomFill_LXlOf`,o=`planCanvas-roomFill-interactive_JSU1E`,s=`planCanvas-roomFill-hovered_7ZXgf`,c=`planCanvas-roomLabel_GrzE3`,l=`planCanvas-roomName_kHAtD`,u=`planCanvas-roomArea_X1Tal`,d=`planCanvas-walls_G9vXB`,f=`planCanvas-wallOutline_eWEN-`,p=`planCanvas-wallFill_iKHyE`,m=`planCanvas-roomEdgeSelected_wQk6B`,h=`planCanvas-wallCaps_ZpLG4`,g=`planCanvas-roomEdgeCaps_5Y7lq`,_=`planCanvas-roomEdgeOutline_Y1ZwL`,v=`planCanvas-roomEdgeFill_Qr9p-`,y=`planCanvas-wallSelected_vFNw8`,b=`planCanvas-wallHovered_CFIAR`,x=`planCanvas-openings_1fyX4`,S=`planCanvas-opening-selected_Wgl4r`,C=`planCanvas-doorLeaf_1BEkI`,w=`planCanvas-doorSwing_QCc5i`,T=`planCanvas-windowPane_5q9oQ`,E=`planCanvas-opening-hovered_NGK0O`,D=`planCanvas-opening-hit_frRch`,O=`planCanvas-opening-hit-interactive_D4ZUY`,k=`planCanvas-opening-outline_HS2wY`,A=`planCanvas-jamb_e-I9r`,j=`planCanvas-jamb-highlighted_rWYxZ`,M=`planCanvas-selection_0a31R`,N={planCanvas:e,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:t,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:n,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:r,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:i,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:a,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:o,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:s,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:c,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:l,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:u,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:d,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:f,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:p,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:m,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:h,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:g,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:_,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:v,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:y,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:b,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:x,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:S,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:C,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:w,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:T,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:E,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:D,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:O,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:k,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:A,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:j,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:M};export{N as default,e as planCanvas,C as planCanvasDoorLeaf,w as planCanvasDoorSwing,r as planCanvasGrid,A as planCanvasJamb,j as planCanvasJambHighlighted,D as planCanvasOpeningHit,O as planCanvasOpeningHitInteractive,E as planCanvasOpeningHovered,k as planCanvasOpeningOutline,S as planCanvasOpeningSelected,x as planCanvasOpenings,u as planCanvasRoomArea,g as planCanvasRoomEdgeCaps,v as planCanvasRoomEdgeFill,_ as planCanvasRoomEdgeOutline,m as planCanvasRoomEdgeSelected,a as planCanvasRoomFill,s as planCanvasRoomFillHovered,o as planCanvasRoomFillInteractive,c as planCanvasRoomLabel,l as planCanvasRoomName,i as planCanvasRooms,t as planCanvasScreen,M as planCanvasSelection,n as planCanvasUnderlay,h as planCanvasWallCaps,p as planCanvasWallFill,b as planCanvasWallHovered,f as planCanvasWallOutline,y as planCanvasWallSelected,d as planCanvasWalls,T as planCanvasWindowPane};
|
|
1
|
+
"use client";var e=`planCanvas_7XTdG`,t=`planCanvas-screen_lk83X`,n=`planCanvas-underlay_rpzSl`,r=`planCanvas-grid_49CmH`,i=`planCanvas-rooms_UyjEC`,a=`planCanvas-roomFill_LXlOf`,o=`planCanvas-roomFill-interactive_JSU1E`,s=`planCanvas-roomFill-hovered_7ZXgf`,c=`planCanvas-roomLabel_GrzE3`,l=`planCanvas-roomName_kHAtD`,u=`planCanvas-roomArea_X1Tal`,d=`planCanvas-walls_G9vXB`,f=`planCanvas-wallOutline_eWEN-`,p=`planCanvas-wallFill_iKHyE`,m=`planCanvas-roomEdgeSelected_wQk6B`,h=`planCanvas-wallCaps_ZpLG4`,g=`planCanvas-roomEdgeCaps_5Y7lq`,_=`planCanvas-roomEdgeOutline_Y1ZwL`,v=`planCanvas-roomEdgeFill_Qr9p-`,y=`planCanvas-wallSelected_vFNw8`,b=`planCanvas-wallHovered_CFIAR`,x=`planCanvas-openings_1fyX4`,S=`planCanvas-opening-selected_Wgl4r`,C=`planCanvas-doorLeaf_1BEkI`,w=`planCanvas-doorSwing_QCc5i`,T=`planCanvas-windowPane_5q9oQ`,E=`planCanvas-opening-hovered_NGK0O`,D=`planCanvas-opening-hit_frRch`,O=`planCanvas-opening-hit-interactive_D4ZUY`,k=`planCanvas-opening-outline_HS2wY`,A=`planCanvas-jamb_e-I9r`,j=`planCanvas-jamb-highlighted_rWYxZ`,M=`planCanvas-selection_0a31R`,N={planCanvas:e,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:t,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:n,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:r,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:i,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:a,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:o,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:s,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:c,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:l,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:u,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:d,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:f,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:p,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:m,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:h,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:g,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:_,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:v,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:y,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:b,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:x,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:S,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:C,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:w,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:T,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:E,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:D,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:O,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:k,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:A,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:j,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:M};export{N as default,e as planCanvas,C as planCanvasDoorLeaf,w as planCanvasDoorSwing,r as planCanvasGrid,A as planCanvasJamb,j as planCanvasJambHighlighted,D as planCanvasOpeningHit,O as planCanvasOpeningHitInteractive,E as planCanvasOpeningHovered,k as planCanvasOpeningOutline,S as planCanvasOpeningSelected,x as planCanvasOpenings,u as planCanvasRoomArea,g as planCanvasRoomEdgeCaps,v as planCanvasRoomEdgeFill,_ as planCanvasRoomEdgeOutline,m as planCanvasRoomEdgeSelected,a as planCanvasRoomFill,s as planCanvasRoomFillHovered,o as planCanvasRoomFillInteractive,c as planCanvasRoomLabel,l as planCanvasRoomName,i as planCanvasRooms,t as planCanvasScreen,M as planCanvasSelection,n as planCanvasUnderlay,h as planCanvasWallCaps,p as planCanvasWallFill,b as planCanvasWallHovered,f as planCanvasWallOutline,y as planCanvasWallSelected,d as planCanvasWalls,T as planCanvasWindowPane};
|
|
2
2
|
//# sourceMappingURL=planCanvas.module.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../bodyEnd/bodyEnd.mjs";import i from"./popover.module.mjs";import a from"../styles/sheet.module.mjs";import o from"../sheetBackdrop/sheetBackdrop.mjs";import{PopoverAlign as ee,PopoverPlacement as s,PopoverTrigger as c}from"./popover.types.mjs";import{usePopoverPosition as te}from"./usePopoverPosition.mjs";import{tabbablesIn as l,useFocusBoundary as ne}from"../hooks/useFocusBoundary.mjs";import u from"../hooks/useSheet.mjs";import{useOverlay as d}from"../hooks/useOverlay.mjs";import{useCallback as f,useEffect as p,useRef as m,useState as re}from"react";import h from"classnames";import{jsx as g,jsxs as _}from"react/jsx-runtime";function v(v){let{children:y=null,content:b=null,placement:x=s.Bottom,align:S=ee.Center,trigger:C=c.Click,isOpen:w,defaultOpen:T=!1,onOpenChange:E=()=>{},offset:ie=10,withArrow:D=!0,closeOnOutsideClick:O=!0,closeOnEscape:ae=!0,openDelay:oe=100,closeDelay:se=120,disabled:k=!1,focusOnOpen:A=`keyboard`,closeOnTriggerClick:ce=!0,width:j=`auto`,constrainWidth:M=!0,presentation:N,className:P,style:F,classNames:I,styles:L,...R}=e(`Popover`,v),z=m(null),B=m(null),V=m(null),H=m(null),U=m(void 0),W=m(!1),G=m(!1);function K(){W.current=!0}let q=w!==void 0,[le,ue]=re(T),J=q?w:le,Y=m(E);p(()=>{Y.current=E});let X=f((e,t=!1)=>{k&&e||(e&&(G.current=t),q||ue(e),Y.current(e,{fromKeyboard:t}))},[k,q]),de=t(),fe=N??de??n.Default,{isSheet:pe,sheetStyle:me}=u(fe),Z=pe&&C===c.Click;te({isOpen:!!J&&!Z,placement:x,align:S,offset:ie,triggerRef:z,floatingRef:B,panelRef:V,arrowRef:D?H:{current:null},matchTriggerWidth:j===`trigger`}),d({isActive:!!J,containerRef:V,onEscape:ae?()=>{B.current?.contains(document.activeElement)&&(l(z.current)[0]??z.current)?.focus(),X(!1,!0)}:void 0,trapFocus:!1,lockScroll:Z});let{restoreFocusToTrigger:Q,focusAfterTrigger:he}=ne({triggerRef:z,contentRef:B});p(()=>{if(!J){G.current=!1;return}if(!(A===!0||A===`keyboard`&&G.current)||C!==c.Click)return;let e=l(V.current);e.length!==0&&(B.current?.setAttribute(`role`,`dialog`),e[0].focus())},[J,C,A]);function ge(e){if(e.key!==`Tab`||C!==c.Click)return;let t=l(V.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),he(),X(!1,!0)):e.shiftKey&&n===t[0]&&(e.preventDefault(),Q(),X(!1,!0))}p(()=>{if(!J)return;function e(e){let t=W.current;W.current=!1;let n=e.target,r=B.current?.contains(n),i=z.current?.contains(n);!t&&!r&&!i&&X(!1)}function t(e){let t=W.current;W.current=!1;let n=e.target,r=B.current?.contains(n),i=z.current?.contains(n);!t&&!r&&!i&&X(!1,!0)}return O&&C!==c.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,t)),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,t)}},[J,O,C,X]),p(()=>()=>clearTimeout(U.current),[]);function $(e){clearTimeout(U.current),U.current=setTimeout(()=>X(e),e?oe:se)}function _e(e){J||e.key!==`ArrowDown`&&e.key!==`ArrowUp`||(e.preventDefault(),X(!0,!0))}let ve=C===c.Click?{onClick:e=>{(!J||ce)&&X(!J,e.detail===0)},onKeyDown:_e}:C===c.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{onFocus:()=>X(!0),onBlur:()=>X(!1)},ye=C===c.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{};return _(`div`,{...R,className:h(i.popover,P,I?.root),style:{...F,...L?.root},children:[g(`div`,{ref:z,className:h(i.popoverTrigger,I?.trigger),style:L?.trigger,...ve,children:y}),J&&_(r,{children:[Z&&g(o,{onClose:()=>{O&&X(!1)},className:I?.backdrop,style:L?.backdrop}),_(`div`,{ref:B,className:h(Z?a.sheet:i.popoverFloating,I?.floating),style:{...Z?me:void 0,...L?.floating},"data-placement":x,onKeyDown:ge,onMouseUpCapture:K,onFocusCapture:K,...ye,children:[g(`div`,{ref:V,className:h(i.popoverPanel,M&&i.popoverPanelConstrained,Z&&a.sheetPanel,I?.panel),style:L?.panel,children:b}),D&&!Z&&g(`div`,{ref:H,className:h(i.popoverArrow,I?.arrow),style:L?.arrow})]})]})]})}export{v as default};
|
|
1
|
+
"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../bodyEnd/bodyEnd.mjs";import i from"./popover.module.mjs";import a from"../styles/sheet.module.mjs";import o from"../sheetBackdrop/sheetBackdrop.mjs";import{PopoverAlign as ee,PopoverPlacement as s,PopoverTrigger as c}from"./popover.types.mjs";import{usePopoverPosition as te}from"./usePopoverPosition.mjs";import{tabbablesIn as l,useFocusBoundary as ne}from"../hooks/useFocusBoundary.mjs";import u from"../hooks/useSheet.mjs";import{useOverlay as d}from"../hooks/useOverlay.mjs";import{useCallback as f,useEffect as p,useRef as m,useState as re}from"react";import h from"classnames";import{jsx as g,jsxs as _}from"react/jsx-runtime";function v(v){let{children:y=null,content:b=null,placement:x=s.Bottom,align:S=ee.Center,trigger:C=c.Click,isOpen:w,defaultOpen:T=!1,onOpenChange:E=()=>{},offset:ie=10,withArrow:D=!0,closeOnOutsideClick:O=!0,closeOnEscape:ae=!0,openDelay:oe=100,closeDelay:se=120,disabled:k=!1,focusOnOpen:A=`keyboard`,closeOnTriggerClick:ce=!0,width:j=`auto`,constrainWidth:M=!0,presentation:N,className:P,style:F,classNames:I,styles:L,...R}=e(`Popover`,v),z=m(null),B=m(null),V=m(null),H=m(null),U=m(void 0),W=m(!1),G=m(!1);function K(){W.current=!0}let q=w!==void 0,[le,ue]=re(T),J=q?w:le,Y=m(E);p(()=>{Y.current=E});let X=f((e,t=!1)=>{k&&e||(e&&(G.current=t),q||ue(e),Y.current(e,{fromKeyboard:t}))},[k,q]),de=t(),fe=N??de??n.Default,{isSheet:pe,sheetStyle:me}=u(fe),Z=pe&&C===c.Click;te({isOpen:!!J&&!Z,placement:x,align:S,offset:ie,triggerRef:z,floatingRef:B,panelRef:V,arrowRef:D?H:{current:null},matchTriggerWidth:j===`trigger`}),d({isActive:!!J,containerRef:V,onEscape:ae?()=>{B.current?.contains(document.activeElement)&&(l(z.current)[0]??z.current)?.focus(),X(!1,!0)}:void 0,trapFocus:!1,lockScroll:Z});let{restoreFocusToTrigger:Q,focusAfterTrigger:he}=ne({triggerRef:z,contentRef:B});p(()=>{if(!J){G.current=!1;return}if(!(A===!0||A===`keyboard`&&G.current)||C!==c.Click)return;let e=l(V.current);e.length!==0&&(B.current?.setAttribute(`role`,`dialog`),e[0].focus())},[J,C,A]);function ge(e){if(e.key!==`Tab`||C!==c.Click)return;let t=l(V.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),he(),X(!1,!0)):e.shiftKey&&n===t[0]&&(e.preventDefault(),Q(),X(!1,!0))}p(()=>{if(!J)return;function e(e){let t=W.current;W.current=!1;let n=e.target,r=B.current?.contains(n),i=z.current?.contains(n);!t&&!r&&!i&&X(!1)}function t(e){let t=W.current;W.current=!1;let n=e.target,r=B.current?.contains(n),i=z.current?.contains(n);!t&&!r&&!i&&X(!1,!0)}return O&&C!==c.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,t)),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,t)}},[J,O,C,X]),p(()=>()=>clearTimeout(U.current),[]);function $(e){clearTimeout(U.current),U.current=setTimeout(()=>X(e),e?oe:se)}function _e(e){J||e.key!==`ArrowDown`&&e.key!==`ArrowUp`||(e.preventDefault(),X(!0,!0))}let ve=C===c.Click?{onClick:e=>{(!J||ce)&&X(!J,e.detail===0)},onKeyDown:_e}:C===c.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{onFocus:()=>X(!0),onBlur:()=>X(!1)},ye=C===c.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{};return _(`div`,{...R,className:h(i.popover,P,I?.root),style:{...F,...L?.root},children:[g(`div`,{ref:z,className:h(i.popoverTrigger,I?.trigger),style:L?.trigger,...ve,children:y}),J&&_(r,{children:[Z&&g(o,{onClose:()=>{O&&X(!1)},className:I?.backdrop,style:L?.backdrop}),_(`div`,{ref:B,className:h(Z?a.sheet:i.popoverFloating,I?.floating),style:{...Z?me:void 0,...L?.floating},"data-placement":x,onKeyDown:ge,onMouseUpCapture:K,onFocusCapture:K,...ye,children:[g(`div`,{ref:V,className:h(i.popoverPanel,M&&i.popoverPanelConstrained,Z&&a.sheetPanel,I?.panel),style:L?.panel,children:b}),D&&!Z&&g(`div`,{ref:H,className:h(i.popoverArrow,I?.arrow),style:L?.arrow})]})]})]})}export{v as default};
|
|
2
2
|
//# sourceMappingURL=popover.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { useFocusBoundary, tabbablesIn } from '../hooks/useFocusBoundary';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { Presentation } from '../configProvider/presentation.types';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nfunction Popover(props: PopoverProps) {\n const {\n children = null,\n content = null,\n placement = PopoverPlacement.Bottom,\n align = PopoverAlign.Center,\n trigger = PopoverTrigger.Click,\n isOpen,\n defaultOpen = false,\n onOpenChange = () => {},\n offset = 10,\n withArrow = true,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n openDelay = 100,\n closeDelay = 120,\n disabled = false,\n focusOnOpen = 'keyboard',\n closeOnTriggerClick = true,\n width = 'auto',\n constrainWidth = true,\n presentation: presentationProp,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Popover', props);\n const triggerRef = useRef<HTMLDivElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n // Set from a capture handler on the panel, which React fires for its whole\n // React subtree — including children that portal elsewhere in the DOM, such as\n // a Dropdown's list inside a DatePicker's calendar. A DOM `contains` check\n // cannot see those, and without this the panel closes when one is used.\n const panelInteractedRef = useRef(false);\n // Whether the open that is running came from the keyboard, which is what the\n // default `focusOnOpen` follows and what `onOpenChange` reports. A click raised\n // by Enter or Space reports `detail === 0`, where a pointer press counts the\n // clicks; an open with no trigger event at all, such as a panel that appears\n // while the user types, leaves this false.\n const openedByKeyboardRef = useRef(false);\n function markPanelInteraction() {\n panelInteractedRef.current = true;\n }\n\n const isControlled = isOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = isControlled ? isOpen : internalOpen;\n\n // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n const onOpenChangeRef = useRef(onOpenChange);\n useEffect(() => {\n onOpenChangeRef.current = onOpenChange;\n });\n\n const setOpen = useCallback(\n (next: boolean, fromKeyboard = false) => {\n if (disabled && next) return;\n if (next) openedByKeyboardRef.current = fromKeyboard;\n if (!isControlled) setInternalOpen(next);\n onOpenChangeRef.current(next, { fromKeyboard });\n },\n [disabled, isControlled],\n );\n\n // Explicit prop → this component's global default → the app-wide one → anchored.\n const appPresentation = usePresentationDefault();\n const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n const { isSheet: sheetPresentation, sheetStyle } = useSheet(presentation);\n // Hover and focus are pointer affordances that open something small next to what caused them;\n // a sheet is a deliberate, screen-owning open. Only a click asks for one.\n const isSheet = sheetPresentation && trigger === PopoverTrigger.Click;\n\n // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n usePopoverPosition({\n isOpen: !!open && !isSheet,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef: withArrow ? arrowRef : { current: null },\n matchTriggerWidth: width === 'trigger',\n });\n\n // Registered for as long as it's open, not just as a sheet: this is what puts the popover on\n // the overlay stack, so an enclosing Modal knows something sits above it and neither drags\n // focus out of this (portaled, so outside the modal's panel) panel nor closes itself on the\n // Escape meant for this. Focus isn't trapped: a Popover is deliberately non-modal, and it\n // already moves focus into the panel on open by itself.\n useOverlay({\n isActive: !!open,\n containerRef: panelRef,\n onEscape: closeOnEscape\n ? () => {\n // Hand focus back to the trigger when it currently sits inside the panel.\n if (floatingRef.current?.contains(document.activeElement)) {\n (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n }\n setOpen(false, true);\n }\n : undefined,\n trapFocus: false,\n lockScroll: isSheet,\n });\n\n const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({\n triggerRef,\n contentRef: floatingRef,\n });\n\n // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n // either end, close and continue focus as if the panel sat right after the trigger.\n useEffect(() => {\n if (!open) {\n openedByKeyboardRef.current = false;\n return;\n }\n const takeFocus = focusOnOpen === true || (focusOnOpen === 'keyboard' && openedByKeyboardRef.current);\n if (!takeFocus || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n // Only claim the dialog role when we're actually managing focus for real content.\n floatingRef.current?.setAttribute('role', 'dialog');\n focusables[0].focus();\n }, [open, trigger, focusOnOpen]);\n\n function handleFloatingKeyDown(event: React.KeyboardEvent) {\n if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n const active = document.activeElement;\n if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n event.preventDefault();\n focusAfterTrigger();\n setOpen(false, true);\n } else if (event.shiftKey && active === focusables[0]) {\n event.preventDefault();\n restoreFocusToTrigger();\n setOpen(false, true);\n }\n }\n\n // Outside click. Registered only while open and only for the relevant trigger mode; Escape is\n // handled by `useOverlay` above, which scopes it to the innermost open layer.\n useEffect(() => {\n if (!open) return;\n\n function onMouseUp(event: MouseEvent) {\n // Read and clear: the flag describes this one event, and the panel's React\n // handler has already run by the time this does.\n const inPanelSubtree = panelInteractedRef.current;\n panelInteractedRef.current = false;\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanelSubtree && !inPanel && !inTrigger) setOpen(false);\n }\n // Keyboard counterpart to the outside click: once focus leaves both the trigger\n // and the (portaled) panel — e.g. tabbing on to the next element — close.\n function onFocusIn(event: FocusEvent) {\n const inPanelSubtree = panelInteractedRef.current;\n panelInteractedRef.current = false;\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanelSubtree && !inPanel && !inTrigger) setOpen(false, true);\n }\n\n if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n window.addEventListener('mouseup', onMouseUp);\n document.addEventListener('focusin', onFocusIn);\n }\n return () => {\n window.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('focusin', onFocusIn);\n };\n }, [open, closeOnOutsideClick, trigger, setOpen]);\n\n useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n function scheduleHover(next: boolean) {\n clearTimeout(hoverTimer.current);\n hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n }\n\n // Opening from the keyboard without the trigger having to be a button that\n // happens to toggle on Enter: the arrow keys are what the menu-button pattern\n // asks for, and what a consumer reaches for first.\n function handleTriggerKeyDown(event: React.KeyboardEvent) {\n if (open || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) return;\n event.preventDefault();\n setOpen(true, true);\n }\n\n const triggerHandlers =\n trigger === PopoverTrigger.Click\n ? {\n onClick: (event: React.MouseEvent) => {\n // A field that opens a picker keeps it open when clicked again, so\n // that placing the caret in the field does not close the panel.\n if (open && !closeOnTriggerClick) return;\n setOpen(!open, event.detail === 0);\n },\n onKeyDown: handleTriggerKeyDown,\n }\n : trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n const floatingHoverHandlers =\n trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : {};\n\n return (\n <div\n {...rest}\n className={cx(styles.popover, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n ref={triggerRef}\n className={cx(styles.popoverTrigger, classNames?.trigger)}\n style={slotStyles?.trigger}\n {...triggerHandlers}\n >\n {children}\n </div>\n {open && (\n <BodyEnd>\n {isSheet && (\n <SheetBackdrop\n onClose={() => {\n if (closeOnOutsideClick) setOpen(false);\n }}\n className={classNames?.backdrop}\n style={slotStyles?.backdrop}\n />\n )}\n <div\n ref={floatingRef}\n className={cx(isSheet ? sheetStyles.sheet : styles.popoverFloating, classNames?.floating)}\n style={{ ...(isSheet ? sheetStyle : undefined), ...slotStyles?.floating }}\n data-placement={placement}\n onKeyDown={handleFloatingKeyDown}\n onMouseUpCapture={markPanelInteraction}\n onFocusCapture={markPanelInteraction}\n {...floatingHoverHandlers}\n >\n <div\n ref={panelRef}\n className={cx(\n styles.popoverPanel,\n constrainWidth && styles.popoverPanelConstrained,\n isSheet && sheetStyles.sheetPanel,\n classNames?.panel,\n )}\n style={slotStyles?.panel}\n >\n {content}\n </div>\n {withArrow && !isSheet && (\n <div ref={arrowRef} className={cx(styles.popoverArrow, classNames?.arrow)} style={slotStyles?.arrow} />\n )}\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n\nexport default Popover;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { useFocusBoundary, tabbablesIn } from '../hooks/useFocusBoundary';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { Presentation } from '../configProvider/presentation.types';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nfunction Popover(props: PopoverProps) {\n const {\n children = null,\n content = null,\n placement = PopoverPlacement.Bottom,\n align = PopoverAlign.Center,\n trigger = PopoverTrigger.Click,\n isOpen,\n defaultOpen = false,\n onOpenChange = () => {},\n offset = 10,\n withArrow = true,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n openDelay = 100,\n closeDelay = 120,\n disabled = false,\n focusOnOpen = 'keyboard',\n closeOnTriggerClick = true,\n width = 'auto',\n constrainWidth = true,\n presentation: presentationProp,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Popover', props);\n const triggerRef = useRef<HTMLDivElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n // Set from a capture handler on the panel, which React fires for its whole\n // React subtree — including children that portal elsewhere in the DOM, such as\n // a Dropdown's list inside a DatePicker's calendar. A DOM `contains` check\n // cannot see those, and without this the panel closes when one is used.\n const panelInteractedRef = useRef(false);\n // Whether the open that is running came from the keyboard, which is what the\n // default `focusOnOpen` follows and what `onOpenChange` reports. A click raised\n // by Enter or Space reports `detail === 0`, where a pointer press counts the\n // clicks; an open with no trigger event at all, such as a panel that appears\n // while the user types, leaves this false.\n const openedByKeyboardRef = useRef(false);\n function markPanelInteraction() {\n panelInteractedRef.current = true;\n }\n\n const isControlled = isOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = isControlled ? isOpen : internalOpen;\n\n // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n const onOpenChangeRef = useRef(onOpenChange);\n useEffect(() => {\n onOpenChangeRef.current = onOpenChange;\n });\n\n const setOpen = useCallback(\n (next: boolean, fromKeyboard = false) => {\n if (disabled && next) return;\n if (next) openedByKeyboardRef.current = fromKeyboard;\n if (!isControlled) setInternalOpen(next);\n onOpenChangeRef.current(next, { fromKeyboard });\n },\n [disabled, isControlled],\n );\n\n // Explicit prop → this component's global default → the app-wide one → anchored.\n const appPresentation = usePresentationDefault();\n const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n const { isSheet: sheetPresentation, sheetStyle } = useSheet(presentation);\n // Hover and focus are pointer affordances that open something small next to what caused them;\n // a sheet is a deliberate, screen-owning open. Only a click asks for one.\n const isSheet = sheetPresentation && trigger === PopoverTrigger.Click;\n\n // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n usePopoverPosition({\n isOpen: !!open && !isSheet,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef: withArrow ? arrowRef : { current: null },\n matchTriggerWidth: width === 'trigger',\n });\n\n // Registered for as long as it's open, not just as a sheet: this is what puts the popover on\n // the overlay stack, so an enclosing Modal knows something sits above it and neither drags\n // focus out of this (portaled, so outside the modal's panel) panel nor closes itself on the\n // Escape meant for this. Focus isn't trapped: a Popover is deliberately non-modal, and it\n // already moves focus into the panel on open by itself.\n useOverlay({\n isActive: !!open,\n containerRef: panelRef,\n onEscape: closeOnEscape\n ? () => {\n // Hand focus back to the trigger when it currently sits inside the panel.\n if (floatingRef.current?.contains(document.activeElement)) {\n (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n }\n setOpen(false, true);\n }\n : undefined,\n trapFocus: false,\n lockScroll: isSheet,\n });\n\n const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({\n triggerRef,\n contentRef: floatingRef,\n });\n\n // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n // either end, close and continue focus as if the panel sat right after the trigger.\n useEffect(() => {\n if (!open) {\n openedByKeyboardRef.current = false;\n return;\n }\n const takeFocus = focusOnOpen === true || (focusOnOpen === 'keyboard' && openedByKeyboardRef.current);\n if (!takeFocus || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n // Only claim the dialog role when we're actually managing focus for real content.\n floatingRef.current?.setAttribute('role', 'dialog');\n focusables[0].focus();\n }, [open, trigger, focusOnOpen]);\n\n function handleFloatingKeyDown(event: React.KeyboardEvent) {\n if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n const active = document.activeElement;\n if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n event.preventDefault();\n focusAfterTrigger();\n setOpen(false, true);\n } else if (event.shiftKey && active === focusables[0]) {\n event.preventDefault();\n restoreFocusToTrigger();\n setOpen(false, true);\n }\n }\n\n // Outside click. Registered only while open and only for the relevant trigger mode; Escape is\n // handled by `useOverlay` above, which scopes it to the innermost open layer.\n useEffect(() => {\n if (!open) return;\n\n function onMouseUp(event: MouseEvent) {\n // Read and clear: the flag describes this one event, and the panel's React\n // handler has already run by the time this does.\n const inPanelSubtree = panelInteractedRef.current;\n panelInteractedRef.current = false;\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanelSubtree && !inPanel && !inTrigger) setOpen(false);\n }\n // Keyboard counterpart to the outside click: once focus leaves both the trigger\n // and the (portaled) panel — e.g. tabbing on to the next element — close.\n function onFocusIn(event: FocusEvent) {\n const inPanelSubtree = panelInteractedRef.current;\n panelInteractedRef.current = false;\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanelSubtree && !inPanel && !inTrigger) setOpen(false, true);\n }\n\n if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n window.addEventListener('mouseup', onMouseUp);\n document.addEventListener('focusin', onFocusIn);\n }\n return () => {\n window.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('focusin', onFocusIn);\n };\n }, [open, closeOnOutsideClick, trigger, setOpen]);\n\n useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n function scheduleHover(next: boolean) {\n clearTimeout(hoverTimer.current);\n hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n }\n\n // Opening from the keyboard without the trigger having to be a button that\n // happens to toggle on Enter: the arrow keys are what the menu-button pattern\n // asks for, and what a consumer reaches for first.\n function handleTriggerKeyDown(event: React.KeyboardEvent) {\n if (open || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) return;\n event.preventDefault();\n setOpen(true, true);\n }\n\n const triggerHandlers =\n trigger === PopoverTrigger.Click\n ? {\n onClick: (event: React.MouseEvent) => {\n // A field that opens a picker keeps it open when clicked again, so\n // that placing the caret in the field does not close the panel.\n if (open && !closeOnTriggerClick) return;\n setOpen(!open, event.detail === 0);\n },\n onKeyDown: handleTriggerKeyDown,\n }\n : trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n const floatingHoverHandlers =\n trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : {};\n\n return (\n <div\n {...rest}\n className={cx(styles.popover, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n ref={triggerRef}\n className={cx(styles.popoverTrigger, classNames?.trigger)}\n style={slotStyles?.trigger}\n {...triggerHandlers}\n >\n {children}\n </div>\n {open && (\n <BodyEnd>\n {isSheet && (\n <SheetBackdrop\n onClose={() => {\n if (closeOnOutsideClick) setOpen(false);\n }}\n className={classNames?.backdrop}\n style={slotStyles?.backdrop}\n />\n )}\n <div\n ref={floatingRef}\n className={cx(isSheet ? sheetStyles.sheet : styles.popoverFloating, classNames?.floating)}\n style={{ ...(isSheet ? sheetStyle : undefined), ...slotStyles?.floating }}\n data-placement={placement}\n onKeyDown={handleFloatingKeyDown}\n onMouseUpCapture={markPanelInteraction}\n onFocusCapture={markPanelInteraction}\n {...floatingHoverHandlers}\n >\n <div\n ref={panelRef}\n className={cx(\n styles.popoverPanel,\n constrainWidth && styles.popoverPanelConstrained,\n isSheet && sheetStyles.sheetPanel,\n classNames?.panel,\n )}\n style={slotStyles?.panel}\n >\n {content}\n </div>\n {withArrow && !isSheet && (\n <div ref={arrowRef} className={cx(styles.popoverArrow, classNames?.arrow)} style={slotStyles?.arrow} />\n )}\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n\nexport default Popover;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`popover_hhmvN`,t=`popover-trigger_R4ckf`,n=`popover-floating_mhXrQ`,r=`popover-panel_tVB2k`,i=`popover-panel-constrained_DFXWP`,a=`popoverIn_nKOqX`,o=`popover-arrow_B8kB-`,s={popover:e,"popover-trigger":`popover-trigger_R4ckf`,popoverTrigger:t,"popover-floating":`popover-floating_mhXrQ`,popoverFloating:n,"popover-panel":`popover-panel_tVB2k`,popoverPanel:r,"popover-panel-constrained":`popover-panel-constrained_DFXWP`,popoverPanelConstrained:i,popoverIn:a,"popover-arrow":`popover-arrow_B8kB-`,popoverArrow:o};export{s as default,e as popover,o as popoverArrow,n as popoverFloating,a as popoverIn,r as popoverPanel,i as popoverPanelConstrained,t as popoverTrigger};
|
|
1
|
+
"use client";var e=`popover_hhmvN`,t=`popover-trigger_R4ckf`,n=`popover-floating_mhXrQ`,r=`popover-panel_tVB2k`,i=`popover-panel-constrained_DFXWP`,a=`popoverIn_nKOqX`,o=`popover-arrow_B8kB-`,s={popover:e,"popover-trigger":`popover-trigger_R4ckf`,popoverTrigger:t,"popover-floating":`popover-floating_mhXrQ`,popoverFloating:n,"popover-panel":`popover-panel_tVB2k`,popoverPanel:r,"popover-panel-constrained":`popover-panel-constrained_DFXWP`,popoverPanelConstrained:i,popoverIn:a,"popover-arrow":`popover-arrow_B8kB-`,popoverArrow:o};export{s as default,e as popover,o as popoverArrow,n as popoverFloating,a as popoverIn,r as popoverPanel,i as popoverPanelConstrained,t as popoverTrigger};
|
|
2
2
|
//# sourceMappingURL=popover.module.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({}),t=function(e){return e.Start=`start`,e.Center=`center`,e.End=`end`,e}({}),n=function(e){return e.Click=`click`,e.Hover=`hover`,e.Focus=`focus`,e}({});export{t as PopoverAlign,e as PopoverPlacement,n as PopoverTrigger};
|
|
1
|
+
"use client";var e=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({}),t=function(e){return e.Start=`start`,e.Center=`center`,e.End=`end`,e}({}),n=function(e){return e.Click=`click`,e.Hover=`hover`,e.Focus=`focus`,e}({});export{t as PopoverAlign,e as PopoverPlacement,n as PopoverTrigger};
|
|
2
2
|
//# sourceMappingURL=popover.types.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.types.mjs","names":[],"sources":["../../../../package/common/popover/popover.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */\nexport enum PopoverPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\n/** Alignment along the trigger's cross axis (horizontal for top/bottom, vertical for left/right). */\nexport enum PopoverAlign {\n Start = 'start',\n Center = 'center',\n End = 'end',\n}\n\n/** What opens the popover. */\nexport enum PopoverTrigger {\n Click = 'click',\n Hover = 'hover',\n Focus = 'focus',\n}\n\nexport type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow' | 'backdrop';\n\nexport interface PopoverProps extends Omit<HtmlProps, 'content'> {\n /** The trigger element. */\n children?: ReactNode;\n /** The popover body. */\n content?: ReactNode;\n /** Preferred side (default `Bottom`). */\n placement?: PopoverPlacement;\n /** Cross-axis alignment (default `Center`). */\n align?: PopoverAlign;\n /** What opens the popover (default `Click`). */\n trigger?: PopoverTrigger;\n /** Controlled open state. Omit for uncontrolled. */\n isOpen?: boolean;\n /** Initial open state when uncontrolled (default `false`). */\n defaultOpen?: boolean;\n /**\n * Fires whenever the popover wants to open or close. `fromKeyboard` says\n * whether a key caused it, which is what a menu needs in order to put the\n * focus on an entry only when the pointer was not what opened it.\n */\n onOpenChange?: (isOpen: boolean, meta: { fromKeyboard: boolean }) => void;\n /** Gap in px between trigger and panel (default `10`). */\n offset?: number;\n /** Render the arrow pointing at the trigger (default `true`). */\n withArrow?: boolean;\n /** Close when clicking outside the panel (default `true`). */\n closeOnOutsideClick?: boolean;\n /** Close when pressing Escape (default `true`). */\n closeOnEscape?: boolean;\n /** Delay in ms before a hover-triggered popover opens (default `100`). */\n openDelay?: number;\n /** Delay in ms before a hover-triggered popover closes (default `120`). */\n closeDelay?: number;\n /** Prevent the popover from opening. */\n disabled?: boolean;\n /**\n * Move focus into the panel when it opens, and claim `role=\"dialog\"` with it.\n * `'keyboard'` (the default) does it only when the open came from the\n * keyboard: the panel is portaled to the end of the document, so Tab never\n * reaches it on its own, while a click leaves the focus where the pointer\n * already put it. `true` always, `false` never.\n */\n focusOnOpen?: boolean | 'keyboard';\n /**\n * Whether clicking the trigger while the panel is open closes it (default\n * `true`). A menu button should toggle; a text field that opens a picker\n * should not, or clicking into it to place the caret would close the panel.\n */\n closeOnTriggerClick?: boolean;\n /**\n * `'trigger'` gives the panel at least the trigger's width, for a list that\n * should line up with the field it belongs to. `'auto'` (the default) lets it\n * size to its own content.\n */\n width?: 'auto' | 'trigger';\n /**\n * Cap the panel at a readable measure (default `true`). Off for a panel with\n * its own width, a calendar or a media grid.\n */\n constrainWidth?: boolean;\n /** Where the panel opens: anchored to the trigger (`Default`), pinned to the bottom of the\n * screen, or the latter only on a small touch screen. Only a `Click` trigger presents as a\n * sheet. */\n presentation?: Presentation;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<PopoverSlots>;\n styles?: SlotStyles<PopoverSlots>;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"popover.types.mjs","names":[],"sources":["../../../../package/common/popover/popover.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */\nexport enum PopoverPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\n/** Alignment along the trigger's cross axis (horizontal for top/bottom, vertical for left/right). */\nexport enum PopoverAlign {\n Start = 'start',\n Center = 'center',\n End = 'end',\n}\n\n/** What opens the popover. */\nexport enum PopoverTrigger {\n Click = 'click',\n Hover = 'hover',\n Focus = 'focus',\n}\n\nexport type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow' | 'backdrop';\n\nexport interface PopoverProps extends Omit<HtmlProps, 'content'> {\n /** The trigger element. */\n children?: ReactNode;\n /** The popover body. */\n content?: ReactNode;\n /** Preferred side (default `Bottom`). */\n placement?: PopoverPlacement;\n /** Cross-axis alignment (default `Center`). */\n align?: PopoverAlign;\n /** What opens the popover (default `Click`). */\n trigger?: PopoverTrigger;\n /** Controlled open state. Omit for uncontrolled. */\n isOpen?: boolean;\n /** Initial open state when uncontrolled (default `false`). */\n defaultOpen?: boolean;\n /**\n * Fires whenever the popover wants to open or close. `fromKeyboard` says\n * whether a key caused it, which is what a menu needs in order to put the\n * focus on an entry only when the pointer was not what opened it.\n */\n onOpenChange?: (isOpen: boolean, meta: { fromKeyboard: boolean }) => void;\n /** Gap in px between trigger and panel (default `10`). */\n offset?: number;\n /** Render the arrow pointing at the trigger (default `true`). */\n withArrow?: boolean;\n /** Close when clicking outside the panel (default `true`). */\n closeOnOutsideClick?: boolean;\n /** Close when pressing Escape (default `true`). */\n closeOnEscape?: boolean;\n /** Delay in ms before a hover-triggered popover opens (default `100`). */\n openDelay?: number;\n /** Delay in ms before a hover-triggered popover closes (default `120`). */\n closeDelay?: number;\n /** Prevent the popover from opening. */\n disabled?: boolean;\n /**\n * Move focus into the panel when it opens, and claim `role=\"dialog\"` with it.\n * `'keyboard'` (the default) does it only when the open came from the\n * keyboard: the panel is portaled to the end of the document, so Tab never\n * reaches it on its own, while a click leaves the focus where the pointer\n * already put it. `true` always, `false` never.\n */\n focusOnOpen?: boolean | 'keyboard';\n /**\n * Whether clicking the trigger while the panel is open closes it (default\n * `true`). A menu button should toggle; a text field that opens a picker\n * should not, or clicking into it to place the caret would close the panel.\n */\n closeOnTriggerClick?: boolean;\n /**\n * `'trigger'` gives the panel at least the trigger's width, for a list that\n * should line up with the field it belongs to. `'auto'` (the default) lets it\n * size to its own content.\n */\n width?: 'auto' | 'trigger';\n /**\n * Cap the panel at a readable measure (default `true`). Off for a panel with\n * its own width, a calendar or a media grid.\n */\n constrainWidth?: boolean;\n /** Where the panel opens: anchored to the trigger (`Default`), pinned to the bottom of the\n * screen, or the latter only on a small touch screen. Only a `Click` trigger presents as a\n * sheet. */\n presentation?: Presentation;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<PopoverSlots>;\n styles?: SlotStyles<PopoverSlots>;\n}\n"],"mappings":"aAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,IAAA,OACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{isHiddenByAnyAncestor as e}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as t}from"../utils/visualViewport.mjs";import{useAnchorTracking as n}from"../hooks/useAnchorTracking.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";var a={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},o=8,s=160,c=3;function l(e){let t=e;for(let e=0;e<=c;e++){let e=t.getBoundingClientRect();if(e.width>0||e.height>0)return e;let n=t.firstElementChild;if(!n)break;t=n}return e.getBoundingClientRect()}function u({isOpen:c,placement:u,align:d,offset:f,triggerRef:p,floatingRef:m,panelRef:h,arrowRef:g,matchTriggerWidth:_=!1,shrinkToFit:v=!1}){n({isOpen:c,triggerRef:p,elementRefs:[m,h],resizeRefs:[h],deps:[u,d,f,m,h,g,_,v],update:(n,c)=>{let p=m.current,y=h.current;if(!p||!y)return;let b=l(n);_?y.style.minWidth=`${b.width}px`:y.style.removeProperty(`min-width`),v&&y.style.removeProperty(`max-width`);let{width:x,height:S}=p.getBoundingClientRect(),C=t(),w=u===i.Top||u===i.Bottom;if(v&&w){let e=d===r.End?b.right-(C.left+o):d===r.Start?C.left+C.width-o-b.left:C.width-16,t=Math.min(e,C.width-16);x>t&&t>=s&&(y.style.maxWidth=`${t}px`,{width:x,height:S}=p.getBoundingClientRect())}let T={top:b.top-C.top,bottom:C.top+C.height-b.bottom,left:b.left-C.left,right:C.left+C.width-b.right},E=u===i.Top||u===i.Bottom?S:x,D=u,O=a[u];T[D]<E+f&&T[O]>T[D]&&(D=O);let k=D===`top`||D===`bottom`,A,j;D===`bottom`?A=b.bottom+f:D===`top`?A=b.top-f-S:j=D===`right`?b.right+f:b.left-f-x,k?(j=d===r.Start?b.left:d===r.End?b.right-x:b.left+b.width/2-x/2,j=Math.max(C.left+o,Math.min(j,C.left+C.width-x-o))):(A=d===r.Start?b.top:d===r.End?b.bottom-S:b.top+b.height/2-S/2,A=Math.max(C.top+o,Math.min(A,C.top+C.height-S-o))),p.style.top=`${A}px`,p.style.left=`${j}px`,p.style.visibility=e(b,c)?`hidden`:`visible`,p.dataset.placement=D;let M=g.current;if(M){let e=M.offsetWidth/2||5;if(k){let t=b.left+b.width/2-j;M.style.setProperty(`--arrow-x`,`${Math.max(e+2,Math.min(t,x-e-2))}px`),M.style.removeProperty(`--arrow-y`)}else{let t=b.top+b.height/2-A;M.style.setProperty(`--arrow-y`,`${Math.max(e+2,Math.min(t,S-e-2))}px`),M.style.removeProperty(`--arrow-x`)}}},teardown:()=>{let e=m.current;if(!e)return;e.style.top=``,e.style.left=``,e.style.visibility=``;let t=h.current;t?.style.removeProperty(`min-width`),t?.style.removeProperty(`max-width`)}})}export{u as usePopoverPosition};
|
|
1
|
+
"use client";import{isHiddenByAnyAncestor as e}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as t}from"../utils/visualViewport.mjs";import{useAnchorTracking as n}from"../hooks/useAnchorTracking.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";var a={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},o=8,s=160,c=3;function l(e){let t=e;for(let e=0;e<=c;e++){let e=t.getBoundingClientRect();if(e.width>0||e.height>0)return e;let n=t.firstElementChild;if(!n)break;t=n}return e.getBoundingClientRect()}function u({isOpen:c,placement:u,align:d,offset:f,triggerRef:p,floatingRef:m,panelRef:h,arrowRef:g,matchTriggerWidth:_=!1,shrinkToFit:v=!1}){n({isOpen:c,triggerRef:p,elementRefs:[m,h],resizeRefs:[h],deps:[u,d,f,m,h,g,_,v],update:(n,c)=>{let p=m.current,y=h.current;if(!p||!y)return;let b=l(n);_?y.style.minWidth=`${b.width}px`:y.style.removeProperty(`min-width`),v&&y.style.removeProperty(`max-width`);let{width:x,height:S}=p.getBoundingClientRect(),C=t(),w=u===i.Top||u===i.Bottom;if(v&&w){let e=d===r.End?b.right-(C.left+o):d===r.Start?C.left+C.width-o-b.left:C.width-16,t=Math.min(e,C.width-16);x>t&&t>=s&&(y.style.maxWidth=`${t}px`,{width:x,height:S}=p.getBoundingClientRect())}let T={top:b.top-C.top,bottom:C.top+C.height-b.bottom,left:b.left-C.left,right:C.left+C.width-b.right},E=u===i.Top||u===i.Bottom?S:x,D=u,O=a[u];T[D]<E+f&&T[O]>T[D]&&(D=O);let k=D===`top`||D===`bottom`,A,j;D===`bottom`?A=b.bottom+f:D===`top`?A=b.top-f-S:j=D===`right`?b.right+f:b.left-f-x,k?(j=d===r.Start?b.left:d===r.End?b.right-x:b.left+b.width/2-x/2,j=Math.max(C.left+o,Math.min(j,C.left+C.width-x-o))):(A=d===r.Start?b.top:d===r.End?b.bottom-S:b.top+b.height/2-S/2,A=Math.max(C.top+o,Math.min(A,C.top+C.height-S-o))),p.style.top=`${A}px`,p.style.left=`${j}px`,p.style.visibility=e(b,c)?`hidden`:`visible`,p.dataset.placement=D;let M=g.current;if(M){let e=M.offsetWidth/2||5;if(k){let t=b.left+b.width/2-j;M.style.setProperty(`--arrow-x`,`${Math.max(e+2,Math.min(t,x-e-2))}px`),M.style.removeProperty(`--arrow-y`)}else{let t=b.top+b.height/2-A;M.style.setProperty(`--arrow-y`,`${Math.max(e+2,Math.min(t,S-e-2))}px`),M.style.removeProperty(`--arrow-x`)}}},teardown:()=>{let e=m.current;if(!e)return;e.style.top=``,e.style.left=``,e.style.visibility=``;let t=h.current;t?.style.removeProperty(`min-width`),t?.style.removeProperty(`max-width`)}})}export{u as usePopoverPosition};
|
|
2
2
|
//# sourceMappingURL=usePopoverPosition.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { type RefObject } from 'react';\nimport { isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\nimport { useAnchorTracking } from '../hooks/useAnchorTracking';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n [PopoverPlacement.Top]: 'bottom',\n [PopoverPlacement.Bottom]: 'top',\n [PopoverPlacement.Left]: 'right',\n [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\n/**\n * Narrower than this and `shrinkToFit` gives up: a panel this size reads worse than\n * one that overhangs. Around four words a line for an error bubble, which is the\n * narrowest caller. A constant rather than an option, because the one caller that\n * shrinks has no reason to want a different floor; give it one the day a second\n * caller disagrees, as `shrinkToFit: boolean | number`.\n */\nconst MIN_SHRINK_WIDTH = 160;\n\n/** How far down to look for a box when the wrappers in between have none. */\nconst MAX_ANCHOR_DEPTH = 3;\n\n/**\n * The rect to anchor to. A trigger with a box of its own is that box, which is the\n * case for a caller that hands over a real element (`Tooltip`).\n *\n * Popover's own trigger wrapper generates no box, deliberately, so that the\n * trigger keeps the place it would have had without Popover around it. Then the\n * real trigger is inside it, and this descends to find it, past any further\n * boxless element a consumer wrapped its trigger in: such an element has a zero\n * rect at the origin, which would otherwise send the panel to the top-left corner\n * of the screen.\n */\nfunction resolveAnchorRect(trigger: HTMLElement): DOMRect {\n let el: HTMLElement = trigger;\n for (let depth = 0; depth <= MAX_ANCHOR_DEPTH; depth++) {\n const rect = el.getBoundingClientRect();\n if (rect.width > 0 || rect.height > 0) return rect;\n const child = el.firstElementChild as HTMLElement | null;\n if (!child) break;\n el = child;\n }\n return trigger.getBoundingClientRect();\n}\n\nexport interface UsePopoverPositionArgs {\n isOpen: boolean;\n placement: PopoverPlacement;\n align: PopoverAlign;\n offset: number;\n triggerRef: RefObject<HTMLElement | null>;\n /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n floatingRef: RefObject<HTMLElement | null>;\n /** Visible panel, measured to decide flip and shift. */\n panelRef: RefObject<HTMLElement | null>;\n /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n arrowRef: RefObject<HTMLElement | null>;\n /**\n * Give the panel at least the trigger's width, for a list that lines up with\n * the field it belongs to. A minimum rather than a fixed width: a menu on a\n * narrow icon button still sizes to its own content.\n */\n matchTriggerWidth?: boolean;\n /**\n * When the panel does not fit on the side its alignment puts it, narrow it\n * rather than sliding it away from the trigger. Sliding keeps the panel\n * on-screen but detaches it: an end-aligned bubble stops ending where its\n * trigger ends, and its arrow stops pointing at anything. Off by default, since\n * a panel whose width is its content, a menu or a list, would rather overhang\n * its trigger than wrap.\n *\n * Only down to `MIN_SHRINK_WIDTH`. Past that the panel is narrower than it is\n * readable, and a trigger that close to the screen edge is better served by a\n * panel that overhangs it.\n */\n shrinkToFit?: boolean;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor.\n *\n * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and\n * re-running on scroll, viewport resize and panel size changes.\n */\nexport function usePopoverPosition({\n isOpen,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef,\n matchTriggerWidth = false,\n shrinkToFit = false,\n}: UsePopoverPositionArgs) {\n useAnchorTracking({\n isOpen,\n triggerRef,\n elementRefs: [floatingRef, panelRef],\n // The panel's own size feeds the flip decision and, on the `top`/`left` sides, the coordinate\n // itself — so content that resizes while open has to be re-measured.\n resizeRefs: [panelRef],\n deps: [placement, align, offset, floatingRef, panelRef, arrowRef, matchTriggerWidth, shrinkToFit],\n\n update: (trigger, ancestors) => {\n const floating = floatingRef.current;\n const panel = panelRef.current;\n if (!floating || !panel) return;\n\n const t = resolveAnchorRect(trigger);\n // Written before the panel is measured, so `pw` below already accounts for it,\n // and taken back off when it is no longer wanted: the panel outlives the\n // switch, and an inline width would outrank whatever it switched to.\n if (matchTriggerWidth) panel.style.minWidth = `${t.width}px`;\n else panel.style.removeProperty('min-width');\n // The wrapper's box, not the panel's: `offsetWidth` rounds to whole pixels, so\n // aligning a panel 165.4px wide against a trigger edge at 406.47 left it 0.4px\n // past that edge. The panel's own rect is fractional but carries the entrance\n // animation's scale; the wrapper is the same layout box without the transform.\n // Cleared before measuring, or a cap left over from a narrower screen would be\n // read back as the panel's own width and never widen again.\n if (shrinkToFit) panel.style.removeProperty('max-width');\n let { width: pw, height: ph } = floating.getBoundingClientRect();\n // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n // open, so the panel flips/clamps against what's actually on screen instead of ending up\n // hidden behind the keyboard.\n const vv = getVisualViewportRect();\n\n // Flipping only swaps a side for its opposite, so which axis the alignment runs\n // along is decided by the preferred placement alone, before any of that.\n const alignsHorizontally = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom;\n\n if (shrinkToFit && alignsHorizontally) {\n const alignedSide =\n align === PopoverAlign.End\n ? t.right - (vv.left + MARGIN)\n : align === PopoverAlign.Start\n ? vv.left + vv.width - MARGIN - t.left\n : vv.width - 2 * MARGIN;\n const room = Math.min(alignedSide, vv.width - 2 * MARGIN);\n if (pw > room && room >= MIN_SHRINK_WIDTH) {\n panel.style.maxWidth = `${room}px`;\n // Wrapping makes it taller, and the height is what the flip below is decided on.\n ({ width: pw, height: ph } = floating.getBoundingClientRect());\n }\n }\n\n // Resolve the main-axis side, flipping when the preferred side lacks room and the\n // opposite side has more.\n const room: Record<Axis, number> = {\n top: t.top - vv.top,\n bottom: vv.top + vv.height - t.bottom,\n left: t.left - vv.left,\n right: vv.left + vv.width - t.right,\n };\n const need = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom ? ph : pw;\n let side: Axis = placement as unknown as Axis;\n const opp = OPPOSITE[placement];\n if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n const vertical = side === 'top' || side === 'bottom';\n\n // Main axis: place the panel just outside the trigger on the resolved side.\n let top: number;\n let left: number;\n if (side === 'bottom') {\n top = t.bottom + offset;\n } else if (side === 'top') {\n top = t.top - offset - ph;\n } else if (side === 'right') {\n left = t.right + offset;\n } else {\n left = t.left - offset - pw;\n }\n\n // Cross axis: align start/center/end against the trigger, then shift on-screen.\n if (vertical) {\n if (align === PopoverAlign.Start) left = t.left;\n else if (align === PopoverAlign.End) left = t.right - pw;\n else left = t.left + t.width / 2 - pw / 2;\n left = Math.max(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - pw - MARGIN));\n } else {\n if (align === PopoverAlign.Start) top = t.top;\n else if (align === PopoverAlign.End) top = t.bottom - ph;\n else top = t.top + t.height / 2 - ph / 2;\n top = Math.max(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - ph - MARGIN));\n }\n\n floating.style.top = `${top!}px`;\n floating.style.left = `${left!}px`;\n floating.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n floating.dataset.placement = side;\n\n // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n const arrow = arrowRef.current;\n if (arrow) {\n const half = arrow.offsetWidth / 2 || 5;\n if (vertical) {\n const x = t.left + t.width / 2 - left!;\n arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n arrow.style.removeProperty('--arrow-y');\n } else {\n const y = t.top + t.height / 2 - top!;\n arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n arrow.style.removeProperty('--arrow-x');\n }\n }\n },\n\n teardown: () => {\n // Positioning is written as inline styles, which outrank any class the panel might\n // switch to while it stays mounted — a popover turning into a bottom sheet (`useSheet`)\n // would keep the coordinates computed for its anchored self.\n const floating = floatingRef.current;\n if (!floating) return;\n floating.style.top = '';\n floating.style.left = '';\n floating.style.visibility = '';\n const panel = panelRef.current;\n panel?.style.removeProperty('min-width');\n panel?.style.removeProperty('max-width');\n },\n });\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { type RefObject } from 'react';\nimport { isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\nimport { useAnchorTracking } from '../hooks/useAnchorTracking';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n [PopoverPlacement.Top]: 'bottom',\n [PopoverPlacement.Bottom]: 'top',\n [PopoverPlacement.Left]: 'right',\n [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\n/**\n * Narrower than this and `shrinkToFit` gives up: a panel this size reads worse than\n * one that overhangs. Around four words a line for an error bubble, which is the\n * narrowest caller. A constant rather than an option, because the one caller that\n * shrinks has no reason to want a different floor; give it one the day a second\n * caller disagrees, as `shrinkToFit: boolean | number`.\n */\nconst MIN_SHRINK_WIDTH = 160;\n\n/** How far down to look for a box when the wrappers in between have none. */\nconst MAX_ANCHOR_DEPTH = 3;\n\n/**\n * The rect to anchor to. A trigger with a box of its own is that box, which is the\n * case for a caller that hands over a real element (`Tooltip`).\n *\n * Popover's own trigger wrapper generates no box, deliberately, so that the\n * trigger keeps the place it would have had without Popover around it. Then the\n * real trigger is inside it, and this descends to find it, past any further\n * boxless element a consumer wrapped its trigger in: such an element has a zero\n * rect at the origin, which would otherwise send the panel to the top-left corner\n * of the screen.\n */\nfunction resolveAnchorRect(trigger: HTMLElement): DOMRect {\n let el: HTMLElement = trigger;\n for (let depth = 0; depth <= MAX_ANCHOR_DEPTH; depth++) {\n const rect = el.getBoundingClientRect();\n if (rect.width > 0 || rect.height > 0) return rect;\n const child = el.firstElementChild as HTMLElement | null;\n if (!child) break;\n el = child;\n }\n return trigger.getBoundingClientRect();\n}\n\nexport interface UsePopoverPositionArgs {\n isOpen: boolean;\n placement: PopoverPlacement;\n align: PopoverAlign;\n offset: number;\n triggerRef: RefObject<HTMLElement | null>;\n /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n floatingRef: RefObject<HTMLElement | null>;\n /** Visible panel, measured to decide flip and shift. */\n panelRef: RefObject<HTMLElement | null>;\n /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n arrowRef: RefObject<HTMLElement | null>;\n /**\n * Give the panel at least the trigger's width, for a list that lines up with\n * the field it belongs to. A minimum rather than a fixed width: a menu on a\n * narrow icon button still sizes to its own content.\n */\n matchTriggerWidth?: boolean;\n /**\n * When the panel does not fit on the side its alignment puts it, narrow it\n * rather than sliding it away from the trigger. Sliding keeps the panel\n * on-screen but detaches it: an end-aligned bubble stops ending where its\n * trigger ends, and its arrow stops pointing at anything. Off by default, since\n * a panel whose width is its content, a menu or a list, would rather overhang\n * its trigger than wrap.\n *\n * Only down to `MIN_SHRINK_WIDTH`. Past that the panel is narrower than it is\n * readable, and a trigger that close to the screen edge is better served by a\n * panel that overhangs it.\n */\n shrinkToFit?: boolean;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor.\n *\n * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and\n * re-running on scroll, viewport resize and panel size changes.\n */\nexport function usePopoverPosition({\n isOpen,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef,\n matchTriggerWidth = false,\n shrinkToFit = false,\n}: UsePopoverPositionArgs) {\n useAnchorTracking({\n isOpen,\n triggerRef,\n elementRefs: [floatingRef, panelRef],\n // The panel's own size feeds the flip decision and, on the `top`/`left` sides, the coordinate\n // itself — so content that resizes while open has to be re-measured.\n resizeRefs: [panelRef],\n deps: [placement, align, offset, floatingRef, panelRef, arrowRef, matchTriggerWidth, shrinkToFit],\n\n update: (trigger, ancestors) => {\n const floating = floatingRef.current;\n const panel = panelRef.current;\n if (!floating || !panel) return;\n\n const t = resolveAnchorRect(trigger);\n // Written before the panel is measured, so `pw` below already accounts for it,\n // and taken back off when it is no longer wanted: the panel outlives the\n // switch, and an inline width would outrank whatever it switched to.\n if (matchTriggerWidth) panel.style.minWidth = `${t.width}px`;\n else panel.style.removeProperty('min-width');\n // The wrapper's box, not the panel's: `offsetWidth` rounds to whole pixels, so\n // aligning a panel 165.4px wide against a trigger edge at 406.47 left it 0.4px\n // past that edge. The panel's own rect is fractional but carries the entrance\n // animation's scale; the wrapper is the same layout box without the transform.\n // Cleared before measuring, or a cap left over from a narrower screen would be\n // read back as the panel's own width and never widen again.\n if (shrinkToFit) panel.style.removeProperty('max-width');\n let { width: pw, height: ph } = floating.getBoundingClientRect();\n // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n // open, so the panel flips/clamps against what's actually on screen instead of ending up\n // hidden behind the keyboard.\n const vv = getVisualViewportRect();\n\n // Flipping only swaps a side for its opposite, so which axis the alignment runs\n // along is decided by the preferred placement alone, before any of that.\n const alignsHorizontally = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom;\n\n if (shrinkToFit && alignsHorizontally) {\n const alignedSide =\n align === PopoverAlign.End\n ? t.right - (vv.left + MARGIN)\n : align === PopoverAlign.Start\n ? vv.left + vv.width - MARGIN - t.left\n : vv.width - 2 * MARGIN;\n const room = Math.min(alignedSide, vv.width - 2 * MARGIN);\n if (pw > room && room >= MIN_SHRINK_WIDTH) {\n panel.style.maxWidth = `${room}px`;\n // Wrapping makes it taller, and the height is what the flip below is decided on.\n ({ width: pw, height: ph } = floating.getBoundingClientRect());\n }\n }\n\n // Resolve the main-axis side, flipping when the preferred side lacks room and the\n // opposite side has more.\n const room: Record<Axis, number> = {\n top: t.top - vv.top,\n bottom: vv.top + vv.height - t.bottom,\n left: t.left - vv.left,\n right: vv.left + vv.width - t.right,\n };\n const need = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom ? ph : pw;\n let side: Axis = placement as unknown as Axis;\n const opp = OPPOSITE[placement];\n if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n const vertical = side === 'top' || side === 'bottom';\n\n // Main axis: place the panel just outside the trigger on the resolved side.\n let top: number;\n let left: number;\n if (side === 'bottom') {\n top = t.bottom + offset;\n } else if (side === 'top') {\n top = t.top - offset - ph;\n } else if (side === 'right') {\n left = t.right + offset;\n } else {\n left = t.left - offset - pw;\n }\n\n // Cross axis: align start/center/end against the trigger, then shift on-screen.\n if (vertical) {\n if (align === PopoverAlign.Start) left = t.left;\n else if (align === PopoverAlign.End) left = t.right - pw;\n else left = t.left + t.width / 2 - pw / 2;\n left = Math.max(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - pw - MARGIN));\n } else {\n if (align === PopoverAlign.Start) top = t.top;\n else if (align === PopoverAlign.End) top = t.bottom - ph;\n else top = t.top + t.height / 2 - ph / 2;\n top = Math.max(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - ph - MARGIN));\n }\n\n floating.style.top = `${top!}px`;\n floating.style.left = `${left!}px`;\n floating.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n floating.dataset.placement = side;\n\n // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n const arrow = arrowRef.current;\n if (arrow) {\n const half = arrow.offsetWidth / 2 || 5;\n if (vertical) {\n const x = t.left + t.width / 2 - left!;\n arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n arrow.style.removeProperty('--arrow-y');\n } else {\n const y = t.top + t.height / 2 - top!;\n arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n arrow.style.removeProperty('--arrow-x');\n }\n }\n },\n\n teardown: () => {\n // Positioning is written as inline styles, which outrank any class the panel might\n // switch to while it stays mounted — a popover turning into a bottom sheet (`useSheet`)\n // would keep the coordinates computed for its anchored self.\n const floating = floatingRef.current;\n if (!floating) return;\n floating.style.top = '';\n floating.style.left = '';\n floating.style.visibility = '';\n const panel = panelRef.current;\n panel?.style.removeProperty('min-width');\n panel?.style.removeProperty('max-width');\n },\n });\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"./progressBar.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r(e){let t=e.replace(`#`,``),n=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),i=parseInt(t.substring(4,6),16);return(.299*n+.587*r+.114*i)/255>.5?`#000000`:`#ffffff`}function i({className:i=void 0,total:a=100,progress:o=0,style:s=void 0,classNames:c,styles:l,...u}){function d(){let i=[];return Array.isArray(o)?i.push(...o):typeof o==`object`?i.push(o):i.push({amount:o}),i.map((o,s)=>{let u=a?o.amount/a*100:0;return n(`div`,{className:t(e.progressBarFill,s===i.length-1&&e.progressBarFillEnd,o.class,c?.fill),style:{width:`${u}%`,background:o.color||void 0,...l?.fill},title:o.label?`${o.label}: ${o.amount}`:void 0,children:o.label&&n(`div`,{className:t(e.progressBarLabel,c?.label),style:{...o.color?{color:r(o.color)}:{},...l?.label},children:o.label})},s)})}return n(`div`,{...u,className:t(e.progressBar,i,c?.root),style:{...s,...l?.root},children:d()})}export{i as default,r as getContrastColor};
|
|
1
|
+
"use client";import e from"./progressBar.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r(e){let t=e.replace(`#`,``),n=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),i=parseInt(t.substring(4,6),16);return(.299*n+.587*r+.114*i)/255>.5?`#000000`:`#ffffff`}function i({className:i=void 0,total:a=100,progress:o=0,style:s=void 0,classNames:c,styles:l,...u}){function d(){let i=[];return Array.isArray(o)?i.push(...o):typeof o==`object`?i.push(o):i.push({amount:o}),i.map((o,s)=>{let u=a?o.amount/a*100:0;return n(`div`,{className:t(e.progressBarFill,s===i.length-1&&e.progressBarFillEnd,o.class,c?.fill),style:{width:`${u}%`,background:o.color||void 0,...l?.fill},title:o.label?`${o.label}: ${o.amount}`:void 0,children:o.label&&n(`div`,{className:t(e.progressBarLabel,c?.label),style:{...o.color?{color:r(o.color)}:{},...l?.label},children:o.label})},s)})}return n(`div`,{...u,className:t(e.progressBar,i,c?.root),style:{...s,...l?.root},children:d()})}export{i as default,r as getContrastColor};
|
|
2
2
|
//# sourceMappingURL=progressBar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progressBar.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { Progress, ProgressBarProps } from './progressBar.types';\n\nimport styles from './progressBar.module.pcss';\n\nexport function getContrastColor(hexColor: string): string {\n const hex = hexColor.replace('#', '');\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#000000' : '#ffffff';\n}\n\nfunction ProgressBar({\n className = undefined,\n total = 100,\n progress = 0,\n style = undefined,\n classNames,\n styles: slotStyles,\n ...rest\n}: ProgressBarProps): ReactElement {\n function renderProgressBars() {\n const progressArray: Progress[] = [];\n\n if (Array.isArray(progress)) progressArray.push(...progress);\n else if (typeof progress === 'object') progressArray.push(progress);\n else progressArray.push({ amount: progress });\n\n return progressArray.map((prog, index) => {\n const widthPercentage = !total ? 0 : (prog.amount / total) * 100;\n\n return (\n <div\n key={index}\n className={cx(\n styles.progressBarFill,\n index === progressArray.length - 1 && styles.progressBarFillEnd,\n prog.class,\n classNames?.fill,\n )}\n style={{\n width: `${widthPercentage}%`,\n background: prog.color || undefined,\n ...slotStyles?.fill,\n }}\n title={prog.label ? `${prog.label}: ${prog.amount}` : undefined}\n >\n {prog.label && (\n <div\n className={cx(styles.progressBarLabel, classNames?.label)}\n style={{ ...(prog.color ? { color: getContrastColor(prog.color) } : {}), ...slotStyles?.label }}\n >\n {prog.label}\n </div>\n )}\n </div>\n );\n });\n }\n\n return (\n <div\n {...rest}\n className={cx(styles.progressBar, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {renderProgressBars()}\n </div>\n );\n}\n\nexport default ProgressBar;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"progressBar.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { Progress, ProgressBarProps } from './progressBar.types';\n\nimport styles from './progressBar.module.pcss';\n\nexport function getContrastColor(hexColor: string): string {\n const hex = hexColor.replace('#', '');\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#000000' : '#ffffff';\n}\n\nfunction ProgressBar({\n className = undefined,\n total = 100,\n progress = 0,\n style = undefined,\n classNames,\n styles: slotStyles,\n ...rest\n}: ProgressBarProps): ReactElement {\n function renderProgressBars() {\n const progressArray: Progress[] = [];\n\n if (Array.isArray(progress)) progressArray.push(...progress);\n else if (typeof progress === 'object') progressArray.push(progress);\n else progressArray.push({ amount: progress });\n\n return progressArray.map((prog, index) => {\n const widthPercentage = !total ? 0 : (prog.amount / total) * 100;\n\n return (\n <div\n key={index}\n className={cx(\n styles.progressBarFill,\n index === progressArray.length - 1 && styles.progressBarFillEnd,\n prog.class,\n classNames?.fill,\n )}\n style={{\n width: `${widthPercentage}%`,\n background: prog.color || undefined,\n ...slotStyles?.fill,\n }}\n title={prog.label ? `${prog.label}: ${prog.amount}` : undefined}\n >\n {prog.label && (\n <div\n className={cx(styles.progressBarLabel, classNames?.label)}\n style={{ ...(prog.color ? { color: getContrastColor(prog.color) } : {}), ...slotStyles?.label }}\n >\n {prog.label}\n </div>\n )}\n </div>\n );\n });\n }\n\n return (\n <div\n {...rest}\n className={cx(styles.progressBar, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {renderProgressBars()}\n </div>\n );\n}\n\nexport default ProgressBar;\n"],"mappings":"uHAMA,SAAgB,EAAiB,EAA0B,CACzD,IAAM,EAAM,EAAS,QAAQ,IAAK,EAAE,EAC9B,EAAI,SAAS,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpC,EAAI,SAAS,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpC,EAAI,SAAS,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EAG1C,OADmB,KAAQ,EAAI,KAAQ,EAAI,KAAQ,GAAK,IACrC,GAAM,UAAY,SACvC,CAEA,SAAS,EAAY,CACnB,YAAY,IAAA,GACZ,QAAQ,IACR,WAAW,EACX,QAAQ,IAAA,GACR,aACA,OAAQ,EACR,GAAG,GAC8B,CACjC,SAAS,GAAqB,CAC5B,IAAM,EAA4B,CAAC,EAMnC,OAJI,MAAM,QAAQ,CAAQ,EAAG,EAAc,KAAK,GAAG,CAAQ,EAClD,OAAO,GAAa,SAAU,EAAc,KAAK,CAAQ,EAC7D,EAAc,KAAK,CAAE,OAAQ,CAAS,CAAC,EAErC,EAAc,KAAK,EAAM,IAAU,CACxC,IAAM,EAAmB,EAAa,EAAK,OAAS,EAAS,IAA5B,EAEjC,OACE,EAAC,MAAD,CAEE,UAAW,EACT,EAAO,gBACP,IAAU,EAAc,OAAS,GAAK,EAAO,mBAC7C,EAAK,MACL,GAAY,IACd,EACA,MAAO,CACL,MAAO,GAAG,EAAgB,GAC1B,WAAY,EAAK,OAAS,IAAA,GAC1B,GAAG,GAAY,IACjB,EACA,MAAO,EAAK,MAAQ,GAAG,EAAK,MAAM,IAAI,EAAK,SAAW,IAAA,GAErD,SAAA,EAAK,OACJ,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EACxD,MAAO,CAAE,GAAI,EAAK,MAAQ,CAAE,MAAO,EAAiB,EAAK,KAAK,CAAE,EAAI,CAAC,EAAI,GAAG,GAAY,KAAM,EAE7F,SAAA,EAAK,KACH,CAAA,CAEJ,EAtBE,CAsBF,CAET,CAAC,CACH,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,EAAW,GAAY,IAAI,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAEtC,SAAA,EAAmB,CACjB,CAAA,CAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`progressBar_LO0sX`,t=`progressBar-fill_rt32j`,n=`progressBar-fill-end_71wL3`,r=`progressBar-label_jWud2`,i={progressBar:e,"progressBar-fill":`progressBar-fill_rt32j`,progressBarFill:t,"progressBar-fill-end":`progressBar-fill-end_71wL3`,progressBarFillEnd:n,"progressBar-label":`progressBar-label_jWud2`,progressBarLabel:r};export{i as default,e as progressBar,t as progressBarFill,n as progressBarFillEnd,r as progressBarLabel};
|
|
1
|
+
"use client";var e=`progressBar_LO0sX`,t=`progressBar-fill_rt32j`,n=`progressBar-fill-end_71wL3`,r=`progressBar-label_jWud2`,i={progressBar:e,"progressBar-fill":`progressBar-fill_rt32j`,progressBarFill:t,"progressBar-fill-end":`progressBar-fill-end_71wL3`,progressBarFillEnd:n,"progressBar-label":`progressBar-label_jWud2`,progressBarLabel:r};export{i as default,e as progressBar,t as progressBarFill,n as progressBarFillEnd,r as progressBarLabel};
|
|
2
2
|
//# sourceMappingURL=progressBar.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar {\n min-width: 100px;\n min-height: 10px;\n background-color: var(--progress-bar-track-color, var(--background-accent-light));\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n background-image: var(--primary-gradient, none);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width 0.3s ease;\n transform: translateZ(0);\n container-type: inline-size;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: var(--text-on-primary);\n font-size: 12px;\n padding: 0 min(5px, 4cqw);\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar {\n min-width: 100px;\n min-height: 10px;\n background-color: var(--progress-bar-track-color, var(--background-accent-light));\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n background-image: var(--primary-gradient, none);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width 0.3s ease;\n transform: translateZ(0);\n container-type: inline-size;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: var(--text-on-primary);\n font-size: 12px;\n padding: 0 min(5px, 4cqw);\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n/* The bar still shows its value, it just stops sliding to it. */\n@media (prefers-reduced-motion: reduce) {\n .progressBar-fill {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{RadioGroupOrientation as n}from"./radioGroup.types.mjs";import r from"./radioGroup.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{options:d=[],value:f,defaultValue:p,onChange:m=()=>{},orientation:h=n.Vertical,disabled:g=!1,size:_,tabIndex:v=0,formValidator:y=null,errorMessage:b=``,isValid:x=!0,className:S,style:C,classNames:w,styles:T,...E}=e(`RadioGroup`,u),D=a([]),O=a(y);i(()=>{O.current=y});let[,k]=o(0),[A,j]=o(p),[M,N]=o(!1),[P,F]=o(!1);i(()=>{if(!y)return;y.validate();let e=()=>k(e=>e+1);return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let I=y?y.touched&&y.hasError():!x||!!b,L=y?y.getCurrentErrorMessage():b||``,R=f!==void 0&&!y,z=y?y.value:R?f:A;function B(e,t){y?y.set(e):R||j(e),m(e,t)}function V(e){e.currentTarget.contains(e.relatedTarget)||(N(!1),O.current&&(O.current.touched=!0))}let H=d.findIndex(e=>e.value===z),U=d.findIndex(e=>!e.disabled),W=H>=0?H:U;function G(e){D.current[e]?.focus()}function K(e,t,n){if(g||d.length===0)return;let r=t;for(let t=0;t<d.length;t++)if(r=(r+e+d.length)%d.length,!d[r].disabled){G(r),B(d[r].value,n);return}}function q(e,t){let n=d[t];switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),K(1,t,e);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),K(-1,t,e);break;case` `:case`Enter`:e.preventDefault(),!g&&!n.disabled&&B(n.value,e)}}return l(`div`,{...E,role:`radiogroup`,"aria-orientation":h,"aria-disabled":g||void 0,"aria-invalid":I||void 0,className:s(r.radioGroup,h===n.Horizontal&&r.radioGroupHorizontal,g&&r.radioGroupDisabled,I&&r.radioGroupError,S,w?.root),style:{..._?{"--radio-size":_}:null,...C,...T?.root},onFocus:()=>N(!0),onBlur:V,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[d.map((e,t)=>{let n=e.value===z,i=g||!!e.disabled;return l(`div`,{ref:e=>{D.current[t]=e},role:`radio`,"aria-checked":n,"aria-disabled":i||void 0,tabIndex:i?-1:t===W?v:-1,className:s(r.radioGroupOption,n&&r.radioGroupOptionChecked,i&&r.radioGroupOptionDisabled,w?.option),style:T?.option,onClick:()=>{i||B(e.value)},onKeyDown:e=>q(e,t),children:[c(`div`,{className:s(r.radioGroupRadio,n&&r.radioGroupRadioChecked,w?.radio),style:T?.radio,children:c(`div`,{className:s(r.radioGroupDot,n&&r.radioGroupDotChecked,w?.dot),style:T?.dot})}),(e.label??e.value)!==``&&l(`div`,{className:r.radioGroupText,children:[c(`div`,{className:s(r.radioGroupLabel,w?.label),style:T?.label,children:e.label??e.value}),e.description!=null&&c(`div`,{className:s(r.radioGroupDescription,w?.description),style:T?.description,children:e.description})]})]},String(e.value))}),c(t,{variant:`error`,message:L,isVisible:I&&(M||P)})]})}export{u as default};
|
|
1
|
+
"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{RadioGroupOrientation as n}from"./radioGroup.types.mjs";import r from"./radioGroup.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{options:d=[],value:f,defaultValue:p,onChange:m=()=>{},orientation:h=n.Vertical,disabled:g=!1,size:_,tabIndex:v=0,formValidator:y=null,errorMessage:b=``,isValid:x=!0,className:S,style:C,classNames:w,styles:T,...E}=e(`RadioGroup`,u),D=a([]),O=a(y);i(()=>{O.current=y});let[,k]=o(0),[A,j]=o(p),[M,N]=o(!1),[P,F]=o(!1);i(()=>{if(!y)return;y.validate();let e=()=>k(e=>e+1);return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let I=y?y.touched&&y.hasError():!x||!!b,L=y?y.getCurrentErrorMessage():b||``,R=f!==void 0&&!y,z=y?y.value:R?f:A;function B(e,t){y?y.set(e):R||j(e),m(e,t)}function V(e){e.currentTarget.contains(e.relatedTarget)||(N(!1),O.current&&(O.current.touched=!0))}let H=d.findIndex(e=>e.value===z),U=d.findIndex(e=>!e.disabled),W=H>=0?H:U;function G(e){D.current[e]?.focus()}function K(e,t,n){if(g||d.length===0)return;let r=t;for(let t=0;t<d.length;t++)if(r=(r+e+d.length)%d.length,!d[r].disabled){G(r),B(d[r].value,n);return}}function q(e,t){let n=d[t];switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),K(1,t,e);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),K(-1,t,e);break;case` `:case`Enter`:e.preventDefault(),!g&&!n.disabled&&B(n.value,e)}}return l(`div`,{...E,role:`radiogroup`,"aria-orientation":h,"aria-disabled":g||void 0,"aria-invalid":I||void 0,className:s(r.radioGroup,h===n.Horizontal&&r.radioGroupHorizontal,g&&r.radioGroupDisabled,I&&r.radioGroupError,S,w?.root),style:{..._?{"--radio-size":_}:null,...C,...T?.root},onFocus:()=>N(!0),onBlur:V,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[d.map((e,t)=>{let n=e.value===z,i=g||!!e.disabled;return l(`div`,{ref:e=>{D.current[t]=e},role:`radio`,"aria-checked":n,"aria-disabled":i||void 0,tabIndex:i?-1:t===W?v:-1,className:s(r.radioGroupOption,n&&r.radioGroupOptionChecked,i&&r.radioGroupOptionDisabled,w?.option),style:T?.option,onClick:()=>{i||B(e.value)},onKeyDown:e=>q(e,t),children:[c(`div`,{className:s(r.radioGroupRadio,n&&r.radioGroupRadioChecked,w?.radio),style:T?.radio,children:c(`div`,{className:s(r.radioGroupDot,n&&r.radioGroupDotChecked,w?.dot),style:T?.dot})}),(e.label??e.value)!==``&&l(`div`,{className:r.radioGroupText,children:[c(`div`,{className:s(r.radioGroupLabel,w?.label),style:T?.label,children:e.label??e.value}),e.description!=null&&c(`div`,{className:s(r.radioGroupDescription,w?.description),style:T?.description,children:e.description})]})]},String(e.value))}),c(t,{variant:`error`,message:L,isVisible:I&&(M||P)})]})}export{u as default};
|
|
2
2
|
//# sourceMappingURL=radioGroup.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { RadioGroupOrientation, type RadioGroupProps, type RadioValue } from './radioGroup.types';\nimport styles from './radioGroup.module.pcss';\n\nfunction RadioGroup(props: RadioGroupProps): ReactElement {\n const {\n options = [],\n value,\n defaultValue,\n onChange = () => {},\n orientation = RadioGroupOrientation.Vertical,\n disabled = false,\n size,\n tabIndex = 0,\n formValidator = null,\n errorMessage = '',\n isValid = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RadioGroup', props);\n\n const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n const fvRef = useRef(formValidator);\n useEffect(() => {\n fvRef.current = formValidator;\n });\n const [, forceUpdate] = useState(0);\n const [internalValue, setInternalValue] = useState<RadioValue | undefined>(defaultValue);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n const isControlled = value !== undefined && !formValidator;\n const currentValue = (formValidator ? formValidator.value : isControlled ? value : internalValue) as\n | RadioValue\n | undefined;\n\n function select(next: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) {\n if (formValidator) formValidator.set(next);\n else if (!isControlled) setInternalValue(next);\n onChange(next, event);\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n setIsFocused(false);\n if (fvRef.current) fvRef.current.touched = true;\n }\n\n const selectedIndex = options.findIndex((o) => o.value === currentValue);\n const firstEnabledIndex = options.findIndex((o) => !o.disabled);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;\n\n function focusOption(index: number) {\n optionRefs.current[index]?.focus();\n }\n\n function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent) {\n if (disabled || options.length === 0) return;\n let i = fromIndex;\n for (let count = 0; count < options.length; count++) {\n i = (i + step + options.length) % options.length;\n if (!options[i].disabled) {\n focusOption(i);\n select(options[i].value, event);\n return;\n }\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent, index: number) {\n const option = options[index];\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!disabled && !option.disabled) select(option.value, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role='radiogroup'\n aria-orientation={orientation}\n aria-disabled={disabled || undefined}\n aria-invalid={hasError || undefined}\n className={cx(\n styles.radioGroup,\n orientation === RadioGroupOrientation.Horizontal && styles.radioGroupHorizontal,\n disabled && styles.radioGroupDisabled,\n hasError && styles.radioGroupError,\n className,\n classNames?.root,\n )}\n style={{ ...(size ? { '--radio-size': size } : null), ...style, ...slotStyles?.root } as React.CSSProperties}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {options.map((option, index) => {\n const checked = option.value === currentValue;\n const optionDisabled = disabled || !!option.disabled;\n return (\n <div\n key={String(option.value)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n role='radio'\n aria-checked={checked}\n aria-disabled={optionDisabled || undefined}\n tabIndex={optionDisabled ? -1 : index === rovingIndex ? tabIndex : -1}\n className={cx(\n styles.radioGroupOption,\n checked && styles.radioGroupOptionChecked,\n optionDisabled && styles.radioGroupOptionDisabled,\n classNames?.option,\n )}\n style={slotStyles?.option}\n onClick={() => {\n if (!optionDisabled) select(option.value);\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n >\n <div\n className={cx(styles.radioGroupRadio, checked && styles.radioGroupRadioChecked, classNames?.radio)}\n style={slotStyles?.radio}\n >\n <div\n className={cx(styles.radioGroupDot, checked && styles.radioGroupDotChecked, classNames?.dot)}\n style={slotStyles?.dot}\n />\n </div>\n {(option.label ?? option.value) !== '' && (\n <div className={styles.radioGroupText}>\n <div className={cx(styles.radioGroupLabel, classNames?.label)} style={slotStyles?.label}>\n {option.label ?? option.value}\n </div>\n {option.description != null && (\n <div\n className={cx(styles.radioGroupDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {option.description}\n </div>\n )}\n </div>\n )}\n </div>\n );\n })}\n <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n </div>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radioGroup.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { RadioGroupOrientation, type RadioGroupProps, type RadioValue } from './radioGroup.types';\nimport styles from './radioGroup.module.pcss';\n\nfunction RadioGroup(props: RadioGroupProps): ReactElement {\n const {\n options = [],\n value,\n defaultValue,\n onChange = () => {},\n orientation = RadioGroupOrientation.Vertical,\n disabled = false,\n size,\n tabIndex = 0,\n formValidator = null,\n errorMessage = '',\n isValid = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RadioGroup', props);\n\n const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n const fvRef = useRef(formValidator);\n useEffect(() => {\n fvRef.current = formValidator;\n });\n const [, forceUpdate] = useState(0);\n const [internalValue, setInternalValue] = useState<RadioValue | undefined>(defaultValue);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n const isControlled = value !== undefined && !formValidator;\n const currentValue = (formValidator ? formValidator.value : isControlled ? value : internalValue) as\n | RadioValue\n | undefined;\n\n function select(next: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) {\n if (formValidator) formValidator.set(next);\n else if (!isControlled) setInternalValue(next);\n onChange(next, event);\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n setIsFocused(false);\n if (fvRef.current) fvRef.current.touched = true;\n }\n\n const selectedIndex = options.findIndex((o) => o.value === currentValue);\n const firstEnabledIndex = options.findIndex((o) => !o.disabled);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;\n\n function focusOption(index: number) {\n optionRefs.current[index]?.focus();\n }\n\n function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent) {\n if (disabled || options.length === 0) return;\n let i = fromIndex;\n for (let count = 0; count < options.length; count++) {\n i = (i + step + options.length) % options.length;\n if (!options[i].disabled) {\n focusOption(i);\n select(options[i].value, event);\n return;\n }\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent, index: number) {\n const option = options[index];\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!disabled && !option.disabled) select(option.value, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role='radiogroup'\n aria-orientation={orientation}\n aria-disabled={disabled || undefined}\n aria-invalid={hasError || undefined}\n className={cx(\n styles.radioGroup,\n orientation === RadioGroupOrientation.Horizontal && styles.radioGroupHorizontal,\n disabled && styles.radioGroupDisabled,\n hasError && styles.radioGroupError,\n className,\n classNames?.root,\n )}\n style={{ ...(size ? { '--radio-size': size } : null), ...style, ...slotStyles?.root } as React.CSSProperties}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {options.map((option, index) => {\n const checked = option.value === currentValue;\n const optionDisabled = disabled || !!option.disabled;\n return (\n <div\n key={String(option.value)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n role='radio'\n aria-checked={checked}\n aria-disabled={optionDisabled || undefined}\n tabIndex={optionDisabled ? -1 : index === rovingIndex ? tabIndex : -1}\n className={cx(\n styles.radioGroupOption,\n checked && styles.radioGroupOptionChecked,\n optionDisabled && styles.radioGroupOptionDisabled,\n classNames?.option,\n )}\n style={slotStyles?.option}\n onClick={() => {\n if (!optionDisabled) select(option.value);\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n >\n <div\n className={cx(styles.radioGroupRadio, checked && styles.radioGroupRadioChecked, classNames?.radio)}\n style={slotStyles?.radio}\n >\n <div\n className={cx(styles.radioGroupDot, checked && styles.radioGroupDotChecked, classNames?.dot)}\n style={slotStyles?.dot}\n />\n </div>\n {(option.label ?? option.value) !== '' && (\n <div className={styles.radioGroupText}>\n <div className={cx(styles.radioGroupLabel, classNames?.label)} style={slotStyles?.label}>\n {option.label ?? option.value}\n </div>\n {option.description != null && (\n <div\n className={cx(styles.radioGroupDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {option.description}\n </div>\n )}\n </div>\n )}\n </div>\n );\n })}\n <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n </div>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`radioGroup_5PUYO`,t=`radioGroup-horizontal_cfCch`,n=`radioGroup-disabled_O2hKy`,r=`radioGroup-error_HVUcn`,i=`radioGroup-radio_XLU2j`,a=`radioGroup-radio-checked_AOEJu`,o=`radioGroup-option_QxMeW`,s=`radioGroup-option-disabled_Q0y35`,c=`radioGroup-dot_Q-4Ge`,l=`radioGroup-dot-checked_7djgv`,u=`radioGroup-text_8ekBs`,d=`radioGroup-label_hJD2S`,f=`radioGroup-description_xZSLE`,p={radioGroup:e,"radioGroup-horizontal":`radioGroup-horizontal_cfCch`,radioGroupHorizontal:t,"radioGroup-disabled":`radioGroup-disabled_O2hKy`,radioGroupDisabled:n,"radioGroup-error":`radioGroup-error_HVUcn`,radioGroupError:r,"radioGroup-radio":`radioGroup-radio_XLU2j`,radioGroupRadio:i,"radioGroup-radio-checked":`radioGroup-radio-checked_AOEJu`,radioGroupRadioChecked:a,"radioGroup-option":`radioGroup-option_QxMeW`,radioGroupOption:o,"radioGroup-option-disabled":`radioGroup-option-disabled_Q0y35`,radioGroupOptionDisabled:s,"radioGroup-dot":`radioGroup-dot_Q-4Ge`,radioGroupDot:c,"radioGroup-dot-checked":`radioGroup-dot-checked_7djgv`,radioGroupDotChecked:l,"radioGroup-text":`radioGroup-text_8ekBs`,radioGroupText:u,"radioGroup-label":`radioGroup-label_hJD2S`,radioGroupLabel:d,"radioGroup-description":`radioGroup-description_xZSLE`,radioGroupDescription:f};export{p as default,e as radioGroup,f as radioGroupDescription,n as radioGroupDisabled,c as radioGroupDot,l as radioGroupDotChecked,r as radioGroupError,t as radioGroupHorizontal,d as radioGroupLabel,o as radioGroupOption,s as radioGroupOptionDisabled,i as radioGroupRadio,a as radioGroupRadioChecked,u as radioGroupText};
|
|
1
|
+
"use client";var e=`radioGroup_5PUYO`,t=`radioGroup-horizontal_cfCch`,n=`radioGroup-disabled_O2hKy`,r=`radioGroup-error_HVUcn`,i=`radioGroup-radio_XLU2j`,a=`radioGroup-radio-checked_AOEJu`,o=`radioGroup-option_QxMeW`,s=`radioGroup-option-disabled_Q0y35`,c=`radioGroup-dot_Q-4Ge`,l=`radioGroup-dot-checked_7djgv`,u=`radioGroup-text_8ekBs`,d=`radioGroup-label_hJD2S`,f=`radioGroup-description_xZSLE`,p={radioGroup:e,"radioGroup-horizontal":`radioGroup-horizontal_cfCch`,radioGroupHorizontal:t,"radioGroup-disabled":`radioGroup-disabled_O2hKy`,radioGroupDisabled:n,"radioGroup-error":`radioGroup-error_HVUcn`,radioGroupError:r,"radioGroup-radio":`radioGroup-radio_XLU2j`,radioGroupRadio:i,"radioGroup-radio-checked":`radioGroup-radio-checked_AOEJu`,radioGroupRadioChecked:a,"radioGroup-option":`radioGroup-option_QxMeW`,radioGroupOption:o,"radioGroup-option-disabled":`radioGroup-option-disabled_Q0y35`,radioGroupOptionDisabled:s,"radioGroup-dot":`radioGroup-dot_Q-4Ge`,radioGroupDot:c,"radioGroup-dot-checked":`radioGroup-dot-checked_7djgv`,radioGroupDotChecked:l,"radioGroup-text":`radioGroup-text_8ekBs`,radioGroupText:u,"radioGroup-label":`radioGroup-label_hJD2S`,radioGroupLabel:d,"radioGroup-description":`radioGroup-description_xZSLE`,radioGroupDescription:f};export{p as default,e as radioGroup,f as radioGroupDescription,n as radioGroupDisabled,c as radioGroupDot,l as radioGroupDotChecked,r as radioGroupError,t as radioGroupHorizontal,d as radioGroupLabel,o as radioGroupOption,s as radioGroupOptionDisabled,i as radioGroupRadio,a as radioGroupRadioChecked,u as radioGroupText};
|
|
2
2
|
//# sourceMappingURL=radioGroup.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n /* The base is declared here rather than only on the option, so every em below resolves\n against the theme's text size instead of whatever the group happens to sit in. At a 16px\n base these are the 18px dot, 12px row gap and 10px label gap it has always had. */\n font-size: var(--default-font-size);\n\n --custom-radio-size: var(--radio-size, 1.125em);\n --custom-radio-gap: var(--radio-gap, 0.625em);\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: 1.25em;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: var(--custom-radio-gap);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--custom-radio-size);\n height: var(--custom-radio-size);\n border-radius: 50%;\n border: 0.1125em solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0.0625em;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--custom-radio-size) * 0.5);\n height: calc(var(--custom-radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n /* The base is declared here rather than only on the option, so every em below resolves\n against the theme's text size instead of whatever the group happens to sit in. At a 16px\n base these are the 18px dot, 12px row gap and 10px label gap it has always had. */\n font-size: var(--default-font-size);\n\n --custom-radio-size: var(--radio-size, 1.125em);\n --custom-radio-gap: var(--radio-gap, 0.625em);\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: 1.25em;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: var(--custom-radio-gap);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--custom-radio-size);\n height: var(--custom-radio-size);\n border-radius: 50%;\n border: 0.1125em solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0.0625em;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--custom-radio-size) * 0.5);\n height: calc(var(--custom-radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .radioGroup-dot {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=function(e){return e.Vertical=`vertical`,e.Horizontal=`horizontal`,e}({});export{e as RadioGroupOrientation};
|
|
1
|
+
"use client";var e=function(e){return e.Vertical=`vertical`,e.Horizontal=`horizontal`,e}({});export{e as RadioGroupOrientation};
|
|
2
2
|
//# sourceMappingURL=radioGroup.types.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.types.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type RadioValue = string | number;\n\nexport enum RadioGroupOrientation {\n Vertical = 'vertical',\n Horizontal = 'horizontal',\n}\n\nexport interface RadioOption {\n value: RadioValue;\n /** Visible label; falls back to `value` when omitted. */\n label?: ReactNode;\n /** Secondary description shown under the label. */\n description?: ReactNode;\n /** Disable just this option. */\n disabled?: boolean;\n}\n\nexport type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';\n\nexport interface RadioGroupProps extends Omit<HtmlProps, 'onChange'> {\n /** The selectable options. */\n options: RadioOption[];\n /** Controlled selected value. Omit for uncontrolled. */\n value?: RadioValue;\n /** Initial value when uncontrolled. */\n defaultValue?: RadioValue;\n /** Fires with the newly selected value. */\n onChange?: (value: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) => void;\n /** Layout direction (default `Vertical`). */\n orientation?: RadioGroupOrientation;\n /** Disable the whole group. */\n disabled?: boolean;\n /** Diameter of the radio circle (default `'18px'`). */\n size?: string;\n /** Tab index of the active (roving) option. */\n tabIndex?: number;\n formValidator?: FormValidator | null;\n /** Manual error message shown in a tooltip (used when there's no `formValidator`, or to force one). */\n errorMessage?: string;\n /** Manual valid state when not using a `formValidator` (default `true`). */\n isValid?: boolean;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<RadioGroupSlots>;\n styles?: SlotStyles<RadioGroupSlots>;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radioGroup.types.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type RadioValue = string | number;\n\nexport enum RadioGroupOrientation {\n Vertical = 'vertical',\n Horizontal = 'horizontal',\n}\n\nexport interface RadioOption {\n value: RadioValue;\n /** Visible label; falls back to `value` when omitted. */\n label?: ReactNode;\n /** Secondary description shown under the label. */\n description?: ReactNode;\n /** Disable just this option. */\n disabled?: boolean;\n}\n\nexport type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';\n\nexport interface RadioGroupProps extends Omit<HtmlProps, 'onChange'> {\n /** The selectable options. */\n options: RadioOption[];\n /** Controlled selected value. Omit for uncontrolled. */\n value?: RadioValue;\n /** Initial value when uncontrolled. */\n defaultValue?: RadioValue;\n /** Fires with the newly selected value. */\n onChange?: (value: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) => void;\n /** Layout direction (default `Vertical`). */\n orientation?: RadioGroupOrientation;\n /** Disable the whole group. */\n disabled?: boolean;\n /** Diameter of the radio circle (default `'18px'`). */\n size?: string;\n /** Tab index of the active (roving) option. */\n tabIndex?: number;\n formValidator?: FormValidator | null;\n /** Manual error message shown in a tooltip (used when there's no `formValidator`, or to force one). */\n errorMessage?: string;\n /** Manual valid state when not using a `formValidator` (default `true`). */\n isValid?: boolean;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<RadioGroupSlots>;\n styles?: SlotStyles<RadioGroupSlots>;\n}\n"],"mappings":"aAMA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,WAAA,cACF,EAAA,CAAA,CAAA"}
|