pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/Accordion/Accordion.js +13 -15
- package/dist/Components/Accordion/accordionColors.js +6 -9
- package/dist/Components/AlertDialog/AlertDialog.js +1 -2
- package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js +2 -3
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js +2 -3
- package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js +2 -3
- package/dist/Components/AppearanceSettings/AppearanceSettings.js +9 -7
- package/dist/Components/Button/Button.styles.js +4 -10
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +9 -10
- package/dist/Components/Common/ErrorComponent.js +5 -8
- package/dist/Components/Common/ErrorMessage.js +2 -8
- package/dist/Components/Common/FormLabel.js +1 -3
- package/dist/Components/Common/FormattedDescription.js +3 -1
- package/dist/Components/Common/Label.js +3 -8
- package/dist/Components/Common/fieldStyles.js +6 -7
- package/dist/Components/ContactForm/ContactForm.js +1 -2
- package/dist/Components/CopyButton/CopyButton.js +3 -6
- package/dist/Components/CustomModulesTable/CustomModulesTable.js +7 -10
- package/dist/Components/CustomModulesTable/DeleteModuleModal.js +2 -2
- package/dist/Components/CustomModulesTable/EditModuleModal.js +2 -3
- package/dist/Components/DatePicker/CalendarPanel.js +2 -3
- package/dist/Components/DatePicker/RangeDatePicker.js +9 -9
- package/dist/Components/DatePicker/SingleDatePicker.js +11 -11
- package/dist/Components/DatePicker/TimeOnlyPicker.js +2 -2
- package/dist/Components/DatePicker/TimePicker.js +6 -7
- package/dist/Components/DatePicker/TimePickerInput.js +6 -7
- package/dist/Components/Divider/Divider.js +1 -2
- package/dist/Components/Drawer/Drawer.js +1 -2
- package/dist/Components/Dropdown/DropDown.js +22 -26
- package/dist/Components/Editor/Editor.js +10 -13
- package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +2 -2
- package/dist/Components/EmptyState/EmptyState.js +11 -11
- package/dist/Components/FieldSelectModal/FieldSelectModal.js +1 -1
- package/dist/Components/FilePreview/FilePreview.js +2 -2
- package/dist/Components/FileUpload/FileUpload.js +18 -24
- package/dist/Components/FileUploader/FileUploader.js +5 -6
- package/dist/Components/FilterSidebar/FilterSidebar.js +156 -160
- package/dist/Components/Form/FormWrapper.js +1 -2
- package/dist/Components/Header/Header.js +6 -6
- package/dist/Components/Header/HeaderActions.d.ts +3 -1
- package/dist/Components/Header/HeaderActions.js +8 -4
- package/dist/Components/Header/components/desktopMenu.js +7 -20
- package/dist/Components/Header/components/mobileMenu.js +3 -15
- package/dist/Components/Input/Input/Input.js +13 -17
- package/dist/Components/Input/TextInput.styles.js +10 -13
- package/dist/Components/InputTextArea/InputTextArea.d.ts +1 -1
- package/dist/Components/InputTextArea/InputTextArea.style.js +10 -11
- package/dist/Components/KanbanBoard/AccountCard.js +10 -4
- package/dist/Components/KanbanBoard/AccountRow.js +1 -2
- package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js +2 -2
- package/dist/Components/KanbanBoard/KanbanBoard.js +21 -28
- package/dist/Components/LazyWrapper/LazyWrapper.js +1 -1
- package/dist/Components/LimitReachedModal/LimitReachedModal.js +3 -15
- package/dist/Components/Loading/Loading.js +1 -1
- package/dist/Components/Modal/Modal.js +3 -1
- package/dist/Components/MoreItems/MoreItems.js +3 -7
- package/dist/Components/MultiSelect/MultiSelect.js +5 -6
- package/dist/Components/NavigationBar/NavigationBar.d.ts +1 -1
- package/dist/Components/NavigationBar/NavigationBar.js +22 -18
- package/dist/Components/NavigationBar/NavigationBarProps.d.ts +5 -0
- package/dist/Components/NoteTextArea/NoteTextArea.js +4 -8
- package/dist/Components/Notification/Notification.js +17 -15
- package/dist/Components/NumberInput/NumberInput.styles.js +10 -11
- package/dist/Components/OrgSwitcher/OrgSwitcher.js +6 -7
- package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts +2 -0
- package/dist/Components/OrgSwitcher/OrgSwitcherProps.js +6 -2
- package/dist/Components/OrganizationDetails/CreateOrgModal.js +1 -2
- package/dist/Components/OrganizationDetails/DeleteOrgModal.js +5 -2
- package/dist/Components/OrganizationDetails/OrganizationDetails.js +25 -22
- package/dist/Components/PdfViewer/PdfViewer.js +1 -1
- package/dist/Components/PinInputs/PinInputs.js +7 -14
- package/dist/Components/PlanPill/PlanPill.js +5 -8
- package/dist/Components/PlanPill/planPillGradient.d.ts +19 -0
- package/dist/Components/PlanPill/planPillGradient.js +30 -1
- package/dist/Components/ProductCard/ProductPrice.js +6 -6
- package/dist/Components/ProductCard/ProductReview.js +4 -1
- package/dist/Components/ProductCard/ProductTags.js +4 -4
- package/dist/Components/ProductDetails/ProductDetails.js +3 -1
- package/dist/Components/ProductDetails/ProductDtlPrice.js +3 -3
- package/dist/Components/ProfileCard/ProfileCard.js +4 -4
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +19 -16
- package/dist/Components/Reorder/Reorder.js +3 -4
- package/dist/Components/RolesPermission/DeleteRoleModal.js +5 -4
- package/dist/Components/RolesPermission/RolesPermission.js +12 -14
- package/dist/Components/ScrollToTop/ScrollToTop.js +2 -3
- package/dist/Components/SearchSelect/SearchSelect.js +25 -28
- package/dist/Components/Select/Select.styles.js +33 -37
- package/dist/Components/SelectSearch/SelectSearch.js +8 -8
- package/dist/Components/SelectV2/SelectV2.js +14 -20
- package/dist/Components/SideBar/SecondaryBar.js +10 -15
- package/dist/Components/SideBar/SideBar.d.ts +1 -1
- package/dist/Components/SideBar/SideBar.js +41 -34
- package/dist/Components/SideBar/SideBarProps.d.ts +6 -0
- package/dist/Components/SideBar/components/MenuItemBox.js +10 -12
- package/dist/Components/SideBar/components/MenuItems.js +3 -1
- package/dist/Components/SideBar/components/MenuPopoverContent.js +7 -9
- package/dist/Components/SideBar/components/OtherApps.js +4 -4
- package/dist/Components/SideBar/sidebarAccentColors.d.ts +4 -17
- package/dist/Components/SideBar/sidebarAccentColors.js +6 -33
- package/dist/Components/SignInActivityTable/SignInActivityTable.js +6 -7
- package/dist/Components/Slider/Slider.js +2 -2
- package/dist/Components/StageProgress/StageProgressProps.js +9 -13
- package/dist/Components/Table/Table.js +10 -10
- package/dist/Components/Table/components/HeaderActions.js +6 -7
- package/dist/Components/Table/components/Pagination.js +1 -1
- package/dist/Components/Table/components/TableActions.js +4 -4
- package/dist/Components/Table/components/TableBody.js +18 -20
- package/dist/Components/Table/components/TableGroupRow.js +1 -2
- package/dist/Components/Table/components/TableHeader.js +8 -12
- package/dist/Components/Table/components/TableSearch.js +1 -2
- package/dist/Components/Table/components/tableRowHoverStyle.js +2 -3
- package/dist/Components/Table/filters/ActiveFilters.js +5 -8
- package/dist/Components/Table/filters/CompactSelect.js +4 -5
- package/dist/Components/Table/filters/LeftFilterPane.js +4 -5
- package/dist/Components/Table/filters/TableFilters.js +1 -2
- package/dist/Components/Table/hooks/useTable.js +8 -11
- package/dist/Components/Table/settings/ManageColumns.js +1 -1
- package/dist/Components/Table/settings/TableSettings.js +12 -14
- package/dist/Components/Tag/Tag.styles.js +8 -6
- package/dist/Components/Timeline/Timeline.js +32 -45
- package/dist/Components/Toaster/Toaster.js +43 -44
- package/dist/Components/ToolTip/ToolTip.js +1 -6
- package/dist/Components/Trail/EditableCell.js +4 -1
- package/dist/Components/Trail/TrailWorks.js +3 -3
- package/dist/Components/UpgradeButton/UpgradeButton.js +2 -4
- package/dist/Components/UserDetails/AddUserModal.js +3 -3
- package/dist/Components/UserDetails/ChangeRoleModal.js +2 -2
- package/dist/Components/UserDetails/DeactivateConfirmModal.js +5 -5
- package/dist/Components/UserDetails/UserDetails.js +14 -16
- package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js +1 -2
- package/dist/Components/WorkspaceWindow/WorkspaceWindow.js +3 -4
- package/dist/Theme/assertPalette.d.ts +11 -0
- package/dist/Theme/assertPalette.js +55 -0
- package/dist/Theme/chakra/Avatar.styles.d.ts +5 -5
- package/dist/Theme/chakra/Avatar.styles.js +2 -2
- package/dist/Theme/chakra/Drawer.styles.d.ts +5 -5
- package/dist/Theme/chakra/Drawer.styles.js +8 -10
- package/dist/Theme/chakra/Modal.styles.d.ts +5 -5
- package/dist/Theme/chakra/Modal.styles.js +8 -10
- package/dist/Theme/chakra/Popover.styles.d.ts +3 -3
- package/dist/Theme/chakra/Slider.styles.d.ts +1 -1
- package/dist/Theme/chakra/Slider.styles.js +7 -9
- package/dist/Theme/chakra/Tabs.styles.d.ts +2 -2
- package/dist/Theme/chakra/Tabs.styles.js +13 -18
- package/dist/Theme/chakra/componentStyles.d.ts +54 -21
- package/dist/Theme/chakra/componentStyles.js +52 -43
- package/dist/Theme/chakra/paletteFromTheme.d.ts +10 -0
- package/dist/Theme/chakra/paletteFromTheme.js +14 -0
- package/dist/Theme/provider/PixelizeThemeProvider.js +5 -0
- package/dist/Theme/testing/testPalette.d.ts +16 -0
- package/dist/Theme/testing/testPalette.js +24 -0
- package/dist/Theme/tokens/brands/emerald/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/emerald/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/index.d.ts +3 -2
- package/dist/Theme/tokens/brands/index.js +29 -23
- package/dist/Theme/tokens/brands/lavender/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/lavender/palette.light.js +3 -110
- package/dist/Theme/tokens/brands/meadow/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/meadow/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/neutrals.d.ts +8 -0
- package/dist/Theme/tokens/brands/neutrals.js +119 -0
- package/dist/Theme/tokens/brands/radiant/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/radiant/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/rosewood/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/rosewood/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/skyline/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/skyline/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/slate/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/slate/palette.light.js +6 -8
- package/dist/Theme/tokens/brands/storefront/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/brands/storefront/palette.light.js +5 -7
- package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts +5 -3
- package/dist/Theme/tokens/brands/zinc/palette.dark.js +2 -1
- package/dist/Theme/tokens/brands/zinc/palette.light.d.ts +2 -373
- package/dist/Theme/tokens/builders/accentText.d.ts +2 -2
- package/dist/Theme/tokens/builders/accentText.js +8 -27
- package/dist/Theme/tokens/builders/brandInk.d.ts +11 -0
- package/dist/Theme/tokens/builders/brandInk.js +106 -0
- package/dist/Theme/tokens/builders/buildDarkPalette.d.ts +2 -2
- package/dist/Theme/tokens/builders/buildDarkPalette.js +16 -8
- package/dist/Theme/tokens/builders/mutedText.d.ts +5 -0
- package/dist/Theme/tokens/builders/mutedText.js +9 -0
- package/dist/Theme/tokens/builders/outlineRung.d.ts +7 -6
- package/dist/Theme/tokens/builders/outlineRung.js +20 -18
- package/dist/Theme/tokens/builders/resolvedRungs.d.ts +7 -0
- package/dist/Theme/tokens/builders/resolvedRungs.js +25 -0
- package/dist/Theme/tokens/builders/semanticText.d.ts +10 -0
- package/dist/Theme/tokens/builders/semanticText.js +22 -0
- package/dist/Theme/tokens/builders/sidebarAccent.d.ts +9 -0
- package/dist/Theme/tokens/builders/sidebarAccent.js +29 -0
- package/dist/Theme/tokens/builders/statusTone.js +3 -4
- package/dist/Theme/tokens/builders/surfaceRungs.d.ts +5 -0
- package/dist/Theme/tokens/builders/surfaceRungs.js +39 -0
- package/dist/Theme/tokens/types.d.ts +41 -13
- package/dist/Theme/useCustomTheme.js +4 -1
- package/dist/Utils/table.d.ts +1 -7
- package/dist/Utils/table.js +27 -35
- package/dist/esm/Components/Accordion/Accordion.js +14 -16
- package/dist/esm/Components/Accordion/accordionColors.js +6 -9
- package/dist/esm/Components/AlertDialog/AlertDialog.js +1 -2
- package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js +2 -3
- package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js +2 -3
- package/dist/esm/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js +2 -3
- package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js +9 -7
- package/dist/esm/Components/Button/Button.styles.js +4 -10
- package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js +9 -10
- package/dist/esm/Components/Common/ErrorComponent.js +6 -9
- package/dist/esm/Components/Common/ErrorMessage.js +2 -8
- package/dist/esm/Components/Common/FormLabel.js +1 -3
- package/dist/esm/Components/Common/FormattedDescription.js +3 -1
- package/dist/esm/Components/Common/Label.js +3 -8
- package/dist/esm/Components/Common/fieldStyles.js +6 -7
- package/dist/esm/Components/ContactForm/ContactForm.js +1 -2
- package/dist/esm/Components/CopyButton/CopyButton.js +3 -6
- package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js +7 -10
- package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js +2 -2
- package/dist/esm/Components/CustomModulesTable/EditModuleModal.js +2 -3
- package/dist/esm/Components/DatePicker/CalendarPanel.js +2 -3
- package/dist/esm/Components/DatePicker/RangeDatePicker.js +9 -9
- package/dist/esm/Components/DatePicker/SingleDatePicker.js +11 -11
- package/dist/esm/Components/DatePicker/TimeOnlyPicker.js +2 -2
- package/dist/esm/Components/DatePicker/TimePicker.js +6 -7
- package/dist/esm/Components/DatePicker/TimePickerInput.js +6 -7
- package/dist/esm/Components/Divider/Divider.js +1 -2
- package/dist/esm/Components/Drawer/Drawer.js +1 -2
- package/dist/esm/Components/Dropdown/DropDown.js +22 -26
- package/dist/esm/Components/Editor/Editor.js +11 -14
- package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +2 -2
- package/dist/esm/Components/EmptyState/EmptyState.js +11 -11
- package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js +1 -1
- package/dist/esm/Components/FilePreview/FilePreview.js +2 -2
- package/dist/esm/Components/FileUpload/FileUpload.js +18 -24
- package/dist/esm/Components/FileUploader/FileUploader.js +6 -7
- package/dist/esm/Components/FilterSidebar/FilterSidebar.js +157 -161
- package/dist/esm/Components/Form/FormWrapper.js +1 -2
- package/dist/esm/Components/Header/Header.js +6 -6
- package/dist/esm/Components/Header/HeaderActions.js +9 -5
- package/dist/esm/Components/Header/components/desktopMenu.js +8 -21
- package/dist/esm/Components/Header/components/mobileMenu.js +3 -15
- package/dist/esm/Components/Input/Input/Input.js +14 -18
- package/dist/esm/Components/Input/TextInput.styles.js +10 -13
- package/dist/esm/Components/InputTextArea/InputTextArea.style.js +10 -11
- package/dist/esm/Components/KanbanBoard/AccountCard.js +10 -4
- package/dist/esm/Components/KanbanBoard/AccountRow.js +1 -2
- package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js +2 -2
- package/dist/esm/Components/KanbanBoard/KanbanBoard.js +21 -28
- package/dist/esm/Components/LazyWrapper/LazyWrapper.js +1 -1
- package/dist/esm/Components/LimitReachedModal/LimitReachedModal.js +4 -16
- package/dist/esm/Components/Loading/Loading.js +1 -1
- package/dist/esm/Components/Modal/Modal.js +3 -1
- package/dist/esm/Components/MoreItems/MoreItems.js +3 -7
- package/dist/esm/Components/MultiSelect/MultiSelect.js +5 -6
- package/dist/esm/Components/NavigationBar/NavigationBar.js +23 -19
- package/dist/esm/Components/NoteTextArea/NoteTextArea.js +4 -8
- package/dist/esm/Components/Notification/Notification.js +18 -16
- package/dist/esm/Components/NumberInput/NumberInput.styles.js +10 -11
- package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js +7 -8
- package/dist/esm/Components/OrgSwitcher/OrgSwitcherProps.js +5 -1
- package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js +1 -2
- package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js +5 -2
- package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js +25 -22
- package/dist/esm/Components/PdfViewer/PdfViewer.js +1 -1
- package/dist/esm/Components/PinInputs/PinInputs.js +8 -15
- package/dist/esm/Components/PlanPill/PlanPill.js +6 -9
- package/dist/esm/Components/PlanPill/planPillGradient.js +24 -0
- package/dist/esm/Components/ProductCard/ProductPrice.js +6 -6
- package/dist/esm/Components/ProductCard/ProductReview.js +4 -1
- package/dist/esm/Components/ProductCard/ProductTags.js +5 -5
- package/dist/esm/Components/ProductDetails/ProductDetails.js +3 -1
- package/dist/esm/Components/ProductDetails/ProductDtlPrice.js +3 -3
- package/dist/esm/Components/ProfileCard/ProfileCard.js +5 -5
- package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +20 -17
- package/dist/esm/Components/Reorder/Reorder.js +3 -4
- package/dist/esm/Components/RolesPermission/DeleteRoleModal.js +5 -4
- package/dist/esm/Components/RolesPermission/RolesPermission.js +12 -14
- package/dist/esm/Components/ScrollToTop/ScrollToTop.js +2 -3
- package/dist/esm/Components/SearchSelect/SearchSelect.js +25 -28
- package/dist/esm/Components/Select/Select.styles.js +33 -37
- package/dist/esm/Components/SelectSearch/SelectSearch.js +8 -8
- package/dist/esm/Components/SelectV2/SelectV2.js +14 -20
- package/dist/esm/Components/SideBar/SecondaryBar.js +11 -16
- package/dist/esm/Components/SideBar/SideBar.js +43 -36
- package/dist/esm/Components/SideBar/components/MenuItemBox.js +11 -13
- package/dist/esm/Components/SideBar/components/MenuItems.js +3 -1
- package/dist/esm/Components/SideBar/components/MenuPopoverContent.js +8 -10
- package/dist/esm/Components/SideBar/components/OtherApps.js +4 -4
- package/dist/esm/Components/SideBar/sidebarAccentColors.js +5 -31
- package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js +6 -7
- package/dist/esm/Components/Slider/Slider.js +2 -2
- package/dist/esm/Components/StageProgress/StageProgressProps.js +9 -13
- package/dist/esm/Components/Table/Table.js +10 -10
- package/dist/esm/Components/Table/components/HeaderActions.js +6 -7
- package/dist/esm/Components/Table/components/Pagination.js +1 -1
- package/dist/esm/Components/Table/components/TableActions.js +4 -4
- package/dist/esm/Components/Table/components/TableBody.js +18 -20
- package/dist/esm/Components/Table/components/TableGroupRow.js +1 -2
- package/dist/esm/Components/Table/components/TableHeader.js +8 -12
- package/dist/esm/Components/Table/components/TableSearch.js +1 -2
- package/dist/esm/Components/Table/components/tableRowHoverStyle.js +2 -3
- package/dist/esm/Components/Table/filters/ActiveFilters.js +5 -8
- package/dist/esm/Components/Table/filters/CompactSelect.js +4 -5
- package/dist/esm/Components/Table/filters/LeftFilterPane.js +4 -5
- package/dist/esm/Components/Table/filters/TableFilters.js +1 -2
- package/dist/esm/Components/Table/hooks/useTable.js +8 -11
- package/dist/esm/Components/Table/settings/ManageColumns.js +1 -1
- package/dist/esm/Components/Table/settings/TableSettings.js +12 -14
- package/dist/esm/Components/Tag/Tag.styles.js +9 -7
- package/dist/esm/Components/Timeline/Timeline.js +33 -46
- package/dist/esm/Components/Toaster/Toaster.js +44 -45
- package/dist/esm/Components/ToolTip/ToolTip.js +1 -6
- package/dist/esm/Components/Trail/EditableCell.js +4 -1
- package/dist/esm/Components/Trail/TrailWorks.js +4 -4
- package/dist/esm/Components/UpgradeButton/UpgradeButton.js +2 -4
- package/dist/esm/Components/UserDetails/AddUserModal.js +3 -3
- package/dist/esm/Components/UserDetails/ChangeRoleModal.js +2 -2
- package/dist/esm/Components/UserDetails/DeactivateConfirmModal.js +5 -5
- package/dist/esm/Components/UserDetails/UserDetails.js +15 -17
- package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js +1 -2
- package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js +3 -4
- package/dist/esm/Theme/assertPalette.js +50 -0
- package/dist/esm/Theme/chakra/Avatar.styles.js +2 -2
- package/dist/esm/Theme/chakra/Drawer.styles.js +8 -10
- package/dist/esm/Theme/chakra/Modal.styles.js +8 -10
- package/dist/esm/Theme/chakra/Slider.styles.js +7 -9
- package/dist/esm/Theme/chakra/Tabs.styles.js +13 -18
- package/dist/esm/Theme/chakra/componentStyles.js +53 -44
- package/dist/esm/Theme/chakra/paletteFromTheme.js +9 -0
- package/dist/esm/Theme/provider/PixelizeThemeProvider.js +5 -0
- package/dist/esm/Theme/testing/testPalette.js +19 -0
- package/dist/esm/Theme/tokens/brands/emerald/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/index.js +28 -23
- package/dist/esm/Theme/tokens/brands/lavender/palette.light.js +3 -110
- package/dist/esm/Theme/tokens/brands/meadow/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/neutrals.js +116 -0
- package/dist/esm/Theme/tokens/brands/radiant/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/rosewood/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/skyline/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/slate/palette.light.js +6 -5
- package/dist/esm/Theme/tokens/brands/storefront/palette.light.js +5 -4
- package/dist/esm/Theme/tokens/brands/zinc/palette.dark.js +3 -2
- package/dist/esm/Theme/tokens/builders/accentText.js +8 -27
- package/dist/esm/Theme/tokens/builders/brandInk.js +103 -0
- package/dist/esm/Theme/tokens/builders/buildDarkPalette.js +17 -9
- package/dist/esm/Theme/tokens/builders/mutedText.js +5 -0
- package/dist/esm/Theme/tokens/builders/outlineRung.js +21 -19
- package/dist/esm/Theme/tokens/builders/resolvedRungs.js +20 -0
- package/dist/esm/Theme/tokens/builders/semanticText.js +17 -0
- package/dist/esm/Theme/tokens/builders/sidebarAccent.js +23 -0
- package/dist/esm/Theme/tokens/builders/statusTone.js +3 -4
- package/dist/esm/Theme/tokens/builders/surfaceRungs.js +33 -0
- package/dist/esm/Theme/useCustomTheme.js +4 -1
- package/dist/esm/Utils/table.js +28 -36
- package/dist/esm/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +9 -2
- package/package.json +1 -1
|
@@ -30,7 +30,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
30
30
|
}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", stripe, groupColors, onAddItem, emptyState, onRefresh,
|
|
31
31
|
// onColumnFilter
|
|
32
32
|
}) {
|
|
33
|
-
var _a, _b, _c, _d
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
34
|
const theme = useCustomTheme();
|
|
35
35
|
const [columnsSearch, setColumnsSearch] = useState({});
|
|
36
36
|
const tableContainerRef = useRef(null);
|
|
@@ -355,9 +355,9 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
355
355
|
from { transform: rotate(0deg); }
|
|
356
356
|
to { transform: rotate(360deg); }
|
|
357
357
|
}
|
|
358
|
-
` }), _jsxs(Box, { bg:
|
|
359
|
-
color:
|
|
360
|
-
} }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg:
|
|
358
|
+
` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.border[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
|
|
359
|
+
color: theme.colors.accentText,
|
|
360
|
+
} }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
|
|
361
361
|
var _a;
|
|
362
362
|
e.stopPropagation();
|
|
363
363
|
if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
|
|
@@ -366,8 +366,8 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
366
366
|
else {
|
|
367
367
|
(_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
|
|
368
368
|
}
|
|
369
|
-
}, _hover: { bg:
|
|
370
|
-
color: theme.colors.
|
|
369
|
+
}, _hover: { bg: theme.colors.red[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: _jsx(X, { size: 10, strokeWidth: 3 }) }))] }) }), _jsx(VeritcalDivider, {})] })), _jsx(TableSearch, { onSearch: onGlobalSearch }), isTableSettings && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(TableSettings, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(ToolTip, { label: "Refresh", placement: "top", children: _jsx(Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
|
|
370
|
+
color: theme.colors.accentText,
|
|
371
371
|
transform: "scale(1.1)"
|
|
372
372
|
}, onClick: async () => {
|
|
373
373
|
if (!isRefreshing) {
|
|
@@ -383,9 +383,9 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
383
383
|
animation: isRefreshing
|
|
384
384
|
? "pixelize-table-spin 1s linear infinite"
|
|
385
385
|
: "none"
|
|
386
|
-
}, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color:
|
|
387
|
-
color:
|
|
388
|
-
}, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg:
|
|
386
|
+
}, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
|
|
387
|
+
color: theme.colors.accentText,
|
|
388
|
+
}, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
|
|
389
389
|
'&::-webkit-scrollbar': {
|
|
390
390
|
width: '6px',
|
|
391
391
|
height: isCompactRows ? '0px' : '6px',
|
|
@@ -426,5 +426,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
426
426
|
backgroundColor: "transparent",
|
|
427
427
|
zIndex: 999,
|
|
428
428
|
},
|
|
429
|
-
}, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg:
|
|
429
|
+
}, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
|
|
430
430
|
}
|
|
@@ -6,7 +6,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
|
6
6
|
import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
|
|
7
7
|
import VeritcalDivider from "../../Divider/Divider.js";
|
|
8
8
|
const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
|
|
9
|
-
var _a, _b, _c;
|
|
10
9
|
const { colors } = useCustomTheme();
|
|
11
10
|
const styledIcon = icon ? React.cloneElement(icon, {
|
|
12
11
|
color: "currentColor",
|
|
@@ -14,18 +13,18 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
|
|
|
14
13
|
}) : null;
|
|
15
14
|
// A `customComponent` may itself be focusable, and a button must never wrap one.
|
|
16
15
|
const isButton = !!onClick && !customComponent;
|
|
17
|
-
return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color:
|
|
16
|
+
return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
|
|
18
17
|
? {
|
|
19
|
-
color: hoverColor ? hoverColor : (
|
|
20
|
-
bg:
|
|
18
|
+
color: hoverColor ? hoverColor : accentTextOnCanvas(colors.primary, colors.background[100]),
|
|
19
|
+
bg: colors.background[100],
|
|
21
20
|
}
|
|
22
21
|
: {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
|
|
23
22
|
};
|
|
24
23
|
const HeaderActions = ({ actions, selections, }) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f
|
|
24
|
+
var _a, _b, _c, _d, _e, _f;
|
|
26
25
|
const { colors } = useCustomTheme();
|
|
27
26
|
const hasSelections = selections.length > 0;
|
|
28
|
-
return (_jsxs(Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: accentTextOnCanvas(colors
|
|
27
|
+
return (_jsxs(Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), alignItems: "center", children: [(_a = actions === null || actions === void 0 ? void 0 : actions.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
|
|
29
28
|
if ("type" in item)
|
|
30
29
|
return null;
|
|
31
30
|
const actionItem = item;
|
|
@@ -33,7 +32,7 @@ const HeaderActions = ({ actions, selections, }) => {
|
|
|
33
32
|
return (_jsx(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
|
|
34
33
|
}
|
|
35
34
|
return null;
|
|
36
|
-
}), hasSelections && (_jsxs(_Fragment, { children: [((
|
|
35
|
+
}), hasSelections && (_jsxs(_Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: accentTextOnCanvas(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
|
|
37
36
|
if ("type" in item && item.type === "divider") {
|
|
38
37
|
return _jsx(VeritcalDivider, {}, index);
|
|
39
38
|
}
|
|
@@ -14,6 +14,6 @@ const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPa
|
|
|
14
14
|
// const isRightDisabled = currentPage >= pages - 1;
|
|
15
15
|
const isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
16
16
|
const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
|
|
17
|
-
return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.
|
|
17
|
+
return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
|
|
18
18
|
});
|
|
19
19
|
export default Pagination;
|
|
@@ -4,7 +4,7 @@ import { Button, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigge
|
|
|
4
4
|
import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
|
|
5
5
|
import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
6
6
|
const TableActions = React.memo(({ row }) => {
|
|
7
|
-
var _a
|
|
7
|
+
var _a;
|
|
8
8
|
const [isOpen, setIsOpen] = useState(false);
|
|
9
9
|
const ref = useRef(null);
|
|
10
10
|
const theme = useCustomTheme();
|
|
@@ -37,15 +37,15 @@ const TableActions = React.memo(({ row }) => {
|
|
|
37
37
|
// ✅ if row itself is missing, render nothing
|
|
38
38
|
if (!row)
|
|
39
39
|
return null;
|
|
40
|
-
return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${
|
|
40
|
+
return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
|
|
41
41
|
var _a;
|
|
42
42
|
(_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
43
43
|
handleClose();
|
|
44
|
-
}, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${
|
|
44
|
+
}, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, onClick: () => {
|
|
45
45
|
var _a;
|
|
46
46
|
(_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
47
47
|
handleClose();
|
|
48
|
-
}, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((
|
|
48
|
+
}, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
|
|
49
49
|
var _a;
|
|
50
50
|
(_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
51
51
|
handleClose();
|
|
@@ -27,7 +27,6 @@ const getRowContent = (row) => typeof row.content === "function"
|
|
|
27
27
|
const StatusCell = ({ value, onSolid }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
|
|
28
28
|
const EMPTY_HOVER = {};
|
|
29
29
|
const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
|
|
30
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
31
30
|
// Measured-height virtualization: report this row's real height (main + any
|
|
32
31
|
// expanded panel) so the windower can place variable/expandable rows exactly.
|
|
33
32
|
const mainRowRef = useRef(null);
|
|
@@ -68,12 +67,12 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
|
|
|
68
67
|
const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
|
|
69
68
|
// Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
|
|
70
69
|
// as one piece with its header (and so sticky cells cover scrolling content).
|
|
71
|
-
const frozenCellBg =
|
|
70
|
+
const frozenCellBg = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[100];
|
|
72
71
|
const cellStyles = row.cellStyle;
|
|
73
72
|
const rowStyle = row.rowStyle;
|
|
74
73
|
const rowContent = getRowContent(row);
|
|
75
|
-
return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left:
|
|
76
|
-
var _a, _b, _c
|
|
74
|
+
return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: "6", fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
|
|
75
|
+
var _a, _b, _c;
|
|
77
76
|
if (header.isHidden)
|
|
78
77
|
return null;
|
|
79
78
|
const isFrozen = header.isFreeze;
|
|
@@ -85,22 +84,22 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
|
|
|
85
84
|
: null;
|
|
86
85
|
// Guards a `statusColor` built by an older external caller that predates `onSolid`.
|
|
87
86
|
const statusOnSolid = statusColor
|
|
88
|
-
? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : onFilled(
|
|
87
|
+
? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : onFilled(statusColor.solid, theme.colors.white, theme.colors.black)
|
|
89
88
|
: undefined;
|
|
90
|
-
return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg :
|
|
89
|
+
return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
|
|
91
90
|
? "none"
|
|
92
|
-
: `0.063rem solid ${
|
|
91
|
+
: `0.063rem solid ${theme.colors.boxborder[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : theme.colors.text[500], _hover: isStatus && statusColor
|
|
93
92
|
? EMPTY_HOVER
|
|
94
93
|
: (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
|
|
95
94
|
? EMPTY_HOVER
|
|
96
95
|
: hoverStyle, children: isStatus && statusColor ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
|
|
97
|
-
}), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg :
|
|
96
|
+
}), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : theme.colors.background[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
|
|
98
97
|
(isCheckbox ? 1 : 0) +
|
|
99
98
|
(isContent ? 1 : 0) +
|
|
100
|
-
(isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg:
|
|
99
|
+
(isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
|
|
101
100
|
});
|
|
102
101
|
const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
|
|
103
|
-
var _a, _b, _c
|
|
102
|
+
var _a, _b, _c;
|
|
104
103
|
const theme = useCustomTheme();
|
|
105
104
|
const [expandedRows, setExpandedRows] = useState(new Set());
|
|
106
105
|
const [collapsedGroups, setCollapsedGroups] = useState(new Set());
|
|
@@ -247,17 +246,16 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
|
|
|
247
246
|
const checkboxOffset = isCheckbox ? 50 : 0;
|
|
248
247
|
return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
|
|
249
248
|
}, [columnWidths, isCheckbox]);
|
|
250
|
-
const borderStyle = useMemo(() =>
|
|
249
|
+
const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.border]);
|
|
251
250
|
// Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
|
|
252
251
|
// cells keep their solid color + white text instead of white-on-tint.
|
|
253
|
-
const selectedBg =
|
|
252
|
+
const selectedBg = theme.colors.primary.opacity[16];
|
|
254
253
|
// Sticky/frozen cells overlay scrolling content, so their selected background
|
|
255
254
|
// must be OPAQUE — paint the (translucent) tint over an opaque base.
|
|
256
255
|
const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
|
|
257
|
-
// Dark mode
|
|
258
|
-
//
|
|
259
|
-
|
|
260
|
-
const isDark = isDarkCanvas((_h = (_g = theme.colors.backgroundColor) === null || _g === void 0 ? void 0 : _g.main) !== null && _h !== void 0 ? _h : theme.colors.white);
|
|
256
|
+
// Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
|
|
257
|
+
// No ink flip needed — see `tableRowHoverStyle.ts`.
|
|
258
|
+
const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
|
|
261
259
|
const hoverStyle = useMemo(() => getTableRowHoverStyle(theme.colors, isDark), [theme.colors, isDark]);
|
|
262
260
|
// Flatten groups → one sequence of header/row items so it can be windowed.
|
|
263
261
|
// Independent of scrollTop, so scrolling reuses it instead of re-flattening.
|
|
@@ -287,12 +285,12 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
|
|
|
287
285
|
return { heights, offsets, totalH: acc };
|
|
288
286
|
}, [groupItems, groupVirtualize, rowHeight, GROUP_HEADER_H]);
|
|
289
287
|
if (isLoading && data.length === 0) {
|
|
290
|
-
return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.
|
|
288
|
+
return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
|
|
291
289
|
}
|
|
292
290
|
if (!isLoading && data.length === 0) {
|
|
293
291
|
const isStructured = emptyState && typeof emptyState === "object" && !React.isValidElement(emptyState);
|
|
294
292
|
const es = isStructured ? emptyState : null;
|
|
295
|
-
return (_jsx(Tr, { backgroundColor:
|
|
293
|
+
return (_jsx(Tr, { backgroundColor: theme.colors.background[50], children: _jsx(Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: theme.colors.textMuted, children: [(es === null || es === void 0 ? void 0 : es.icon) && _jsx(Box, { fontSize: "1.75rem", color: theme.colors.textMuted, children: es.icon }), _jsx(Box, { fontSize: "0.95rem", fontWeight: 600, color: theme.colors.text[700], children: (_b = es === null || es === void 0 ? void 0 : es.title) !== null && _b !== void 0 ? _b : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && (_jsx(Box, { fontSize: "0.8125rem", color: theme.colors.textMuted, children: es.description }))] })) }) }));
|
|
296
294
|
}
|
|
297
295
|
// --- Monday-style grouped board render (virtualized when large) -----------
|
|
298
296
|
if (groups) {
|
|
@@ -316,7 +314,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
|
|
|
316
314
|
break;
|
|
317
315
|
}
|
|
318
316
|
}
|
|
319
|
-
gTopPad = (
|
|
317
|
+
gTopPad = (_c = offsets[firstI]) !== null && _c !== void 0 ? _c : 0;
|
|
320
318
|
gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
|
|
321
319
|
}
|
|
322
320
|
const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
|
|
@@ -325,7 +323,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
|
|
|
325
323
|
return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, index: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
|
|
326
324
|
}), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
|
|
327
325
|
}
|
|
328
|
-
return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color:
|
|
326
|
+
return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
|
|
329
327
|
var _a;
|
|
330
328
|
const index = firstIndex + i;
|
|
331
329
|
const rowIndex = startRow + index;
|
|
@@ -4,8 +4,7 @@ import { ChevronDown, ChevronRight, Plus } from "lucide-react";
|
|
|
4
4
|
import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
5
5
|
/** Monday-style colored, collapsible group header row. */
|
|
6
6
|
export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
|
|
7
|
-
var _a, _b, _c, _d, _e, _f;
|
|
8
7
|
const theme = useCustomTheme();
|
|
9
|
-
return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${
|
|
8
|
+
return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
|
|
10
9
|
};
|
|
11
10
|
export default TableGroupRow;
|
|
@@ -17,33 +17,29 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
|
|
|
17
17
|
};
|
|
18
18
|
export default memo(TableHeader);
|
|
19
19
|
const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
|
|
20
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
21
20
|
const theme = useCustomTheme();
|
|
22
|
-
return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor:
|
|
21
|
+
return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
|
|
23
22
|
});
|
|
24
23
|
const ContentSpacerCell = memo(({ noBorders }) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
26
24
|
const theme = useCustomTheme();
|
|
27
|
-
return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor:
|
|
25
|
+
return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
|
|
28
26
|
});
|
|
29
27
|
const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
|
|
30
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
31
28
|
const theme = useCustomTheme();
|
|
32
|
-
return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor:
|
|
29
|
+
return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
|
|
33
30
|
});
|
|
34
31
|
const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
|
|
35
|
-
var _a, _b, _c, _d, _e, _f;
|
|
36
32
|
const theme = useCustomTheme();
|
|
37
33
|
return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out",
|
|
38
34
|
// Kept out of view until hover/focus so the header looks exactly as it did,
|
|
39
35
|
// while staying in the DOM and reachable by Tab.
|
|
40
|
-
opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.
|
|
36
|
+
opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.textMuted, _hover: {
|
|
41
37
|
opacity: 1,
|
|
42
|
-
color: accentTextOnCanvas(theme.colors.secondary,
|
|
38
|
+
color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]),
|
|
43
39
|
}, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
|
|
44
40
|
});
|
|
45
41
|
const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
|
|
46
|
-
var _a
|
|
42
|
+
var _a;
|
|
47
43
|
const [isHovered, setIsHovered] = useState(false);
|
|
48
44
|
const theme = useCustomTheme();
|
|
49
45
|
const isFrozen = header.isFreeze;
|
|
@@ -81,7 +77,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
|
|
|
81
77
|
document.addEventListener("mouseup", onMouseUp);
|
|
82
78
|
};
|
|
83
79
|
const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
|
|
84
|
-
return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor:
|
|
80
|
+
return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[300]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
|
|
85
81
|
let direction = "asc";
|
|
86
82
|
if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
|
|
87
83
|
direction = "desc";
|
|
@@ -90,7 +86,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
|
|
|
90
86
|
direction = "none";
|
|
91
87
|
}
|
|
92
88
|
handleSort(header.id, direction);
|
|
93
|
-
} })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg:
|
|
89
|
+
} })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, theme.colors.table.hover[200]), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
|
|
94
90
|
...prev,
|
|
95
91
|
[header.id]: searchVal,
|
|
96
92
|
})), columnsSearch: columnsSearch[header.id] || "", onClose: () => {
|
|
@@ -6,7 +6,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
|
6
6
|
import { useDebounce } from "../../../Utils/table.js";
|
|
7
7
|
import ToolTip from "../../ToolTip/ToolTip.js";
|
|
8
8
|
const TableSearch = ({ onSearch }) => {
|
|
9
|
-
var _a, _b, _c, _d, _e;
|
|
10
9
|
const { colors } = useCustomTheme();
|
|
11
10
|
const [showInput, setShowInput] = useState(false);
|
|
12
11
|
const [query, setQuery] = useState("");
|
|
@@ -26,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
|
|
|
26
25
|
setQuery(value);
|
|
27
26
|
handleDebounce(value);
|
|
28
27
|
};
|
|
29
|
-
return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color:
|
|
28
|
+
return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.border[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
|
|
30
29
|
};
|
|
31
30
|
export default TableSearch;
|
|
@@ -10,13 +10,12 @@
|
|
|
10
10
|
* `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
|
|
11
11
|
*/
|
|
12
12
|
export const getTableRowHoverStyle = (colors, isDark) => {
|
|
13
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
14
13
|
if (isDark) {
|
|
15
14
|
return {
|
|
16
|
-
backgroundColor:
|
|
15
|
+
backgroundColor: colors.table.hover[500],
|
|
17
16
|
};
|
|
18
17
|
}
|
|
19
18
|
return {
|
|
20
|
-
backgroundColor:
|
|
19
|
+
backgroundColor: colors.table.hover[300],
|
|
21
20
|
};
|
|
22
21
|
};
|
|
@@ -3,9 +3,9 @@ import React, { useCallback, useMemo } from "react";
|
|
|
3
3
|
import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
|
|
4
4
|
import { X } from "lucide-react";
|
|
5
5
|
import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
6
|
+
import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
|
|
6
7
|
import VeritcalDivider from "../../Divider/Divider.js";
|
|
7
8
|
const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
|
|
8
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
9
9
|
const theme = useCustomTheme();
|
|
10
10
|
const columnLabelMap = useMemo(() => {
|
|
11
11
|
const map = new Map();
|
|
@@ -34,7 +34,7 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
|
|
|
34
34
|
if (activeFilters.length === 0) {
|
|
35
35
|
return null;
|
|
36
36
|
}
|
|
37
|
-
return (_jsx(Box, { px: 2, py: 1, bg:
|
|
37
|
+
return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: {
|
|
38
38
|
'&::-webkit-scrollbar': {
|
|
39
39
|
height: '6px',
|
|
40
40
|
},
|
|
@@ -51,12 +51,9 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
|
|
|
51
51
|
},
|
|
52
52
|
scrollbarWidth: 'thin',
|
|
53
53
|
scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
|
|
54
|
-
}, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
|
|
58
|
-
}, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId));
|
|
59
|
-
}), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[600]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
|
|
54
|
+
}, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
|
|
55
|
+
bg: theme.colors.blue[100],
|
|
56
|
+
}, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
|
|
60
57
|
textDecoration: "underline",
|
|
61
58
|
}, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
|
|
62
59
|
});
|
|
@@ -4,7 +4,6 @@ import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody,
|
|
|
4
4
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
5
5
|
import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
6
6
|
const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
|
|
7
|
-
var _a;
|
|
8
7
|
const theme = useCustomTheme();
|
|
9
8
|
const [isOpen, setIsOpen] = useState(false);
|
|
10
9
|
const [query, setQuery] = useState("");
|
|
@@ -39,17 +38,17 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
|
|
|
39
38
|
focusOption(filtered.length - 1);
|
|
40
39
|
}
|
|
41
40
|
}, [activeIndex, filtered.length, focusOption]);
|
|
42
|
-
return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor:
|
|
41
|
+
return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => setIsOpen((prev) => !prev), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
|
|
43
42
|
if (e.key === "ArrowDown" && filtered.length > 0) {
|
|
44
43
|
e.preventDefault();
|
|
45
44
|
focusOption(0);
|
|
46
45
|
}
|
|
47
|
-
}, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor:
|
|
46
|
+
}, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => (_jsx(Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
|
|
48
47
|
optionRefs.current[i] = el;
|
|
49
|
-
}, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg:
|
|
48
|
+
}, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg: theme.colors.background[100] }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? theme.colors.background[200] : theme.colors.transparent, onClick: () => {
|
|
50
49
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
|
|
51
50
|
setIsOpen(false);
|
|
52
51
|
setQuery("");
|
|
53
|
-
}, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color:
|
|
52
|
+
}, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
|
|
54
53
|
};
|
|
55
54
|
export default CompactSelect;
|