@hitachivantara/uikit-react-core 5.88.0 → 5.90.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/cjs/ActionBar/ActionBar.styles.cjs +1 -1
- package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs +1 -2
- package/dist/cjs/AppSwitcher/Action/Action.cjs +2 -2
- package/dist/cjs/AppSwitcher/Action/Action.styles.cjs +3 -3
- package/dist/cjs/Avatar/Avatar.cjs +6 -9
- package/dist/cjs/Avatar/Avatar.styles.cjs +3 -2
- package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -1
- package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs +1 -1
- package/dist/cjs/Badge/Badge.styles.cjs +2 -2
- package/dist/cjs/Banner/Banner.cjs +7 -5
- package/dist/cjs/Banner/BannerContent/BannerContent.cjs +59 -97
- package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs +21 -47
- package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs +17 -17
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +1 -1
- package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs +19 -20
- package/dist/cjs/BaseInput/BaseInput.styles.cjs +15 -18
- package/dist/cjs/BaseRadio/BaseRadio.styles.cjs +17 -17
- package/dist/cjs/BaseSwitch/BaseSwitch.styles.cjs +10 -10
- package/dist/cjs/BreadCrumb/Page/Page.styles.cjs +2 -2
- package/dist/cjs/BreadCrumb/PathElement/PathElement.cjs +1 -1
- package/dist/cjs/BreadCrumb/utils.cjs +1 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs +6 -6
- package/dist/cjs/Button/Button.cjs +1 -2
- package/dist/cjs/Button/Button.styles.cjs +8 -14
- package/dist/cjs/ButtonBase/ButtonBase.styles.cjs +2 -2
- package/dist/cjs/Calendar/Calendar.styles.cjs +1 -1
- package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs +1 -1
- package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs +1 -1
- package/dist/cjs/Calendar/CalendarNavigation/Navigation/Navigation.styles.cjs +1 -1
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.styles.cjs +8 -8
- package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs +11 -11
- package/dist/cjs/Card/Card.cjs +1 -1
- package/dist/cjs/Card/Card.styles.cjs +3 -7
- package/dist/cjs/Carousel/Carousel.styles.cjs +8 -8
- package/dist/cjs/CheckBox/CheckBox.styles.cjs +5 -5
- package/dist/cjs/CheckBoxGroup/CheckBoxGroup.styles.cjs +1 -1
- package/dist/cjs/ColorPicker/Picker/Picker.styles.cjs +2 -2
- package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs +1 -1
- package/dist/cjs/DatePicker/DatePicker.styles.cjs +2 -3
- package/dist/cjs/Dialog/Actions/Actions.styles.cjs +1 -1
- package/dist/cjs/Dialog/Dialog.styles.cjs +6 -4
- package/dist/cjs/DotPagination/DotPagination.styles.cjs +5 -2
- package/dist/cjs/Drawer/Drawer.styles.cjs +2 -2
- package/dist/cjs/Dropdown/Dropdown.styles.cjs +6 -6
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs +7 -12
- package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs +7 -7
- package/dist/cjs/FileUploader/FileList/FileList.styles.cjs +2 -2
- package/dist/cjs/FileUploader/Preview/Preview.styles.cjs +1 -1
- package/dist/cjs/FilterGroup/FilterContent/FilterContent.styles.cjs +1 -1
- package/dist/cjs/Footer/Footer.styles.cjs +3 -3
- package/dist/cjs/FormElement/Adornment/Adornment.styles.cjs +1 -4
- package/dist/cjs/FormElement/CharCounter/CharCounter.styles.cjs +1 -1
- package/dist/cjs/FormElement/InfoMessage/InfoMessage.styles.cjs +2 -2
- package/dist/cjs/FormElement/Label/Label.styles.cjs +1 -1
- package/dist/cjs/FormElement/Suggestions/Suggestions.styles.cjs +2 -2
- package/dist/cjs/FormElement/WarningText/WarningText.styles.cjs +1 -1
- package/dist/cjs/GlobalActions/GlobalActions.styles.cjs +3 -3
- package/dist/cjs/Header/Actions/Actions.styles.cjs +1 -1
- package/dist/cjs/Header/Brand/Brand.styles.cjs +1 -1
- package/dist/cjs/Header/Header.styles.cjs +1 -1
- package/dist/cjs/Header/Navigation/MenuBar/Bar.styles.cjs +3 -3
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs +3 -3
- package/dist/cjs/IconContainer/IconContainer.cjs +81 -0
- package/dist/cjs/InlineEditor/InlineEditor.cjs +1 -1
- package/dist/cjs/InlineEditor/InlineEditor.styles.cjs +4 -4
- package/dist/cjs/Input/Input.styles.cjs +2 -2
- package/dist/cjs/List/List.styles.cjs +1 -1
- package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs +6 -12
- package/dist/cjs/Loading/Loading.cjs +2 -3
- package/dist/cjs/Loading/Loading.styles.cjs +4 -2
- package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs +1 -1
- package/dist/cjs/Login/Login.styles.cjs +1 -1
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +15 -15
- package/dist/cjs/Pagination/Pagination.styles.cjs +1 -1
- package/dist/cjs/Pagination/Select.styles.cjs +3 -3
- package/dist/cjs/Panel/Panel.styles.cjs +2 -2
- package/dist/cjs/ProgressBar/ProgressBar.styles.cjs +2 -2
- package/dist/cjs/QueryBuilder/QueryBuilder.styles.cjs +7 -7
- package/dist/cjs/QueryBuilder/Rule/Rule.styles.cjs +3 -3
- package/dist/cjs/Radio/Radio.styles.cjs +6 -3
- package/dist/cjs/RadioGroup/RadioGroup.styles.cjs +1 -1
- package/dist/cjs/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +3 -3
- package/dist/cjs/ScrollToHorizontal/ScrollToHorizontal.styles.cjs +1 -1
- package/dist/cjs/ScrollToVertical/ScrollToVertical.styles.cjs +1 -1
- package/dist/cjs/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +6 -6
- package/dist/cjs/Section/Section.styles.cjs +2 -3
- package/dist/cjs/Select/Select.styles.cjs +3 -3
- package/dist/cjs/SelectionList/SelectionList.styles.cjs +1 -1
- package/dist/cjs/Skeleton/Skeleton.styles.cjs +3 -3
- package/dist/cjs/Slider/Slider.styles.cjs +14 -16
- package/dist/cjs/Slider/SliderInput/SliderInput.cjs +1 -1
- package/dist/cjs/Slider/base.cjs +6 -8
- package/dist/cjs/Slider/utils.cjs +10 -10
- package/dist/cjs/Snackbar/Snackbar.cjs +8 -5
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.cjs +20 -28
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs +28 -56
- package/dist/cjs/Stack/Stack.styles.cjs +1 -1
- package/dist/cjs/Switch/Switch.styles.cjs +1 -1
- package/dist/cjs/Table/Table.styles.cjs +1 -1
- package/dist/cjs/Table/TableCell/TableCell.styles.cjs +4 -4
- package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs +6 -6
- package/dist/cjs/Table/TableRow/TableRow.styles.cjs +10 -10
- package/dist/cjs/{TableSection → Table/TableSection}/TableSection.cjs +2 -2
- package/dist/cjs/{TableSection → Table/TableSection}/TableSection.styles.cjs +18 -18
- package/dist/cjs/Table/hooks/useHvPagination.cjs +0 -1
- package/dist/cjs/Table/hooks/useHvRowExpand.cjs +3 -4
- package/dist/cjs/Table/hooks/useHvRowSelection.cjs +0 -3
- package/dist/cjs/Table/hooks/useHvSticky.cjs +1 -1
- package/dist/cjs/Table/renderers/ProgressColumnCell.cjs +3 -4
- package/dist/cjs/Tabs/Tab/Tab.styles.cjs +4 -7
- package/dist/cjs/Tag/Tag.cjs +1 -1
- package/dist/cjs/Tag/Tag.styles.cjs +6 -6
- package/dist/cjs/TagsInput/TagsInput.styles.cjs +9 -12
- package/dist/cjs/TimePicker/TimePicker.cjs +1 -1
- package/dist/cjs/TimePicker/TimePicker.styles.cjs +3 -4
- package/dist/cjs/Tooltip/Tooltip.styles.cjs +2 -2
- package/dist/cjs/TreeView/TreeItem/TreeItem.styles.cjs +5 -5
- package/dist/cjs/Typography/Typography.styles.cjs +3 -2
- package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs +3 -6
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +1 -1
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs +3 -7
- package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs +3 -3
- package/dist/cjs/index.cjs +9 -18
- package/dist/cjs/providers/ThemeProvider.cjs +11 -11
- package/dist/cjs/utils/Callout.cjs +142 -0
- package/dist/cjs/utils/iconVariant.cjs +4 -4
- package/dist/esm/ActionBar/ActionBar.styles.js +1 -1
- package/dist/esm/ActionBar/ActionBar.styles.js.map +1 -1
- package/dist/esm/ActionsGeneric/ActionsGeneric.js +1 -2
- package/dist/esm/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/esm/AppSwitcher/Action/Action.js +2 -2
- package/dist/esm/AppSwitcher/Action/Action.js.map +1 -1
- package/dist/esm/AppSwitcher/Action/Action.styles.js +3 -3
- package/dist/esm/AppSwitcher/Action/Action.styles.js.map +1 -1
- package/dist/esm/Avatar/Avatar.js +7 -10
- package/dist/esm/Avatar/Avatar.js.map +1 -1
- package/dist/esm/Avatar/Avatar.styles.js +3 -2
- package/dist/esm/Avatar/Avatar.styles.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.js +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.styles.js +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.styles.js.map +1 -1
- package/dist/esm/Badge/Badge.styles.js +2 -2
- package/dist/esm/Badge/Badge.styles.js.map +1 -1
- package/dist/esm/Banner/Banner.js +7 -5
- package/dist/esm/Banner/Banner.js.map +1 -1
- package/dist/esm/Banner/BannerContent/BannerContent.js +60 -96
- package/dist/esm/Banner/BannerContent/BannerContent.js.map +1 -1
- package/dist/esm/Banner/BannerContent/BannerContent.styles.js +21 -47
- package/dist/esm/Banner/BannerContent/BannerContent.styles.js.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js +17 -17
- package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.styles.js +19 -20
- package/dist/esm/BaseDropdown/BaseDropdown.styles.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js +15 -18
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/BaseRadio/BaseRadio.styles.js +17 -17
- package/dist/esm/BaseRadio/BaseRadio.styles.js.map +1 -1
- package/dist/esm/BaseSwitch/BaseSwitch.styles.js +10 -10
- package/dist/esm/BaseSwitch/BaseSwitch.styles.js.map +1 -1
- package/dist/esm/BreadCrumb/Page/Page.styles.js +2 -2
- package/dist/esm/BreadCrumb/Page/Page.styles.js.map +1 -1
- package/dist/esm/BreadCrumb/PathElement/PathElement.js +1 -1
- package/dist/esm/BreadCrumb/PathElement/PathElement.js.map +1 -1
- package/dist/esm/BreadCrumb/utils.js +1 -1
- package/dist/esm/BreadCrumb/utils.js.map +1 -1
- package/dist/esm/BulkActions/BulkActions.styles.js +6 -6
- package/dist/esm/BulkActions/BulkActions.styles.js.map +1 -1
- package/dist/esm/Button/Button.js +2 -3
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/Button.styles.js +8 -14
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/ButtonBase/ButtonBase.styles.js +2 -2
- package/dist/esm/ButtonBase/ButtonBase.styles.js.map +1 -1
- package/dist/esm/Calendar/Calendar.styles.js +1 -1
- package/dist/esm/Calendar/Calendar.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js +1 -1
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.styles.js +1 -1
- package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.styles.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js +8 -8
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js +11 -11
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
- package/dist/esm/Card/Card.js +1 -1
- package/dist/esm/Card/Card.js.map +1 -1
- package/dist/esm/Card/Card.styles.js +3 -7
- package/dist/esm/Card/Card.styles.js.map +1 -1
- package/dist/esm/Carousel/Carousel.styles.js +8 -8
- package/dist/esm/Carousel/Carousel.styles.js.map +1 -1
- package/dist/esm/CheckBox/CheckBox.styles.js +5 -5
- package/dist/esm/CheckBox/CheckBox.styles.js.map +1 -1
- package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js +1 -1
- package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js.map +1 -1
- package/dist/esm/ColorPicker/Picker/Picker.styles.js +2 -2
- package/dist/esm/ColorPicker/Picker/Picker.styles.js.map +1 -1
- package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js +1 -1
- package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.styles.js +2 -3
- package/dist/esm/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/esm/Dialog/Actions/Actions.styles.js +1 -1
- package/dist/esm/Dialog/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/Dialog/Dialog.styles.js +6 -4
- package/dist/esm/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/DotPagination/DotPagination.styles.js +5 -2
- package/dist/esm/DotPagination/DotPagination.styles.js.map +1 -1
- package/dist/esm/Drawer/Drawer.styles.js +2 -2
- package/dist/esm/Drawer/Drawer.styles.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.styles.js +6 -6
- package/dist/esm/Dropdown/Dropdown.styles.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.styles.js +7 -12
- package/dist/esm/DropdownButton/DropdownButton.styles.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.styles.js +7 -7
- package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map +1 -1
- package/dist/esm/FileUploader/FileList/FileList.styles.js +2 -2
- package/dist/esm/FileUploader/FileList/FileList.styles.js.map +1 -1
- package/dist/esm/FileUploader/Preview/Preview.styles.js +1 -1
- package/dist/esm/FileUploader/Preview/Preview.styles.js.map +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.styles.js +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.styles.js.map +1 -1
- package/dist/esm/Footer/Footer.styles.js +3 -3
- package/dist/esm/Footer/Footer.styles.js.map +1 -1
- package/dist/esm/FormElement/Adornment/Adornment.styles.js +1 -4
- package/dist/esm/FormElement/Adornment/Adornment.styles.js.map +1 -1
- package/dist/esm/FormElement/CharCounter/CharCounter.styles.js +1 -1
- package/dist/esm/FormElement/CharCounter/CharCounter.styles.js.map +1 -1
- package/dist/esm/FormElement/InfoMessage/InfoMessage.styles.js +2 -2
- package/dist/esm/FormElement/InfoMessage/InfoMessage.styles.js.map +1 -1
- package/dist/esm/FormElement/Label/Label.styles.js +1 -1
- package/dist/esm/FormElement/Label/Label.styles.js.map +1 -1
- package/dist/esm/FormElement/Suggestions/Suggestions.styles.js +2 -2
- package/dist/esm/FormElement/Suggestions/Suggestions.styles.js.map +1 -1
- package/dist/esm/FormElement/WarningText/WarningText.styles.js +1 -1
- package/dist/esm/FormElement/WarningText/WarningText.styles.js.map +1 -1
- package/dist/esm/GlobalActions/GlobalActions.styles.js +3 -3
- package/dist/esm/GlobalActions/GlobalActions.styles.js.map +1 -1
- package/dist/esm/Header/Actions/Actions.styles.js +1 -1
- package/dist/esm/Header/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/Header/Brand/Brand.styles.js +1 -1
- package/dist/esm/Header/Brand/Brand.styles.js.map +1 -1
- package/dist/esm/Header/Header.styles.js +1 -1
- package/dist/esm/Header/Header.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js +3 -3
- package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js +3 -3
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map +1 -1
- package/dist/esm/IconContainer/IconContainer.js +81 -0
- package/dist/esm/IconContainer/IconContainer.js.map +1 -0
- package/dist/esm/InlineEditor/InlineEditor.js +1 -1
- package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/InlineEditor/InlineEditor.styles.js +4 -4
- package/dist/esm/InlineEditor/InlineEditor.styles.js.map +1 -1
- package/dist/esm/Input/Input.styles.js +2 -2
- package/dist/esm/Input/Input.styles.js.map +1 -1
- package/dist/esm/List/List.styles.js +1 -1
- package/dist/esm/List/List.styles.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js +6 -12
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js.map +1 -1
- package/dist/esm/Loading/Loading.js +2 -3
- package/dist/esm/Loading/Loading.js.map +1 -1
- package/dist/esm/Loading/Loading.styles.js +4 -2
- package/dist/esm/Loading/Loading.styles.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js.map +1 -1
- package/dist/esm/Login/Login.styles.js +1 -1
- package/dist/esm/Login/Login.styles.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +15 -15
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Pagination/Pagination.styles.js +1 -1
- package/dist/esm/Pagination/Pagination.styles.js.map +1 -1
- package/dist/esm/Pagination/Select.styles.js +3 -3
- package/dist/esm/Pagination/Select.styles.js.map +1 -1
- package/dist/esm/Panel/Panel.styles.js +2 -2
- package/dist/esm/Panel/Panel.styles.js.map +1 -1
- package/dist/esm/ProgressBar/ProgressBar.styles.js +2 -2
- package/dist/esm/ProgressBar/ProgressBar.styles.js.map +1 -1
- package/dist/esm/QueryBuilder/QueryBuilder.styles.js +7 -7
- package/dist/esm/QueryBuilder/QueryBuilder.styles.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Rule.styles.js +3 -3
- package/dist/esm/QueryBuilder/Rule/Rule.styles.js.map +1 -1
- package/dist/esm/Radio/Radio.styles.js +6 -3
- package/dist/esm/Radio/Radio.styles.js.map +1 -1
- package/dist/esm/RadioGroup/RadioGroup.styles.js +1 -1
- package/dist/esm/RadioGroup/RadioGroup.styles.js.map +1 -1
- package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +3 -3
- package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -1
- package/dist/esm/ScrollToHorizontal/ScrollToHorizontal.styles.js +1 -1
- package/dist/esm/ScrollToHorizontal/ScrollToHorizontal.styles.js.map +1 -1
- package/dist/esm/ScrollToVertical/ScrollToVertical.styles.js +1 -1
- package/dist/esm/ScrollToVertical/ScrollToVertical.styles.js.map +1 -1
- package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +6 -6
- package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -1
- package/dist/esm/Section/Section.styles.js +2 -3
- package/dist/esm/Section/Section.styles.js.map +1 -1
- package/dist/esm/Select/Select.styles.js +3 -3
- package/dist/esm/Select/Select.styles.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.styles.js +1 -1
- package/dist/esm/SelectionList/SelectionList.styles.js.map +1 -1
- package/dist/esm/Skeleton/Skeleton.styles.js +3 -3
- package/dist/esm/Skeleton/Skeleton.styles.js.map +1 -1
- package/dist/esm/Slider/Slider.styles.js +14 -16
- package/dist/esm/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/Slider/SliderInput/SliderInput.js +1 -1
- package/dist/esm/Slider/SliderInput/SliderInput.js.map +1 -1
- package/dist/esm/Slider/base.js +6 -8
- package/dist/esm/Slider/base.js.map +1 -1
- package/dist/esm/Slider/utils.js +10 -10
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js +8 -5
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js +23 -29
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js +28 -56
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js.map +1 -1
- package/dist/esm/SnackbarProvider/SnackbarProvider.js.map +1 -1
- package/dist/esm/Stack/Stack.styles.js +1 -1
- package/dist/esm/Stack/Stack.styles.js.map +1 -1
- package/dist/esm/Switch/Switch.styles.js +1 -1
- package/dist/esm/Switch/Switch.styles.js.map +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/Table.styles.js +1 -1
- package/dist/esm/Table/Table.styles.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.styles.js +4 -4
- package/dist/esm/Table/TableCell/TableCell.styles.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.styles.js +6 -6
- package/dist/esm/Table/TableHeader/TableHeader.styles.js.map +1 -1
- package/dist/esm/Table/TableRow/TableRow.styles.js +10 -10
- package/dist/esm/Table/TableRow/TableRow.styles.js.map +1 -1
- package/dist/esm/{TableSection → Table/TableSection}/TableSection.js +2 -2
- package/dist/esm/Table/TableSection/TableSection.js.map +1 -0
- package/dist/esm/{TableSection → Table/TableSection}/TableSection.styles.js +18 -18
- package/dist/esm/Table/TableSection/TableSection.styles.js.map +1 -0
- package/dist/esm/Table/hooks/useHvPagination.js +0 -1
- package/dist/esm/Table/hooks/useHvPagination.js.map +1 -1
- package/dist/esm/Table/hooks/useHvRowExpand.js +3 -4
- package/dist/esm/Table/hooks/useHvRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useHvRowSelection.js +0 -3
- package/dist/esm/Table/hooks/useHvRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useHvSticky.js +1 -1
- package/dist/esm/Table/hooks/useHvSticky.js.map +1 -1
- package/dist/esm/Table/renderers/ProgressColumnCell.js +4 -5
- package/dist/esm/Table/renderers/ProgressColumnCell.js.map +1 -1
- package/dist/esm/Tabs/Tab/Tab.styles.js +4 -7
- package/dist/esm/Tabs/Tab/Tab.styles.js.map +1 -1
- package/dist/esm/Tag/Tag.js +1 -1
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/Tag/Tag.styles.js +6 -6
- package/dist/esm/Tag/Tag.styles.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.styles.js +9 -12
- package/dist/esm/TagsInput/TagsInput.styles.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.js +1 -1
- package/dist/esm/TimePicker/TimePicker.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.styles.js +3 -4
- package/dist/esm/TimePicker/TimePicker.styles.js.map +1 -1
- package/dist/esm/Tooltip/Tooltip.styles.js +2 -2
- package/dist/esm/Tooltip/Tooltip.styles.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.styles.js +5 -5
- package/dist/esm/TreeView/TreeItem/TreeItem.styles.js.map +1 -1
- package/dist/esm/Typography/Typography.styles.js +3 -2
- package/dist/esm/Typography/Typography.styles.js.map +1 -1
- package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js +3 -6
- package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js +3 -7
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigation.styles.js +3 -3
- package/dist/esm/VerticalNavigation/VerticalNavigation.styles.js.map +1 -1
- package/dist/esm/index.js +61 -70
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/providers/ThemeProvider.js +11 -11
- package/dist/esm/providers/ThemeProvider.js.map +1 -1
- package/dist/esm/utils/Callout.js +140 -0
- package/dist/esm/utils/Callout.js.map +1 -0
- package/dist/esm/utils/hexToRgbA.js.map +1 -1
- package/dist/esm/utils/iconVariant.js +4 -4
- package/dist/esm/utils/iconVariant.js.map +1 -1
- package/dist/types/index.d.ts +533 -484
- package/package.json +6 -6
- package/dist/cjs/hocs/withTooltip.cjs +0 -53
- package/dist/cjs/utils/Random.cjs +0 -18
- package/dist/cjs/utils/checkValidHexColorValue.cjs +0 -7
- package/dist/cjs/utils/wrapperTooltip.cjs +0 -14
- package/dist/esm/TableSection/TableSection.js.map +0 -1
- package/dist/esm/TableSection/TableSection.styles.js.map +0 -1
- package/dist/esm/hocs/withTooltip.js +0 -53
- package/dist/esm/hocs/withTooltip.js.map +0 -1
- package/dist/esm/utils/Random.js +0 -18
- package/dist/esm/utils/Random.js.map +0 -1
- package/dist/esm/utils/checkValidHexColorValue.js +0 -7
- package/dist/esm/utils/checkValidHexColorValue.js.map +0 -1
- package/dist/esm/utils/wrapperTooltip.js +0 -14
- package/dist/esm/utils/wrapperTooltip.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSection.styles.js","sources":["../../../../src/Table/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../../BulkActions\";\nimport { paginationClasses } from \"../../Pagination\";\nimport { tableCellClasses } from \"../TableCell\";\nimport { tableContainerClasses } from \"../TableContainer\";\nimport { tableHeaderClasses } from \"../TableHeader\";\nimport { tableRowClasses } from \"../TableRow\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n root: {},\n header: {\n // Only apply the border to divide the header and content when both are displayed\n \"+ div\": {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n },\n },\n actions: {},\n content: {\n marginTop: 0,\n padding: 0,\n\n // Apply border radius to the first child if there's not an header\n \"&:first-of-type\": {\n \"& > :first-of-type\": {\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n },\n\n \"& > :last-child\": {\n borderBottomLeftRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n },\n\n [`& .${tableContainerClasses.root}`]: {\n paddingBottom: 0,\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n\n [`& .${tableHeaderClasses.head}`]: {\n backgroundColor: theme.colors.bgPage,\n borderBottomColor: theme.colors.bgPageSecondary,\n [`&.${tableHeaderClasses.variantCheckbox}`]: {\n borderRight: \"none\",\n },\n [`&.${tableHeaderClasses.variantActions}`]: {\n borderLeft: \"none\",\n },\n },\n\n // Remove border for the last table row\n [`& .${tableRowClasses.root}`]: {\n \"&:last-child\": {\n [`& .${tableCellClasses.root}`]: { borderBottom: \"none\" },\n },\n },\n\n [`& .${tableCellClasses.root}`]: {\n borderBottomColor: theme.colors.borderSubtle,\n },\n\n [`& .${tableCellClasses.variantCheckbox}`]: {\n borderRight: \"none\",\n },\n\n [`& .${tableCellClasses.variantActions}`]: {\n borderLeft: \"none\",\n },\n\n [`& .${bulkActionsClasses.root}`]: {\n marginBottom: 0,\n border: \"none\",\n borderBottom: `1px solid ${theme.colors.borderSubtle}`,\n padding: theme.spacing(\"xs\", \"sm\"),\n },\n\n [`& .${paginationClasses.root}`]: {\n margin: 0,\n backgroundColor: theme.colors.bgPage,\n padding: theme.space.xs,\n borderTop: `1px solid ${theme.colors.borderSubtle}`,\n borderBottomLeftRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n },\n\n [`& .${paginationClasses.pageSizeOptions}`]: {\n left: theme.space.sm,\n },\n [`& .${paginationClasses.pageSizeHeader}`]: {\n border: \"none\",\n \"&:hover\": {\n border: \"none\",\n },\n },\n },\n hidden: {},\n raisedHeader: {\n \"& $content\": {\n paddingTop: 0,\n },\n },\n hasHeader: {},\n /** @deprecated use `hasHeader` instead */\n spaceTop: {},\n});\n"],"names":["tableContainerClasses","tableHeaderClasses","tableRowClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA;AAAA,IAEN,SAAS;AAAA,MACP,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA,EAE1B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA;AAAA,IAGT,mBAAmB;AAAA,MACjB,sBAAsB;AAAA,QACpB,qBAAqB;AAAA,QACrB,sBAAsB;AAAA,MAAA;AAAA,IAE1B;AAAA,IAEA,mBAAmB;AAAA,MACjB,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,IAEA,CAAC,MAAMA,gBAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,MACf,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IACxB;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKA,gBAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,MACA,CAAC,KAAKA,gBAAmB,cAAc,EAAE,GAAG;AAAA,QAC1C,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA;AAAA,IAGA,CAAC,MAAMC,gBAAgB,IAAI,EAAE,GAAG;AAAA,MAC9B,gBAAgB;AAAA,QACd,CAAC,MAAMC,gBAAiB,IAAI,EAAE,GAAG,EAAE,cAAc,OAAO;AAAA,MAAA;AAAA,IAE5D;AAAA,IAEA,CAAC,MAAMA,gBAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmB,MAAM,OAAO;AAAA,IAClC;AAAA,IAEA,CAAC,MAAMA,gBAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IAEA,CAAC,MAAMA,gBAAiB,cAAc,EAAE,GAAG;AAAA,MACzC,YAAY;AAAA,IACd;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,MACpD,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,IAEA,CAAC,MAAMC,gBAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW,aAAa,MAAM,OAAO,YAAY;AAAA,MACjD,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,IAEA,CAAC,MAAMA,gBAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAM,MAAM,MAAM;AAAA,IACpB;AAAA,IACA,CAAC,MAAMA,gBAAkB,cAAc,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc;AAAA,IACZ,cAAc;AAAA,MACZ,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,WAAW,CAAC;AAAA;AAAA,EAEZ,UAAU,CAAA;AACZ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHvPagination.js","sources":["../../../../src/Table/hooks/useHvPagination.ts"],"sourcesContent":["import {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface HvTablePaginationProps extends TableCommonProps {\n canPrevious: boolean;\n canNext: boolean;\n pages: number;\n page: number;\n pageSize: number;\n onPageChange?: (updater: ((pageIndex: number) => number) | number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n labels?: Record<string, string>;\n}\n\nexport type HvPaginationPropGetter<D extends object> = PropGetter<\n D,\n HvTablePaginationProps\n>;\n\nexport interface UseHvPaginationHooks<D extends object> {\n getHvPaginationProps: Array<HvPaginationPropGetter<D>>;\n}\n\nexport interface UseHvPaginationTableInstance<D extends object> {\n getHvPaginationProps: (\n propGetter?: HvPaginationPropGetter<D>,\n ) => HvTablePaginationProps;\n}\n\nexport type UsePaginationProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance: any) => {\n ensurePluginOrder(\n instance.plugins,\n [\n \"usePagination\",\n \"useHvGlobalFilter\",\n \"useHvFilters\",\n \"useGroupBy\",\n \"useHvSortBy\",\n \"useHvRowExpand\",\n ],\n \"useHvPagination\",\n );\n\n const getInstance = useGetLatest(instance);\n const getHvPaginationProps = makePropGetter(\n instance.getHooks().getHvPaginationProps,\n {\n instance: getInstance(),\n },\n );\n\n Object.assign(instance, {\n getHvPaginationProps,\n });\n};\n\
|
|
1
|
+
{"version":3,"file":"useHvPagination.js","sources":["../../../../src/Table/hooks/useHvPagination.ts"],"sourcesContent":["import {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface HvTablePaginationProps extends TableCommonProps {\n canPrevious: boolean;\n canNext: boolean;\n pages: number;\n page: number;\n pageSize: number;\n onPageChange?: (updater: ((pageIndex: number) => number) | number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n labels?: Record<string, string>;\n}\n\nexport type HvPaginationPropGetter<D extends object> = PropGetter<\n D,\n HvTablePaginationProps\n>;\n\nexport interface UseHvPaginationHooks<D extends object> {\n getHvPaginationProps: Array<HvPaginationPropGetter<D>>;\n}\n\nexport interface UseHvPaginationTableInstance<D extends object> {\n getHvPaginationProps: (\n propGetter?: HvPaginationPropGetter<D>,\n ) => HvTablePaginationProps;\n}\n\nexport type UsePaginationProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance: any) => {\n ensurePluginOrder(\n instance.plugins,\n [\n \"usePagination\",\n \"useHvGlobalFilter\",\n \"useHvFilters\",\n \"useGroupBy\",\n \"useHvSortBy\",\n \"useHvRowExpand\",\n ],\n \"useHvPagination\",\n );\n\n const getInstance = useGetLatest(instance);\n const getHvPaginationProps = makePropGetter(\n instance.getHooks().getHvPaginationProps,\n {\n instance: getInstance(),\n },\n );\n\n Object.assign(instance, {\n getHvPaginationProps,\n });\n};\n\nconst defaultGetHvPaginationProps = (props: any, { instance }: any) => {\n const {\n canPreviousPage,\n canNextPage,\n pageOptions,\n gotoPage,\n setPageSize,\n state: { pageSize, pageIndex },\n labels,\n } = instance;\n\n const nextProps: HvTablePaginationProps = {\n canPrevious: canPreviousPage,\n canNext: canNextPage,\n pages: pageOptions.length,\n page: pageIndex,\n pageSize,\n onPageChange: gotoPage,\n onPageSizeChange: setPageSize,\n labels,\n };\n\n return [props, nextProps];\n};\n\nexport const useHvPagination: UsePaginationProps = (hooks) => {\n hooks.getHvPaginationProps = [defaultGetHvPaginationProps];\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nuseHvPagination.pluginName = \"useHvPagination\";\n"],"names":[],"mappings":";AA2CA,MAAM,kBAAkB,CAAC,aAAkB;AACzC;AAAA,IACE,SAAS;AAAA,IACT;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAEM,QAAA,cAAc,aAAa,QAAQ;AACzC,QAAM,uBAAuB;AAAA,IAC3B,SAAS,WAAW;AAAA,IACpB;AAAA,MACE,UAAU,YAAY;AAAA,IAAA;AAAA,EAE1B;AAEA,SAAO,OAAO,UAAU;AAAA,IACtB;AAAA,EAAA,CACD;AACH;AAEA,MAAM,8BAA8B,CAAC,OAAY,EAAE,eAAoB;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,UAAU;AAAA,IAC7B;AAAA,EAAA,IACE;AAEJ,QAAM,YAAoC;AAAA,IACxC,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO,YAAY;AAAA,IACnB,MAAM;AAAA,IACN;AAAA,IACA,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB;AAAA,EACF;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEa,MAAA,kBAAsC,CAAC,UAAU;AACtD,QAAA,uBAAuB,CAAC,2BAA2B;AAEnD,QAAA,YAAY,KAAK,eAAe;AACxC;AAEA,gBAAgB,aAAa;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
3
3
|
import { useLabels } from "../../hooks/useLabels.js";
|
|
4
|
-
import { DefaultCell } from "../renderers/DefaultCell.js";
|
|
5
4
|
import { HvButton } from "../../Button/Button.js";
|
|
6
5
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
7
6
|
const DEFAULT_LABELS = {
|
|
@@ -34,11 +33,12 @@ const visibleColumnsHook = (columns, { instance }) => {
|
|
|
34
33
|
return columns;
|
|
35
34
|
}
|
|
36
35
|
const firstDataColumnIndex = columns.findIndex(
|
|
37
|
-
(c) => c.id?.
|
|
36
|
+
(c) => !c.id?.startsWith("_hv_")
|
|
38
37
|
);
|
|
39
38
|
if (firstDataColumnIndex !== -1) {
|
|
40
39
|
const firstDataColumn = columns[firstDataColumnIndex];
|
|
41
|
-
if (firstDataColumn.Cell
|
|
40
|
+
if (firstDataColumn.Cell === CellWithExpandButton) return columns;
|
|
41
|
+
if (firstDataColumn.Cell == null) {
|
|
42
42
|
firstDataColumn.Cell = CellWithExpandButton;
|
|
43
43
|
firstDataColumn.variant = "expand";
|
|
44
44
|
return columns;
|
|
@@ -73,6 +73,5 @@ const useHvRowExpand = (hooks) => {
|
|
|
73
73
|
};
|
|
74
74
|
useHvRowExpand.pluginName = "useHvRowExpand";
|
|
75
75
|
export {
|
|
76
|
-
CellWithExpandButton,
|
|
77
76
|
useHvRowExpand
|
|
78
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHvRowExpand.js","sources":["../../../../src/Table/hooks/useHvRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\nimport
|
|
1
|
+
{"version":3,"file":"useHvRowExpand.js","sources":["../../../../src/Table/hooks/useHvRowExpand.tsx"],"sourcesContent":["import type {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\nimport type { HvCellProps, HvColumnInstance } from \"./useHvTable\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n getToggleRowExpandedProps: (\n props?: Partial<TableExpandedToggleProps>,\n ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n expandRowButtonAriaLabel: \"Expand this row\",\n collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nconst CellWithExpandButton = ({\n row,\n cell,\n labels: labelsProp,\n}: HvCellProps<any>) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const rowProps = row.getToggleRowExpandedProps?.();\n\n return (\n <>\n <HvButton\n icon\n aria-label={\n row.isExpanded\n ? labels.collapseRowButtonAriaLabel\n : labels.expandRowButtonAriaLabel\n }\n aria-expanded={row.isExpanded}\n onClick={rowProps?.onClick}\n >\n <DropDownXS rotate={row.isExpanded} />\n </HvButton>\n {cell?.value && (\n <HvTypography variant=\"label\" component=\"span\">\n {cell.value}\n </HvTypography>\n )}\n </>\n );\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n if (instance.disableCreateExpandButton) {\n return columns;\n }\n\n // add a button to first data column, or an extra column for non-default renderers\n const firstDataColumnIndex = (columns as HvColumnInstance<any>[]).findIndex(\n (c) => !c.id?.startsWith(\"_hv_\"),\n );\n\n if (firstDataColumnIndex !== -1) {\n const firstDataColumn = columns[firstDataColumnIndex];\n\n // keep columns if CellWithExpandButton has already been added\n if (firstDataColumn.Cell === CellWithExpandButton) return columns;\n\n if (firstDataColumn.Cell == null) {\n firstDataColumn.Cell = CellWithExpandButton;\n firstDataColumn.variant = \"expand\";\n\n return columns;\n }\n }\n\n const expandColumn = {\n id: \"_hv_expand\",\n variant: \"none\",\n\n width: 32,\n\n // this will only work when using useHvTableSticky\n // but ensures it stays left of any sticky column\n sticky: \"left\",\n\n Cell: CellWithExpandButton,\n };\n\n const columnsCopy = [...columns];\n columnsCopy.splice(\n firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n 0,\n expandColumn,\n );\n\n return columnsCopy;\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n const nextProps: UseHvRowExpandTableRowProps = {\n expanded: row.isExpanded,\n };\n\n return [props, nextProps];\n};\n\nexport const useHvRowExpand: UseRowExpandProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.getRowProps.push(getRowPropsHook);\n};\nuseHvRowExpand.pluginName = \"useHvRowExpand\";\n"],"names":[],"mappings":";;;;;AAwCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEA,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAwB;AAChB,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAC7C,QAAA,WAAW,IAAI,4BAA4B;AAEjD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,cACE,IAAI,aACA,OAAO,6BACP,OAAO;AAAA,QAEb,iBAAe,IAAI;AAAA,QACnB,SAAS,UAAU;AAAA,QAEnB,UAAC,oBAAA,YAAA,EAAW,QAAQ,IAAI,WAAY,CAAA;AAAA,MAAA;AAAA,IACtC;AAAA,IACC,MAAM,SACJ,oBAAA,cAAA,EAAa,SAAQ,SAAQ,WAAU,QACrC,UAAA,KAAK,MACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,SAAc,EAAE,eAAoB;AAC9D,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EAAA;AAIT,QAAM,uBAAwB,QAAoC;AAAA,IAChE,CAAC,MAAM,CAAC,EAAE,IAAI,WAAW,MAAM;AAAA,EACjC;AAEA,MAAI,yBAAyB,IAAI;AACzB,UAAA,kBAAkB,QAAQ,oBAAoB;AAGhD,QAAA,gBAAgB,SAAS,qBAA6B,QAAA;AAEtD,QAAA,gBAAgB,QAAQ,MAAM;AAChC,sBAAgB,OAAO;AACvB,sBAAgB,UAAU;AAEnB,aAAA;AAAA,IAAA;AAAA,EACT;AAGF,QAAM,eAAe;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IAET,OAAO;AAAA;AAAA;AAAA,IAIP,QAAQ;AAAA,IAER,MAAM;AAAA,EACR;AAEM,QAAA,cAAc,CAAC,GAAG,OAAO;AACnB,cAAA;AAAA,IACV,yBAAyB,KAAK,uBAAuB;AAAA,IACrD;AAAA,IACA;AAAA,EACF;AAEO,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,OAAY,EAAE,UAAe;AACpD,QAAM,YAAyC;AAAA,IAC7C,UAAU,IAAI;AAAA,EAChB;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEa,MAAA,iBAAoC,CAAC,UAAU;AACpD,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,eAAe,aAAa;"}
|
|
@@ -438,8 +438,5 @@ const useHvRowSelection = (hooks) => {
|
|
|
438
438
|
};
|
|
439
439
|
useHvRowSelection.pluginName = "useHvRowSelection";
|
|
440
440
|
export {
|
|
441
|
-
defaultGetToggleAllPageRowsSelectedProps,
|
|
442
|
-
defaultGetToggleAllRowsSelectedProps,
|
|
443
|
-
defaultGetToggleRowSelectedProps,
|
|
444
441
|
useHvRowSelection
|
|
445
442
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHvRowSelection.js","sources":["../../../../src/Table/hooks/useHvRowSelection.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n actions,\n ensurePluginOrder,\n Hooks,\n IdType,\n makePropGetter,\n PropGetter,\n Row,\n useGetLatest,\n useMountedLayoutEffect,\n} from \"react-table\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { useLabels } from \"../../hooks/useLabels\";\n\n// #region ##### TYPES #####\n\n// getRowProps:\nexport interface UseHvRowSelectionTableRowProps {\n selected?: boolean;\n}\n\n// getRowProps:\nexport interface UseHvRowSelectionTableColumnProps {\n \"aria-hidden\"?: boolean;\n}\n\nexport interface UseHvRowSelectionRowCheckboxProps {\n onChange?: (e: React.ChangeEvent, checked?: boolean) => void;\n checked?: boolean;\n disabled?: boolean;\n indeterminate?: boolean;\n}\n\nexport interface UseHvRowSelectionBulkCheckboxProps {\n onChange?: (e: React.ChangeEvent, checked?: boolean) => void;\n checked?: boolean;\n indeterminate?: boolean;\n}\n\nexport type UseHvRowSelectionTableOptions = Partial<{\n autoResetSelectedRows: boolean;\n autoResetLockedSelectionRows: boolean;\n selectSubRows: boolean;\n manualRowSelectedKey: string;\n applyToggleAllRowsSelectedToPrefilteredRows: boolean;\n}>;\n\nexport interface UseHvRowSelectionHooks<D extends object> {\n getToggleRowSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionRowCheckboxProps>\n >;\n getToggleAllRowsSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionBulkCheckboxProps>\n >;\n getToggleAllPageRowsSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionBulkCheckboxProps>\n >;\n}\n\nexport interface UseHvRowSelectionState<D extends object> {\n selectedRowIds: Record<IdType<D>, boolean>;\n lockedSelectionRowIds: Record<IdType<D>, boolean>;\n}\n\nexport interface UseHvRowSelectionTableInstance<D extends object> {\n toggleRowSelected: (rowId: IdType<D>, set?: boolean) => void;\n toggleAllRowsSelected: (value?: boolean) => void;\n toggleAllPageRowsSelected: (value?: boolean) => void;\n getToggleAllRowsSelectedProps: (\n props?: Partial<UseHvRowSelectionBulkCheckboxProps>,\n ) => UseHvRowSelectionBulkCheckboxProps;\n getToggleAllPageRowsSelectedProps: (\n props?: Partial<UseHvRowSelectionBulkCheckboxProps>,\n ) => UseHvRowSelectionBulkCheckboxProps;\n\n isNoRowsSelected: boolean;\n isNoPageRowsSelected: boolean;\n isAllRowsSelected: boolean;\n isAllPageRowsSelected: boolean;\n isAllSelectableRowsSelected: boolean;\n isAllSelectablePageRowsSelected: boolean;\n isAllSelectableRowsUnselected: boolean;\n isAllSelectablePageRowsUnselected: boolean;\n\n selectedFlatRows: Array<Row<D>>;\n}\n\nexport interface UseHvRowSelectionRowInstance {\n isSelected: boolean;\n isSomeSelected: boolean;\n isSelectionLocked: boolean;\n toggleRowLockedSelection: (set?: boolean) => void;\n toggleRowSelected: (set?: boolean) => void;\n getToggleRowSelectedProps: (\n props?: Partial<UseHvRowSelectionRowCheckboxProps>,\n ) => UseHvRowSelectionRowCheckboxProps;\n}\n\nexport type UseRowSelectionProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// Actions\nactions.resetSelectedRows = \"resetSelectedRows\";\nactions.toggleAllRowsSelected = \"toggleAllRowsSelected\";\nactions.toggleRowSelected = \"toggleRowSelected\";\nactions.toggleAllPageRowsSelected = \"toggleAllPageRowsSelected\";\n\nactions.resetLockedSelectionRows = \"resetLockedSelectionRows\";\nactions.toggleRowLockedSelection = \"toggleRowLockedSelection\";\n\nconst DEFAULT_LABELS = {\n selectRowCheckBoxAriaLabel: \"Select this row\",\n};\n\nconst hideHeaderVariants = [\"checkbox\", \"actions\"];\n\nconst CellWithCheckBox = ({ row, labels: labelsProp }: any) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { onChange, checked, disabled, indeterminate } =\n row.getToggleRowSelectedProps();\n\n return (\n <HvCheckBox\n onChange={onChange}\n checked={checked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-label={labels.selectRowCheckBoxAriaLabel}\n />\n );\n};\n\nconst visibleColumnsHook = (columns: any) => {\n const selectionColumn = {\n id: \"_hv_selection\",\n variant: \"checkbox\",\n\n width: 32,\n\n // this will only work when using useHvTableSticky\n // but ensures it stays left of any sticky column\n sticky: \"left\",\n\n Cell: CellWithCheckBox,\n };\n\n return [selectionColumn, ...columns];\n};\n\nconst getHeaderPropsHook = (props: any, { column }: any) => {\n const nextProps: UseHvRowSelectionTableColumnProps = {};\n\n if (hideHeaderVariants.includes(column.variant)) {\n nextProps[\"aria-hidden\"] = true;\n }\n return [props, nextProps];\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n const nextProps: UseHvRowSelectionTableRowProps = {\n selected: row.isSelected,\n };\n\n return [props, nextProps];\n};\n\nexport const defaultGetToggleRowSelectedProps = (props: any, meta: any) => {\n const { instance, row } = meta;\n const { manualRowSelectedKey = \"isSelected\" } = instance;\n let checked = false;\n\n if (row.original?.[manualRowSelectedKey]) {\n checked = true;\n } else {\n checked = row.isSelected;\n }\n\n return [\n props,\n {\n onChange: (e: any, check: any) => {\n row.toggleRowSelected(check ?? e?.target?.checked);\n },\n disabled: row.isSelectionLocked,\n checked,\n indeterminate: row.isSomeSelected,\n },\n ];\n};\n\nexport const defaultGetToggleAllRowsSelectedProps = (\n props: any,\n { instance }: any,\n) => [\n props,\n {\n onChange: (e: any) => {\n instance.toggleAllRowsSelected(e.target.checked);\n },\n checked: instance.isAllRowsSelected,\n indeterminate: Boolean(\n !instance.isAllRowsSelected &&\n Object.keys(instance.state.selectedRowIds).length,\n ),\n },\n];\n\nexport const defaultGetToggleAllPageRowsSelectedProps = (\n props: any,\n { instance }: any,\n) => [\n props,\n {\n onChange(e: any) {\n instance.toggleAllPageRowsSelected(e.target.checked);\n },\n checked: instance.isAllPageRowsSelected,\n indeterminate: Boolean(\n !instance.isAllPageRowsSelected &&\n instance.page.some(({ id }: any) => instance.state.selectedRowIds[id]),\n ),\n },\n];\n\nfunction reducer(state: any, action: any, previousState: any, instance: any) {\n if (action.type === actions.init) {\n return {\n selectedRowIds: {},\n lockedSelectionRowIds: {},\n ...state,\n };\n }\n\n if (action.type === actions.resetSelectedRows) {\n return {\n ...state,\n selectedRowIds: instance.initialState.selectedRowIds || {},\n };\n }\n\n if (action.type === actions.toggleAllRowsSelected) {\n const { value: setSelected } = action;\n const {\n isAllRowsSelected,\n rowsById,\n initialRowsById,\n nonGroupedRowsById = rowsById,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n const rowsToSelect = applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRowsById\n : nonGroupedRowsById;\n\n const selectAll =\n typeof setSelected !== \"undefined\" ? setSelected : !isAllRowsSelected;\n\n // Only remove/add the rows that are visible on the screen\n // Leave all the other rows that are selected alone.\n const selectedRowIds = { ...state.selectedRowIds };\n\n if (selectAll) {\n Object.keys(rowsToSelect).forEach((rowId) => {\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n if (!isSelectionLocked) {\n selectedRowIds[rowId] = true;\n }\n });\n } else {\n Object.keys(rowsToSelect).forEach((rowId) => {\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n if (!isSelectionLocked) {\n delete selectedRowIds[rowId];\n }\n });\n }\n\n return {\n ...state,\n selectedRowIds,\n };\n }\n\n if (action.type === actions.toggleRowSelected) {\n const { id, value: setSelected } = action;\n const isSelectionLocked = state.lockedSelectionRowIds[id];\n if (isSelectionLocked) {\n return state;\n }\n\n const { rowsById, selectSubRows = true, getSubRows } = instance;\n const isSelected = state.selectedRowIds[id];\n const shouldExist =\n typeof setSelected !== \"undefined\" ? setSelected : !isSelected;\n\n if (isSelected === shouldExist) {\n return state;\n }\n\n const newSelectedRowIds = { ...state.selectedRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n\n if (!row.isGrouped) {\n if (shouldExist) {\n newSelectedRowIds[rowId] = true;\n } else {\n delete newSelectedRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n handleRowById(id);\n\n return {\n ...state,\n selectedRowIds: newSelectedRowIds,\n };\n }\n\n if (action.type === actions.toggleAllPageRowsSelected) {\n const { value: setSelected } = action;\n const {\n page,\n rowsById,\n selectSubRows = true,\n isAllPageRowsSelected,\n getSubRows,\n } = instance;\n\n const selectAll =\n typeof setSelected !== \"undefined\" ? setSelected : !isAllPageRowsSelected;\n const newSelectedRowIds = { ...state.selectedRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n\n if (!isSelectionLocked && !row.isGrouped) {\n if (selectAll) {\n newSelectedRowIds[rowId] = true;\n } else {\n delete newSelectedRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n page.forEach((row: any) => handleRowById(row.id));\n\n return {\n ...state,\n selectedRowIds: newSelectedRowIds,\n };\n }\n\n if (action.type === actions.resetLockedSelectionRows) {\n return {\n ...state,\n lockedSelectionRowIds: instance.initialState.lockedSelectionRowIds || {},\n };\n }\n\n if (action.type === actions.toggleRowLockedSelection) {\n const { id, value: setLockedSelection } = action;\n const { rowsById, selectSubRows = true, getSubRows } = instance;\n const isLockedSelection = state.lockedSelectionRowIds[id];\n const shouldExist =\n typeof setLockedSelection !== \"undefined\"\n ? setLockedSelection\n : !isLockedSelection;\n\n if (isLockedSelection === shouldExist) {\n return state;\n }\n\n const newLockedSelectionRowIds = { ...state.lockedSelectionRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n\n if (!row.isGrouped) {\n if (shouldExist) {\n newLockedSelectionRowIds[rowId] = true;\n } else {\n delete newLockedSelectionRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n handleRowById(id);\n\n return {\n ...state,\n lockedSelectionRowIds: newLockedSelectionRowIds,\n };\n }\n\n return state;\n}\n\nfunction getRowIsSelected(row: any, selectedRowIds: any, getSubRows: any) {\n if (selectedRowIds[row.id]) {\n return true;\n }\n\n const subRows = getSubRows(row);\n\n if (subRows?.length) {\n let allChildrenSelected = true;\n let someSelected = false;\n\n subRows.forEach((subRow: any) => {\n // Bail out early if we know both of these\n if (someSelected && !allChildrenSelected) {\n return;\n }\n\n if (getRowIsSelected(subRow, selectedRowIds, getSubRows)) {\n someSelected = true;\n } else {\n allChildrenSelected = false;\n }\n });\n\n if (allChildrenSelected) {\n return true;\n }\n\n if (someSelected) {\n return null;\n }\n }\n\n return false;\n}\n\nfunction useInstance(instance: any) {\n const {\n data,\n rows,\n getHooks,\n plugins,\n rowsById,\n initialRowsById,\n nonGroupedRowsById = rowsById,\n autoResetSelectedRows = true,\n autoResetLockedSelectionRows = true,\n state: { selectedRowIds, lockedSelectionRowIds },\n selectSubRows = true,\n dispatch,\n page,\n getSubRows,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n ensurePluginOrder(\n plugins,\n [\"useFilters\", \"useGroupBy\", \"useSortBy\", \"useExpanded\", \"usePagination\"],\n \"useHvRowSelection\",\n );\n\n const rowsToSelect = applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRowsById\n : nonGroupedRowsById;\n\n const selectedFlatRows = useMemo(() => {\n const selectedRows: any[] = [];\n\n rows.forEach((row: any) => {\n const isSelected = selectSubRows\n ? getRowIsSelected(row, selectedRowIds, getSubRows)\n : !!selectedRowIds[row.id];\n row.isSelected = !!isSelected;\n row.isSomeSelected = isSelected === null;\n\n if (isSelected) {\n selectedRows.push(row);\n }\n });\n\n return selectedRows;\n }, [rows, selectSubRows, selectedRowIds, getSubRows]);\n\n const existsLockedRows = !!Object.keys(lockedSelectionRowIds).length;\n\n const isNoRowsSelected = !(\n Object.keys(rowsToSelect).length && selectedFlatRows.length\n );\n\n let isNoPageRowsSelected;\n let isAllRowsSelected;\n let isAllPageRowsSelected;\n\n let isAllSelectableRowsUnselected;\n let isAllSelectablePageRowsUnselected;\n let isAllSelectableRowsSelected;\n let isAllSelectablePageRowsSelected;\n\n if (isNoRowsSelected) {\n isAllRowsSelected = false;\n isAllPageRowsSelected = false;\n\n isAllSelectableRowsSelected =\n existsLockedRows &&\n !Object.keys(rowsToSelect).some((id) => !lockedSelectionRowIds[id]);\n isAllSelectablePageRowsSelected = isAllSelectableRowsSelected;\n\n isAllSelectableRowsUnselected = isAllSelectableRowsSelected;\n isAllSelectablePageRowsUnselected = isAllSelectableRowsSelected;\n\n isNoPageRowsSelected = true;\n } else {\n isAllRowsSelected = !Object.keys(rowsToSelect).some(\n (id) => !selectedRowIds[id],\n );\n\n if (isAllRowsSelected) {\n isAllSelectableRowsSelected = true;\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectableRowsUnselected =\n existsLockedRows &&\n Object.keys(rowsToSelect).filter((id) => !lockedSelectionRowIds[id])\n .length === 0;\n isAllSelectablePageRowsUnselected = isAllSelectableRowsUnselected;\n\n isNoPageRowsSelected = false;\n isAllPageRowsSelected = true;\n } else {\n isAllSelectableRowsSelected =\n existsLockedRows &&\n !Object.keys(rowsToSelect)\n .filter((id) => !lockedSelectionRowIds[id])\n .some((id) => !selectedRowIds[id]);\n\n isAllSelectableRowsUnselected =\n !existsLockedRows ||\n !Object.keys(rowsToSelect)\n .filter((id) => !lockedSelectionRowIds[id])\n .some((id) => selectedRowIds[id]);\n\n isAllPageRowsSelected = !(\n page?.length && page.some(({ id }: any) => !selectedRowIds[id])\n );\n\n if (isAllPageRowsSelected) {\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectablePageRowsUnselected =\n existsLockedRows &&\n page &&\n page.length &&\n page.filter(({ id }: any) => !lockedSelectionRowIds[id]).length === 0;\n\n isNoPageRowsSelected = false;\n } else {\n isAllSelectablePageRowsSelected =\n existsLockedRows &&\n !(\n page?.length &&\n page\n .filter(({ id }: any) => !lockedSelectionRowIds[id])\n .some(({ id }: any) => !selectedRowIds[id])\n );\n\n isAllSelectablePageRowsUnselected =\n !existsLockedRows ||\n !(\n page?.length &&\n page\n .filter(({ id }: any) => !lockedSelectionRowIds[id])\n .some(({ id }: any) => selectedRowIds[id])\n );\n\n isNoPageRowsSelected = !(\n page?.length && page.some(({ id }: any) => selectedRowIds[id])\n );\n }\n }\n }\n\n const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows);\n\n const getAutoResetLockedSelectionRows = useGetLatest(\n autoResetLockedSelectionRows,\n );\n\n useMountedLayoutEffect(() => {\n if (getAutoResetSelectedRows()) {\n dispatch({ type: actions.resetSelectedRows });\n }\n if (getAutoResetLockedSelectionRows()) {\n dispatch({ type: actions.resetLockedSelectionRows });\n }\n }, [dispatch, data]);\n\n const toggleAllRowsSelected = useCallback(\n (value: any) => dispatch({ type: actions.toggleAllRowsSelected, value }),\n [dispatch],\n );\n\n const toggleAllPageRowsSelected = useCallback(\n (value: any) =>\n dispatch({ type: actions.toggleAllPageRowsSelected, value }),\n [dispatch],\n );\n\n const toggleRowSelected = useCallback(\n (id: any, value: any) =>\n dispatch({ type: actions.toggleRowSelected, id, value }),\n [dispatch],\n );\n\n const getInstance = useGetLatest(instance);\n\n const getToggleAllRowsSelectedProps = makePropGetter(\n getHooks().getToggleAllRowsSelectedProps,\n {\n instance: getInstance(),\n },\n );\n\n const getToggleAllPageRowsSelectedProps = makePropGetter(\n getHooks().getToggleAllPageRowsSelectedProps,\n { instance: getInstance() },\n );\n\n const toggleRowLockedSelection = useCallback(\n (id: any, value: any) =>\n dispatch({ type: actions.toggleRowLockedSelection, id, value }),\n [dispatch],\n );\n\n Object.assign(instance, {\n selectedFlatRows,\n isNoRowsSelected,\n isNoPageRowsSelected,\n isAllRowsSelected,\n isAllPageRowsSelected,\n isAllSelectableRowsSelected,\n isAllSelectablePageRowsSelected,\n isAllSelectableRowsUnselected,\n isAllSelectablePageRowsUnselected,\n toggleRowSelected,\n toggleAllRowsSelected,\n getToggleAllRowsSelectedProps,\n getToggleAllPageRowsSelectedProps,\n toggleAllPageRowsSelected,\n toggleRowLockedSelection,\n });\n}\n\nfunction prepareRow(row: any, { instance }: any) {\n row.toggleRowSelected = (set: any) => instance.toggleRowSelected(row.id, set);\n row.getToggleRowSelectedProps = makePropGetter(\n instance.getHooks().getToggleRowSelectedProps,\n {\n instance,\n row,\n },\n );\n\n row.toggleRowLockedSelection = (set: any) =>\n instance.toggleRowLockedSelection(row.id, set);\n row.isSelectionLocked =\n instance.state?.lockedSelectionRowIds?.[row.id] || false;\n}\n\nexport const useHvRowSelection: UseRowSelectionProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n\n hooks.getRowProps.push(getRowPropsHook);\n\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n\n hooks.getToggleRowSelectedProps = [defaultGetToggleRowSelectedProps];\n hooks.getToggleAllRowsSelectedProps = [defaultGetToggleAllRowsSelectedProps];\n hooks.getToggleAllPageRowsSelectedProps = [\n defaultGetToggleAllPageRowsSelectedProps,\n ];\n\n hooks.stateReducers.push(reducer);\n hooks.useInstance.push(useInstance);\n hooks.prepareRow.push(prepareRow);\n};\n\nuseHvRowSelection.pluginName = \"useHvRowSelection\";\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useHvRowSelection.js","sources":["../../../../src/Table/hooks/useHvRowSelection.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n actions,\n ensurePluginOrder,\n Hooks,\n IdType,\n makePropGetter,\n PropGetter,\n Row,\n useGetLatest,\n useMountedLayoutEffect,\n} from \"react-table\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { useLabels } from \"../../hooks/useLabels\";\n\n// #region ##### TYPES #####\n\n// getRowProps:\nexport interface UseHvRowSelectionTableRowProps {\n selected?: boolean;\n}\n\n// getRowProps:\nexport interface UseHvRowSelectionTableColumnProps {\n \"aria-hidden\"?: boolean;\n}\n\nexport interface UseHvRowSelectionRowCheckboxProps {\n onChange?: (e: React.ChangeEvent, checked?: boolean) => void;\n checked?: boolean;\n disabled?: boolean;\n indeterminate?: boolean;\n}\n\nexport interface UseHvRowSelectionBulkCheckboxProps {\n onChange?: (e: React.ChangeEvent, checked?: boolean) => void;\n checked?: boolean;\n indeterminate?: boolean;\n}\n\nexport type UseHvRowSelectionTableOptions = Partial<{\n autoResetSelectedRows: boolean;\n autoResetLockedSelectionRows: boolean;\n selectSubRows: boolean;\n manualRowSelectedKey: string;\n applyToggleAllRowsSelectedToPrefilteredRows: boolean;\n}>;\n\nexport interface UseHvRowSelectionHooks<D extends object> {\n getToggleRowSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionRowCheckboxProps>\n >;\n getToggleAllRowsSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionBulkCheckboxProps>\n >;\n getToggleAllPageRowsSelectedProps: Array<\n PropGetter<D, UseHvRowSelectionBulkCheckboxProps>\n >;\n}\n\nexport interface UseHvRowSelectionState<D extends object> {\n selectedRowIds: Record<IdType<D>, boolean>;\n lockedSelectionRowIds: Record<IdType<D>, boolean>;\n}\n\nexport interface UseHvRowSelectionTableInstance<D extends object> {\n toggleRowSelected: (rowId: IdType<D>, set?: boolean) => void;\n toggleAllRowsSelected: (value?: boolean) => void;\n toggleAllPageRowsSelected: (value?: boolean) => void;\n getToggleAllRowsSelectedProps: (\n props?: Partial<UseHvRowSelectionBulkCheckboxProps>,\n ) => UseHvRowSelectionBulkCheckboxProps;\n getToggleAllPageRowsSelectedProps: (\n props?: Partial<UseHvRowSelectionBulkCheckboxProps>,\n ) => UseHvRowSelectionBulkCheckboxProps;\n\n isNoRowsSelected: boolean;\n isNoPageRowsSelected: boolean;\n isAllRowsSelected: boolean;\n isAllPageRowsSelected: boolean;\n isAllSelectableRowsSelected: boolean;\n isAllSelectablePageRowsSelected: boolean;\n isAllSelectableRowsUnselected: boolean;\n isAllSelectablePageRowsUnselected: boolean;\n\n selectedFlatRows: Array<Row<D>>;\n}\n\nexport interface UseHvRowSelectionRowInstance {\n isSelected: boolean;\n isSomeSelected: boolean;\n isSelectionLocked: boolean;\n toggleRowLockedSelection: (set?: boolean) => void;\n toggleRowSelected: (set?: boolean) => void;\n getToggleRowSelectedProps: (\n props?: Partial<UseHvRowSelectionRowCheckboxProps>,\n ) => UseHvRowSelectionRowCheckboxProps;\n}\n\nexport type UseRowSelectionProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// Actions\nactions.resetSelectedRows = \"resetSelectedRows\";\nactions.toggleAllRowsSelected = \"toggleAllRowsSelected\";\nactions.toggleRowSelected = \"toggleRowSelected\";\nactions.toggleAllPageRowsSelected = \"toggleAllPageRowsSelected\";\n\nactions.resetLockedSelectionRows = \"resetLockedSelectionRows\";\nactions.toggleRowLockedSelection = \"toggleRowLockedSelection\";\n\nconst DEFAULT_LABELS = {\n selectRowCheckBoxAriaLabel: \"Select this row\",\n};\n\nconst hideHeaderVariants = [\"checkbox\", \"actions\"];\n\nconst CellWithCheckBox = ({ row, labels: labelsProp }: any) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { onChange, checked, disabled, indeterminate } =\n row.getToggleRowSelectedProps();\n\n return (\n <HvCheckBox\n onChange={onChange}\n checked={checked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-label={labels.selectRowCheckBoxAriaLabel}\n />\n );\n};\n\nconst visibleColumnsHook = (columns: any) => {\n const selectionColumn = {\n id: \"_hv_selection\",\n variant: \"checkbox\",\n\n width: 32,\n\n // this will only work when using useHvTableSticky\n // but ensures it stays left of any sticky column\n sticky: \"left\",\n\n Cell: CellWithCheckBox,\n };\n\n return [selectionColumn, ...columns];\n};\n\nconst getHeaderPropsHook = (props: any, { column }: any) => {\n const nextProps: UseHvRowSelectionTableColumnProps = {};\n\n if (hideHeaderVariants.includes(column.variant)) {\n nextProps[\"aria-hidden\"] = true;\n }\n return [props, nextProps];\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n const nextProps: UseHvRowSelectionTableRowProps = {\n selected: row.isSelected,\n };\n\n return [props, nextProps];\n};\n\nconst defaultGetToggleRowSelectedProps = (props: any, meta: any) => {\n const { instance, row } = meta;\n const { manualRowSelectedKey = \"isSelected\" } = instance;\n let checked = false;\n\n if (row.original?.[manualRowSelectedKey]) {\n checked = true;\n } else {\n checked = row.isSelected;\n }\n\n return [\n props,\n {\n onChange: (e: any, check: any) => {\n row.toggleRowSelected(check ?? e?.target?.checked);\n },\n disabled: row.isSelectionLocked,\n checked,\n indeterminate: row.isSomeSelected,\n },\n ];\n};\n\nconst defaultGetToggleAllRowsSelectedProps = (\n props: any,\n { instance }: any,\n) => [\n props,\n {\n onChange: (e: any) => {\n instance.toggleAllRowsSelected(e.target.checked);\n },\n checked: instance.isAllRowsSelected,\n indeterminate: Boolean(\n !instance.isAllRowsSelected &&\n Object.keys(instance.state.selectedRowIds).length,\n ),\n },\n];\n\nconst defaultGetToggleAllPageRowsSelectedProps = (\n props: any,\n { instance }: any,\n) => [\n props,\n {\n onChange(e: any) {\n instance.toggleAllPageRowsSelected(e.target.checked);\n },\n checked: instance.isAllPageRowsSelected,\n indeterminate: Boolean(\n !instance.isAllPageRowsSelected &&\n instance.page.some(({ id }: any) => instance.state.selectedRowIds[id]),\n ),\n },\n];\n\nfunction reducer(state: any, action: any, previousState: any, instance: any) {\n if (action.type === actions.init) {\n return {\n selectedRowIds: {},\n lockedSelectionRowIds: {},\n ...state,\n };\n }\n\n if (action.type === actions.resetSelectedRows) {\n return {\n ...state,\n selectedRowIds: instance.initialState.selectedRowIds || {},\n };\n }\n\n if (action.type === actions.toggleAllRowsSelected) {\n const { value: setSelected } = action;\n const {\n isAllRowsSelected,\n rowsById,\n initialRowsById,\n nonGroupedRowsById = rowsById,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n const rowsToSelect = applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRowsById\n : nonGroupedRowsById;\n\n const selectAll =\n typeof setSelected !== \"undefined\" ? setSelected : !isAllRowsSelected;\n\n // Only remove/add the rows that are visible on the screen\n // Leave all the other rows that are selected alone.\n const selectedRowIds = { ...state.selectedRowIds };\n\n if (selectAll) {\n Object.keys(rowsToSelect).forEach((rowId) => {\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n if (!isSelectionLocked) {\n selectedRowIds[rowId] = true;\n }\n });\n } else {\n Object.keys(rowsToSelect).forEach((rowId) => {\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n if (!isSelectionLocked) {\n delete selectedRowIds[rowId];\n }\n });\n }\n\n return {\n ...state,\n selectedRowIds,\n };\n }\n\n if (action.type === actions.toggleRowSelected) {\n const { id, value: setSelected } = action;\n const isSelectionLocked = state.lockedSelectionRowIds[id];\n if (isSelectionLocked) {\n return state;\n }\n\n const { rowsById, selectSubRows = true, getSubRows } = instance;\n const isSelected = state.selectedRowIds[id];\n const shouldExist =\n typeof setSelected !== \"undefined\" ? setSelected : !isSelected;\n\n if (isSelected === shouldExist) {\n return state;\n }\n\n const newSelectedRowIds = { ...state.selectedRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n\n if (!row.isGrouped) {\n if (shouldExist) {\n newSelectedRowIds[rowId] = true;\n } else {\n delete newSelectedRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n handleRowById(id);\n\n return {\n ...state,\n selectedRowIds: newSelectedRowIds,\n };\n }\n\n if (action.type === actions.toggleAllPageRowsSelected) {\n const { value: setSelected } = action;\n const {\n page,\n rowsById,\n selectSubRows = true,\n isAllPageRowsSelected,\n getSubRows,\n } = instance;\n\n const selectAll =\n typeof setSelected !== \"undefined\" ? setSelected : !isAllPageRowsSelected;\n const newSelectedRowIds = { ...state.selectedRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n const isSelectionLocked = state.lockedSelectionRowIds[rowId];\n\n if (!isSelectionLocked && !row.isGrouped) {\n if (selectAll) {\n newSelectedRowIds[rowId] = true;\n } else {\n delete newSelectedRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n page.forEach((row: any) => handleRowById(row.id));\n\n return {\n ...state,\n selectedRowIds: newSelectedRowIds,\n };\n }\n\n if (action.type === actions.resetLockedSelectionRows) {\n return {\n ...state,\n lockedSelectionRowIds: instance.initialState.lockedSelectionRowIds || {},\n };\n }\n\n if (action.type === actions.toggleRowLockedSelection) {\n const { id, value: setLockedSelection } = action;\n const { rowsById, selectSubRows = true, getSubRows } = instance;\n const isLockedSelection = state.lockedSelectionRowIds[id];\n const shouldExist =\n typeof setLockedSelection !== \"undefined\"\n ? setLockedSelection\n : !isLockedSelection;\n\n if (isLockedSelection === shouldExist) {\n return state;\n }\n\n const newLockedSelectionRowIds = { ...state.lockedSelectionRowIds };\n\n const handleRowById = (rowId: any) => {\n const row = rowsById[rowId];\n\n if (!row.isGrouped) {\n if (shouldExist) {\n newLockedSelectionRowIds[rowId] = true;\n } else {\n delete newLockedSelectionRowIds[rowId];\n }\n }\n\n if (selectSubRows && getSubRows(row)) {\n getSubRows(row).forEach((subrow: any) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n handleRowById(id);\n\n return {\n ...state,\n lockedSelectionRowIds: newLockedSelectionRowIds,\n };\n }\n\n return state;\n}\n\nfunction getRowIsSelected(row: any, selectedRowIds: any, getSubRows: any) {\n if (selectedRowIds[row.id]) {\n return true;\n }\n\n const subRows = getSubRows(row);\n\n if (subRows?.length) {\n let allChildrenSelected = true;\n let someSelected = false;\n\n subRows.forEach((subRow: any) => {\n // Bail out early if we know both of these\n if (someSelected && !allChildrenSelected) {\n return;\n }\n\n if (getRowIsSelected(subRow, selectedRowIds, getSubRows)) {\n someSelected = true;\n } else {\n allChildrenSelected = false;\n }\n });\n\n if (allChildrenSelected) {\n return true;\n }\n\n if (someSelected) {\n return null;\n }\n }\n\n return false;\n}\n\nfunction useInstance(instance: any) {\n const {\n data,\n rows,\n getHooks,\n plugins,\n rowsById,\n initialRowsById,\n nonGroupedRowsById = rowsById,\n autoResetSelectedRows = true,\n autoResetLockedSelectionRows = true,\n state: { selectedRowIds, lockedSelectionRowIds },\n selectSubRows = true,\n dispatch,\n page,\n getSubRows,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n ensurePluginOrder(\n plugins,\n [\"useFilters\", \"useGroupBy\", \"useSortBy\", \"useExpanded\", \"usePagination\"],\n \"useHvRowSelection\",\n );\n\n const rowsToSelect = applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRowsById\n : nonGroupedRowsById;\n\n const selectedFlatRows = useMemo(() => {\n const selectedRows: any[] = [];\n\n rows.forEach((row: any) => {\n const isSelected = selectSubRows\n ? getRowIsSelected(row, selectedRowIds, getSubRows)\n : !!selectedRowIds[row.id];\n row.isSelected = !!isSelected;\n row.isSomeSelected = isSelected === null;\n\n if (isSelected) {\n selectedRows.push(row);\n }\n });\n\n return selectedRows;\n }, [rows, selectSubRows, selectedRowIds, getSubRows]);\n\n const existsLockedRows = !!Object.keys(lockedSelectionRowIds).length;\n\n const isNoRowsSelected = !(\n Object.keys(rowsToSelect).length && selectedFlatRows.length\n );\n\n let isNoPageRowsSelected;\n let isAllRowsSelected;\n let isAllPageRowsSelected;\n\n let isAllSelectableRowsUnselected;\n let isAllSelectablePageRowsUnselected;\n let isAllSelectableRowsSelected;\n let isAllSelectablePageRowsSelected;\n\n if (isNoRowsSelected) {\n isAllRowsSelected = false;\n isAllPageRowsSelected = false;\n\n isAllSelectableRowsSelected =\n existsLockedRows &&\n !Object.keys(rowsToSelect).some((id) => !lockedSelectionRowIds[id]);\n isAllSelectablePageRowsSelected = isAllSelectableRowsSelected;\n\n isAllSelectableRowsUnselected = isAllSelectableRowsSelected;\n isAllSelectablePageRowsUnselected = isAllSelectableRowsSelected;\n\n isNoPageRowsSelected = true;\n } else {\n isAllRowsSelected = !Object.keys(rowsToSelect).some(\n (id) => !selectedRowIds[id],\n );\n\n if (isAllRowsSelected) {\n isAllSelectableRowsSelected = true;\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectableRowsUnselected =\n existsLockedRows &&\n Object.keys(rowsToSelect).filter((id) => !lockedSelectionRowIds[id])\n .length === 0;\n isAllSelectablePageRowsUnselected = isAllSelectableRowsUnselected;\n\n isNoPageRowsSelected = false;\n isAllPageRowsSelected = true;\n } else {\n isAllSelectableRowsSelected =\n existsLockedRows &&\n !Object.keys(rowsToSelect)\n .filter((id) => !lockedSelectionRowIds[id])\n .some((id) => !selectedRowIds[id]);\n\n isAllSelectableRowsUnselected =\n !existsLockedRows ||\n !Object.keys(rowsToSelect)\n .filter((id) => !lockedSelectionRowIds[id])\n .some((id) => selectedRowIds[id]);\n\n isAllPageRowsSelected = !(\n page?.length && page.some(({ id }: any) => !selectedRowIds[id])\n );\n\n if (isAllPageRowsSelected) {\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectablePageRowsUnselected =\n existsLockedRows &&\n page &&\n page.length &&\n page.filter(({ id }: any) => !lockedSelectionRowIds[id]).length === 0;\n\n isNoPageRowsSelected = false;\n } else {\n isAllSelectablePageRowsSelected =\n existsLockedRows &&\n !(\n page?.length &&\n page\n .filter(({ id }: any) => !lockedSelectionRowIds[id])\n .some(({ id }: any) => !selectedRowIds[id])\n );\n\n isAllSelectablePageRowsUnselected =\n !existsLockedRows ||\n !(\n page?.length &&\n page\n .filter(({ id }: any) => !lockedSelectionRowIds[id])\n .some(({ id }: any) => selectedRowIds[id])\n );\n\n isNoPageRowsSelected = !(\n page?.length && page.some(({ id }: any) => selectedRowIds[id])\n );\n }\n }\n }\n\n const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows);\n\n const getAutoResetLockedSelectionRows = useGetLatest(\n autoResetLockedSelectionRows,\n );\n\n useMountedLayoutEffect(() => {\n if (getAutoResetSelectedRows()) {\n dispatch({ type: actions.resetSelectedRows });\n }\n if (getAutoResetLockedSelectionRows()) {\n dispatch({ type: actions.resetLockedSelectionRows });\n }\n }, [dispatch, data]);\n\n const toggleAllRowsSelected = useCallback(\n (value: any) => dispatch({ type: actions.toggleAllRowsSelected, value }),\n [dispatch],\n );\n\n const toggleAllPageRowsSelected = useCallback(\n (value: any) =>\n dispatch({ type: actions.toggleAllPageRowsSelected, value }),\n [dispatch],\n );\n\n const toggleRowSelected = useCallback(\n (id: any, value: any) =>\n dispatch({ type: actions.toggleRowSelected, id, value }),\n [dispatch],\n );\n\n const getInstance = useGetLatest(instance);\n\n const getToggleAllRowsSelectedProps = makePropGetter(\n getHooks().getToggleAllRowsSelectedProps,\n {\n instance: getInstance(),\n },\n );\n\n const getToggleAllPageRowsSelectedProps = makePropGetter(\n getHooks().getToggleAllPageRowsSelectedProps,\n { instance: getInstance() },\n );\n\n const toggleRowLockedSelection = useCallback(\n (id: any, value: any) =>\n dispatch({ type: actions.toggleRowLockedSelection, id, value }),\n [dispatch],\n );\n\n Object.assign(instance, {\n selectedFlatRows,\n isNoRowsSelected,\n isNoPageRowsSelected,\n isAllRowsSelected,\n isAllPageRowsSelected,\n isAllSelectableRowsSelected,\n isAllSelectablePageRowsSelected,\n isAllSelectableRowsUnselected,\n isAllSelectablePageRowsUnselected,\n toggleRowSelected,\n toggleAllRowsSelected,\n getToggleAllRowsSelectedProps,\n getToggleAllPageRowsSelectedProps,\n toggleAllPageRowsSelected,\n toggleRowLockedSelection,\n });\n}\n\nfunction prepareRow(row: any, { instance }: any) {\n row.toggleRowSelected = (set: any) => instance.toggleRowSelected(row.id, set);\n row.getToggleRowSelectedProps = makePropGetter(\n instance.getHooks().getToggleRowSelectedProps,\n {\n instance,\n row,\n },\n );\n\n row.toggleRowLockedSelection = (set: any) =>\n instance.toggleRowLockedSelection(row.id, set);\n row.isSelectionLocked =\n instance.state?.lockedSelectionRowIds?.[row.id] || false;\n}\n\nexport const useHvRowSelection: UseRowSelectionProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n\n hooks.getRowProps.push(getRowPropsHook);\n\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n\n hooks.getToggleRowSelectedProps = [defaultGetToggleRowSelectedProps];\n hooks.getToggleAllRowsSelectedProps = [defaultGetToggleAllRowsSelectedProps];\n hooks.getToggleAllPageRowsSelectedProps = [\n defaultGetToggleAllPageRowsSelectedProps,\n ];\n\n hooks.stateReducers.push(reducer);\n hooks.useInstance.push(useInstance);\n hooks.prepareRow.push(prepareRow);\n};\n\nuseHvRowSelection.pluginName = \"useHvRowSelection\";\n"],"names":[],"mappings":"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"}
|
|
@@ -101,7 +101,7 @@ const getCellProps = (header, isHeaderCell) => {
|
|
|
101
101
|
justifyContent: header.align,
|
|
102
102
|
width: `${header.totalWidth}px`,
|
|
103
103
|
minWidth: `${header.totalMinWidth}px`,
|
|
104
|
-
...isHeaderCell && { backgroundColor: theme.colors.
|
|
104
|
+
...isHeaderCell && { backgroundColor: theme.colors.bgPage }
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
107
|
if (header.sticky != null) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHvSticky.js","sources":["../../../../src/Table/hooks/useHvSticky.ts"],"sourcesContent":["import {\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvTableStickyTableHeadProps extends TableCommonProps {\n stickyHeader?: boolean;\n}\n\nexport type HvTableHeadPropGetter<D extends object> = PropGetter<\n D,\n UseHvTableStickyTableHeadProps\n>;\n\nexport type UseHvTableStickyTableOptions = {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n};\n\nexport interface UseHvTableStickyHooks<D extends object> {\n getTableHeadProps: Array<HvTableHeadPropGetter<D>>;\n}\n\nexport interface UseHvTableStickyTableInstance<D extends object> {\n getTableHeadProps: (\n propGetter?: HvTableHeadPropGetter<D>,\n ) => UseHvTableStickyTableHeadProps;\n\n totalRight?: number;\n hasStickyColumns?: boolean;\n}\n\n// props target: <table>\nexport interface UseHvTableStickyTableProps {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvTableStickyColumnProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvTableStickyCellProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\nexport type UseHvTableSticky = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst isSticky = (value: any) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }: any) => {\n if (isSticky(sticky)) {\n return sticky;\n }\n\n if (parent != null) {\n // check if parent is sticky\n sticky = getStickyValue(parent);\n if (isSticky(sticky)) {\n return sticky;\n }\n\n const { columns } = parent;\n // check if any column in the same group is sticky\n if (columns?.length > 0) {\n sticky = columns?.find((col: any) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column: any, props: any) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column: any) => {\n const sticky = getStickyValue(column)?.toLowerCase();\n\n updateColumnAndParent(column, { sticky });\n\n if (sticky === \"left\") {\n toTheLeft.push(column);\n } else if (sticky === \"right\") {\n toTheRight.push(column);\n } else {\n others.push(column);\n }\n });\n\n if (others.length > 0) {\n const [firstNotSticky] = others;\n updateColumnAndParent(firstNotSticky, { isFirstNotSticky: true });\n\n const lastNotSticky = others[others.length - 1];\n updateColumnAndParent(lastNotSticky, { isLastNotSticky: true });\n }\n\n const hasLeftSticky = toTheLeft.length > 0;\n if (hasLeftSticky) {\n const lastLeftSticky = toTheLeft[toTheLeft.length - 1];\n\n updateColumnAndParent(lastLeftSticky, { isLastLeftSticky: true });\n }\n\n const hasRightSticky = toTheRight.length > 0;\n if (hasRightSticky) {\n const [firstRightSticky] = toTheRight;\n\n updateColumnAndParent(firstRightSticky, { isFirstRightSticky: true });\n }\n\n instance.hasStickyColumns = hasLeftSticky || hasRightSticky;\n\n return [...toTheLeft, ...others, ...toTheRight];\n};\n\nconst calculateHeaderWidthsToTheRight = (headers: any, right = 0) => {\n if (!headers?.length) {\n return;\n }\n\n for (let i = headers.length - 1; i !== -1; i -= 1) {\n const header = headers[i];\n\n header.totalRight = right;\n\n const { headers: subHeaders } = header;\n if (subHeaders?.length > 0) {\n calculateHeaderWidthsToTheRight(subHeaders, right);\n }\n\n if (header.isVisible) {\n right += header.totalWidth;\n }\n }\n};\n\nconst useInstanceHook = (instance: any) => {\n calculateHeaderWidthsToTheRight(instance.headers);\n\n const getInstance = useGetLatest(instance);\n instance.getTableHeadProps = makePropGetter(\n instance.getHooks().getTableHeadProps,\n {\n instance: getInstance(),\n },\n );\n};\n\nconst getRowProps = () => ({\n style: {\n display: \"flex\",\n flex: \"1 0 auto\",\n },\n});\n\nconst getCellProps = (header: any, isHeaderCell: boolean) => {\n const props: UseHvTableStickyCellProps & { style: React.CSSProperties } = {\n style: {\n display: \"inline-flex\",\n flex: `${header.totalWidth} ${header.totalMinWidth} auto`,\n alignItems: isHeaderCell ? \"start\" : \"center\",\n justifyContent: header.align,\n\n width: `${header.totalWidth}px`,\n minWidth: `${header.totalMinWidth}px`,\n ...(isHeaderCell && { backgroundColor: theme.colors.atmo2 }),\n },\n };\n\n if (header.sticky != null) {\n props.stickyColumn = true;\n\n const margin =\n header.sticky === \"left\" ? header.totalLeft : header.totalRight;\n\n // @ts-ignore\n props.style[header.sticky] = `${margin}px`;\n\n if (header.isLastLeftSticky) {\n props.stickyColumnMostLeft = true;\n }\n\n if (header.isFirstRightSticky) {\n props.stickyColumnLeastRight = true;\n }\n } else {\n if (header.isFirstNotSticky) {\n props.style.borderLeft = 0;\n }\n\n if (header.isLastNotSticky) {\n props.style.borderRight = 0;\n }\n }\n\n return props;\n};\n\n/*\n * STICKY POSITION MANAGEMENT\n * <thead>: sticky if stickyHeader: true\n * <tr>: never sticky\n * <th>: sticky only if that particular column is sticky (left or right)\n */\n\n/*\n * We need to hide the last non sticky column right border, to avoid issues with double borders.\n *\n * This could be done with css, using the `:has()` selector:\n * - \".not-sticky:has(+ .first-right-sticky)\": { border-right: 0 }\n *\n * Until the `:has()` selector is supported by modern browsers,\n * that at the moment is just a proposal https://developer.mozilla.org/en-US/docs/Web/CSS/:has,\n * we need to override the last not sticky column \"borderRight\" here.\n */\n\n// props target: <table>\nconst getTablePropsHook = (props: any, { instance }: any) => {\n const nextProps: UseHvTableStickyTableProps = {\n stickyHeader: instance.stickyHeader,\n stickyColumns: instance.hasStickyColumns,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead>\nconst getTableHeadPropsHook = (props: any, { instance }: any) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nconst getHeaderGroupPropsHook = (props: any, { instance }: any) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props: any, { instance, column }: any) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props: any, { instance }: any) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props: any, { instance, cell }: any) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nexport const useHvTableSticky: UseHvTableSticky = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table>\n hooks.getTableProps.push(getTablePropsHook);\n // props target: <table><thead>\n hooks.getTableHeadProps = [getTableHeadPropsHook];\n // props target: <table><thead><tr>\n hooks.getHeaderGroupProps.push(getHeaderGroupPropsHook);\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr>\n hooks.getRowProps.push(getRowPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseHvTableSticky.pluginName = \"useHvTableSticky\";\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useHvSticky.js","sources":["../../../../src/Table/hooks/useHvSticky.ts"],"sourcesContent":["import {\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvTableStickyTableHeadProps extends TableCommonProps {\n stickyHeader?: boolean;\n}\n\nexport type HvTableHeadPropGetter<D extends object> = PropGetter<\n D,\n UseHvTableStickyTableHeadProps\n>;\n\nexport type UseHvTableStickyTableOptions = {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n};\n\nexport interface UseHvTableStickyHooks<D extends object> {\n getTableHeadProps: Array<HvTableHeadPropGetter<D>>;\n}\n\nexport interface UseHvTableStickyTableInstance<D extends object> {\n getTableHeadProps: (\n propGetter?: HvTableHeadPropGetter<D>,\n ) => UseHvTableStickyTableHeadProps;\n\n totalRight?: number;\n hasStickyColumns?: boolean;\n}\n\n// props target: <table>\nexport interface UseHvTableStickyTableProps {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvTableStickyColumnProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvTableStickyCellProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\nexport type UseHvTableSticky = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst isSticky = (value: any) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }: any) => {\n if (isSticky(sticky)) {\n return sticky;\n }\n\n if (parent != null) {\n // check if parent is sticky\n sticky = getStickyValue(parent);\n if (isSticky(sticky)) {\n return sticky;\n }\n\n const { columns } = parent;\n // check if any column in the same group is sticky\n if (columns?.length > 0) {\n sticky = columns?.find((col: any) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column: any, props: any) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column: any) => {\n const sticky = getStickyValue(column)?.toLowerCase();\n\n updateColumnAndParent(column, { sticky });\n\n if (sticky === \"left\") {\n toTheLeft.push(column);\n } else if (sticky === \"right\") {\n toTheRight.push(column);\n } else {\n others.push(column);\n }\n });\n\n if (others.length > 0) {\n const [firstNotSticky] = others;\n updateColumnAndParent(firstNotSticky, { isFirstNotSticky: true });\n\n const lastNotSticky = others[others.length - 1];\n updateColumnAndParent(lastNotSticky, { isLastNotSticky: true });\n }\n\n const hasLeftSticky = toTheLeft.length > 0;\n if (hasLeftSticky) {\n const lastLeftSticky = toTheLeft[toTheLeft.length - 1];\n\n updateColumnAndParent(lastLeftSticky, { isLastLeftSticky: true });\n }\n\n const hasRightSticky = toTheRight.length > 0;\n if (hasRightSticky) {\n const [firstRightSticky] = toTheRight;\n\n updateColumnAndParent(firstRightSticky, { isFirstRightSticky: true });\n }\n\n instance.hasStickyColumns = hasLeftSticky || hasRightSticky;\n\n return [...toTheLeft, ...others, ...toTheRight];\n};\n\nconst calculateHeaderWidthsToTheRight = (headers: any, right = 0) => {\n if (!headers?.length) {\n return;\n }\n\n for (let i = headers.length - 1; i !== -1; i -= 1) {\n const header = headers[i];\n\n header.totalRight = right;\n\n const { headers: subHeaders } = header;\n if (subHeaders?.length > 0) {\n calculateHeaderWidthsToTheRight(subHeaders, right);\n }\n\n if (header.isVisible) {\n right += header.totalWidth;\n }\n }\n};\n\nconst useInstanceHook = (instance: any) => {\n calculateHeaderWidthsToTheRight(instance.headers);\n\n const getInstance = useGetLatest(instance);\n instance.getTableHeadProps = makePropGetter(\n instance.getHooks().getTableHeadProps,\n {\n instance: getInstance(),\n },\n );\n};\n\nconst getRowProps = () => ({\n style: {\n display: \"flex\",\n flex: \"1 0 auto\",\n },\n});\n\nconst getCellProps = (header: any, isHeaderCell: boolean) => {\n const props: UseHvTableStickyCellProps & { style: React.CSSProperties } = {\n style: {\n display: \"inline-flex\",\n flex: `${header.totalWidth} ${header.totalMinWidth} auto`,\n alignItems: isHeaderCell ? \"start\" : \"center\",\n justifyContent: header.align,\n\n width: `${header.totalWidth}px`,\n minWidth: `${header.totalMinWidth}px`,\n ...(isHeaderCell && { backgroundColor: theme.colors.bgPage }),\n },\n };\n\n if (header.sticky != null) {\n props.stickyColumn = true;\n\n const margin =\n header.sticky === \"left\" ? header.totalLeft : header.totalRight;\n\n // @ts-ignore\n props.style[header.sticky] = `${margin}px`;\n\n if (header.isLastLeftSticky) {\n props.stickyColumnMostLeft = true;\n }\n\n if (header.isFirstRightSticky) {\n props.stickyColumnLeastRight = true;\n }\n } else {\n if (header.isFirstNotSticky) {\n props.style.borderLeft = 0;\n }\n\n if (header.isLastNotSticky) {\n props.style.borderRight = 0;\n }\n }\n\n return props;\n};\n\n/*\n * STICKY POSITION MANAGEMENT\n * <thead>: sticky if stickyHeader: true\n * <tr>: never sticky\n * <th>: sticky only if that particular column is sticky (left or right)\n */\n\n/*\n * We need to hide the last non sticky column right border, to avoid issues with double borders.\n *\n * This could be done with css, using the `:has()` selector:\n * - \".not-sticky:has(+ .first-right-sticky)\": { border-right: 0 }\n *\n * Until the `:has()` selector is supported by modern browsers,\n * that at the moment is just a proposal https://developer.mozilla.org/en-US/docs/Web/CSS/:has,\n * we need to override the last not sticky column \"borderRight\" here.\n */\n\n// props target: <table>\nconst getTablePropsHook = (props: any, { instance }: any) => {\n const nextProps: UseHvTableStickyTableProps = {\n stickyHeader: instance.stickyHeader,\n stickyColumns: instance.hasStickyColumns,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead>\nconst getTableHeadPropsHook = (props: any, { instance }: any) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nconst getHeaderGroupPropsHook = (props: any, { instance }: any) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props: any, { instance, column }: any) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props: any, { instance }: any) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props: any, { instance, cell }: any) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nexport const useHvTableSticky: UseHvTableSticky = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table>\n hooks.getTableProps.push(getTablePropsHook);\n // props target: <table><thead>\n hooks.getTableHeadProps = [getTableHeadPropsHook];\n // props target: <table><thead><tr>\n hooks.getHeaderGroupProps.push(getHeaderGroupPropsHook);\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr>\n hooks.getRowProps.push(getRowPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseHvTableSticky.pluginName = \"useHvTableSticky\";\n"],"names":[],"mappings":"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"}
|
|
@@ -8,15 +8,15 @@ const { useClasses } = createClasses("HvProgressColumnCell", {
|
|
|
8
8
|
linearProgress: {
|
|
9
9
|
height: 8
|
|
10
10
|
},
|
|
11
|
-
linearProgressRoot: { backgroundColor: theme.colors.
|
|
11
|
+
linearProgressRoot: { backgroundColor: theme.colors.border },
|
|
12
12
|
linearProgressColorPrimary: {
|
|
13
|
-
backgroundColor: theme.colors.
|
|
13
|
+
backgroundColor: theme.colors.border
|
|
14
14
|
},
|
|
15
15
|
linearProgressBarColorPrimary: {
|
|
16
16
|
backgroundColor: theme.colors.positive
|
|
17
17
|
},
|
|
18
18
|
linearProgressBarColorSecondary: {
|
|
19
|
-
backgroundColor: theme.colors.
|
|
19
|
+
backgroundColor: theme.colors.text
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
const normalizeProgressBar = (value, max) => {
|
|
@@ -48,6 +48,5 @@ const HvProgressColumnCell = ({
|
|
|
48
48
|
) }) });
|
|
49
49
|
};
|
|
50
50
|
export {
|
|
51
|
-
HvProgressColumnCell
|
|
52
|
-
normalizeProgressBar
|
|
51
|
+
HvProgressColumnCell
|
|
53
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressColumnCell.js","sources":["../../../../src/Table/renderers/ProgressColumnCell.tsx"],"sourcesContent":["import MuiLinearProgress from \"@mui/material/LinearProgress\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { useClasses } = createClasses(\"HvProgressColumnCell\", {\n root: { display: \"flex\", width: \"100%\" },\n linearProgressContainer: { width: \"100%\", margin: \"auto\" },\n linearProgress: {\n height: 8,\n },\n linearProgressRoot: { backgroundColor: theme.colors.
|
|
1
|
+
{"version":3,"file":"ProgressColumnCell.js","sources":["../../../../src/Table/renderers/ProgressColumnCell.tsx"],"sourcesContent":["import MuiLinearProgress from \"@mui/material/LinearProgress\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { useClasses } = createClasses(\"HvProgressColumnCell\", {\n root: { display: \"flex\", width: \"100%\" },\n linearProgressContainer: { width: \"100%\", margin: \"auto\" },\n linearProgress: {\n height: 8,\n },\n linearProgressRoot: { backgroundColor: theme.colors.border },\n linearProgressColorPrimary: {\n backgroundColor: theme.colors.border,\n },\n linearProgressBarColorPrimary: {\n backgroundColor: theme.colors.positive,\n },\n linearProgressBarColorSecondary: {\n backgroundColor: theme.colors.text,\n },\n});\n\nexport interface HvProgressColumnCellProp {\n /** Current value of the bar. */\n partial: number;\n /** Maximum value of the bar. */\n total: number;\n /** The color of the bar. */\n color?: \"primary\" | \"secondary\";\n \"aria-labelledby\"?: string;\n}\n\nconst normalizeProgressBar = (value: number, max: number) => {\n return max > 0 ? Math.floor((value * 100) / max) : 0;\n};\n\nexport const HvProgressColumnCell = ({\n partial,\n total,\n color = \"primary\",\n \"aria-labelledby\": ariaLabelledBy,\n}: HvProgressColumnCellProp): JSX.Element => {\n const { classes } = useClasses();\n\n const percentage = normalizeProgressBar(partial, total);\n\n return (\n <div className={classes.root}>\n <div className={classes.linearProgressContainer}>\n <MuiLinearProgress\n className={classes.linearProgress}\n classes={{\n root: classes.linearProgressRoot,\n colorPrimary: classes.linearProgressColorPrimary,\n barColorPrimary: classes.linearProgressBarColorPrimary,\n barColorSecondary: classes.linearProgressBarColorSecondary,\n }}\n color={color}\n variant=\"determinate\"\n value={percentage}\n aria-labelledby={ariaLabelledBy}\n />\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,EAAE,WAAA,IAAe,cAAc,wBAAwB;AAAA,EAC3D,MAAM,EAAE,SAAS,QAAQ,OAAO,OAAO;AAAA,EACvC,yBAAyB,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACzD,gBAAgB;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA,EAC3D,4BAA4B;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iCAAiC;AAAA,IAC/B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;AAYD,MAAM,uBAAuB,CAAC,OAAe,QAAgB;AAC3D,SAAO,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,mBAAmB;AACrB,MAA6C;AACrC,QAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,QAAA,aAAa,qBAAqB,SAAS,KAAK;AAGpD,SAAA,oBAAC,SAAI,WAAW,QAAQ,MACtB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,yBACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,cAAc,QAAQ;AAAA,QACtB,iBAAiB,QAAQ;AAAA,QACzB,mBAAmB,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,mBAAiB;AAAA,IAAA;AAAA,KAErB,EACF,CAAA;AAEJ;"}
|
|
@@ -11,17 +11,17 @@ const { staticClasses, useClasses } = createClasses("HvTab", {
|
|
|
11
11
|
...theme.typography.body,
|
|
12
12
|
borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,
|
|
13
13
|
"&:hover": {
|
|
14
|
-
backgroundColor: theme.colors.
|
|
14
|
+
backgroundColor: theme.colors.bgHover,
|
|
15
15
|
"&::after": {
|
|
16
16
|
height: "1px",
|
|
17
|
-
backgroundColor: theme.colors.
|
|
17
|
+
backgroundColor: theme.colors.border
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"&$selected": {
|
|
21
21
|
fontWeight: theme.typography.label.fontWeight
|
|
22
22
|
},
|
|
23
23
|
"&$disabled": {
|
|
24
|
-
color: theme.colors.
|
|
24
|
+
color: theme.colors.textDisabled,
|
|
25
25
|
cursor: "not-allowed",
|
|
26
26
|
pointerEvents: "all",
|
|
27
27
|
opacity: 1,
|
|
@@ -36,15 +36,12 @@ const { staticClasses, useClasses } = createClasses("HvTab", {
|
|
|
36
36
|
top: "calc(100% - 1px)",
|
|
37
37
|
height: "1px",
|
|
38
38
|
width: "100%",
|
|
39
|
-
backgroundColor: theme.colors.
|
|
39
|
+
backgroundColor: theme.colors.border,
|
|
40
40
|
content: "''"
|
|
41
41
|
},
|
|
42
42
|
// Override Mui styling: https://mui.com/material-ui/api/tab/#css
|
|
43
43
|
"& .MuiTab-iconWrapper": {
|
|
44
44
|
margin: 0
|
|
45
|
-
},
|
|
46
|
-
"& svg .color0": {
|
|
47
|
-
fill: "currentcolor"
|
|
48
45
|
}
|
|
49
46
|
},
|
|
50
47
|
focusVisible: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.styles.js","sources":["../../../../src/Tabs/Tab/Tab.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n root: {\n marginTop: \"3px\",\n padding: theme.spacing(0, \"sm\"),\n minWidth: 70,\n minHeight: 32,\n textTransform: \"none\",\n ...theme.typography.body,\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n \"&:hover\": {\n backgroundColor: theme.colors.
|
|
1
|
+
{"version":3,"file":"Tab.styles.js","sources":["../../../../src/Tabs/Tab/Tab.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n root: {\n marginTop: \"3px\",\n padding: theme.spacing(0, \"sm\"),\n minWidth: 70,\n minHeight: 32,\n textTransform: \"none\",\n ...theme.typography.body,\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n \"&::after\": {\n height: \"1px\",\n backgroundColor: theme.colors.border,\n },\n },\n \"&$selected\": {\n fontWeight: theme.typography.label.fontWeight,\n },\n \"&$disabled\": {\n color: theme.colors.textDisabled,\n cursor: \"not-allowed\",\n pointerEvents: \"all\",\n opacity: 1,\n \"&:hover\": {\n background: \"none\",\n },\n },\n opacity: 1,\n \"&::after\": {\n position: \"absolute\",\n left: 0,\n top: \"calc(100% - 1px)\",\n height: \"1px\",\n width: \"100%\",\n backgroundColor: theme.colors.border,\n content: \"''\",\n },\n // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n \"& .MuiTab-iconWrapper\": {\n margin: 0,\n },\n },\n focusVisible: {\n ...outlineStyles,\n },\n selected: {},\n disabled: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,GAAG,MAAM,WAAW;AAAA,IACpB,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,IACrD,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,cAAc;AAAA,MACZ,YAAY,MAAM,WAAW,MAAM;AAAA,IACrC;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,OAAO;AAAA,MACpB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAA;AACZ,CAAC;"}
|
package/dist/esm/Tag/Tag.js
CHANGED
|
@@ -95,7 +95,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
|
|
|
95
95
|
CheckboxIcon,
|
|
96
96
|
{
|
|
97
97
|
className: classes.icon,
|
|
98
|
-
color: disabled && ["
|
|
98
|
+
color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
|
|
99
99
|
size: "XS"
|
|
100
100
|
}
|
|
101
101
|
),
|
package/dist/esm/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n mergeStyles,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<\n HvButtonBaseProps,\n \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n > {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** The color variant of the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: React.EventHandler<any>;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products.\n */\nexport const HvTag = forwardRef<\n // no-indent\n HTMLElement,\n HvTagProps\n>(function HvTag(props, ref) {\n const {\n classes: classesProp,\n className,\n component,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon: deleteIconProp,\n onDelete,\n onClick,\n onKeyDown,\n onKeyUp,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n const handleDeleteClick = (event: React.MouseEvent) => {\n // Stop the event from bubbling up to the tag\n event.stopPropagation();\n onDelete?.(event);\n };\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete || selectable);\n\n const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n const deleteIcon =\n deleteIconProp && isValidElement(deleteIconProp) ? (\n cloneElement<any>(deleteIconProp, {\n className: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n onClick: handleDeleteClick,\n })\n ) : (\n <CloseXS\n size=\"XS\"\n onClick={handleDeleteClick}\n className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n {...deleteButtonProps}\n />\n );\n\n return (\n <HvButtonBase\n ref={ref as any}\n component={isClickable ? HvButtonBase : \"div\"}\n disabled={disabled}\n data-color={color}\n style={mergeStyles(style, {\n \"--bgColor\": backgroundColor,\n })}\n className={cx(classes.root, classes.chipRoot, className, {\n [classes.disabled]: disabled,\n [classes.selected]: isSelected,\n [classes.clickable]: isClickable && !disabled,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n })}\n onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n // Ignore events from children.\n if (event.currentTarget === event.target && isDeleteKey(event)) {\n onDelete?.(event);\n }\n\n onKeyUp?.(event);\n }}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n selected={isClickable && isSelected}\n {...others}\n >\n {selectable && type === \"semantic\" && (\n <CheckboxIcon\n className={classes.icon}\n color={(disabled && [\"
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n mergeStyles,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<\n HvButtonBaseProps,\n \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n > {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** The color variant of the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: React.EventHandler<any>;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products.\n */\nexport const HvTag = forwardRef<\n // no-indent\n HTMLElement,\n HvTagProps\n>(function HvTag(props, ref) {\n const {\n classes: classesProp,\n className,\n component,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon: deleteIconProp,\n onDelete,\n onClick,\n onKeyDown,\n onKeyUp,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n const handleDeleteClick = (event: React.MouseEvent) => {\n // Stop the event from bubbling up to the tag\n event.stopPropagation();\n onDelete?.(event);\n };\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete || selectable);\n\n const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n const deleteIcon =\n deleteIconProp && isValidElement(deleteIconProp) ? (\n cloneElement<any>(deleteIconProp, {\n className: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n onClick: handleDeleteClick,\n })\n ) : (\n <CloseXS\n size=\"XS\"\n onClick={handleDeleteClick}\n className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n {...deleteButtonProps}\n />\n );\n\n return (\n <HvButtonBase\n ref={ref as any}\n component={isClickable ? HvButtonBase : \"div\"}\n disabled={disabled}\n data-color={color}\n style={mergeStyles(style, {\n \"--bgColor\": backgroundColor,\n })}\n className={cx(classes.root, classes.chipRoot, className, {\n [classes.disabled]: disabled,\n [classes.selected]: isSelected,\n [classes.clickable]: isClickable && !disabled,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n })}\n onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n // Ignore events from children.\n if (event.currentTarget === event.target && isDeleteKey(event)) {\n onDelete?.(event);\n }\n\n onKeyUp?.(event);\n }}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n selected={isClickable && isSelected}\n {...others}\n >\n {selectable && type === \"semantic\" && (\n <CheckboxIcon\n className={classes.icon}\n color={(disabled && [\"bgPageSecondary\", \"textDisabled\"]) || undefined}\n size=\"XS\"\n />\n )}\n <HvTypography\n noWrap\n variant=\"caption2\"\n component=\"span\"\n className={classes.label}\n >\n {label}\n </HvTypography>\n {onDelete && !disabled && deleteIcon}\n </HvButtonBase>\n );\n});\n"],"names":["HvTag"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
|
|
|
6
6
|
alignItems: "center",
|
|
7
7
|
justifyContent: "center",
|
|
8
8
|
cursor: "default",
|
|
9
|
-
color: theme.colors.
|
|
9
|
+
color: theme.colors.textDark,
|
|
10
10
|
backgroundColor: "var(--bgColor)",
|
|
11
11
|
height: 16,
|
|
12
12
|
borderRadius: 0,
|
|
@@ -19,16 +19,16 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
|
|
|
19
19
|
categorical: {
|
|
20
20
|
borderRadius: 8,
|
|
21
21
|
"& $label": {
|
|
22
|
-
color: theme.colors.
|
|
22
|
+
color: theme.colors.text
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
disabled: {
|
|
26
|
-
backgroundColor: theme.colors.
|
|
26
|
+
backgroundColor: theme.colors.bgDisabled,
|
|
27
27
|
":hover, :focus": {
|
|
28
|
-
backgroundColor: theme.colors.
|
|
28
|
+
backgroundColor: theme.colors.bgDisabled
|
|
29
29
|
},
|
|
30
30
|
"& $label": {
|
|
31
|
-
color: theme.colors.
|
|
31
|
+
color: theme.colors.textDisabled
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
label: {
|
|
@@ -39,7 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
|
|
|
39
39
|
width: 16,
|
|
40
40
|
height: 16,
|
|
41
41
|
"&:hover": {
|
|
42
|
-
backgroundColor: theme.colors.
|
|
42
|
+
backgroundColor: theme.colors.bgHover
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
selected: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.textDark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.text,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.bgDisabled,\n \":hover, :focus\": {\n backgroundColor: theme.colors.bgDisabled,\n },\n \"& $label\": {\n color: theme.colors.textDisabled,\n },\n },\n label: {\n padding: theme.spacing(0, \"xxs\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead */\n chipRoot: {},\n /** @deprecated unused */\n // TODO: redundant - use deleteIcon. remove in v6\n /** @deprecated */\n button: {},\n /** @deprecated */\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /** @deprecated */\n focusVisible: {},\n /** @deprecated */\n disabledDeleteIcon: {},\n /** @deprecated */\n categoricalFocus: {},\n /** @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
|
|
@@ -13,21 +13,21 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
|
|
|
13
13
|
},
|
|
14
14
|
disabled: {
|
|
15
15
|
"& $tagsList": {
|
|
16
|
-
backgroundColor: theme.colors.
|
|
16
|
+
backgroundColor: theme.colors.bgPage,
|
|
17
17
|
"&,:hover": {
|
|
18
|
-
borderColor: theme.colors.
|
|
18
|
+
borderColor: theme.colors.border
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
readOnly: {
|
|
23
23
|
"& $tagsList": {
|
|
24
|
-
backgroundColor: theme.colors.
|
|
24
|
+
backgroundColor: theme.colors.bgPage,
|
|
25
25
|
"&,:hover": {
|
|
26
|
-
borderColor: theme.colors.
|
|
26
|
+
borderColor: theme.colors.textDisabled
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
|
-
resizable: { width: "auto", resize: "both", overflow: "auto" },
|
|
30
|
+
resizable: { width: "auto", resize: "both", clear: "both", overflow: "auto" },
|
|
31
31
|
invalid: {},
|
|
32
32
|
labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
|
|
33
33
|
label: {},
|
|
@@ -51,9 +51,9 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
|
|
|
51
51
|
position: "relative",
|
|
52
52
|
flexDirection: "row",
|
|
53
53
|
flexWrap: "wrap",
|
|
54
|
-
backgroundColor: theme.colors.
|
|
54
|
+
backgroundColor: theme.colors.bgContainer,
|
|
55
55
|
borderWidth: 1,
|
|
56
|
-
borderColor: theme.colors.
|
|
56
|
+
borderColor: theme.colors.textSubtle,
|
|
57
57
|
borderRadius: theme.radii.base,
|
|
58
58
|
"&:hover": {
|
|
59
59
|
borderColor: theme.colors.primary
|
|
@@ -64,11 +64,8 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
|
|
|
64
64
|
"&$singleLine": {
|
|
65
65
|
flexWrap: "nowrap"
|
|
66
66
|
},
|
|
67
|
-
"&$error": {
|
|
68
|
-
borderColor: theme.
|
|
69
|
-
},
|
|
70
|
-
"&$invalid": {
|
|
71
|
-
borderColor: theme.colors.negative_120
|
|
67
|
+
"&$error, $invalid": {
|
|
68
|
+
borderColor: theme.form.errorColor
|
|
72
69
|
}
|
|
73
70
|
},
|
|
74
71
|
/** @deprecated use `classes.input` instead */
|