@atom-learning/components 6.16.0-beta.3 → 6.16.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/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/AccordionContent.js.map +1 -1
- package/dist/components/accordion/AccordionItem.js.map +1 -1
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.constants.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.d.ts +0 -1
- package/dist/components/action-icon/ActionIcon.js +2 -4
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialog.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertContext.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertDialog.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/reducer.js.map +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/AvatarContext.js.map +1 -1
- package/dist/components/avatar/AvatarIcon.js.map +1 -1
- package/dist/components/avatar/AvatarImage.js.map +1 -1
- package/dist/components/avatar/AvatarInitial.js.map +1 -1
- package/dist/components/avatar/AvatarPlaceholder.js.map +1 -1
- package/dist/components/badge/Badge.colorscheme.config.js.map +1 -1
- package/dist/components/badge/Badge.context.js.map +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/BadgeIcon.js.map +1 -1
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/banner/Banner.js.map +1 -1
- package/dist/components/banner/BannerContainer.js.map +1 -1
- package/dist/components/banner/BannerContext.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +0 -1
- package/dist/components/banner/banner-regular/BannerRegular.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularActions.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularButton.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularContainer.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularContent.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +1 -2
- package/dist/components/banner/banner-regular/BannerRegularDismiss.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularHeading.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularImage.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularText.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +0 -1
- package/dist/components/banner/banner-slim/BannerSlim.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimActions.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimButton.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContainer.d.ts +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContainer.js +3 -3
- package/dist/components/banner/banner-slim/BannerSlimContainer.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContent.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +1 -2
- package/dist/components/banner/banner-slim/BannerSlimDismiss.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimImage.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimText.js.map +1 -1
- package/dist/components/box/Box.js.map +1 -1
- package/dist/components/button/Button.d.ts +0 -1
- package/dist/components/button/Button.js +13 -17
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/calendar/Calendar.js.map +1 -1
- package/dist/components/calendar/Day.js.map +1 -1
- package/dist/components/calendar/constants.js.map +1 -1
- package/dist/components/carousel/Carousel.js.map +1 -1
- package/dist/components/carousel/CarouselArrows.js.map +1 -1
- package/dist/components/carousel/CarouselPagination.js.map +1 -1
- package/dist/components/carousel/CarouselSlide.js.map +1 -1
- package/dist/components/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox-field/CheckboxField.js +6 -1
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupItem.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupSub.js.map +1 -1
- package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.js.map +1 -1
- package/dist/components/checkbox-group/context/CheckboxGroupMounted.context.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTree.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsible.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleContent.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleTrigger.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeItem.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeItemContent.js.map +1 -1
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/ChipGroup.js.map +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js.map +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupRoot.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map +1 -1
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/combobox/ComboboxList.js.map +1 -1
- package/dist/components/combobox/ComboboxOption.js.map +1 -1
- package/dist/components/combobox/ComboboxPopover.js.map +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/data-table/DataTable.js +0 -88
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/data-table/DataTable.types.js.map +1 -1
- package/dist/components/data-table/DataTableBody.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActions.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActionsFloating.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js.map +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/data-table/DataTableDataCell.js.map +1 -1
- package/dist/components/data-table/DataTableEmptyState.js.map +1 -1
- package/dist/components/data-table/DataTableError.js.map +1 -1
- package/dist/components/data-table/DataTableGlobalFilter.js.map +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js.map +1 -1
- package/dist/components/data-table/DataTableLoading.js.map +1 -1
- package/dist/components/data-table/DataTableMetaData.js.map +1 -1
- package/dist/components/data-table/DataTableRow.js.map +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableTable.js +2 -2
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTable.js +6 -3
- package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js.map +1 -1
- package/dist/components/data-table/getNewAsyncData.js.map +1 -1
- package/dist/components/data-table/pagination/Pagination.js.map +1 -1
- package/dist/components/data-table/usePagination.js.map +1 -1
- package/dist/components/data-table/useSorting.js.map +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/dialog/DialogActionBar.js.map +1 -1
- package/dist/components/dialog/DialogBackground.js.map +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dialog/DialogFooter.js.map +1 -1
- package/dist/components/dialog/DialogHeading.js.map +1 -1
- package/dist/components/dialog/DialogNavigationBar.js.map +1 -1
- package/dist/components/dialog/DialogScrollableContent.js.map +1 -1
- package/dist/components/dismissible/DismissibleRoot.js.map +1 -1
- package/dist/components/dismissible/DismissibleTrigger.js.map +1 -1
- package/dist/components/dismissible/index.js.map +1 -1
- package/dist/components/dismissible-group/DismissibleGroupItem.js.map +1 -1
- package/dist/components/dismissible-group/DismissibleGroupRoot.js.map +1 -1
- package/dist/components/dismissible-group/index.js.map +1 -1
- package/dist/components/divider/Divider.js.map +1 -1
- package/dist/components/drawer/Drawer.context.js.map +1 -1
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/drawer/DrawerClose.js.map +1 -1
- package/dist/components/drawer/DrawerContent.js.map +1 -1
- package/dist/components/drawer/DrawerFooter.js.map +1 -1
- package/dist/components/drawer/DrawerHeader.js.map +1 -1
- package/dist/components/drawer/DrawerMain.js.map +1 -1
- package/dist/components/drawer/DrawerOverlay.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.ts +1 -2
- package/dist/components/dropdown-menu/DropdownMenu.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuContent.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuItem.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.d.ts +1 -2
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js +8 -13
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuSeparator.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuTrigger.js.map +1 -1
- package/dist/components/empty-state/EmptyState.context.js.map +1 -1
- package/dist/components/empty-state/EmptyState.js.map +1 -1
- package/dist/components/empty-state/EmptyStateBody.js.map +1 -1
- package/dist/components/empty-state/EmptyStateImage.js.map +1 -1
- package/dist/components/empty-state/EmptyStateTitle.js.map +1 -1
- package/dist/components/field-wrapper/FieldDescription.js.map +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/field-wrapper/InlineFieldWrapper.js.map +1 -1
- package/dist/components/file-drop/FileDrop.js.map +1 -1
- package/dist/components/file-drop/FileDropContext.js.map +1 -1
- package/dist/components/file-drop/useFileDrop.js.map +1 -1
- package/dist/components/file-input/FileInput.js.map +1 -1
- package/dist/components/flex/Flex.js.map +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/useFieldError.js.map +1 -1
- package/dist/components/form/useFormCustomContext.js.map +1 -1
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/image/Image.js.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/inline-message/InlineMessage.config.js.map +1 -1
- package/dist/components/inline-message/InlineMessage.js.map +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-field/InputField.js.map +1 -1
- package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map +1 -1
- package/dist/components/keyboard-shortcut/index.js.map +1 -1
- package/dist/components/label/Label.js.map +1 -1
- package/dist/components/link/Link.d.ts +0 -1
- package/dist/components/link/Link.js +9 -13
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/markdown-content/MarkdownContent.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownCode.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownEmphasis.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownHeading.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownImage.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownInlineCode.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownLink.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownList.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownListItem.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownParagraph.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownStrong.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownThematicBreak.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.colorscheme.config.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +0 -2
- package/dist/components/navigation/NavigationMenu.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.styles.js.map +1 -1
- package/dist/components/navigation/NavigationMenuContext.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdown.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownItem.d.ts +0 -1
- package/dist/components/navigation/NavigationMenuDropdownItem.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map +1 -1
- package/dist/components/navigation/NavigationMenuLink.d.ts +0 -1
- package/dist/components/navigation/NavigationMenuLink.js +11 -22
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.colorscheme.config.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +1 -3
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalIcon.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItem.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.d.ts +2 -4
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js +3 -5
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalList.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map +1 -1
- package/dist/components/notification-badge/NotificationBadge.js.map +1 -1
- package/dist/components/number-input/NumberInput.js +2 -2
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +1 -2
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/number-input-field/NumberInputField.js.map +1 -1
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationItems.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.d.ts +1 -2
- package/dist/components/pagination/PaginationNextButton.js.map +1 -1
- package/dist/components/pagination/PaginationPage.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.d.ts +1 -2
- package/dist/components/pagination/PaginationPreviousButton.js.map +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.js.map +1 -1
- package/dist/components/pagination/pagination.constants.js.map +1 -1
- package/dist/components/pagination/pagination.helper.js.map +1 -1
- package/dist/components/pagination/usePagination.js.map +1 -1
- package/dist/components/password-field/PasswordField.js +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/password-input/PasswordInput.js.map +1 -1
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/popover/PopoverContent.js.map +1 -1
- package/dist/components/progress-bar/ProgressBar.js.map +1 -1
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/components/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/radio-button-field/RadioField.js.map +1 -1
- package/dist/components/radio-card/RadioCard.js.map +1 -1
- package/dist/components/radio-card/RadioCardGroup.js.map +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/search-input/SearchInput.js +9 -4
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/section-message/SectionMessage.js.map +1 -1
- package/dist/components/section-message/SectionMessageContext.js.map +1 -1
- package/dist/components/section-message/SectionMessageDescription.js.map +1 -1
- package/dist/components/section-message/SectionMessageDismiss.js.map +1 -1
- package/dist/components/section-message/SectionMessageIcon.js.map +1 -1
- package/dist/components/section-message/SectionMessageLayout.js.map +1 -1
- package/dist/components/section-message/SectionMessageTitle.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlBadge.js +1 -1
- package/dist/components/segmented-control/SegmentedControlBadge.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlContext.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlIcon.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js.map +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select-field/SelectField.js.map +1 -1
- package/dist/components/select-menu/SelectMenu.d.ts +23 -0
- package/dist/components/select-menu/SelectMenu.js +26 -0
- package/dist/components/select-menu/SelectMenu.js.map +1 -0
- package/dist/components/select-menu/SelectMenuContent.d.ts +3 -0
- package/dist/components/select-menu/SelectMenuContent.js +66 -0
- package/dist/components/select-menu/SelectMenuContent.js.map +1 -0
- package/dist/components/select-menu/SelectMenuContext.d.ts +9 -0
- package/dist/components/select-menu/SelectMenuContext.js +11 -0
- package/dist/components/select-menu/SelectMenuContext.js.map +1 -0
- package/dist/components/select-menu/SelectMenuItem.d.ts +3 -0
- package/dist/components/select-menu/SelectMenuItem.js +59 -0
- package/dist/components/select-menu/SelectMenuItem.js.map +1 -0
- package/dist/components/select-menu/SelectMenuLabel.d.ts +8 -0
- package/dist/components/select-menu/SelectMenuLabel.js +16 -0
- package/dist/components/select-menu/SelectMenuLabel.js.map +1 -0
- package/dist/components/select-menu/SelectMenuSeparator.d.ts +4 -0
- package/dist/components/select-menu/SelectMenuSeparator.js +13 -0
- package/dist/components/select-menu/SelectMenuSeparator.js.map +1 -0
- package/dist/components/select-menu/SelectMenuTrigger.d.ts +7 -0
- package/dist/components/select-menu/SelectMenuTrigger.js +91 -0
- package/dist/components/select-menu/SelectMenuTrigger.js.map +1 -0
- package/dist/components/select-menu-field/SelectMenuField.d.ts +14 -0
- package/dist/components/select-menu-field/SelectMenuField.js +46 -0
- package/dist/components/select-menu-field/SelectMenuField.js.map +1 -0
- package/dist/components/side-bar/SideBar.js.map +1 -1
- package/dist/components/side-bar/SideBarComponents.js.map +1 -1
- package/dist/components/side-bar/SideBarContext.js.map +1 -1
- package/dist/components/skeleton-loader/Skeleton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonBarChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonButton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.js +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonColumnChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonHeading.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonPanelList.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonSubjectList.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonTable.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonTabs.js.map +1 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/slider/SliderSteps.js.map +1 -1
- package/dist/components/slider/SliderValue.js.map +1 -1
- package/dist/components/slider-field/SliderField.js.map +1 -1
- package/dist/components/sortable/Handle.d.ts +1 -2
- package/dist/components/sortable/Handle.js.map +1 -1
- package/dist/components/sortable/SortableHandle.js.map +1 -1
- package/dist/components/sortable/SortableItem.js.map +1 -1
- package/dist/components/sortable/SortableRoot.js.map +1 -1
- package/dist/components/spacer/Spacer.js.map +1 -1
- package/dist/components/stepper/Stepper.js.map +1 -1
- package/dist/components/stepper/StepperStepBack.js.map +1 -1
- package/dist/components/stepper/StepperStepBullet.js.map +1 -1
- package/dist/components/stepper/StepperStepContainer.js.map +1 -1
- package/dist/components/stepper/StepperStepForward.js.map +1 -1
- package/dist/components/stepper/StepperStepLabel.js.map +1 -1
- package/dist/components/stepper/StepperSteps.js.map +1 -1
- package/dist/components/stepper/stepper-context/StepperContext.js.map +1 -1
- package/dist/components/stepper/types.js.map +1 -1
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/TableBody.js.map +1 -1
- package/dist/components/table/TableCell.js.map +1 -1
- package/dist/components/table/TableFooter.js.map +1 -1
- package/dist/components/table/TableFooterCell.js.map +1 -1
- package/dist/components/table/TableHeader.js.map +1 -1
- package/dist/components/table/TableHeaderCell.js.map +1 -1
- package/dist/components/table/TableRow.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.js.map +1 -1
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/TabsContent.js.map +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/components/tabs/TabsTriggerList.js.map +1 -1
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea-field/TextareaField.js.map +1 -1
- package/dist/components/tile/Tile.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.d.ts +1 -3
- package/dist/components/tile-interactive/TileInteractive.js +2 -4
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +1 -3
- package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +3 -3
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastCloseButton.js.map +1 -1
- package/dist/components/toast/ToastContext.js.map +1 -1
- package/dist/components/toast/ToastIcon.js.map +1 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupButton.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/index.js.map +1 -1
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/tooltip/TooltipContent.js.map +1 -1
- package/dist/components/top-bar/TopBar.colorscheme.config.js.map +1 -1
- package/dist/components/top-bar/TopBar.d.ts +1 -2
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/components/top-bar/TopBarActionIcon.js.map +1 -1
- package/dist/components/top-bar/TopBarBrand.js.map +1 -1
- package/dist/components/tree/Tree.d.ts +1 -1
- package/dist/components/tree/Tree.js.map +1 -1
- package/dist/components/tree/TreeCollapsible.js.map +1 -1
- package/dist/components/tree/TreeCollapsibleContent.js.map +1 -1
- package/dist/components/tree/TreeCollapsibleTrigger.js.map +1 -1
- package/dist/components/tree/TreeIcon.js +1 -1
- package/dist/components/tree/TreeIcon.js.map +1 -1
- package/dist/components/tree/TreeItem.js.map +1 -1
- package/dist/components/tree/TreeItemContent.js.map +1 -1
- package/dist/components/tree/TreeList.js.map +1 -1
- package/dist/components/tree/TreeListItem.js +1 -1
- package/dist/components/tree/TreeListItem.js.map +1 -1
- package/dist/components/tree/TreeText.d.ts +1 -1
- package/dist/components/tree/TreeText.js +3 -3
- package/dist/components/tree/TreeText.js.map +1 -1
- package/dist/components/video/Video.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/experiments/color-scheme/ColorScheme.config.js.map +1 -1
- package/dist/experiments/color-scheme/ColorScheme.js.map +1 -1
- package/dist/index.cjs.js +377 -220
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +3 -2
- package/dist/styled.js +2 -1
- package/dist/styled.js.map +1 -1
- package/dist/utilities/css-wrapper/CSSWrapper.js.map +1 -1
- package/dist/utilities/event/preventEvent.js.map +1 -1
- package/dist/utilities/hooks/useCallbackRef.js.map +1 -1
- package/dist/utilities/hooks/useIsMountedRef.js.map +1 -1
- package/dist/utilities/hooks/useResizeObserver.js.map +1 -1
- package/dist/utilities/hooks/useScrollPosition.js.map +1 -1
- package/dist/utilities/hooks/useSize.js.map +1 -1
- package/dist/utilities/hooks/useWindowScrollPosition.js.map +1 -1
- package/dist/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js.map +1 -1
- package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js.map +1 -1
- package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/utilities/radix-overrides/toggle-group/index.js.map +1 -1
- package/dist/utilities/style/backdrop-overlay.js.map +1 -1
- package/dist/utilities/style/get-icon-size.js.map +1 -1
- package/dist/utilities/uri/index.js.map +1 -1
- package/package.json +2 -1
- package/dist/components/router-provider/RouterProvider.d.ts +0 -16
- package/dist/components/router-provider/RouterProvider.js +0 -19
- package/dist/components/router-provider/RouterProvider.js.map +0 -1
package/dist/components/navigation-menu-vertical/NavigationMenuVertical.colorscheme.config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVertical.colorscheme.config.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.colorscheme.config.ts"],"sourcesContent":["const light = {\n '--text': 'var(--foreground)',\n '--background': 'var(--base-1)',\n '--background-hover': 'var(--base-2)',\n '--background-active': 'var(--base-3)',\n '--text-selected': 'var(--accent-9)',\n '--background-selected': 'var(--accent-2)'\n}\n\nexport const colorSchemes = {\n light\n}\n"],"mappings":"AASA,IAAa,eAAe,EAC1B;
|
|
1
|
+
{"version":3,"file":"NavigationMenuVertical.colorscheme.config.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.colorscheme.config.ts"],"sourcesContent":["const light = {\n '--text': 'var(--foreground)',\n '--background': 'var(--base-1)',\n '--background-hover': 'var(--base-2)',\n '--background-active': 'var(--base-3)',\n '--text-selected': 'var(--accent-9)',\n '--background-selected': 'var(--accent-2)'\n}\n\nexport const colorSchemes = {\n light\n}\n"],"mappings":"AASA,IAAa,eAAe,EAC1B,OAVY;CACZ,UAAU;CACV,gBAAgB;CAChB,sBAAsB;CACtB,uBAAuB;CACvB,mBAAmB;CACnB,yBAAyB;CAC1B,EAIA"}
|
|
@@ -4,12 +4,10 @@ declare const StyledRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui
|
|
|
4
4
|
}>;
|
|
5
5
|
type TNavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
|
|
6
6
|
export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigationVerticalProps) => React.JSX.Element) & {
|
|
7
|
-
Link: ({ as, href, children,
|
|
7
|
+
Link: ({ as, href, children, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
|
|
8
8
|
size?: "md" | "lg" | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
|
-
} & {
|
|
12
|
-
reloadDocument?: boolean;
|
|
13
11
|
}) => React.JSX.Element;
|
|
14
12
|
Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
|
|
15
13
|
content?: string | undefined | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled, Theme } from '~/styled'\n\nimport { colorSchemes as navigationMenuVerticalColorSchemes } from './NavigationMenuVertical.colorscheme.config'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n base: ['w-full']\n})\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype TNavigationVerticalProps = Omit<\n React.ComponentProps<typeof StyledRoot>,\n | 'delayDuration'\n | 'skipDelayDuration'\n | 'defaultValue'\n | 'value'\n | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = Object.assign(\n ({ children, ...rest }: TNavigationVerticalProps) => (\n <Theme theme={navigationMenuVerticalColorSchemes['light']}>\n <StyledRoot {...rest} orientation=\"vertical\">\n <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n </StyledRoot>\n </Theme>\n ),\n {\n Link: NavigationMenuVerticalLink,\n Accordion: NavigationMenuVerticalAccordion,\n AccordionContent: NavigationMenuVerticalAccordionContent,\n AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n Item: NavigationMenuVerticalItem,\n ItemContent: NavigationMenuVerticalItemContent,\n Icon: NavigationMenuVerticalIcon,\n Text: NavigationMenuVerticalText\n }\n)\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled, Theme } from '~/styled'\n\nimport { colorSchemes as navigationMenuVerticalColorSchemes } from './NavigationMenuVertical.colorscheme.config'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n base: ['w-full']\n})\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype TNavigationVerticalProps = Omit<\n React.ComponentProps<typeof StyledRoot>,\n | 'delayDuration'\n | 'skipDelayDuration'\n | 'defaultValue'\n | 'value'\n | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = Object.assign(\n ({ children, ...rest }: TNavigationVerticalProps) => (\n <Theme theme={navigationMenuVerticalColorSchemes['light']}>\n <StyledRoot {...rest} orientation=\"vertical\">\n <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n </StyledRoot>\n </Theme>\n ),\n {\n Link: NavigationMenuVerticalLink,\n Accordion: NavigationMenuVerticalAccordion,\n AccordionContent: NavigationMenuVerticalAccordionContent,\n AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n Item: NavigationMenuVerticalItem,\n ItemContent: NavigationMenuVerticalItemContent,\n Icon: NavigationMenuVerticalIcon,\n Text: NavigationMenuVerticalText\n }\n)\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC;AAkBF,IAAa,yBAAyB,OAAO,QAC1C,EAAE,UAAU,GAAG,WACd,sBAAA,cAAC,OAAD,EAAO,OAAO,aAAmC,UAIzC,EAHN,sBAAA,cAAC,YAAD;CAAY,GAAI;CAAM,aAAY;CAErB,EADX,sBAAA,cAAC,4BAAA,MAA4B,SAAsC,CACxD,CACP,EAEV;CACE,MAAM;CACN,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,MAAM;CACN,aAAa;CACb,MAAM;CACN,MAAM;CACP,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVertical.styles.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n '[--navigation-menu-vertical-item-font-weight:400]',\n 'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n 'border-none',\n 'outline-none',\n 'bg-none',\n 'decoration-[inherit]',\n 'cursor-pointer',\n 'rounded-md',\n 'flex',\n 'items-center',\n 'p-2',\n 'pl-(--navigation-menu-vertical-item-pl)',\n 'w-full',\n 'text-(--text)',\n 'bg-(--background)',\n 'disabled:cursor-not-allowed',\n '[text-decoration:unset]',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--background-active)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--background-hover)',\n 'data-active:bg-(--background-selected)',\n 'data-active:text-(--text-selected)',\n 'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"mappings":";AAAA,IAAa,mCAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;
|
|
1
|
+
{"version":3,"file":"NavigationMenuVertical.styles.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n '[--navigation-menu-vertical-item-font-weight:400]',\n 'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n 'border-none',\n 'outline-none',\n 'bg-none',\n 'decoration-[inherit]',\n 'cursor-pointer',\n 'rounded-md',\n 'flex',\n 'items-center',\n 'p-2',\n 'pl-(--navigation-menu-vertical-item-pl)',\n 'w-full',\n 'text-(--text)',\n 'bg-(--background)',\n 'disabled:cursor-not-allowed',\n '[text-decoration:unset]',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--background-active)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--background-hover)',\n 'data-active:bg-(--background-selected)',\n 'data-active:text-(--text-selected)',\n 'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"mappings":";AAAA,IAAa,mCAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype TNavigationMenuVerticalAccordionContextValue = {\n triggerRef?: React.MutableRefObject<HTMLElement | null>\n setTriggerRef?: (HTMLElement) => void\n}\nexport const NavigationMenuVerticalAccordionContext =\n React.createContext<TNavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n const [triggerRef, setTriggerRef] = useCallbackRef()\n return (\n <NavigationMenuVerticalAccordionContext.Provider\n value={{ triggerRef, setTriggerRef }}\n >\n {children}\n </NavigationMenuVerticalAccordionContext.Provider>\n )\n}\n\ntype TNavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n defaultOpen,\n open,\n onOpenChange,\n disabled,\n ...rest\n}: TNavigationMenuVerticalAccordionProps): JSX.Element => {\n const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n return (\n <NavigationMenuVerticalAccordionProvider>\n <Root {...collapsibleProps} asChild>\n <NavigationMenuVerticalItem {...rest} />\n </Root>\n </NavigationMenuVerticalAccordionProvider>\n )\n}\n"],"mappings":";;;;;AAWA,IAAa,yCACX,QAAM,cAA4D,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype TNavigationMenuVerticalAccordionContextValue = {\n triggerRef?: React.MutableRefObject<HTMLElement | null>\n setTriggerRef?: (HTMLElement) => void\n}\nexport const NavigationMenuVerticalAccordionContext =\n React.createContext<TNavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n const [triggerRef, setTriggerRef] = useCallbackRef()\n return (\n <NavigationMenuVerticalAccordionContext.Provider\n value={{ triggerRef, setTriggerRef }}\n >\n {children}\n </NavigationMenuVerticalAccordionContext.Provider>\n )\n}\n\ntype TNavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n defaultOpen,\n open,\n onOpenChange,\n disabled,\n ...rest\n}: TNavigationMenuVerticalAccordionProps): JSX.Element => {\n const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n return (\n <NavigationMenuVerticalAccordionProvider>\n <Root {...collapsibleProps} asChild>\n <NavigationMenuVerticalItem {...rest} />\n </Root>\n </NavigationMenuVerticalAccordionProvider>\n )\n}\n"],"mappings":";;;;;AAWA,IAAa,yCACX,QAAM,cAA4D,EAAE,CAAC;AACvE,IAAM,2CAA2C,EAAE,eAAe;CAChE,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;AACpD,QACE,wBAAA,cAAC,uCAAuC,UAAxC,EACE,OAAO;EAAE;EAAY;EAAe,EAGY,EAD/C,SAC+C;;AAMtD,IAAa,mCAAmC,EAC9C,aACA,MACA,cACA,UACA,GAAG,WACqD;CACxD,MAAM,mBAAmB;EAAE;EAAa;EAAM;EAAc;EAAU;AACtE,QACE,wBAAA,cAAC,yCAAA,MACC,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAkB,SAAA;EAErB,EADL,wBAAA,cAAC,4BAA+B,KAAQ,CACnC,CACiC"}
|
package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalAccordionContent\n> &\n React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n children,\n ...rest\n}: TNavigationMenuVerticalAccordionContentProps): JSX.Element => {\n const { triggerRef } = React.useContext(\n NavigationMenuVerticalAccordionContext\n )\n\n const handleOnKeydown = (e) => {\n if (!triggerRef?.current) return\n if (e.key === 'Escape') {\n e.stopPropagation()\n e.preventDefault()\n triggerRef.current.focus()\n triggerRef.current.click()\n }\n }\n\n return (\n <StyledNavigationMenuVerticalAccordionContent\n onKeyDown={handleOnKeydown}\n {...rest}\n >\n <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n </StyledNavigationMenuVerticalAccordionContent>\n )\n}\n"],"mappings":";;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC4D;CAC/D,MAAM,EAAE,eAAe,MAAM,WAC3B,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalAccordionContent\n> &\n React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n children,\n ...rest\n}: TNavigationMenuVerticalAccordionContentProps): JSX.Element => {\n const { triggerRef } = React.useContext(\n NavigationMenuVerticalAccordionContext\n )\n\n const handleOnKeydown = (e) => {\n if (!triggerRef?.current) return\n if (e.key === 'Escape') {\n e.stopPropagation()\n e.preventDefault()\n triggerRef.current.focus()\n triggerRef.current.click()\n }\n }\n\n return (\n <StyledNavigationMenuVerticalAccordionContent\n onKeyDown={handleOnKeydown}\n {...rest}\n >\n <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n </StyledNavigationMenuVerticalAccordionContent>\n )\n}\n"],"mappings":";;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC4D;CAC/D,MAAM,EAAE,eAAe,MAAM,WAC3B,uCACD;CAED,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,sBAAA,cAAC,8CAAD;EACE,WAAW;EACX,GAAI;EAGyC,EAD7C,sBAAA,cAAC,4BAAA,MAA4B,SAAsC,CACtB"}
|
package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n base: navigationMenuVerticalItemStyles,\n variants: {\n size: {\n md: ['min-h-10'],\n lg: ['min-h-12']\n }\n }\n})\n\nconst StyledIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180'\n ]\n})\n\ntype TNavigationMenuAccordionTriggerProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n children,\n ...rest\n}: TNavigationMenuAccordionTriggerProps) => {\n const { setTriggerRef } = React.useContext(\n NavigationMenuVerticalAccordionContext\n )\n\n return (\n <Link asChild>\n <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n <button\n type=\"button\"\n className=\"flex items-center justify-between gap-3\"\n ref={setTriggerRef}\n >\n <NavigationMenuVerticalItemContent>\n {children}\n </NavigationMenuVerticalItemContent>\n <StyledIcon size=\"sm\" is={ChevronDown} />\n </button>\n </StyledNavigationMenuVerticalAccordionTrigger>\n </Link>\n )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n base: navigationMenuVerticalItemStyles,\n variants: {\n size: {\n md: ['min-h-10'],\n lg: ['min-h-12']\n }\n }\n})\n\nconst StyledIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180'\n ]\n})\n\ntype TNavigationMenuAccordionTriggerProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n children,\n ...rest\n}: TNavigationMenuAccordionTriggerProps) => {\n const { setTriggerRef } = React.useContext(\n NavigationMenuVerticalAccordionContext\n )\n\n return (\n <Link asChild>\n <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n <button\n type=\"button\"\n className=\"flex items-center justify-between gap-3\"\n ref={setTriggerRef}\n >\n <NavigationMenuVerticalItemContent>\n {children}\n </NavigationMenuVerticalItemContent>\n <StyledIcon size=\"sm\" is={ChevronDown} />\n </button>\n </StyledNavigationMenuVerticalAccordionTrigger>\n </Link>\n )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;EACjB,EACF;CACF,CAAC;AAEF,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ;CACA;CACA;CACD,EACF,CAAC;AAMF,IAAa,0CAA0C,EACrD,UACA,GAAG,WACuC;CAC1C,MAAM,EAAE,kBAAkB,MAAM,WAC9B,uCACD;AAED,QACE,sBAAA,cAAC,MAAD,EAAM,SAAA,MAaC,EAZL,sBAAA,cAAC,8CAAD;EAA8C,MAAK;EAAK,GAAI;EAAM,SAAA;EAWnB,EAV7C,sBAAA,cAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,KAAK;EAME,EAJP,sBAAA,cAAC,mCAAA,MACE,SACiC,EACpC,sBAAA,cAAC,YAAD;EAAY,MAAK;EAAK,IAAI;EAAe,CAAA,CAClC,CACoC,CAC1C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalIcon.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n): JSX.Element => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"mappings":";;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalIcon.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n): JSX.Element => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"mappings":";;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,8BACX,UACgB,wBAAA,cAAC,kCAAD;CAAkC,MAAK;CAAK,GAAI;CAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype TNavigationMenuVerticalItemProps = Omit<\n React.ComponentProps<typeof Item>,\n 'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n props: TNavigationMenuVerticalItemProps\n): JSX.Element => (\n <Item\n className={cn(\n '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n )}\n {...props}\n />\n)\n"],"mappings":";;;;AAgBA,IAAa,8BACX,UAEA,sBAAA,cAAC,MAAD;CACE,WAAW,GACT,+DACA,kEACA,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype TNavigationMenuVerticalItemProps = Omit<\n React.ComponentProps<typeof Item>,\n 'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n props: TNavigationMenuVerticalItemProps\n): JSX.Element => (\n <Item\n className={cn(\n '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n )}\n {...props}\n />\n)\n"],"mappings":";;;;AAgBA,IAAa,8BACX,UAEA,sBAAA,cAAC,MAAD;CACE,WAAW,GACT,+DACA,kEACA,mEACD;CACD,GAAI;CACJ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n children,\n className,\n ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n <div className={cn('flex', 'gap-2', 'items-center', className)} {...rest}>\n {\n React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return (\n <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n )\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <NavigationMenuVerticalIcon {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </div>\n)\n"],"mappings":";;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n children,\n className,\n ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n <div className={cn('flex', 'gap-2', 'items-center', className)} {...rest}>\n {\n React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return (\n <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n )\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <NavigationMenuVerticalIcon {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </div>\n)\n"],"mappings":";;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,UAAU;CAAE,GAAI;CAc9D,EAZF,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QACE,wBAAA,cAAC,4BAAA,MAA4B,MAAmC;AAGpE,KAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,4BAA+B,MAAM,MAAS;AAExD,QAAO;EACP,CAEA"}
|
|
@@ -4,8 +4,6 @@ declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<
|
|
|
4
4
|
} & {
|
|
5
5
|
as?: React.ElementType;
|
|
6
6
|
}>;
|
|
7
|
-
type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
export declare const NavigationMenuVerticalLink: ({ as, href, children, reloadDocument, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
|
|
7
|
+
type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink>;
|
|
8
|
+
export declare const NavigationMenuVerticalLink: ({ as, href, children, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
|
|
11
9
|
export {};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
3
|
-
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
4
3
|
import { preventEvent } from "../../utilities/event/preventEvent.js";
|
|
5
4
|
import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
|
|
6
5
|
import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
|
|
@@ -15,10 +14,9 @@ var StyledNavigationMenuVerticalLink = styled(Link, {
|
|
|
15
14
|
lg: ["min-h-12"]
|
|
16
15
|
} }
|
|
17
16
|
});
|
|
18
|
-
var NavigationMenuVerticalLink = ({ as, href, children,
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const componentProps = as || routerLinkProps.as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
|
|
17
|
+
var NavigationMenuVerticalLink = ({ as, href, children, ...rest }) => {
|
|
18
|
+
const Component = as || (href ? "a" : "button");
|
|
19
|
+
const componentProps = as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
|
|
22
20
|
return /* @__PURE__ */ React.createElement(NavigationMenuVerticalItem, null, /* @__PURE__ */ React.createElement(StyledNavigationMenuVerticalLink, {
|
|
23
21
|
size: "lg",
|
|
24
22
|
href,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport {
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n base: navigationMenuVerticalItemStyles,\n variants: {\n size: {\n md: ['min-h-10'],\n lg: ['min-h-12']\n }\n }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalLink\n>\n\nexport const NavigationMenuVerticalLink = ({\n as,\n href,\n children,\n ...rest\n}: NavigationMenuVerticalItemProps) => {\n const Component = (as || (href ? 'a' : 'button')) as React.ElementType\n const componentProps = as\n ? {}\n : href\n ? getExternalAnchorProps(href)\n : { type: 'button' }\n\n return (\n <NavigationMenuVerticalItem>\n <StyledNavigationMenuVerticalLink\n size=\"lg\"\n href={href}\n {...rest}\n {...componentProps}\n onSelect={preventEvent}\n asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n >\n <Component>\n <NavigationMenuVerticalItemContent>\n {children}\n </NavigationMenuVerticalItemContent>\n </Component>\n </StyledNavigationMenuVerticalLink>\n </NavigationMenuVerticalItem>\n )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;EACjB,EACF;CACF,CAAC;AAMF,IAAa,8BAA8B,EACzC,IACA,MACA,UACA,GAAG,WACkC;CACrC,MAAM,YAAa,OAAO,OAAO,MAAM;CACvC,MAAM,iBAAiB,KACnB,EAAE,GACF,OACE,uBAAuB,KAAK,GAC5B,EAAE,MAAM,UAAU;AAExB,QACE,sBAAA,cAAC,4BAAA,MACC,sBAAA,cAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;EAOiC,EALjC,sBAAA,cAAC,WAAA,MACC,sBAAA,cAAC,mCAAA,MACE,SACiC,CAC1B,CACqB,CACR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalList.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n base: [\n '[--navigation-menu-vertical-item-pl:--spacing(4)]',\n '*:not-first:mt-0.5'\n ]\n})\n\nexport const NavigationMenuVerticalList = StyledList\n"],"mappings":";;AAWA,IAAa,6BAPM,OAAO,MAAM,EAC9B,MAAM,CACJ,qDACA,
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalList.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n base: [\n '[--navigation-menu-vertical-item-pl:--spacing(4)]',\n '*:not-first:mt-0.5'\n ]\n})\n\nexport const NavigationMenuVerticalList = StyledList\n"],"mappings":";;AAWA,IAAa,6BAPM,OAAO,MAAM,EAC9B,MAAM,CACJ,qDACA,qBACD,EACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalText.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar/SideBarContext'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n base: [\n 'font-(--navigation-menu-vertical-item-font-weight)',\n 'w-max',\n 'max-w-40',\n 'text-left',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[opacity,translate]'\n ],\n variants: {\n isExpanded: {\n true: ['opacity-100', 'motion-safe:translate-0'],\n false: ['opacity-0', 'motion-safe:translate-x-2']\n }\n }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n const { isExpanded } = useSidebarState()\n\n return (\n <StyledNavigationMenuVerticalText\n size=\"md\"\n as=\"span\"\n {...props}\n isExpanded={isExpanded}\n />\n )\n}\n"],"mappings":";;;;;AAOA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalText.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar/SideBarContext'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n base: [\n 'font-(--navigation-menu-vertical-item-font-weight)',\n 'w-max',\n 'max-w-40',\n 'text-left',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[opacity,translate]'\n ],\n variants: {\n isExpanded: {\n true: ['opacity-100', 'motion-safe:translate-0'],\n false: ['opacity-0', 'motion-safe:translate-x-2']\n }\n }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n const { isExpanded } = useSidebarState()\n\n return (\n <StyledNavigationMenuVerticalText\n size=\"md\"\n as=\"span\"\n {...props}\n isExpanded={isExpanded}\n />\n )\n}\n"],"mappings":";;;;;AAOA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,eAAe,0BAA0B;EAChD,OAAO,CAAC,aAAa,4BAA4B;EAClD,EACF;CACF,CAAC;AAMF,IAAa,8BACX,UACgB;CAChB,MAAM,EAAE,eAAe,iBAAiB;AAExC,QACE,sBAAA,cAAC,kCAAD;EACE,MAAK;EACL,IAAG;EACH,GAAI;EACQ;EACZ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n base: [\n 'font-body',\n 'text-sm',\n 'flex-row',\n 'justify-center',\n 'absolute',\n 'top-0',\n 'right-0',\n 'translate-x-3',\n '-translate-y-1/2',\n 'rounded-full',\n 'h-6',\n 'min-w-6',\n 'text-center'\n ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n value: number | string\n emphasis?: BadgeProps['emphasis']\n theme?: BadgeProps['theme']\n icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n value,\n emphasis = 'bold',\n theme = 'primary',\n icon,\n children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n <div className=\"relative\">\n {!!value && (\n <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n {value}\n </StyledBadge>\n )}\n {children}\n </div>\n)\n"],"mappings":";;;;;AAOA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;
|
|
1
|
+
{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n base: [\n 'font-body',\n 'text-sm',\n 'flex-row',\n 'justify-center',\n 'absolute',\n 'top-0',\n 'right-0',\n 'translate-x-3',\n '-translate-y-1/2',\n 'rounded-full',\n 'h-6',\n 'min-w-6',\n 'text-center'\n ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n value: number | string\n emphasis?: BadgeProps['emphasis']\n theme?: BadgeProps['theme']\n icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n value,\n emphasis = 'bold',\n theme = 'primary',\n icon,\n children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n <div className=\"relative\">\n {!!value && (\n <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n {value}\n </StyledBadge>\n )}\n {children}\n </div>\n)\n"],"mappings":";;;;;AAOA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAWF,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,QAAQ,WACR,MACA,eAEA,sBAAA,cAAC,OAAD,EAAK,WAAU,YAQT,EAPH,CAAC,CAAC,SACD,sBAAA,cAAC,aAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,QAAQ,sBAAA,cAAC,MAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,MACW,EAEf,SACG"}
|
|
@@ -137,7 +137,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
|
|
|
137
137
|
}, /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
|
|
138
138
|
onClick: decrement,
|
|
139
139
|
icon: Minus,
|
|
140
|
-
className: cn(emphasis !== "bold" && "border-r-none rounded-r-none"),
|
|
140
|
+
className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
|
|
141
141
|
size: iconSize,
|
|
142
142
|
fieldAppearance: appearance,
|
|
143
143
|
fieldTheme: theme,
|
|
@@ -149,7 +149,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
|
|
|
149
149
|
}), /* @__PURE__ */ React$1.createElement(Input, inputProps), /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
|
|
150
150
|
onClick: increment,
|
|
151
151
|
icon: Plus,
|
|
152
|
-
className: cn(emphasis !== "bold" && "border-l-none rounded-l-none"),
|
|
152
|
+
className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
|
|
153
153
|
size: iconSize,
|
|
154
154
|
fieldAppearance: appearance,
|
|
155
155
|
fieldTheme: theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n theme?: 'white' | 'grey'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n base: ['flex'],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n },\n emphasis: {\n bold: ['gap-0']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n className,\n appearance = 'standard',\n theme,\n emphasis,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const hasError = internalValue < min || internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n theme,\n state: externalState || (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid || hasError || undefined,\n className: cn(\n 'rounded-none',\n 'w-16',\n '[&_>_input]:text-center',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n emphasis === 'bold' && [\n 'rounded-1',\n '[&_>_input[aria-invalid=true]]:text-danger',\n 'focus-within:[&_>_input]:text-grey-1000'\n ],\n emphasis === 'bold' &&\n appearance === 'standard' && [\n 'border-none',\n '[&:has([aria-invalid=true])]:border-2',\n '[&:has([aria-invalid=true])]:border-danger',\n 'focus-within:border-2',\n 'focus-within:border-blue-800'\n ]\n ),\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer\n appearance={appearance}\n emphasis={emphasis}\n className={className}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n className={cn(emphasis !== 'bold' && 'border-r-none rounded-r-none')}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n className={cn(emphasis !== 'bold' && 'border-l-none rounded-l-none')}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":";;;;;;;AA6BA,IAAM,uBAAuB,OAAO,OAAO;CACzC,MAAM,CAAC,MAAM;CACb,UAAU;EACR,YAAY;GACV,UAAU,CAAC;GACX,QAAQ,CAAC,QAAQ;EACnB;EACA,UAAU,EACR,MAAM,CAAC,OAAO,EAChB;CACF;AACF,CAAC;AAED,IAAa,cAAc,QAAM,YAE7B,EACE,OACA,eAAe,GACf,eACA,MAAM,GACN,MAAM,OAAO,kBACb,OAAO,GACP,UAAU,aAAa,OACvB,UAAU,aAAa,OACvB,OAAO,MACP,qBAAqB,yBACrB,wBAAwB,4BACxB,WACA,aAAa,YACb,OACA,UACA,GAAG,QAEL,QACgB;CAChB,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAC9C,SAAS,YACX;CACA,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,iBAAiB,KAAK;CAC1D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,QAAM,OAAgC,IAAI;CAE3D,QAAM,oBAAoB,WAAW,SAAS,OAA2B;CAEzE,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,MAAM,sBAAsB;EAC1B,WAAW;EACX,WAAW;EACX,GAAG;CACL;CAEA,MAAM,yBAAyB;EAC7B,WAAW,6BAA6B;EACxC,WAAW,6BAA6B;EACxC,GAAG;CACL;CAEA,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,iBAAiB;CAEjC,MAAM,QAAQ,QAAM,aACjB,kBAA0B,KAAK,IAAI,KAAK,IAAI,eAAe,GAAG,GAAG,GAAG,GACrE,CAAC,KAAK,GAAG,CACX;CAEA,MAAM,cAAc,QAAM,aACvB,aAAqB;EACpB,gBAAgB,QAAQ;EACxB,iBAAiB,QAAQ;CAC3B,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,gBAAgB,QAAM,aACzB,UAA+C;EAE9C,YADoB,OAAO,MAAM,OAAO,MAAM,QAAQ,OAAO,EAAE,CACnD,CAAW;CACzB,GACA,CAAC,WAAW,CACd;CAEA,MAAM,YAAY,QAAM,kBAAkB;EACxC,IAAI,WAAW,YAAY;EAC3B,UAAU,SAAS,MAAM;EAEzB,YAAY,MADK,OAAO,aAAa,IAAI,IACf,CAAC;CAC7B,GAAG;EAAC;EAAO;EAAS;EAAY;EAAM;EAAa;CAAa,CAAC;CAEjE,MAAM,YAAY,QAAM,kBAAkB;EACxC,IAAI,WAAW,YAAY;EAC3B,UAAU,SAAS,MAAM;EAEzB,YAAY,MADK,OAAO,aAAa,IAAI,IACf,CAAC;CAC7B,GAAG;EAAC;EAAO;EAAS;EAAY;EAAK;EAAM;EAAa;CAAa,CAAC;CAEtE,MAAM,YAAY,QAAM,aACrB,UAA+B;EAC9B,IAAI,MAAM,YAAY,aAAa;;;;;;;;;EAUnC,MAAM,WAAW,MAAM;EAWvB,MAAM,SAAS;GARb,SAAS;GACT,YAAY;GACZ,WAAW;GACX,WAAW;GACX,YAAY,YAAY,GAAG;GAC3B,WAAW,YAAY,GAAG;EAGb,EAAO;EAEtB,IAAI,QAAQ;GACV,MAAM,eAAe;GACrB,OAAO,KAAK;EACd;CACF,GACA;EAAC;EAAW;EAAW;EAAa;EAAK;CAAG,CAC9C;CAEA,MAAM,WAAW,gBAAgB,OAAO,gBAAgB;CACxD,MAAM,EACJ,OAAO,eACP,gBAAgB,qBAChB,GAAG,cACD;CAEJ,MAAM,aAAiD;EACrD,MAAM;EACN,OAAO;EACP,GAAG;EACH,UAAU;EACV;EACA;EACA;EACA;EACA,OAAO,kBAAkB,WAAW,UAAU,KAAA;EAC9C,gBAAgB,uBAAuB,YAAY,KAAA;EACnD,WAAW,GACT,gBACA,QACA,2BACA,uBACA,gCACA,aAAa,UAAU;GACrB;GACA;GACA;EACF,GACA,aAAa,UACX,eAAe,cAAc;GAC3B;GACA;GACA;GACA;GACA;EACF,CACJ;EACA,KAAK;EACL,UAAU;EACV,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,MAAM;CACR;CAEA,OACE,wBAAA,cAAC,sBAAD;EACc;EACF;EACC;CA6BS,GA3BpB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,GAAG,aAAa,UAAU,8BAA8B;EACnE,MAAM;EACN,iBAAiB;EACjB,YAAY;EACF;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;CAC5B,CAAA,GACD,wBAAA,cAAC,OAAU,UAAa,GACxB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,GAAG,aAAa,UAAU,8BAA8B;EACnE,MAAM;EACN,iBAAiB;EACjB,YAAY;EACF;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;CAC5B,CAAA,CACmB;AAE1B,CACF;AAEA,YAAY,cAAc"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n theme?: 'white' | 'grey'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n base: ['flex'],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n },\n emphasis: {\n bold: ['gap-0']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n className,\n appearance = 'standard',\n theme,\n emphasis,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const hasError = internalValue < min || internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n theme,\n state: externalState || (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid || hasError || undefined,\n className: cn(\n 'rounded-none',\n 'w-16',\n '[&_>_input]:text-center',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n emphasis === 'bold' && [\n 'rounded-1',\n '[&_>_input[aria-invalid=true]]:text-danger',\n 'focus-within:[&_>_input]:text-grey-1000'\n ],\n emphasis === 'bold' &&\n appearance === 'standard' && [\n 'border-none',\n '[&:has([aria-invalid=true])]:border-2',\n '[&:has([aria-invalid=true])]:border-danger',\n 'focus-within:border-2',\n 'focus-within:border-blue-800'\n ]\n ),\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer\n appearance={appearance}\n emphasis={emphasis}\n className={className}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n className={cn(\n emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n )}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n className={cn(\n emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n )}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":";;;;;;;AA6BA,IAAM,uBAAuB,OAAO,OAAO;CACzC,MAAM,CAAC,OAAO;CACd,UAAU;EACR,YAAY;GACV,UAAU,EAAE;GACZ,QAAQ,CAAC,SAAS;GACnB;EACD,UAAU,EACR,MAAM,CAAC,QAAQ,EAChB;EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OACA,eAAe,GACf,eACA,MAAM,GACN,MAAM,OAAO,kBACb,OAAO,GACP,UAAU,aAAa,OACvB,UAAU,aAAa,OACvB,OAAO,MACP,qBAAqB,yBACrB,wBAAwB,4BACxB,WACA,aAAa,YACb,OACA,UACA,GAAG,QAEL,QACgB;CAChB,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAC9C,SAAS,aACV;AACD,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,kBAAiB,MAAM;IACxD,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,OAAgC,KAAK;AAE5D,SAAM,oBAAoB,WAAW,SAAS,QAA4B;CAE1E,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;CAEpE,MAAM,sBAAsB;EAC1B,WAAW;EACX,WAAW;EACX,GAAG;EACJ;CAED,MAAM,yBAAyB;EAC7B,WAAW,6BAA6B;EACxC,WAAW,6BAA6B;EACxC,GAAG;EACJ;CAED,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,iBAAiB;CAEjC,MAAM,QAAQ,QAAM,aACjB,kBAA0B,KAAK,IAAI,KAAK,IAAI,eAAe,IAAI,EAAE,IAAI,EACtE,CAAC,KAAK,IAAI,CACX;CAED,MAAM,cAAc,QAAM,aACvB,aAAqB;AACpB,kBAAgB,SAAS;AACzB,mBAAiB,SAAS;IAE5B,CAAC,cAAc,CAChB;CAED,MAAM,gBAAgB,QAAM,aACzB,UAA+C;AAE9C,cADoB,OAAO,MAAM,OAAO,MAAM,QAAQ,OAAO,GAAG,CAAC,CACzC;IAE1B,CAAC,YAAY,CACd;CAED,MAAM,YAAY,QAAM,kBAAkB;AACxC,MAAI,WAAW,WAAY;AAC3B,YAAU,SAAS,OAAO;AAE1B,cAAY,MADK,OAAO,cAAc,GAAG,KACd,CAAC;IAC3B;EAAC;EAAO;EAAS;EAAY;EAAM;EAAa;EAAc,CAAC;CAElE,MAAM,YAAY,QAAM,kBAAkB;AACxC,MAAI,WAAW,WAAY;AAC3B,YAAU,SAAS,OAAO;AAE1B,cAAY,MADK,OAAO,cAAc,GAAG,KACd,CAAC;IAC3B;EAAC;EAAO;EAAS;EAAY;EAAK;EAAM;EAAa;EAAc,CAAC;CAEvE,MAAM,YAAY,QAAM,aACrB,UAA+B;AAC9B,MAAI,MAAM,YAAY,YAAa;;;;;;;;;EAUnC,MAAM,WAAW,MAAM;EAWvB,MAAM,SATqD;GACzD,SAAS;GACT,YAAY;GACZ,WAAW;GACX,WAAW;GACX,YAAY,YAAY,IAAI;GAC5B,WAAW,YAAY,IAAI;GAC5B,CAEqB;AAEtB,MAAI,QAAQ;AACV,SAAM,gBAAgB;AACtB,UAAO,MAAM;;IAGjB;EAAC;EAAW;EAAW;EAAa;EAAK;EAAI,CAC9C;CAED,MAAM,WAAW,gBAAgB,OAAO,gBAAgB;CACxD,MAAM,EACJ,OAAO,eACP,gBAAgB,qBAChB,GAAG,cACD;CAEJ,MAAM,aAAiD;EACrD,MAAM;EACN,OAAO;EACP,GAAG;EACH,UAAU;EACV;EACA;EACA;EACA;EACA,OAAO,kBAAkB,WAAW,UAAU,KAAA;EAC9C,gBAAgB,uBAAuB,YAAY,KAAA;EACnD,WAAW,GACT,gBACA,QACA,2BACA,uBACA,gCACA,aAAa,UAAU;GACrB;GACA;GACA;GACD,EACD,aAAa,UACX,eAAe,cAAc;GAC3B;GACA;GACA;GACA;GACA;GACD,CACJ;EACD,KAAK;EACL,UAAU;EACV,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,MAAM;EACP;AAED,QACE,wBAAA,cAAC,sBAAD;EACc;EACF;EACC;EAiCU,EA/BrB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,GACT,aAAa,UAAU,CAAC,iBAAiB,iBAAiB,CAC3D;EACD,MAAM;EACN,iBAAiB;EACjB,YAAY;EACF;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;EAC3B,CAAA,EACF,wBAAA,cAAC,OAAU,WAAc,EACzB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,GACT,aAAa,UAAU,CAAC,iBAAiB,iBAAiB,CAC3D;EACD,MAAM;EACN,iBAAiB;EACjB,YAAY;EACF;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;EAC3B,CAAA,CACmB;EAG5B;AAED,YAAY,cAAc"}
|
|
@@ -9,10 +9,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
|
|
|
9
9
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
10
10
|
} & {
|
|
11
11
|
as?: React.ElementType;
|
|
12
|
-
}, "children" | "label" | "hasTooltip" | "tooltipSide" |
|
|
12
|
+
}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
|
|
13
13
|
children: React.ReactNode;
|
|
14
14
|
label: string;
|
|
15
|
-
reloadDocument?: boolean;
|
|
16
15
|
} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
|
|
17
16
|
fieldAppearance?: "standard" | "modern" | undefined;
|
|
18
17
|
fieldTheme?: "grey" | "white" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n fieldTheme: {\n white: [],\n grey: []\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'modern',\n fieldTheme: 'white',\n class: ['bg-white']\n },\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n fieldTheme,\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n fieldTheme={fieldTheme}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n fieldTheme: {\n white: [],\n grey: []\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'modern',\n fieldTheme: 'white',\n class: ['bg-white']\n },\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n fieldTheme,\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n fieldTheme={fieldTheme}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,YAAY;GACV,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,WAAW;GACpB;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,sBAAsB;GAC3C;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,wBAAwB;GAC9C;EACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAcC,EAbhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAYzB,EAXL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACL;EACZ,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n className?: string\n hideLabel?: boolean\n description?: string\n label: string\n name: string\n prompt?: { link: string; label: string }\n validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n className,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n appearance,\n theme,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\n const context = useFormCustomContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n const formAppearance = context?.appearance || appearance\n const formTheme = context?.theme ?? theme\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <NumberInput\n id={name}\n name={innerName}\n ref={ref}\n {...(error && { state: 'error', 'aria-invalid': true })}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n className?: string\n hideLabel?: boolean\n description?: string\n label: string\n name: string\n prompt?: { link: string; label: string }\n validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n className,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n appearance,\n theme,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\n const context = useFormCustomContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n const formAppearance = context?.appearance || appearance\n const formTheme = context?.theme ?? theme\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <NumberInput\n id={name}\n name={innerName}\n ref={ref}\n {...(error && { state: 'error', 'aria-invalid': true })}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAiBC,EAfb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,OAAO;EACP,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n className,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div {...rest} className={cn('flex', 'gap-1', className)}>\n {children || <PaginationItems />}\n </div>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAWA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n className,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div {...rest} className={cn('flex', 'gap-1', className)}>\n {children || <PaginationItems />}\n </div>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAWA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,WACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,0BAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,wBAAA,cAAC,oBAAuB,yBACtB,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,wBAAA,cAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,QAAQ,SAAS,UAAU;EAElD,EADH,YAAY,wBAAA,cAAC,iBAAA,KAAkB,CAC5B,CACM,CACK;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n const { paginationItems } = usePagination()\n\n return (\n <>\n {paginationItems.map((paginationItem, i) => {\n switch (paginationItem) {\n case VIEW_ALL_POPOVER:\n return <PaginationPopover key={paginationItem + i} />\n case GO_TO_PREVIOUS_PAGE:\n return <PaginationPreviousButton key={paginationItem} />\n case GO_TO_NEXT_PAGE:\n return <PaginationNextButton key={paginationItem} />\n default:\n return (\n <PaginationPage\n key={paginationItem}\n pageNumber={paginationItem}\n />\n )\n }\n })}\n </>\n )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,wBAAqC;CAChD,MAAM,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n const { paginationItems } = usePagination()\n\n return (\n <>\n {paginationItems.map((paginationItem, i) => {\n switch (paginationItem) {\n case VIEW_ALL_POPOVER:\n return <PaginationPopover key={paginationItem + i} />\n case GO_TO_PREVIOUS_PAGE:\n return <PaginationPreviousButton key={paginationItem} />\n case GO_TO_NEXT_PAGE:\n return <PaginationNextButton key={paginationItem} />\n default:\n return (\n <PaginationPage\n key={paginationItem}\n pageNumber={paginationItem}\n />\n )\n }\n })}\n </>\n )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,wBAAqC;CAChD,MAAM,EAAE,oBAAoB,eAAe;AAE3C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,gBAAgB,KAAK,gBAAgB,MAAM;AAC1C,UAAQ,gBAAR;GACE,KAAK,iBACH,QAAO,wBAAA,cAAC,mBAAD,EAAmB,KAAK,iBAAiB,GAAK,CAAA;GACvD,KAAK,oBACH,QAAO,wBAAA,cAAC,0BAAD,EAA0B,KAAK,gBAAkB,CAAA;GAC1D,KAAK,gBACH,QAAO,wBAAA,cAAC,sBAAD,EAAsB,KAAK,gBAAkB,CAAA;GACtD,QACE,QACE,wBAAA,cAAC,gBAAD;IACE,KAAK;IACL,YAAY;IACZ,CAAA;;GAGR,CACD"}
|
|
@@ -8,10 +8,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
|
|
|
8
8
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
|
-
}, "children" | "label" | "hasTooltip" | "tooltipSide" |
|
|
11
|
+
}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
|
|
12
12
|
children: React.ReactNode;
|
|
13
13
|
label: string;
|
|
14
|
-
reloadDocument?: boolean;
|
|
15
14
|
} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
|
|
16
15
|
as?: React.ElementType;
|
|
17
16
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n const isDisabled = !nextAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToNextPage}\n disabled={isDisabled}\n {...props}\n label={labels?.nextPageButtonLabel || 'Next page'}\n >\n <Icon is={ChevronRight} />\n </StyledActionIcon>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n const isDisabled = !nextAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToNextPage}\n disabled={isDisabled}\n {...props}\n label={labels?.nextPageButtonLabel || 'Next page'}\n >\n <Icon is={ChevronRight} />\n </StyledActionIcon>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,eAAe;CAEnE,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,uBAAuB;EAGrB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'border',\n 'border-transparent',\n 'rounded-sm',\n 'cursor-pointer',\n 'font-body',\n 'justify-center',\n 'whitespace-nowrap',\n 'w-max',\n 'flex',\n 'flex-col',\n 'p-0',\n 'font-normal',\n 'text-text-subtle',\n 'bg-(--base-1)',\n 'relative',\n 'not-disabled:active:bg-(--base-3)',\n 'not-disabled:active:text-(--text-bold)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--base-2)',\n 'not-disabled:hover:text-text-regular',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n md: ['size-10']\n },\n selected: {\n true: [\n 'border',\n 'border-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:border-(--accent-11)',\n 'not-disabled:active:text-(--accent-11)',\n 'not-disabled:hover:border-(--accent-10)',\n 'not-disabled:hover:text-(--accent-10)',\n 'text-(--accent-9)'\n ]\n },\n indicated: {\n true: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'text-white'\n ]\n }\n },\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n class: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'not-focus-visible:border-white!',\n 'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n 'text-white'\n ]\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n className,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected || isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n className={className}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"mappings":";;;;AAOA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n base: [\n 'items-center',\n 'border',\n 'border-transparent',\n 'rounded-sm',\n 'cursor-pointer',\n 'font-body',\n 'justify-center',\n 'whitespace-nowrap',\n 'w-max',\n 'flex',\n 'flex-col',\n 'p-0',\n 'font-normal',\n 'text-text-subtle',\n 'bg-(--base-1)',\n 'relative',\n 'not-disabled:active:bg-(--base-3)',\n 'not-disabled:active:text-(--text-bold)',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-(--base-2)',\n 'not-disabled:hover:text-text-regular',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n md: ['size-10']\n },\n selected: {\n true: [\n 'border',\n 'border-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:border-(--accent-11)',\n 'not-disabled:active:text-(--accent-11)',\n 'not-disabled:hover:border-(--accent-10)',\n 'not-disabled:hover:text-(--accent-10)',\n 'text-(--accent-9)'\n ]\n },\n indicated: {\n true: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'text-white'\n ]\n }\n },\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n class: [\n 'bg-(--accent-9)',\n 'font-semibold',\n 'not-disabled:active:bg-(--accent-11)',\n 'not-disabled:active:text-white',\n 'not-disabled:hover:bg-(--accent-10)',\n 'not-disabled:hover:text-white',\n 'not-focus-visible:border-white!',\n 'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n 'text-white'\n ]\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n className,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected || isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n className={className}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"mappings":";;;;AAOA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC;AAEF,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,eAAe;CAEjB,MAAM,cAAc,eAAe,SAAS,WAAW;CACvD,MAAM,aAAa,cAAc,SAAS,WAAW;CAErD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;AAC1B,MAAI,cAAc,WAAY;AAC9B,gBAAc,WAAW;;CAG3B,MAAM,iBAAiB,eAAe;AACpC,aAAW;AACX,WAAS,WAAW;;AAGtB,QACE,wBAAA,cAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,WAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,WACY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </div>\n </Popover.Content>\n </Popover>\n )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,
|
|
1
|
+
{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </div>\n </Popover.Content>\n </Popover>\n )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,eAAe;CAC9C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAED,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAkB,MAAM;AAE1D,QACE,sBAAA,cAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;EA2BnD,EA1BR,sBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAYC,EAXf,YACC,sBAAA,cAAC,YAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,OAAO,QAAQ,uBAAuB;EACtC,eAAY;EAGD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,UAAY,CAAA,CACX,CAEC,EAClB,sBAAA,cAAC,QAAQ,SAAT;EAAiB,MAAK;EAAK,iBAAiB;EAAO,WAAU;EAY3C,EAXhB,sBAAA,cAAC,OAAD,EAAK,WAAU,2CAUT,EATH,iBAAiB,KAAK,eAAe;AACpC,SACE,sBAAA,cAAC,gBAAD;GACE,KAAK;GACO;GACZ,eAAe,UAAU,MAAM;GAC/B,CAAA;GAEJ,CACE,CACU,CACV"}
|
|
@@ -8,10 +8,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
|
|
|
8
8
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
|
-
}, "children" | "label" | "hasTooltip" | "tooltipSide" |
|
|
11
|
+
}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
|
|
12
12
|
children: React.ReactNode;
|
|
13
13
|
label: string;
|
|
14
|
-
reloadDocument?: boolean;
|
|
15
14
|
} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
|
|
16
15
|
as?: React.ElementType;
|
|
17
16
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n const isDisabled = !previousAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToPreviousPage}\n disabled={isDisabled}\n {...props}\n label={labels?.previousPageButtonLabel || 'Previous page'}\n >\n <Icon is={ChevronLeft} />\n </StyledActionIcon>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n const isDisabled = !previousAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToPreviousPage}\n disabled={isDisabled}\n {...props}\n label={labels?.previousPageButtonLabel || 'Previous page'}\n >\n <Icon is={ChevronLeft} />\n </StyledActionIcon>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,eAAe;CAE3E,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,2BAA2B;EAGzB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage,\n getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n goToPage: () => null,\n goToPreviousPage: () => null,\n goToNextPage: () => null,\n currentPage: 1,\n pagesCount: 0,\n onItemHover: () => null,\n paginationItems: [],\n labels: {},\n indicatedPages: [],\n disabledPages: []\n})\n\nexport const PaginationProvider = ({\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n const currentPage = selectedPage || internalCurrentPage\n\n const goToPage = React.useCallback(\n (pageNumber: number) => {\n setInternalCurrentPage(pageNumber)\n onSelectedPageChange?.(pageNumber)\n },\n [onSelectedPageChange]\n )\n\n const previousPage = currentPage - 1\n const previousAvailablePage = findPreviousAvailablePage(\n previousPage,\n disabledPages\n )\n\n const goToPreviousPage = React.useCallback(() => {\n if (previousAvailablePage) goToPage(previousAvailablePage)\n }, [goToPage, previousAvailablePage])\n\n const nextPage = currentPage + 1\n const nextAvailablePage = findNextAvailablePage(\n nextPage,\n disabledPages,\n pagesCount\n )\n const goToNextPage = React.useCallback(() => {\n if (nextAvailablePage) goToPage(nextAvailablePage)\n }, [goToPage, nextAvailablePage])\n\n const paginationItems = getPaginationElementsToRender(\n currentPage,\n pagesCount,\n visibleElementsCount\n )\n\n const value = React.useMemo(() => {\n return {\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n paginationItems,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n }\n }, [\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n indicatedPages,\n paginationItems,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n ])\n\n return (\n <PaginationContext.Provider value={value}>\n {children}\n </PaginationContext.Provider>\n )\n}\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage,\n getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n goToPage: () => null,\n goToPreviousPage: () => null,\n goToNextPage: () => null,\n currentPage: 1,\n pagesCount: 0,\n onItemHover: () => null,\n paginationItems: [],\n labels: {},\n indicatedPages: [],\n disabledPages: []\n})\n\nexport const PaginationProvider = ({\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n const currentPage = selectedPage || internalCurrentPage\n\n const goToPage = React.useCallback(\n (pageNumber: number) => {\n setInternalCurrentPage(pageNumber)\n onSelectedPageChange?.(pageNumber)\n },\n [onSelectedPageChange]\n )\n\n const previousPage = currentPage - 1\n const previousAvailablePage = findPreviousAvailablePage(\n previousPage,\n disabledPages\n )\n\n const goToPreviousPage = React.useCallback(() => {\n if (previousAvailablePage) goToPage(previousAvailablePage)\n }, [goToPage, previousAvailablePage])\n\n const nextPage = currentPage + 1\n const nextAvailablePage = findNextAvailablePage(\n nextPage,\n disabledPages,\n pagesCount\n )\n const goToNextPage = React.useCallback(() => {\n if (nextAvailablePage) goToPage(nextAvailablePage)\n }, [goToPage, nextAvailablePage])\n\n const paginationItems = getPaginationElementsToRender(\n currentPage,\n pagesCount,\n visibleElementsCount\n )\n\n const value = React.useMemo(() => {\n return {\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n paginationItems,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n }\n }, [\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n indicatedPages,\n paginationItems,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n ])\n\n return (\n <PaginationContext.Provider value={value}>\n {children}\n </PaginationContext.Provider>\n )\n}\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,EAAE;CACnB,QAAQ,EAAE;CACV,gBAAgB,EAAE;CAClB,eAAe,EAAE;CAClB,CAAC;AAEF,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,EAAE;CAEvE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;AACtB,yBAAuB,WAAW;AAClC,yBAAuB,WAAW;IAEpC,CAAC,qBAAqB,CACvB;CAGD,MAAM,wBAAwB,0BADT,cAAc,GAGjC,cACD;CAED,MAAM,mBAAmB,QAAM,kBAAkB;AAC/C,MAAI,sBAAuB,UAAS,sBAAsB;IACzD,CAAC,UAAU,sBAAsB,CAAC;CAGrC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,WACD;CACD,MAAM,eAAe,QAAM,kBAAkB;AAC3C,MAAI,kBAAmB,UAAS,kBAAkB;IACjD,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,kBAAkB,8BACtB,aACA,YACA,qBACD;CAED,MAAM,QAAQ,QAAM,cAAc;AAChC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,wBAAA,cAAC,kBAAkB,UAAnB,EAAmC,OAEN,EAD1B,SAC0B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.constants.js","names":[],"sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n LESS = 6,\n MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"mappings":";AAAA,IAAY,wBAAL,yBAAA,uBAAA;
|
|
1
|
+
{"version":3,"file":"pagination.constants.js","names":[],"sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n LESS = 6,\n MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"mappings":";AAAA,IAAY,wBAAL,yBAAA,uBAAA;AACL,uBAAA,sBAAA,UAAA,KAAA;AACA,uBAAA,sBAAA,UAAA,KAAA;;KACD;AAED,IAAa,mBAAmB;AAChC,IAAa,sBAAsB;AACnC,IAAa,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n currentPage: number,\n pagesCount: number,\n visibleElementsCount: number\n): PaginationItemsToRender => {\n const paginationPages = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n /*\n * As we always show the `<` `>` arrows,\n * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n * to get the `visiblePagesCount`\n */\n let visiblePagesCount = visibleElementsCount - 2\n const withPreviousNextPageArrows = (paginationPages) => [\n GO_TO_PREVIOUS_PAGE,\n ...paginationPages,\n GO_TO_NEXT_PAGE\n ]\n\n /**\n * If fewer pages than threshold for truncating render them all.\n *\n * pagesCount: 6\n * visibleElementsCount: >=6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | 3 | | 4 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (pagesCount <= visiblePagesCount) {\n return withPreviousNextPageArrows(paginationPages)\n }\n\n /**\n * If current page is either at the very start or at the very end of the pages\n */\n const canFitEdgePage = visibleElementsCount >= 5\n const canFitViewAllPopover = visibleElementsCount >= 4\n const canFitPages = visibleElementsCount >= 3\n\n if (canFitViewAllPopover) {\n // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n visiblePagesCount -= 1\n }\n\n if (canFitEdgePage) {\n // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n visiblePagesCount -= 1\n }\n\n const firstPage = paginationPages[0]\n const lastPage = paginationPages[paginationPages.length - 1]\n\n /**\n * If we're truncating and current page is at the start of the page list,\n * render the initial truncated page list, e.g.\n *\n * pagesCount: 8\n * currentPage: 1/2\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | … | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage < visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitPages) {\n newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitEdgePage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page is towards the end of the\n * page list (depending on visibleElementsCount),\n * render a truncated page list from the end, e.g.\n *\n * pagesCount: 8\n * currentPage: 7/8\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | … | | 7 | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage > pagesCount - visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitEdgePage) {\n newPaginationItems.push(firstPage)\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitPages) {\n newPaginationItems.push(\n ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n )\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page doesn't meet any of the previous conditions\n * (we're in the middle)\n * render a truncated page list from a specific index relative to `currentPage`, e.g.\n *\n * currentPage: 4\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 3 | | 4 | | … | | 6 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n * currentPage: 6\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 4 | | 5 | | 6 | | 7 | | … | | 10 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n */\n const canFitCurrentPage = canFitPages\n const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n const canFitLastPage = canFitEdgePage\n\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitCurrentPageAndPreviousPageAndNextPage) {\n newPaginationItems.push(\n ...paginationPages.slice(\n currentPage + 1 - visiblePagesCount,\n currentPage + 1\n )\n )\n } else if (canFitCurrentPageAndPreviousPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n )\n } else if (canFitCurrentPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n )\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitLastPage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n startPage: number,\n disabledPages: number[],\n pagesCount: number\n): number | undefined => {\n if (startPage > pagesCount) return\n let nextPage = startPage\n while (disabledPages.includes(nextPage)) {\n nextPage++\n }\n return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n startPage: number,\n disabledPages: number[]\n): number | undefined => {\n if (startPage < 1) return\n let previousPage = startPage\n while (disabledPages.includes(previousPage)) {\n previousPage--\n }\n return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n currentPage: number,\n pagesCount: number,\n visibleElementsCount: number\n): PaginationItemsToRender => {\n const paginationPages = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n /*\n * As we always show the `<` `>` arrows,\n * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n * to get the `visiblePagesCount`\n */\n let visiblePagesCount = visibleElementsCount - 2\n const withPreviousNextPageArrows = (paginationPages) => [\n GO_TO_PREVIOUS_PAGE,\n ...paginationPages,\n GO_TO_NEXT_PAGE\n ]\n\n /**\n * If fewer pages than threshold for truncating render them all.\n *\n * pagesCount: 6\n * visibleElementsCount: >=6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | 3 | | 4 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (pagesCount <= visiblePagesCount) {\n return withPreviousNextPageArrows(paginationPages)\n }\n\n /**\n * If current page is either at the very start or at the very end of the pages\n */\n const canFitEdgePage = visibleElementsCount >= 5\n const canFitViewAllPopover = visibleElementsCount >= 4\n const canFitPages = visibleElementsCount >= 3\n\n if (canFitViewAllPopover) {\n // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n visiblePagesCount -= 1\n }\n\n if (canFitEdgePage) {\n // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n visiblePagesCount -= 1\n }\n\n const firstPage = paginationPages[0]\n const lastPage = paginationPages[paginationPages.length - 1]\n\n /**\n * If we're truncating and current page is at the start of the page list,\n * render the initial truncated page list, e.g.\n *\n * pagesCount: 8\n * currentPage: 1/2\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | … | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage < visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitPages) {\n newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitEdgePage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page is towards the end of the\n * page list (depending on visibleElementsCount),\n * render a truncated page list from the end, e.g.\n *\n * pagesCount: 8\n * currentPage: 7/8\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | … | | 7 | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage > pagesCount - visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitEdgePage) {\n newPaginationItems.push(firstPage)\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitPages) {\n newPaginationItems.push(\n ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n )\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page doesn't meet any of the previous conditions\n * (we're in the middle)\n * render a truncated page list from a specific index relative to `currentPage`, e.g.\n *\n * currentPage: 4\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 3 | | 4 | | … | | 6 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n * currentPage: 6\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 4 | | 5 | | 6 | | 7 | | … | | 10 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n */\n const canFitCurrentPage = canFitPages\n const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n const canFitLastPage = canFitEdgePage\n\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitCurrentPageAndPreviousPageAndNextPage) {\n newPaginationItems.push(\n ...paginationPages.slice(\n currentPage + 1 - visiblePagesCount,\n currentPage + 1\n )\n )\n } else if (canFitCurrentPageAndPreviousPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n )\n } else if (canFitCurrentPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n )\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitLastPage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n startPage: number,\n disabledPages: number[],\n pagesCount: number\n): number | undefined => {\n if (startPage > pagesCount) return\n let nextPage = startPage\n while (disabledPages.includes(nextPage)) {\n nextPage++\n }\n return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n startPage: number,\n disabledPages: number[]\n): number | undefined => {\n if (startPage < 1) return\n let previousPage = startPage\n while (disabledPages.includes(previousPage)) {\n previousPage--\n }\n return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAOD,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;EACD;;;;;;;;;;;;AAaD,KAAI,cAAc,kBAChB,QAAO,2BAA2B,gBAAgB;;;;CAMpD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;AAE5C,KAAI,qBAEF,sBAAqB;AAGvB,KAAI,eAEF,sBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAClC,MAAM,WAAW,gBAAgB,gBAAgB,SAAS;;;;;;;;;;;;;;AAe1D,KAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,EAAE;AAC7B,MAAI,YACF,oBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,kBAAkB,CAAC;AAEzE,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;AAiBvD,KAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,EAAE;AAC7B,MAAI,eACF,oBAAmB,KAAK,UAAU;AAEpC,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,YACF,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,WAAW,CACrE;AAEH,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;;;;;;CAsBvD,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,EAAE;AAC7B,KAAI,4CACF,oBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,EACf,CACF;UACQ,iCACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,YAAY,CACvE;UACQ,kBACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,EAAE,CAC/D;AAEH,KAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,KAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,QAAO,2BAA2B,mBAAmB;;AAGvD,IAAa,yBACX,WACA,eACA,eACuB;AACvB,KAAI,YAAY,WAAY;CAC5B,IAAI,WAAW;AACf,QAAO,cAAc,SAAS,SAAS,CACrC;AAEF,QAAO;;AAGT,IAAa,6BACX,WACA,kBACuB;AACvB,KAAI,YAAY,EAAG;CACnB,IAAI,eAAe;AACnB,QAAO,cAAc,SAAS,aAAa,CACzC;AAEF,QAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n const context = React.useContext(PaginationContext)\n\n if (!context) {\n throw new Error(\n 'Ensure that you wrap any components with the PaginationProvider component'\n )\n }\n\n return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n const context = React.useContext(PaginationContext)\n\n if (!context) {\n throw new Error(\n 'Ensure that you wrap any components with the PaginationProvider component'\n )\n }\n\n return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,kBAAkB;AAEnD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,4EACD;AAGH,QAAO"}
|